This small demo shows the rendering of the earth using HTML5 and WebGL.
The demo uses shaders for per pixel lighting, procedural clouds, atmosphere and a day and night cycle. The high resolution textures are taken from NASAs visible earth gallery. You can move using the WASD keys and change the view by clicking and dragging.
You can try it by clicking on the following link (WebGL-compatible browser required, e.g. Firefox, Chrome, Opera):
The rendering of transparent objects is not an easy task when using z-buffering. The reason is that the way z-buffering works requires to draw all transparent objects from back to front. However, this is not always possible since, for example, two triangles (or objects) could intersect each other, making it impossible to tell which one is in front of the other. To solve this problem, you need an algorithm which is order independent, hence the name order independent transparency. There are already a few algorithms for this: Using an A-Buffer, Depth Peeling , Screen-Door-Transparency and Stochastic Transparency, which I implemented as a test for another demo.