React Summit

React Summit 2024

This Talk explores the future of React 3 Fiber and its potential for building immersive 3D worlds and video games on the web. The challenges of building immersive 3D apps and the solutions provided by React 3 Fiber are discussed, including decoupling simulation state updates and enhancing scheduling with stable references. The concept of data-oriented programming and the use of ECS (Entity-Component-System) design pattern for composable data in React 3 Fiber are explored. The Talk concludes by emphasizing the future focus on enabling data-oriented workflows and the integration of a built-in scheduler in future versions of React 3 Fiber.

Web developers learn a lot of programming techniques in the pursuit of their career but often don't realize the depth of their own skill. React Three Fiber became a sensation among thousands of developers because it demonstrated that the knowledge they possess can be harnessed to create interactive 3D graphics. However, React Three Fiber has been stuck in the mindset of websites while the future of web increasingly moves toward immersive 3D experiences.In this presentation, we will explore the new generation of React Three Fiber and the changes being made to evolve it into a framework capable of supporting complex real time apps, such as live simulations and video games. Our goal is to give web developers a new moment of recognition where they look at a video game programmed with React and think, "I can do this"

From Websites to Games: The Future of React Three Fiber

Kris Baumgartner

React Summit 2023

WebGL has evolved from showcasing technology to being used in everyday applications like Google Maps and Figma. React and 3.js can be used together to build WebGL applications, allowing for reusable components and declarative development. Building complex 3D graphics applications requires efficient data structures, algorithms, and rendering techniques. The Flux CAD editor uses React, 3.js, and React ReFiber to handle complex engineering documents and optimize GPU utilization. Optimizing the render loop and GPU performance is crucial for improving WebGL application performance. Instance rendering can be used to optimize text rendering in WebGL applications, achieving efficient rendering of thousands of 3D characters.

A lot of recent talks at other conferences have talked about how to start using React and THREE.js to create 3D experiences on the web. In my career I've built several complex applications using those technologies, including a big Figma-like 3D editor, and I've learnt a lot of patterns and tricks on how to make it actually fast and scalable. Unfortunately, though, nobody is also talking about those tricks an what it really takes to build an rendering engine similar to the one that Figma uses. My goal with this talk is to give people an overview of the challenges that may arise when you try scaling your application, and what are some lesser known tricks to overcome them: instancing, memory usage reduction techniques, SDF-based text rendering, GPGPU and tree data structures. Everything of course done with Javascript, React and THREE.js.

#react three fiber