Question

我使用Three.js（与WegGL配合使用）来渲染许多动画图像（数千个）的交替场景，这些动画图像在空间上具有动画效果。动画由Tween.js处理。我使用Chrome进行测试。

为了优化图像加载，我在显示第一个场景之前预加载了所有纹理图像。然后，所有纹理都以THREE.Texture的形式保存在内存中。现在，当我准备要显示的场景时，我将执行以下操作：

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());

场景准备还包括照相机和点光源，大约需要400毫秒才能完成。

然后我像这样渲染场景：

function render(){
    requestAnimationFrame(render);
    TWEEN.update();
    renderer.render(this.scene, this.camera);
}
render();

通过测量某些处理持续时间，

所有内容都能正确显示，我看到 first 渲染调用大约需要1400毫秒！其他通话需要70到100毫秒。

我的最终目标是拥有多个这样的场景，一个又一个地播放而没有任何冻结。既然所有必需的资产都已加载，可能是问题所在，我该如何优化呢？

谢谢

Answer 1

在渲染的第一帧期间，所有资产和着色器都将被编译并上传到GPU。如果要避免这种情况，则必须在幕后做一些技巧。例如，在加载每个对象后将其强制渲染一次，也许是将其添加到单个场景中，然后在其上调用renderer.render。根据瓶颈（着色器编译与资产上传）的不同，这可能有帮助，也可能没有帮助。.但是，解决方法是进行某种预渲染，以一次强制一次上传到卡，而不是一次全部。

此外，正如先前的评论者所指出的，您上面的渲染循环中有一个错字。

它应该是requestAnimationFrame（render）;

Three.js：花费太多时间渲染第一帧

1 个答案: