Three.js Optimization - Best Practices and Techniques

Are you struggling to get your Three.js scenes running smoothly? Performance optimization can be a daunting task, but in this video guide, we'll break it down step-by-step. We'll start with an overview of the key factors that can impact performance, including draw calls, geometry complexity, and texture size. Then, we'll dive into specific techniques you can use to optimize your Three.js scenes, such as mesh merging, color palettes, ORM textures and more. Finally we will look at two websites and analyze what are the techniques they used to have a fast performant experience.

Useful Resources

Blender GLTF Node guide
https://docs.blender.org/manual/en/la...

R3F Performance Monitoring
https://github.com/utsuboco/r3f-perf

React Three Fiber Examples
https://docs.pmnd.rs/react-three-fibe...

Mesh Transmission Material
https://codesandbox.io/s/hmgdjq

The Unconventional Gallery - Ruinart
https://unconventionalgallery.ruinart...

Kode Club - Merci-Michel
https://www.kodeclubs.com

Volkswagen Virtual Studio - VisStudio
https://www.vw.com.mx/app/virtual-stu...

Timestamps

00:00 Introduction
00:56 Understanding what's heavy
01:54 Performance tracking
03:05 Draw calls
05:34 Materials
08:06 Textures
10:37 Shadows
11:44 Post processing
12:28 Case study