three.js outer glow for sphere object?

Question

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!

Solution 1

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 :)

Solution 2

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.

Comments

[Stemkoski]

Could you post a link to the "overrideMaterial" discussion thread, please?

[Kyeno]

Since I'm a new user it did not allow me to post more than 2 links. :) github.com/mrdoob/three.js/issues/265

[WestLangley]

See this related question: stackoverflow.com/questions/10213361/…

[Kyeno]

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. :) data-arts.appspot.com/globe

[Kyeno]

OpenSource, with download link here: code.google.com/p/webgl-globe

[Stemkoski]

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...

[Kyeno]

Thanks for reply!I have tried that - white color still affects the original image. I will post my code in a sec

[Kyeno]

Okay, the first example where I'm rendering only the main renderer, single-pass: matt.prayam.com/private/planet3d Second example where I am using your approach, rendering multi-pass with composer: matt.prayam.com/private/planet3d/white.html The only difference is within the onRenderLoop callback

[Kyeno]

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]

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. :)

[Stemkoski]

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 <code>THREEx.WindowResize(renderer, camera)</code> 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

[Lawliet]

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?

[Dmitry Isaev]

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

[Starfs]

Totally agree w Dmitry. This is very cool but incompatible with all the new threejs code.

[dyh333]

@LeeStemkoski hi, the example seems not work with new three.js version. would you please kindly update it? thanks a lot

[withintheruins14]

I agree! Would love a working examples with current version of three @LeeStemkoski