Three.js、256×256 png 纹理崩溃 chrome 选项卡

Question

正在将 256x256 纹理加载到 Three.js 材质中，然后用于平面几何变形。在第 15 个纹理处遇到瓶颈。 Chrome 显然在渲染调用时崩溃了。当每个网格添加到场景时，我调用 renderer.render 调用，但顺序非常紧凑，所以我相信，gpu 总线可能不堪重负。很难相信少量如此小的纹理就足以造成这种情况。 Cpu 内存不是问题，因为纹理被加载到 cpu 并且如果网格未添加到场景，则不会崩溃。此外，将纹理从 cpu 复制到 gpu 时会有明显的延迟。

function loadTexture(texture) {
    var x = 512;
    var y = 512;
    var dx = 256;
    var dy = 256;

    var geometry = new THREE.PlaneGeometry(x, y, dx, dy);

    var material = new THREE.ShaderMaterial({
        side: THREE.DoubleSide,
        uniforms: {
            heightMap: {
                type: "t",
                value: texture
            }
        },
        vertexShader: vertexShader,
        fragmentShader: fragmentShader
    });

    var mesh = new THREE.Mesh(geometry, material);

    scene.add(mesh);

    this.renderer.render(scene, camera);
}

Answer 1

PlaneGeometries 在 Three.js r76 中变得很昂贵。我不能创建超过 14 个（在提到的 256x256 数据点的分辨率下）。我碰巧需要很多但数量有限的平面几何体，所以我可以继续突破这个限制，但最终我将需要更多的内存来存储 PlaneGeometries。这个瓶颈只是 GPU，因为这只发生在 renderer.render 调用上。

Three.js、256×256 png 纹理崩溃 chrome 选项卡

Three.js, 256×256 png textures crash chrome tab

memory

textures

load

three.js