Search code examples
javascripthtmlopengl-es3dhtml5-canvas

Very cool 3D graphics on website, but what is the technology behind this?


I discovered a very cool 3D graphics on a danish website recently. You can rotate and zoom a 3D object of the earth. I'm interested in 3D graphics on websites and I'm curious how this has been done. I'm sure it's not Flash, because I right cliked on it, and there was no info about Flash as it use to be when you right cklick on Flash graphics, so what could it be?

Link: Link to danish website BIG And then select Locations


Solution

  • The rotating globe you are referring to is actually WebGL rendered on an HTML Canvas element, and controlled via Javascript.

    WebGL is powerful, but not that easy to pickup for someone without a pretty solid understanding of OpenGL-ES programming. I would suggest using a library, the best one out there is (in my opinion) http://threejs.org, which simplifies the task by managing low-level 3D operations for you, allowing you to concentrate on high-level concepts (polygons, shading, etc). There's plenty of tutorials and examples of the typical "hello world" (which, luckily, is the representation of Earth with some interactivity on it).

    Going deeper in the example you gave, I suggest you looking at this tutorial which fits well, and explains how to accomplish the same thing: http://www.smartjava.org/content/render-open-data-3d-world-globe-threejs.

    Sidenote: Three.js allows rendering on WebGL, Canvas, SVG or CSS3 surfaces. WebGL is not supported on IE, but Canvas is (IE9+). This means the same (or pretty much the same) results (but with quite different performance) can be achieved on all the most common browsers.