Three.js, 256 × 256 PNG-Texturen Crash-Chrom-Tab

Question

Lädt 256x256 Texturen in Three.js-Materialien, die dann für die Verformung der Flugzeuggeometrie verwendet werden. Ein Flaschenhals bei der 15. Textur. Chrome stürzt anscheinend beim Render-Aufruf ab. Wenn jedes Mesh zur Szene hinzugefügt wird, rufe ich den Aufruf von renderer.render auf, aber die Sequenz ist ziemlich eng, also glaube ich, dass der GPU-Bus überfordert sein könnte. Es ist schwer zu glauben, dass eine kleine Anzahl solcher kleinen Texturen ausreicht, um dies zu verursachen. CPU-Speicher ist kein Problem, da Texturen in CPU geladen werden und wenn Meshes nicht zur Szene hinzugefügt werden, gibt es keinen Absturz. Außerdem gibt es eine erhebliche Verzögerung, während die Texturen von CPU zu GPU kopiert werden.

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 erweisen sich in Three.js R76 teuer. Ich kann nicht mehr als 14 davon erstellen (bei der genannten Auflösung von 256x256 Datenpunkten). Ich brauche zwar viele, aber eine begrenzte Anzahl von Ebenengeometrien, so dass ich weiter gegen diese Grenze vorgehen kann, aber irgendwann werde ich mehr Speicherplatz für die PlaneGeometries benötigen. Dieser Engpass ist nur GPU, da dies nur beim Aufruf von renderer.render geschieht.