WEBGL 3D and Threejs
Learn how to create realistic 3D scenes on the Web
Learn how to create impressive realistic 3D scenes that will work in the browser
Explore alien landscapes, underwater worlds or ancient gauntlets. Interact with life-like models that speak and react as you engage with them. Build beautiful cinematic sequences to launch into a new game or website. Learn the latest features of a new computer by viewing it from every possible angle, or dive into an exploded view. Imagine a site for a new car, where you could examine each part in as much detail as you wish, then watch it reassemble before your eyes. Turn on your VR headset, get behind the wheel and take your customised car for a spin. All of this is possible and so much more using WEBGL, all right in the browser without plugins. 3D models are at the heart of these amazing experiences. This article is going to explore using 3D models in WEBGL, and create beautiful results. We’ll show you data formats, performance considerations, resources and how to get started. Using the popular Three.js library, you’ll learn about importing and using models, lighting and textures to enhance surface detail, the importance of environmental maps and optimisation tips to help your project run smoothly. You’ll be a able to follow along, making your own 3D scene. You’ll load primitives to start, then exploring model loading and techniques to make your scenes more photo-realistic. More than enough to get started and plenty to fuel your next projects, with a few tips as well. Many of the 3D principles that you will learn here are relevant in any other 3D library or environment.
How well is WEBGL 3D supported?
Up until the past few years, the biggest obstacle to developing in WEBGL was the lack of device-wide support. Every killer interactive pitch was met with the daunting question: “Great, but will it run on mobile, or do we have to serve up some second-rate fall-back experience?” Desktop support was getting there for some browsers, but not all, and mobile was a deal-breaker for most professional projects.
Fast-forward to 2018, and with advances in device hardware and processing, we now have gorgeous displays with incredibly powerful processors. Browsers support WEBGL natively with overall support closing in on 95%, virtually 100% on all major devices and browsers (https://caniuse.com/#search=webgl).
WEBGL is now integrated into web standards, allowing physics, image processing and effects as part of the webpage canvas, all Gpuaccelerated! That means amazing real-time 3D graphics, powerful effects via Graphic Shaders and immersive video are all possible. Complex models with high levels of detail, reflections, environmental maps, shadows – all possible.
This requires no special plugin or downloads. All users now have instant access to beautiful experiences right in their browser and right in the palm of their hand.
“Every image, every scene, can tell a story. Advanced WEBGL now enables photorealistic, interactive rendering that can reach mass audience through the web without plugins. It’s an exciting time to be in web development and VFX” Richard Mattka
Award-winning interactive director, author, VFX artist