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纹理崩溃镀铬标签

1 个答案: