I am currently using Three.js with WegGL to render a series of alternating scenes consisting of thousands of image tiles moving in space. The animations are managed by Tween.js and I conduct testing on Chrome.
In order to enhance the loading process of the images, I preload all texture images before the initial scene is displayed. These textures are then stored in memory as THREE.Texture. When setting up a scene for display, I execute the following steps:
let tile = null, tweens = [], cameraZ = 1000;
for (let y = 0; y < rows; y++){
for (let x = 0; x < columns; x++){
tile = await this.createTile(x, y, [textureSize]);
tile.position.x = x * this.tileWidth - this.picWidth / 2;
tile.position.y = -y * this.tileHeight + this.picHeight / 2;
tile.position.z = cameraZ * 1.1;
tweens.push(new TWEEN.Tween(tile.position)
.to({z: 0}, 4000)
.delay(200 + x * 120 + Math.random() * 1000)
.easing(TWEEN.Easing.Cubic.InOut));
this.scene.add(tile);
}
}
tweens.map(t => t.start());
The setup of the scene also consists of the camera and a point light, taking approximately 400 ms to finish.
Subsequently, the rendering of the scene is carried out in the following manner:
function render(){
requestAnimationFrame(render);
TWEEN.update();
renderer.render(this.scene, this.camera);
}
render();
Although everything is being displayed correctly, upon measuring processing durations, it was observed that the initial rendering call requires around 1400 ms! Subsequent calls range between 70 to 100 ms.
My ultimate objective is to seamlessly transition between multiple scenes like this without any lag. Given that all necessary assets have been preloaded, what could be causing this issue and how can I optimize it?
Thank you