Description
I recently delved into why calls to renderer.render() were creating so much garbage in my three.js scene. I discovered that inside the Renderer._renderObjectDirect() path, 4 objects are allocated per mesh for each render, and never used again. Two of the objects are full blown function closures, and two of them are arrays created by Object.keys().
With 1,000 meshes in a three.js scene, and at 60 frames per second, this is equal to 1,000 * 4 * 60 = 240,000 objects that the garbage collector must dispose of every second. That is only assuming the scene is trying to run at 60fps. With modern monitors trying to run at 120Hz or greater it could be upwards of 500,000+ objects per second...!
The two function closures created here:
|
const setPipelineAndBindings = ( passEncoderGPU, currentSets ) => { |
|
const draw = ( passEncoderGPU, currentSets ) => { |
The 2 calls to Object.keys() here:
|
const storedAttributeNames = Object.keys( storedAttributes ); |
|
const currentAttributeNames = Object.keys( attributes ); |
These allocations should be avoided to keep the garbage collector from kicking in so often.
Live example
https://jsfiddle.net/v14csauf
Version
r183
Description
I recently delved into why calls to
renderer.render()were creating so much garbage in my three.js scene. I discovered that inside theRenderer._renderObjectDirect()path, 4 objects are allocated per mesh for each render, and never used again. Two of the objects are full blown function closures, and two of them are arrays created byObject.keys().With 1,000 meshes in a three.js scene, and at 60 frames per second, this is equal to 1,000 * 4 * 60 = 240,000 objects that the garbage collector must dispose of every second. That is only assuming the scene is trying to run at 60fps. With modern monitors trying to run at 120Hz or greater it could be upwards of 500,000+ objects per second...!
The two function closures created here:
three.js/src/renderers/webgpu/WebGPUBackend.js
Line 1522 in bd1baec
three.js/src/renderers/webgpu/WebGPUBackend.js
Line 1592 in bd1baec
The 2 calls to
Object.keys()here:three.js/src/materials/nodes/manager/NodeMaterialObserver.js
Lines 396 to 397 in bd1baec
These allocations should be avoided to keep the garbage collector from kicking in so often.
Live example
https://jsfiddle.net/v14csauf
Version
r183