Visual experiment

A moon in webGL

By rDad on February 21, 2011

First attempt on Three.js engine : WebGL, Normap & Displacement Map with a GLSL shader cherry

Three.js and WebGL

This days I had some time to play with three.js, a javascript 3D Engine conducted by Mrdoob. It´s really pleasant to be able to write GLSL based shader effects without caring about performance like in as3. So I start to make my precedent post exemple but with GLSL shader.

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+).

Lighted moon

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 moon maps : diffuse, displace, occlusion, normal, spécular

The Hallo

The hallo effect is just a sphere behind the moon with a phong material, rising when the light come closer.

Dark side of the moon

Conclusion

Thanks to the new capabilities of most browsers (Chrome 9, Firefox 4 and Safari 5) and some good open source project like three.js, we can play now with your GPU at a terrible 60 fps. And we do it with javascript !