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

Question

Loading 256x256 textures into Three.js materials, which are then used for planegeometry deformation. Encountering a bottleneck at 15th texture. Chrome apparently crashes at the render call. When each mesh is added to scene, I call the renderer.render call, but the sequence is pretty tight, so I believe, the gpu bus may be overwhelmed. It is hard to believe that a small number of such small textures is enough to cause this. Cpu memory is not a problem, as textures are loaded into cpu and if meshes are not added to scene, there is no crash. Also, there is a significant delay while the textures are being copied from cpu to 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 are turning out to be expensive in Three.js r76. I cannot create more than 14 of these (at mentioned resolution of 256x256 data points). I happen to need many but a limited amount of plane geometries, so I can continue to push against this limit but eventually I will need more memory for the PlaneGeometries. This bottleneck is GPU only, as this happens only on renderer.render call.