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