Embracing WebGPU and WebXR With Three.js – Mr.doob, JSNation 2024

Summary

Ricardo leads the 3Gs project, which has evolved organically with nearly 2,000 contributors over 14 years. The project, initially focused on 3D engine work in Flash, transitioned to HTML5 and WebGL, enabling creative and experimental web-based 3D applications. Ricardo highlights various tools and frameworks like react-three-fiber and Three.js, showcasing the community's innovative use of these technologies for interactive and realistic web experiences.

Takeaways

• 😀 The speaker, Ricardo, has been leading the 3Gs project for 14 years which has seen nearly 2,000 contributors.
• 🌐 The project operates without a strict roadmap, being community-led with Ricardo providing general guidance.
• 📊 A visualization of the project's GitHub repository over the years shows the growth from Ricardo working alone to a network of main contributors and many others.
• 🔄 The project began with 3D engine work in Flash around 2006-2007 and transitioned to HTML5 when the technology became prevalent.
• 🎨 Ricardo emphasizes the creative and experimental nature of the project, allowing for easy contributions and avoiding bureaucratic processes.
• 🌟 The speaker highlights the use of web technologies for 3D rendering, showcasing a Japanese company's project as an example of what can be achieved.
• 🛠️ The talk mentions various tools and frameworks that have been used in conjunction with the project, such as plain JavaScript, React, Three.js, and others.
• 🎨 For designers, the speaker recommends tools like Spline, which is built on top of Three.js and allows for easy prototyping.
• 🔍 The introduction of path tracing in browsers allows for more realistic rendering, which can be useful for applications like furniture customization.
• 🔄 WebGPU is a newer API that is being developed for more optimized 3D on the web, building on top of modern native APIs like Metal, Vulkan, and DirectX 12.
• 🛠️ A new shading language called TSL is being developed to make shaders easier to use and combine, which could revolutionize custom material creation in 3D web projects.

Q & A

Who is Ricardo and what has he been leading for the past 14 years?

Ricardo is the leader of the 3Gs project, which he has been guiding for approximately 14 years. The project has been community-led without a strict roadmap, allowing contributors to work on what they believe should be done.

How many contributors has the 3Gs project had so far?

The 3Gs project has had around almost 2,000 contributors over the years.

What does the visualization of the G for repo for the last 14 years represent?

The visualization represents the growth and contributions to the 3Gs project over time, with the central figure being Ricardo, and the surrounding circles and dots representing files and contributors.

What was the original focus of Ricardo's work before the 3Gs project?

Ricardo originally focused on 3D engine work, exploring 3D in Flash starting in 2006 and 2007.

Why did Ricardo decide to move his 3D engine work to HTML 5?

Ricardo decided to move his work to HTML 5 because of the emergence of HTML 5 and the potential it offered for 3D rendering on the web.

What was the initial challenge with using SBG for rendering 3D in HTML 5?

The initial challenge was that SBG was similar to what Flash used for rendering, but it required creating a new SBG every frame, which was inefficient and limited due to the CPU's capability to handle only around 2,000 triangles at the time.

What does 'webg' refer to in the context of the script?

In the script, 'webg' refers to WebGL, a JavaScript API for rendering interactive 3D and 2D graphics within any compatible web browser without the use of plug-ins.

What is 'react-three-fiber' and how does it simplify 3D in web development?

React-three-fiber is a React framework that brings the component-based approach of React to 3D graphics, making it easier for developers to work with 3D elements without needing deep knowledge of WebGL.

What is 'path Tracer' and how does it differ from real-time rendering?

Path Tracer is a method of rendering that focuses on achieving more realistic and accurate lighting and reflections in a scene, similar to 3D software like Blender or Maya. Unlike real-time rendering, it does not focus on speed but on the quality of the visual output.

What is the significance of WebGPU and how does it differ from WebGL?

WebGPU is a newer API for 3D on the web that is built on top of modern native APIs like Metal, Vulkan, and DirectX 12, making it more optimized for current hardware compared to WebGL, which is based on the older OpenGL standard.

What is the purpose of the new shading language 'TSL' being developed?

TSL, or Three Shader Language, is being developed to make shaders easier to use and combine with other elements in 3D graphics. It aims to abstract the complexity of GLSL or WGSL, allowing for more flexible and efficient shader creation and management.

How does the introduction of WebXR enhance the capabilities of web-based 3D applications?

WebXR is an API that enables immersive virtual reality (VR) and augmented reality (AR) experiences directly in compatible web browsers. It allows for hand tracking, mesh detection, and depth sensing, enhancing the interactivity and realism of web-based 3D applications.

What are the current limitations or considerations for using WebGPU in production?

While WebGPU is nearing readiness for production, it currently faces limitations such as the lack of availability on all browsers, the need for a new backend, and the challenge of shader language compatibility between GLSL and WGSL.