Visual experiment

A moon in webGL

By on February 21, 2011

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

Check “a moon in webgl” here

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


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 !

Softwares used

  • Pingback: Tweets that mention A moon in webGL | White flash white hit --

  • Ricardo

    Thank a lot for sharing, I will be playing with this tonight

  • you’re welcome 😉

  • Mike Heavers

    Hi – I’m confused. How did you utilize the textures rendered by crazy bump in three.js – did you write custom code for the vertex and fragment shaders, or did some sort of software generate this for you? Thanks for the example by the way.

  • rDad

    Yes, crazy bumps images are used by the bump shader (fragment & vertex) to render the light effect.
    Il you take a look at the source code, shaders begin at line 51.
    The 5 images are loaded in the shaders line 245.

  • Peter

    Nice moon! What is Threeextras.js? I can’t find information about that source anywhere.

  • rdad

    Threeextras.js is the 3d engine, with extra features:

  • Peter

    Where does it come from? Is there any documentation for it? It doesn’t seem to work the same way as Three.js; for instance, the “new Sphere()” geometry constructor is unusual compared to the regular “new THREE.sphereGeometry() constructor”, and computeTangents() doesn’t seem to work with any other types of geo.