Three.js migration from 127 -> 128 performance issues

After upgrading three.js version from 127 to 128 i has performance issues. My scenes is rendered significantly slow. Also I use migration guide ( Migration Guide · mrdoob/three.js Wiki · GitHub ). Also I has GPUPickerHelper in my code. In guide i see that →

  • All central engine components like Object3D, BufferGeometry or ShaderMaterial are now ES6 classes.
  • This might impact your application if you derive custom classes from three.js classes via ES5 syntax. In this case, you have to upgrade your code to ES6 or transpile three.js to ES5.

Can this be reasons of my performance issues?

Not really, it’s impact in terms of just syntax.

Could you describe a bit more in detail what is in your scene? Also, did you check devtools console for any errors after the update? These may impact performance as exceptions pile up in requestAnimationFrame.

@mjurczyk My scene is

Yes that is big scene there are also 400 objects but before upgrade i has not performance issues with this scene

@mjurczyk And i call GpuPickers in requestAnimationFrame, may be reason in this. But i did that before upgrade to

129 indeed caused a regression, maybe it’s that

All opaque objects have to be rendered two times when using transmission. That should explain the higher number of rendered triangles.

@drcmda thank you for answer but anyway i couldn’t understand how can i fix performance issues in v128 and higher? Can you help me with solution

i can’t but i would carefully go through these and look if any of it concerns you. lots of people have reported performance problems after moving up to >128. if you have double sided, transparent, transmissive materials that’s probably the reason.

@donmccurdy yes we can continue discussion here. That numbers are same. In answers sent link where asked that problem in double creating of triangles i sent that number where triangles are not doubled but i have issue with performance after upgrade to r128.

@AdarkSt Try making all of your materials opaque (.transparent = false). I understand that might not look correct, but should tell you whether transparency is related to the performance problem.

@donmccurdy I already wore it
(transparent = false, side=THREE.FrontSide)

I’m not sure what you are saying above, do you mean that you already tried making all materials opaque and the performance did not change?

We cannot see your scene, and there are hundreds of changes in any three.js release. There is not much point in trying to guess why performance is slower with a screenshot; these things can be measured if you are able to share a demo reproducing the difference.

@donmccurdy Ok thank you for help i will try to make demonstration before version upgrade and after version upgrade.