threejs_header.jpg

Review: Learning Three.js: The JavaScript 3D Library for WebGL

Originally developed by SGI, OpenGL is the real-time 3D graphics standard that powers applications such as Maya. If memory serves, it’s also the reason why, in 1999, many computer graphics students at Bournemouth University, including myself, begged, stole or borrowed to get an NT box loaded with a 3DLabs graphics card.

Just over a decade later, a very viable implementation of OpenGL for the web emerged in the form of a JavaScript API dubbed WebGL. My interest was initially piqued by the Chrome Experiments project, which demonstrated the technology’s potential for combining HTML5-powered interactivity with surprisingly rich, realtime 3D rendering.

At the time of writing this, I feel this potential is largely unrealised. As everything moves to the web, mobile processing power climbs, scripting replaces compiled languages, rendering shifts to realtime and content is increasingly delivered interactively, WebGL is set to become the cross-platform standard for 3D graphics.

With much of my career vested in Maya’s walled garden, engaging with WebGL presented an interesting challenge. The web itself is a historical mish-mash of technologies and frameworks––HTML, CSS, JavaScript, PHP, etc.––which the coding purist in me wanted to deconstruct and study from the ground up. In the end I decided that ‘from the surface down’ was a more efficient way to keep my learning timely and relevant, as well as protect any vestiges of a social life.

This in turn led me to acknowledge that WebGL is pretty low-level, and best approached via a wrapper framework offering some semblance of Maya-like scene manipulation. The eminent choice here was JavaScript library three.js, used in several of the Chrome Experiments and currently enjoying wide adoption.

While pondering how to take the dive, hot off the press from the kind folks at Packt came a copy of Learning three.js: The JavaScript 3D Library for WebGL by Jos Dirksen. So here is a review, interspersed with my first experiences of doing 3D on the web.

The book does not discuss programmatic constructs. It is instead organised around practical methods of working with geometry, lights, layout and camera, effects etc. In all, a very familiar vocabulary for CG artists.

Despite very little exposure to web coding over the years, I was surprised at how much I could infer from mere context. JavaScript is trivial to pick up, and basic 3D scene tasks were easy to perform with three.js, with some, such as zippy realtime texture-mapped video, rigid body simulations, and even component manipulation, annoyingly so compared to Maya’s ageing viewport and scripting capabilities.

There are some semantic quirks. In three.js a ‘geometry’ plus a ‘material’ equals a ‘mesh’. And I found areas where different programming paradigms interweaved––such as JQuery wrapping another call, or nested references to HTML elements within the document itself––occasionally disorienting. However, this was not a real problem and I think it’s good that the book didn’t waste space on general web coding.

I think, for somebody coming from broadcast CG, the main challenge is to grasp the general context you are working in. Three.js is not an authoring environment. Without an interactive editor, complex modelling or keyframe animation quickly become extremely tedious. Although higher-level tools are beginning to emerge––Verold being an eminent example––interoperability with desktop software remains crucial.threejs_snap

Nevertheless, it would be short-sighted to say that all the technology needs right now is an online version of Maya. Three.js is not a mere wrapper for a rendering engine. While working with it I was constantly reminded that I wasn’t setting up a scene to be rendered for an edit. I was building something interactive, with a wealth of open, web-based functionalities to draw upon.

This experience neatly reflected the schizoid blurring of the line between content authoring and consumption that––at least to an outsider––typifies the web, and made Dirksen’s book a worthwhile, fun, and surprisingly painless, introduction.

The only caveat for me was that much of the content is delivered in the form of fairly complete applications. At first it was tempting to merely type these out line by line, stare first at the code and then at the accompanying text and wait for some osmosis to take place. It was only when I started hacking things around and observing what happened in Chrome’s JavaScript console that I felt I was really engaging. Nevertheless, the book covers a lot of material very concisely, and perhaps this type of presentation was a necessary compromise.

If you have some programming experience and wish to dip your toes in the brave new world of WebGL, Learning Three.js: The JavaScript 3D Library for WebGL is a good place to start.

 

Full Disclosure
I received a PDF of this book from the publisher. I am not affiliated with them, nor was I otherwise remunerated.