27

I'm building some sort of planetary system in three.js and I spent couple of hours looking for a decent solution to get an outer glow on one planet - a sphere object with a texture.

I came across this example http://stemkoski.github.io/Three.js/Selective-Glow.html which kind of does the trick, but the thing is - this form of glow also affects the main 3D object resulting in color change (as seen there).

Another nice glow example can be found here http://bkcore.com/blog/3d/webgl-three-js-animated-selective-glow.html but again it glows the entire region, not only "outer" thing.

I've been reading some discussion thread about "overrideMaterial" property on GitHub but this seems experimental, unused and undocumented... not even sure if this could solve my problem.

Please share your ideas, thanks!

kyeno
  • 527
  • 2
  • 7
  • 15
  • Could you post a link to the "overrideMaterial" discussion thread, please? – Lee Stemkoski Apr 29 '13 at 01:05
  • Since I'm a new user it did not allow me to post more than 2 links. :) https://github.com/mrdoob/three.js/issues/265 – kyeno Apr 29 '13 at 01:29
  • 1
    See this related question: http://stackoverflow.com/questions/10213361/how-can-i-render-an-atmosphere-over-a-rendering-of-the-earth-in-three-js – WestLangley Apr 29 '13 at 02:19
  • Thanks a lot @WestLangley! I am not that much of GLSL programmer, but this seems to be out-of-the-box solution to be analysed precisely tomorrow. :) http://data-arts.appspot.com/globe/ – kyeno Apr 29 '13 at 03:56
  • 1
    OpenSource, with download link here: https://code.google.com/p/webgl-globe/ – kyeno Apr 29 '13 at 03:58
  • Interesting, it seems as though there is a shader in that code to do exactly what you want. Now the question is how to extract it... – Lee Stemkoski Apr 30 '13 at 01:57

2 Answers2

46

I've worked a bit on separating out the part of the WebGL Globe code (linked to above) that produces the atmospheric effect. A preliminary working version is here:

http://stemkoski.github.io/Three.js/Atmosphere.html

To the best of my understanding, there are a few interesting things going on in the original code to create the atmospheric effect. First, the glowing texture is placed on another sphere -- let's call it the Atmo Sphere :) -- that surrounds the sphere with the image of earth on it. The Atmosphere material is flipped so that the front side does not render, only the back side, thus it does not obscure the earth sphere even though it surrounds it. Second, the gradient lighting effect is achieved by using a fragment shader rather than a texture. However, the atmosphere will change its appearance if you zoom in and out; this was not evident in the WebGL Globe experiment because zooming was disabled.

[updated April 30th]

Next, similar to the source code from

http://stemkoski.github.io/Three.js/Selective-Glow.html

the sphere with the gradient lighting texture (and another black-textured sphere) are placed in a second scene, and then the results from that scene are composed with the original scene using an additive blender. And just so you can experiment with the parameters used to create the glow effect, I have included a couple of sliders so that you can change the values and see the different glow effects that result.

I hope this helps you get started. Good luck!

[updated June 11]

I have a new example which achieves the same effect in a much simpler way, rather than using post-processing and additively blending two scenes, I just changed some of the parameters in the customized material. (It seems obvious in retrospect.) For an updated example, check out:

http://stemkoski.github.io/Three.js/Shader-Halo.html

Still haven't figured out the pan/zoom issues though.

[Updated July 24]

I figured out the pan/zoom issues. It requires using a shader; for details about the complexities, see the related question Three.js - shader code for halo effect, normals need transformation and for the final working example, see:

http://stemkoski.github.io/Three.js/Shader-Glow.html.

I'm pretty happy with the final result, so I will not be updating this answer any more :)

Community
  • 1
  • 1
Lee Stemkoski
  • 8,138
  • 2
  • 39
  • 58
  • 1
    Nice one Lee! Looks very interesting! Can't believe you spent so much time resolving this issue, thanks a lot! Going to look at it now. I owe you :) – kyeno May 01 '13 at 13:57
  • 1
    One thing if I may suggest you (still something I need to implement myself as well). This is not anyhow vital for the example or anything, but your browser resize events don't cope with the Atmo Sphere there. :) – kyeno May 01 '13 at 14:00
  • 1
    Proszę uprzejmy, kyeno -- this was a fun question, a project that I've been meaning to work on for a while. You're right about the browser resize issue, I use THREEx.WindowResize(renderer, camera) to handle that and need to set up something similar for the secondary scene with the glow effect. And if you feel that you "owe me", you can pay it forward by helping out other people asking questions with the three.js tag... and also, nothing says "thank you" quite so much as upvotes :D – Lee Stemkoski May 01 '13 at 14:46
  • Great work Lee! Do you think this will work for complex meshes as well? For example, if I have a mesh with 4 sub-meshes that have THREE.BufferGeometry? – Lawliet Jan 15 '15 at 15:07
  • I hope you'll update your answer once again :) it doesn't work with a new three.js (r76). I just started learning three.js, cannot find what's wrong – Dmitry Isaev May 15 '16 at 15:15
  • 1
    Totally agree w Dmitry. This is very cool but incompatible with all the new threejs code. – Starfs Aug 25 '16 at 20:06
  • 1
    @LeeStemkoski hi, the example seems not work with new three.js version. would you please kindly update it? thanks a lot – dyh333 Jan 03 '19 at 12:02
  • I agree! Would love a working examples with current version of three @LeeStemkoski – withintheruins14 Mar 31 '20 at 17:12
1

In the example you are referring to, I used a blue glow with additive blending -- if you used a white color instead maybe that would produce the effect you want.

Lee Stemkoski
  • 8,138
  • 2
  • 39
  • 58
  • Thanks for reply!I have tried that - white color still affects the original image. I will post my code in a sec – kyeno Apr 29 '13 at 01:06
  • 1
    Okay, the first example where I'm rendering only the main renderer, single-pass: http://matt.prayam.com/private/planet3d/ Second example where I am using your approach, rendering multi-pass with composer: http://matt.prayam.com/private/planet3d/white.html The only difference is within the `onRenderLoop` callback – kyeno Apr 29 '13 at 01:27