You have probably heard about the growing interest in WebGL*, the technology that allows for real-time 3D graphics in the browser. For a few years, talented people around the world have been using it to create amazing experiences, music videos, games, data visualizations, and more.
With the power of hardware-accelerated 3D graphics, WebGL truly offers endless possibilities for designers and developers. Better still, browser support is growing fast (including future releases of Internet Explorer), which makes the technology very promising for the future of the Web.
In fact, the technology is so exciting that we sometimes forget what makes it special: running in the browser, which means that it can be used within any web document. In my opinion, WebGL shouldn’t be solely used for full-page 3D applications like the majority of examples we see online. It could also be integrated into regular web pages, in combination with other technologies and content.
Just as we use images, videos, SVG, and other visual elements to build our pages, we could use WebGL to create a more engaging user experience by adding interactive graphics and visual effects that are impossible to achieve with any other available technology.
Below is a little demo I’ve put together. Think of it as a hypothetical marketing page about some web product. We might want to highlight a set of three major features about the product. What if we could add a touch of surprise and interactivity to each of them? Hover your mouse cursor over each feature to see how WebGL can add interesting effects.
As you can see in the demo, by integrating transparent WebGL contexts into the page, we are able to mix regular CSS-styled DOM elements (the text and color circles) with real-time 3D graphics. This allows us to add fun and interactive effects to our page content.
How does it work?
To create these demos, I’ve used the three.js library, which is a great, relatively painless way to take your first steps with WebGL. I highly recommend checking out the many examples on the project’s official site.
In our demo, the first example is a basic 3D model (created with Blender) that we load into the page. The second one is a generated sphere geometry to which we add a simple bouncing animation with some JavaScript. The last one is another 3D model that casts shadows on the page, thanks to a light source located below the mouse cursor.
Note that, in this demo, I assume the visitor is using a WebGL-enabled browser. A better practice would have been to first implement the page with static images to ensure basic functionality for everyone, then add the 3D effects as a progressive enhancement for advanced browsers.
What about CSS 3D Transforms?
You might think: ‘Hold on, can’t we just use CSS 3D transforms to do this?’ To a certain extent, CSS3 is often the best tool to add 3D effects to your pages. For example, it’s the perfect choice of technology for simple effects, like page transitions or 3D slideshows. However, it becomes less relevant for dealing with complex 3D shapes and animations.
Don’t get me wrong, CSS 3D transforms are a wonderful tool which I definitely recommend using for basic UI effects. But as soon as you want to work with complex 3D scenes, I’d recommend going for WebGL, which gives you models, textures, lighting/shadows, and shaders to work with.
Get started with WebGL
Best of all, you can start using WebGL today. With tools such as three.js, creating and manipulating 3D scenes is no longer rocket science. To create and edit your own 3D models, you can use Blender, which is a free and open-source 3D editor with countless tutorials and resources across the Web.
We have barely scratched the surface of how real-time 3D graphics can enhance the websites we make. I hope this article inspires you to experiment with WebGL, and I look forward to seeing what you come up with. Be sure to share your thoughts in the comments!
