three.js outer glow for sphere object? three.js outer glow for sphere object? javascript javascript

three.js outer glow for sphere object?


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


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.