Using WebGL to Add 3D Effects to Your Website

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.

WebGL Demo

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!

  • http://getify.me/ getify

    Love that demo. I’m particularly impressed because I never see people talking about real usage of WebGL in anything other than 3D gaming. This puts WebGL back into the hands of a much broader audience. Someday I’m gonna get to actually play with it! :)

  • Huei Tan

    Cool, Thanks for sharing this

  • Ross

    Awesome! Javascript performance + WebGL is going to lead to a serious raising of the bar on the web. Even these small demos help show the way. We’ve recently started building commercial sites using WebGL, promo for Ninja Turtles is live (http://swappzinteractive.com/teenage-mutant-ninja-turtles.html) and Smurfs + Power Rangers coming soon.

  • http://www.pixogee.com/ Pixogee

    The future of the web today! Awesome post! Can’t wait to see more webgl around the Internet.

  • emmeltaccgl

    I would like to point to my taccgl.org library for adding WebGL content to HTML pages and integrating with the HTML. It runs animations on a transparent canvas on top (or in the back) of an HTML page and has functions to animate 3D objects and HTML elements, to align them, and to map HTML elements on 3D objects.

    • http://krishaamer.com/ Kris Haamer

      Wow, this looks awesome. Haven’t heard of it before.

    • cgvinod

      Will try it out looks awesome

  • Brenton Gunning

    Nice article :) This appears to be the future of the web. Also, shout out for Voodoo.js (http://www.voodoojs.com), a framework to mix 2D and 3D together very similarly. It integrates with ThreeJs to make using 3D easy.

  • http://jswebschmiede.de/ Jörg Schöneburg

    Dont work in IE10. :(

    • natjsb

      That’s because MS deliberately chose not to support WebGL. They say it’s about security risk but some says the reason is more about business matters. Silverlight or some kind of DX implementation. Though a leak from Windows “Blue” OS suggests that the IE11 that will come with it has entries related to an experimental WebGL support. So there’s still hope… :)

    • cgvinod

      Try IE 11.. It says it supports Web GL..

      • Chris Weiss

        IE 11 renders it……. thats all, no animation and the shadow doesn’t really work on the third example. All in all, another MS disappointment.

        • muhammadbilal

          Webgl is just new on IE11.. and it does render all basic animations like the demo in this post but still glitchy on complex renders..
          It will get better on newer versions. for now, its just a welcome.

        • vnodecg

          I always hoped IE will pick up :D

  • Carlo Rizzante

    Sweet! I’m thinking if we really need to have all sort of special effects on a website, but surely the demo shines. Thanks for sharing.

  • dlukic

    kind lika a new flash……

  • cgvinod

    bouncing mesh :) just love it

  • Jonathan Herrera

    :D LOCURA GENIAL

  • Nigel Davison

    Great article and demo

  • Armando Durán

    VAYA COSA MÁS CHAFA, YA EXISTE CSS3 AHHHHHHHHHHHHHHH!

  • thecity2

    Articles like this make me think we’re still early days of the web. So much left to do! It’s exciting.

  • grimatongueworm

    Props for the nod to Blender.

  • dongandhuang

    These day ,I alaways heard about WebGL,and this article give me a simple view of webGL.I only used canvas(2d) before and a program during my working time. After seeing your article ,maybe it’s time to start konwing and using webGL to do someting!

  • http://www.nexus-webdesign.ch/ Dan French

    thank you for this good article and the amazing Demo!

  • http://cssmatter.com/ CSSMatter.com

    Great!

  • Andy Casey

    Chrome Version 28.0.1500.95 on OS X 10.6.8 only shows a changing shadow on the yellow ball. No ‘HTML 5′, ‘mesh’, or ‘$’ icon is present, and nothing else happens on mouseover.

  • rubenrojas

    Looks awesome, is fast, love shadows animate with objects

  • Paolo Caminiti

    This website has a 500Kb animated png for the logo?!?!?!?! Come on use some webgl guys!

  • Ryan ♗

    That icosahedron looks really similar to the one i used on my minisite: http://ryanbishop.me/

    Credits? :))

    • Guillaume Lecollinet

      Never visited your site before. This is just a coincidence, sorry.

  • http://www.retori.com/ Leandro Morales

    Oh my God! I’m 3D designer, this is a step forward. It’s great and very exciting! I’ll put this effect in my next web project.

  • joffley

    Alas, not very exciting if you don’t have WebGL (sucks to be me!)

  • http://www.mathewporter.co.uk/ Mathew Porter

    As ever guys, great look into this, there are some great resources coming out and tutorials for webgl.

  • http://shishir.co/ Shishir Srivastava

    Is the code for this demo available for download?

  • Maciej Pleśnar

    We’ve recently created a javascript webgl lib for 3D charts: http://incharts3d.com Check it out, maybe you will find something inspirational in it.

  • Mangap

    When the tablet browser such as chrome for android full support html5 ?

  • Bingi Nataraj

    Hi Guillaume :)
    i want to know that , can we upload a 3D model which is created in AutoCAD ??? and also want to rotate it as user view ?? is it possible, please Let me know

  • Denis White

    你这么吊,你家里人知道吗

  • gfxdevrus

    Very similar demo http://www.blend4web.com/en/article/23.
    The scene is exported directly from Blender to WebGL. Then a simple logic is applied. Powered by Blend4Web.

  • Jim

    and how about that, some guys made the whole interface ​​entirely in webGl http://brejak.com