3D and Three.js: Innovate Your Next Project!
3D On The Web
In the early days of web interactivity there was the ever divisive Flash Player. Some of us remember it fondly as the source of a myriad of web based games, while others scoff in frustration while recalling the pains of ActionScript. It was that frustration and its proprietary nature that led Apple to work on WebKit and by extension the Canvas element. Steve Jobs was not modest in his disdain for flash and sought to produce a standardized replacement.
The Canvas element gave developers a new playground for interactivity that could be manipulated with native JavaScript. In 2005 Apple announced it was open-sourcing WebKit and it wasn’t long before other browsers adopted it along with Canvas and it eventually became standard as part of HTML5.
Initially canvas was created as a new and improved environment for 2D graphics and animation, but some saw its potential as a tool for rendering 3D graphics. A consortium of individuals from several big players in web technology (Apple, Google, Sony, etc) known as Khronos Group worked to create a new standard for 3D on the web known as WebGL. When it was released in early 2011, it gave web developers the ability to render 3D content within the canvas element.
Enter Three.js
On its own WebGL is very powerful and capable of rendering complex scenes with hundreds of 3D meshes all within the browser (Depending on the user’s GPU.) Unfortunately, it requires a deeper understanding of computer graphics and can be very cumbersome to work with. It can take hundreds of lines of code to render a simple sphere (and hundreds more to add shading and texture!) It’s this complexity that spawned several libraries aimed at making the lives of developers easier.
While WebGL was being developed a team of enthusiastic artists / developers were working on their own tool for 3D graphics on the web that would eventually become Three.js. Early on it utilized ActionScript until performance improvements motivated the shift to JavaScript. When WebGL became available, the creators of Three took advantage of the new standardized rendering engine and built their tools to streamline workflows.
With Three.js, generating a simple sphere goes from potentially hundreds of lines of code to just a few. Instead of writing and debugging a novel worth of scripts to build a scene, users can focus more on the content of their work. The tools included by three.js are meant to be more familiar to those who work with digital 3D art, rather than getting into the technical nitty gritty of things like shader scripts.
Why use 3D anyway?
Unfortunately our clients don’t often request projects that include the need for 3D. It’s difficult to be excited about this technology when it’s seen as a gimmick or just unnecessary. Why even bother?
In the past decade the graphics processing power of our smart devices has reached obscene levels. Some modern phones even surpass the graphics capabilities of the previous generation of consoles. With over 50% of web traffic coming from mobile devices, we’re becoming less limited by user hardware.
With this in mind, pushing the boundary of interactivity on the web could set you apart from other developers. The versatility of the canvas element allows you to insert 3D content anywhere. Background videos are old news, we can push the canvas element to the back of our content and render a cool 3D scene behind it to give our site some true depth.
Maybe you can’t convince your client to splurge on a cool background effect. If they’re selling or advertising a product, perhaps an in browser 3D rendering might pique their interest. With Three.js we could render the item in a canvas with enticing lighting effects. We could also add levels of interactivity that could draw in a potential customer and educate them about the intricacies of a product.
With animations tied to interactivity we could show a breakdown of a product or highlight a really cool feature:
A feature like this would surely stand out for any prospective buyer.
For more examples of the uses of Three.js, check out their homepage. You’ll find games, product showcases, educational interactives, even an artist’s web portfolio that includes a controllable vehicle!
The Future of 3D and The Web
In 2021 Facebook spent over ten billion dollars on their VR / AR division alone, and they anticipate that spending to increase year after year. Facebook isn’t the only company heavily investing. Several other big names have their own teams researching breakthroughs in the field. As these devices become less cumbersome and more affordable, it seems likely that they will find their way into our daily lives.
If indeed VR/AR does become the next big player in digital space, the web will surely adapt. While 3D on the web now is seen as a special feature or a gimmick, it’s not farfetched to expect that it may become far more relevant in the not too distant future.