Three.js，256×256 png 纹理崩溃 chrome 选项卡答案

【问题标题】：Three.js, 256×256 png textures crash chrome tabThree.js，256×256 png 纹理崩溃 chrome 选项卡
【发布时间】：2016-05-04 23:49:39
【问题描述】：

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

【问题讨论】：

ypv 欢迎来到 SO。这确实有助于社区能够看到您希望我们帮助调试的代码，否则我们只能猜测并且您不会得到很好的响应。
我刚刚注意到我正在为所有纹理复制 PlaneGeometry。让我尝试重用几何。

标签： memory three.js load textures

【解决方案1】：

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

【讨论】：