How can I optimise my THREE.JS rendering?

Questions
2
  1. Frustum culling is done by three out of the box (as long as each mesh has it’s own separate geometry.)
  2. Merging geometries prevents frustum culling, so merge only geometries that are most of the time smaller than the size of the viewport (ex. do not merge terrain into a single, giant mesh.)
  3. Take a look at LOD.
  4. Take a look at InstancedMeshes (if a lot of meshes in the scene use the same geometry + material combination, group them together into an InstacedMesh. That way you can still have plenty of these meshes on the screen, but they all cost just a single draw call.)
  5. For raycasting - consider building a spatial index (ie. “regions” / bigger groups in 3D space), and only raycast against the meshes within the closest spatial regions.
  6. Simply don’t render stuff that is too far away to be visible / readable to the user.
2 Likes