How to Render an 'Atmosphere' Over a Rendering of the Earth in Three.Js

How can I render an 'atmosphere' over a rendering of the Earth in Three.js?

What exactly are you looking for in your atmosphere? It could be as simple as rendering another slightly larger transparent sphere over the top of your globe, or it could be very very complex, actually refracting light that enters it. (Almost like subsurface scattering used in skin rendering).

I've never tried such an effect myself, but some quick Googling shows some promising results. For example, I think this effect looks fairly nice, and the author even followed it up with a more detailed variant later on. If you're interested in a more technical breakdown this technique details a lot of the theoretical background. I'm sure there's more, you've just got to poke around a bit. (Truth be told I wasn't aware this was such a popular rendering topic!)

If you're having trouble with some aspect of those techniques specifically as applies to Three.js don't hesitate to ask!

[UPDATE]

Ah, sorry. Yeah, that's a bit much to throw you into without prior shader knowledge.

The code on the second link is actually a DirectX FX file, the core code being HLSL, so it's not something that would simply plug into WebGL but the two shader formats are similar enough that it's typically not an issue to translate between them. If you actually know shaders, that is. I would recommend reading up on how shaders work before trying to dive into a complicated effect like this.

I'd start with something simple like this tutorial, which simply talks about how to get a basic shader running with Three.js. Once you know how to get a shader working with Three.js and GLSL tutorials (like this one) will give you the basics of how a shader works and what you can do with it.

I know that seems like a lot of work up front, but if you want to do advanced visual effects in WebGL (and this certainly fits the bill of advanced effects) you absolutely must understand shaders!

Then again, if you're looking for a quick fix there's always that transparent sphere option I was talking about. :)

Atmosphere Scattering for Earth from space and on the ground

Chapter 16 of GPU Gem 2 has nice explanation and illustration for achieving your goal in real time.

Basically you need to perform ray casting through the atmosphere layer and evaluate the light scattering.

Opengl, three.js - how to draw circular sun

That's perspective distortion. All you need is to reduce field of view of your camera.

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

Rendering an atmosphere around a planet with shading

I am no expert in the matter but have played with Atmospheric scattering and various physical and optical simulations. I strongly recommend to look at this:

• my VEEERRRYYY Simplified version of atmospheric scattering in GLSL

It odes not do the full volume intergration but just linear path integration along the ray and does only the Rayleight scatering with isotropic coefficients. As you can see its still good enough.

In real scattering the viewing angle is impacting the real scattering equation as the scattering coefficients are different in different angles (against main light source and viewer) So answer to your first question is Yes it does.

Not sure what you are refer to in your second question. The scattering itself is dependent on angle between light source, particle and camera. That lies on arbitrary plane. However if the Earth surface is accounted to the equation too then its dependent on the horizontal and vertical angles (against terrain) so azimuth,elevation as usually more light is reflected when camera is facing sun (azimuth) and the reflected rays are closer to your elevation. So my guess is that's what the horizontal angle is about accounting for reflected light from the surface.

To answer your 3th question is called back ray tracing. You can cast rays both ways (from camera or from sun) however if you start from light source you do not know which way to go to hit a pixel on camera screen so you need to cast a lot of rays to increase the probability of hit enough to fill the screen which is too slow and inaccurate (produce holes). If you start from screen pixel then you cast just single or per wavelength ray instead which is much much faster. The resulting color is the same.

[Edit1] vertical angle

OK I read the linked topic a bit and this is How I understand it:

So its just angle between surface normal and the casted ray. Its scaled so vert.angle=0 means that ray and normal are the same and vert.angle=1 means the are opposite directions.

How can i create an elevation like this in three.js

You could check out displacement maps or height maps. They manipulate the actual geometry of the mesh, creating real bumps where normal/bump maps only "fake" them.

To create something like in that picture I believe you will need a sphere with a large amount of vertices, since the elevation in image look very detailed.

I hope this was helpful, good luck!

three.js multiple renderings

So I figured out my own problem, apparently it was because I was using global variables and not local variables within the function. All I had to do was change

$this = this;

to

var $this = this;

and that fixed all of my problems... sometimes I feel like such an idiot.

---

Related Topics