How to optimize draw calls in Three.js when updating polyline in real-time?

Questions
, ,
1

I’m working on a Three.js demo that simulates a car driving and dynamically visualizes its surrounding environment in real-time. To maintain smooth performance, the update method is triggered frequently in each render loop. I’m currently focusing on optimizing rendering performance by reducing draw calls.

I’ve been exploring techniques like BufferGeometryUtils.mergeGeometries, BatchedMesh, or InstancedMesh. In Freespace.ts, I used BufferGeometryUtils.mergeGeometries to combine geometries, but encountered an issue where the material colors and transparency that previously rendered correctly started displaying incorrectly after merging. Without merging, the colors and transparency work as expected.

You can see the relevant changes in this commit.

I would greatly appreciate any advice on best practices for optimizing draw calls, particularly regarding the Polyline performance in this context. Additionally, any insights on why merging geometries causes these rendering issues and how to resolve them would be very helpful.

Here are links to the demo and the relevant code files:

Thanks in advance for your help!

2

Merging meshes only works if they can share the same material. You may have to sort the meshes by material first, then only merge meshes of the same material.

It kinda sounds like you might be merging 2 geometries with different/missing attributes, if you’re seeing weird effects like you describe.