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

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