10 years ago when working for Robonetics, I played a bit with the 3D api OpenGL. Nothing spectacular, but enough to know the basic theory, get a camera running and displaying 3D objects. I stopped writing OpenGL code from the moment that I shifted my focus to web-development. In those days the closest thing we had for 3D on the web was VRML.

Some time ago during a conference, I saw a presentation of the French studio hellohikimori. One thing that tickled my fancy was their WebGL demo’s. I was amazed about how mature the technology has become.

While the rest of the conference was also very interesting, I couldn’t wait to get home and try it myself.

The earth, moon and sun

Hello world is a classic, so it looked like a cool idea to implement a literal “hello world” in WebGL. It also contains a bit of everything : camera setup, geometry, lighting and texturing.


My earth model consist out of three spheres. One for the atmosphere, one for the clouds and one for the landmass. I decoupled the clouds so that it can rotate independently from the ground.

The ground material consist of a texture map, a bump map that adds some relief and a specularity map to get the water more reflective than the soil.


The moon is a bit simpler. A smaller sphere with a texture and a bump map.


For the lighting (to emulate the sun) I have chosen a directional light. It behaves as it is infinitely far away and its rays are send in parallel, a lot like how the sun behaves.

Casting rays

I also added support for object picking so you can hover over the moon/earth to get some more information. It works by casting a ray#Ray) into the scene and check if it collides with an object.


Source code

While the demo is not as cool as what was shown on the conference, I’m happy with the result. 3D development is hard :D Especially in a constrained environment like a webbrowser.

You can find the demo here. The source code can be found on my github account.