Three.js 第一次渲染网格时出现性能问题 - 预加载选项？

Question

我有一个包含 100 个 BoxGeometries 的项目，每个都有自己的图像（大约 10kb）。我注意到首次渲染框时移动设备上出现性能问题和跳帧，我想消除这些问题。

目前，我首先加载所有图像，并创建纹理，然后添加框：

let loader = new THREE.TextureLoader()

for(let img of assets) {

    loader.load(img.url, texture => {

        textures[img.name] = texture 
        assets.splice(assets.indexOf(img),1)
        if(!assets.length) {
            addBoxes()
        }

    })

}

然后我在网格中放置 100 个框，这里有一些伪代码来说明：

textures.forEach((texture,i) => {

    let box = new THREE.Mesh(
        new THREE.BoxGeometry(1, .04, 1),
        [
          blackMaterial,
          blackMaterial,
          new THREE.MeshBasicMaterial({
                map: Controller.textures[boxMaterial.postID]
            }),
          blackMaterial,
          blackMaterial,
          blackMaterial
          ]
    )

    box.position.x = (i % 10 - 5)
    box.position.z = (Math.floor(i / 10) - 5)

    scene.add( box )

})

requestAnimationFrame( step )

我有一个 THREE.OrthographicCamera，可以围绕这些框进行平移和缩放盒子。我注意到，当它们第一次出现时，它们会导致内存激增，但一旦看到所有盒子，净堆就会急剧下降，性能变得平稳，并且帧速率不会下降。

请注意，6 秒后内存突然变平，这是所有框都被看到一次的情况：

为了解决这个问题，我已经尝试过盒子上的 frustrumCulled 参数：

box.frustumCulled = false

这在某些方面解决了问题。加载后，性能从一开始就非常流畅，内存问题也消失了。然而，我似乎没有办法检测所有网格是否已加载，因此初始加载很慢并且我有一个介绍动画，并且早期交互是锯齿状的并且性能密集，因为它们开始得太早。

我知道用急切加载方式加载所有盒子会导致更长的加载时间，这对于这个项目来说很好，可以避免通过延迟加载出现内存问题。然而，我还有什么其他选择呢？也许 box.frustumCulled 不是正确的方法。

有没有办法让事件侦听器监听此类加载活动？理想情况下，我会使用预加载器正确加载所有盒子，就好像它们曾经被见过一样，当系统准备就绪时，我可以触发 init 方法。

Answer 1

一些想法：

1. 共享几何图形

您正在使用所有立方体，因此它们可以共享其几何图形定义。即使您希望它们具有不同的尺寸，您也可以稍后对网格应用缩放变换。

let boxGeo = new THREE.BoxGeometry(1, .04, 1)
textures.forEach((texture,i) => {
    let box = new THREE.Mesh(
        boxGeo,
        [
          blackMaterial,
          blackMaterial,
          new THREE.MeshBasicMaterial({
                map: Controller.textures[boxMaterial.postID]
            }),
          blackMaterial,
          blackMaterial,
          blackMaterial
          ]
    )

现在，您的程序只需将一个几何定义上传到 GPU，而不需要为每个纹理创建多个几何定义。

2. 在纹理之前渲染

这是在黑暗中拍摄的，但请尝试使用透明材质预先创建立方体，然后再应用纹理。我的想法是，预先上传几何图形会节省初始渲染的时间。

3. 实例

我不太了解 Three.js 如何处理实例材质，但您也许可以使用 InstancedMesh 创建立方体并提高整体渲染性能。