A moon in webGL
First attempt on Three.js engine : WebGL, Normap & Displacement Map with a GLSL shader cherry
Three.js and WebGL
In case you want immidiately start playing with WebGL, three.js engine is very simple and well organized with a very low level of abstraction. A simple class named THREE allow you to build scene, camera, lights, meshs and shaders like a handy factory class. It will be great to have a scene graph and more format to be imported, but hey … it’s only version r32.
For this first attempt I use the normal shader (a little bit edited) and some good maps (diffuse, normal, displacement, specular and occlusion) always made by Crazybumps.
You can give it a try here but you need a modern browser (chrome 9+, firefox 4+, safari 5+).
The light effect is done exclusively by the normal shader. The vertex shader compute the normals in tangent space, and the fragment one use the maps to render each pixels. I take my flash settings to have a well done effect. We use a displacement map but there is not so much impact on the final render.
The hallo effect is just a sphere behind the moon with a phong material, rising when the light come closer.
- CrazyBump (essential software for the images)
- Pixlr (image operation)