We are having difficulties with our three.js homepage banner lagging

Questions
1

Are homepage banner is struggling with the laggy transitions on our new three.js homepage banner.

We are considering:
Optimization:

  • For smooth transitions: (See if gsap.to can be optimized to match the frame rate of the scene to be lag free).
  • Use a single load of gltf, instead of 2 copies if possible.

We have already reduce the poly count and reduce material count by baking the colours and using the unlit material with texture for the complete scene.

Does anyone have any suggestions?

Thank you,
Matt

2

Calculate javascript code time and rendering time.
Replace:

function animate(){
requestAnimationFrame(animate);
---also js code---
renderer.render(scene,camera);
}

To:

function animate(){
requestAnimationFrame(animate);
let js_time=performance.now();
---also js code---
console.log("JS: "+performance.now()-js_time);

let render_time=performance.now();
renderer.render(scene,camera);
console.log("Rendering: "+performance.now()-render_time);
3

Thank you, we will do this and log the performance.

4

A big part of the issue seems to be when the objects come into the cameras frustum, you could try iterating over your scenes contents and set all visible objects to frustumCulled = false, alternatively you could look into optimising both the geometry by removing unnecessary edges and vertices and textures by making them as small as what’s needed on screen in pixel size and as small as possible in file size…

5

Thank you, I’ve passed on your suggestion.