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/latest/addons/import_export/scene_gltf2.html R3F Performance Monitoring https://github.com/utsuboco/r3f-perf React Three Fiber Examples https://docs.pmnd.rs/react-three-fiber/getting-started/examples Mesh Transmission Material https://codesandbox.io/s/hmgdjq The Unconventional Gallery - Ruinart https://unconventionalgallery.ruinart.com/ Kode Club - Merci-Michel https://www.kodeclubs.com Volkswagen Virtual Studio - VisStudio https://www.vw.com.mx/app/virtual-studio/index.html 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