Question

120

three.js outer glow for sphere object?

rated 0 times [ 127] [ 7] / answers: 1 / hits: 34769 / 11 Years ago, mon, april 29, 2013, 12:00:00

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!

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

alyssiat

Add To Favorites

Follow

Total Points: 608

Total Questions: 102

Total Answers: 101

Location: Japan

Member since Sat, Jun 6, 2020

4 Years ago

answered 11 Years ago shylaelisan · Accepted Answer

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