3D web content is now supported across the vast majority of internet browsers and devices. The next generation of content is more interactive, immersive and entertaining. AR applications can be developed for the web, enabling anyone to use them without downloading an app. Products can be displayed as interactive 3D models, viewed from any angle in a browser, and customized like a character in a video game. And of course traditional website designs can be enhanced with some 3D design elements.
Best Brands
Many major brands have started using 3D web content across the whole range of possibilities to spice up designs, create interactive experiences, and showcase products.
We’ve worked on projects for companies as diverse as Red Bull, Ford, EE, Ernst and Young and XFinity. Other brands who regularly use 3D web include Nike, Space X, Warner Bros, Adidas, Gucci. And even the US military! They use it across a variety of applications such as advertising, recruitment, shopping and education.
Cutting Edge Web Design
3D brings us all the possibilities we’ve seen in video games and movies. Designers can use a camera to create cinematic movement or allow the user to travel in a 3D space, and create stunning visuals with VFX such as particle systems, photo and text effects, and animated 3D models.
Designs can be made to look more high tech. Animation helps users understand how to interact with and understand the content they are presented with. By using 3D elements, designers can build upon our shared experience: doors are made to be opened, stairs are used to go up and down.
3D Applications
3D web content opens new doors, enabling web developers to create functionalities that used to only be available in native applications (that you have to download from an app store). This makes experiences immediately accessible to a wider audience, as no download is required.
AR experiences are no longer restricted to Facebook / Instagram / SnapChat filters or dedicated apps. Brands are able to display their products in AR so you can see them on your living room table, create location specific content to enhance events, and add interactive content to their imagery on posters.
Most gamers are familiar with the customization screen in a video game, where you can choose how to style your character. This is now also a possibility within your browser.
New Generation / Changing Trends
As technology evolves and becomes more and more integrated into our daily lives, children start using it from a younger and younger age and start forming expectations about what content on a screen should look like. What was cool and novel 30 years ago may now look ugly and low tech to younger eyes. In a world where online interaction is more and more done through apps, using 3D content is a way to keep the web relevant.
Education
WebGL allows educators to create interactive, 3D educational content that can make complex subjects more comprehensible and engaging. For instance, in science education, WebGL can be used to visually demonstrate the structure of molecules or the human anatomy, fostering a better understanding through interactive exploration. In history or geography lessons, students can explore 3D models of historical sites or geographical features. Furthermore, when combined with Virtual Reality (VR) and Augmented Reality (AR) technologies, WebGL can offer immersive learning experiences that can enhance comprehension and retention of knowledge.
Ecommerce
WebGL enables retailers to showcase their products in interactive 3D, allowing customers to rotate, zoom, and explore products from different angles, providing a shopping experience similar to physically handling the products. This can lead to better informed purchasing decisions and potentially reduce return rates. Furthermore, WebGL enables real-time product customization, allowing customers to select different colors, materials, or add-ons and instantly see how these changes alter the appearance of the product. Some businesses also use WebGL combined with Augmented Reality (AR) to allow customers to virtually “place” a product in their environment to see how it fits.
Future Developments
WebGPU
Most devices are now supporting WebGL 2. The next stage in 3D web graphics will be WebGPU, which is currently available in all major browsers but must be enabled by the user. THREE.js and Babylon.js, 2 of the main libraries used by WebGL developpers, already support WebGPU. It gives developers access to features missing from WebGL and should have a better performance. But we are still a few years away before the web starts transitioning to use it. WebGL apps will require some updates in order to use WebGPU, so until it’s supported by enough devices developpers will likely stick with WebGL.
Pixel streaming
Most 3D content on the web is rendered client side, meaning that the user’s device performs all the calculations needed to render the visuals. Pixel streaming is a solution where the user’s device sends the user’s actions to a server, which then renders a 3D video based on the user’s actions and streams it back to the user. This enables devices with limited computational resources to see very high quality content, as they are essentially just streaming video. The downside is that there is a lag, as the user’s device has to send the user action to the server, the server has to render the video and send it back to the user before the user can see the results of their action. It’s not necessarily too bad, but in situations where the interaction must happen in real time it can be noticeable and frustrating. And from the developper’s side, another downside is the cost: rendering 3D content on a server is not cheap, so it’s a much more expensive solution than having the code run on the user’s device. But you can get a much higher visual quality, as your 5 year old phone could stream graphics rendered by a server running Unreal Engine 5 using the latest high end GPUs.
TL;DR
3D web content has a multitude of applications. It allows us to create more engaging and interactive content. When done correctly, it enhances the user experience and enables richer, more meaningful storytelling, and allows us to give the user more information without overwhelming the.