one moment please
Skip to content

Stellar WebGL Development

Space is awesome. It also happens to be an excellent place to demonstrate a technology we’re really excited about called WebGL. WebGL allows web browsers to render 3D graphics using HTML5 and JavaScript. WebGL works on essentially all modern browsers without the addition of any special plugins. That means the graphics rendered with WebGL can run on any device with sufficient graphics juice running any current operating system, desktop or mobile. Even though it runs in web browsers, it can run on devices without an internet connection, such as for a tradeshow display. Because Dijt has strong web development and 3D rendering and animation talent in-house, it was natural for us to be curious to see what this technology could do.

Process images during WebGL development
The relative size of the planets is shown in this image representing the mesh and materials.

The Making

All 3D graphics are composed of essentially the same parts. These are the three-dimensional geometry (i.e. mesh) and the two-dimensional materials that cover that geometry and provide information about color, texture and reflectance. It wasn’t too difficult to create the geometry of the planets, but we didn’t have the budget to get our own planetary portraits. For this we had to rely upon commercially-licensed and public-domain images provided by NASA, JPL, and others, with a significant amount of additional editing. Our additional aide on this journey was Three.js, a JavaScript library for working with WebGL, with abundant documentation and examples. Its source code is generously released under the MIT license. The Three.js website is an awesome place to see what people are doing with WebGL.

The Results

After several dozens of hours of work, what finally came together was a beta-release worthy demonstration of our Solar System. That means it doesn’t do everything we want it to yet, but we think it’s far enough along to share. Each of the planets was crafted with the best images available to us. Many include subtle features, like clouds in motion. The Earth was even graced with a moon. The planets are in accurate, but accelerated orbits about the sun. They are sized accurately in relationship to each other and are placed ~1/1000th of their actual distance from each other, relative to their size. Our first efforts to place them an accurate distance from each other was foiled because the browser could not manage the number of decimal places required to calculate their motion! Check it out now below or visit https://space.dijt.co.

Try It Now

What Next?

WebGL is not without its limitations. Because it is delivered in most instance via the internet, the bandwidth available to visitors is always a concern. We had to make serious efforts and settle on some compromises to keep the project under 10MB. There are additional performance considerations that have to be taken into account when designing a WebGL experience for a general audience’s diverse hardware. Those limitations noted, WebGL offers great potential today, even for smaller clients. On a recent project Dijt used WebGL to render the floor plan of an apartment in a way that was easier to understand than a traditional drawing. WebGL is an incredible medium for representing products and environments online, interactively, in a way not possible with other mediums. With a team versed in both 3D and web development, the stars are the limit.

Last modified: May 4, 2017

Tagged in