Will native three.js geometry perform better thant CSS3DObject?

Questions
,
1

I have a project that animates the transition/movement of quite a lot of CSS3DObjects, e.g. a simple rectangular div, using Tween, and the FPS drops significantly from 60 to <10, when the number of CSS3Dobjects increases, say from 100 up to 1000, or larger, and the interaction with the 3D scene slows down significantly, too.

May I ask:

  1. If the performance drop is expected, since rendering large number of CSS3DObjects does drag down FPS?
  2. Will the perform be better if we replace CSSObjects with native Three.js geometry, e.g. a rectangular mesh with only two triangular faces?
2

both the dom and css are very slow. 1000 objects on screen is quite much, you can be happy if you don’t get lag for 100 and even that is pushing it. webgl will easily be faster than that. but you need to use instancing (THREE.InstancedMesh), or else you will run into perf issues again due to the amount of draw-calls. you can render a million rectangular meshes (or more) at 60fps.

some examples:
125000 cubes: Instances - CodeSandbox
1000 selectable shoes: Floating, instanced shoes. - CodeSandbox

(these are react + threejs, it’s the same thing, THREE.InstancedMesh is the critical part, you find examples in threes docs)

1 Like