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.

webgl_hello_world_earth.jpg

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.

webgl_hello_world_moon.jpg

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

webgl_hello_world_sun.jpg

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.

webgl_hello_world_rays.jpg

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.