How to optimize the rendering on my threejs program - reactjs

Question

I've been working on a rubik's cube program, and the rendering works fine on my macbook pro/google chrome browser. For computers with slower GPUs, however, my cube breaks because the rendering is slower than the animations. I've tried looking up ways to optimize the rendering and haven't had any success yet.
Rubik's Cube live link
Github code repository
I'm using react and the componentDidMount function is line 1463 where the cube meshes get generated and the animate function is line 1539. Appreciate any help, thanks!

Answer 1

This all depends on how you're building your geometry. I ran a WebGL inspector on your live link, and I'm getting 182 drawcalls for a 3x3x3 cube. This is unnecessarily large, since a 3x3 should only have 54 faces. Each time you add a new Mesh to the scene, it creates a new drawcall on render, and having too many drawcalls is almost always the primary reason for slow performance in WebGL.
You should consider nesting each face into its corresponding "cubelet" (one black cube with 1, 2, or 3 colored faces), as done in this Roobik's demo. This way you'd only have to draw 27 cubes + 54 faces = 81 drawcalls! The pseudocode would go something like this:
for (let i = 0; i < 27; i++) {
let cubelet = new THREE.Mesh(geom, mat);
let face1 = new THREE.Mesh(geom, faceMat1);
let face2 = new THREE.Mesh(geom, faceMat2);
let face3 = new THREE.Mesh(geom, faceMat3);
cubelet.add(face1);
cubelet.add(face2);
cubelet.add(face3);
scene.add(cubelet);
}
Of course, you'd need to set the positions and rotations, to get a result like this:
Secondly, you're going to have to re-think the way your animate() function is set up. You're starting the next rotation after a set time has progressed, but instead you should start the next rotation only after the first one is complete. Have you considered using an animation library like GSAP?