⚡ Performance

✏️ TODO:

Fixed update vs update, update stages

GLTF, GLB, Draco, gltf-pipeline

gltf-transform, gltfpack, meshoptimizer

Reusing geometries and materials

Mutations over FP (for loops over forEach / maps, Object.assign over spread, etc)

WebGPU

Debugging, DrawCallInspector, RenderDoc, RenderDoc for Oculus

MeshLambertMaterial, MeshPhongMaterial, MeshStandardMaterial

Bake shadows, don’t render shadows if they are far

Drei soft shadows

Chrome / Firefox performance profiler

React profiler

Drei Performance Monitor

LOD (Drei Detailed)

Multiple passes (hmans discussion)

Blender mesh-gpu-instancing (demo)

PlayCanvas’s guidelines

Bullet Hell article (Unity)

Tojiro’s WebXR Scene Optimization article

Optimizing scenes for better WebGL performance by Verge3D

Spatial hashing (Yuka, other video)

For distance culling, use PerspectiveCamera.far + Fog

Tips from Meta WebXR optimizations talk (valid for non-XR too):

Rendering front-to-back as a performance optimization
If you cannot hit 90FPS consistently, target 72 or 80FPS. It is better to have a consistent FPS than big FPS drops and variations (particularly in VR).
Quest 2 : aim for 100-200 draw calls / frame max.

Three.js Optimization - Best Practices and Techniques

glTF-Compressor by Khronos

How Games Use “Culling” to Be More Efficient by SimonDev

🎾 Physics ✏️ Reduce Draw Calls