There were many early attempts at true, interactive 3D on the web, including VRML and Flash, but it took until 2013 for a true standard to emerge: WebGL, based on OpenGL ES 2.0. This means that it’s now possible to integrate native 3D directly into your web pages, without any need for plugins or browser extensions.

What is WebGL?

WebGL writes 3D to pages using JavaScript, via the <canvas> element. Unlike HTML, WebGL does not create elements on a page: it’s work is done at the pixel level. As such, WebGL is a relatively low-level API: it offers precise control of a 3D space via shaders, without any abstraction.

Unlike most 3D applications, WebGL does not natively provide “scenes”, “objects”, or “models”. This makes it extremely powerful, but also potentially very challenging for developers to grasp, or quickly produce results in.

For this reason, while it’s entirely possible to write native WebGL code directly in your JavaScript, most developers use a framework. Right now, the most popular WebGL framework is threeJS, although there are many other possibilities.

The Need for a 3D Framework

If you’ve read other articles on this site, you’ll be aware that I have a fairly strong aversion to frameworks: as a rule, I believe that developers gain more valuable long-term knowledge by learning the fundamentals, rather than taking “shortcuts”.

That being said, 3D is already a fairly complicated subject: trying to build up knowledge of WebGL on top of the rest of web development is a big task for anyone, and taking on WebGL fundamentals would mean a steep learning curve for most before they were able to create anything worthwhile.

For that reason, the majority of the early WebGL material on this site will use a framework: the aforementioned threeJS. No previous knowledge of 3D will be required, but you will need an intermediate understanding of HTML, CSS and JavaScript.

The material provided will always use the latest version of threeJS and WebGL; when WebGL 2.0 becomes mainstream, the articles will be updated to reflect any changes.

What Makes This Approach Different

The majority of threeJS learning material on the web is, in my opinion, fairly poor: demos often fail to work because their code hasn’t been updated (improvements and changes to the threeJS framework come very frequently), and entire steps are often skipped, or left unexplained. This series won’t do that: each point will be stepped through, allowing the lessons to build on each other. We’ll start with practical, fun examples that have broad interest: I’ve chosen the planets of the solar system, modelled in 3D. Our first stop is Mars…

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.