Three.js toDataURL blank

Question

Wenn ich versuche, ein Bild von einem three.js zu speichern WebGL es völlig leer kommt aus machen, aber es hat eine Tonne Zeichen zurück:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAK8AAADICAYAAACeY7GXAAADt0lEQ…IF4M2+znB4GcgWgDf7OsPhZSBbAN7s6wyHl4FsAXizrzP8AS/TAMmecuTCAAAAAElFTkSuQmCC 

Ich habe tun, um das preserveDrawingBuffer Set true etwa so:

renderer = new THREE.WebGLRenderer({ 
    alpha: true, 
    antialias: true, 
    preserveDrawingBuffer: true 
}); 

Und das ist, wie ich die toDataURL nenne:

var getImageData = false; 
function render() { 

      //camera.position.x += (mouseX - camera.position.x) * .005; 
      //camera.position.y += (- mouseY - camera.position.y) * .005; 

      camera.lookAt(scene.position); 

      renderer.render(scene, camera); 
      if(getImageData == true){ 
       imgData = renderer.domElement.toDataURL("image/png"); 
       window.setTimeout(10); 
       console.log(imgData); 
       getImageData = false; 
      } 
      requestAnimationFrame(render); 
     } 


      getImageData = true; 

Und hier ist die was sieht die Leinwand wie vor zu einem Bild gerendert:

Leinwand

CanvasCode

<canvas width="175" height="200" style="width: 175px; height: 200px"></canvas> 

Ehrlich gesagt bin ich nicht sicher, was anderes als andere zu sagen haben, irgendwelche Ideen, warum das Bild kommt als völlig leer? Die Funktion render() ist die allerletzte Funktion am Ende des Codes.

Answer 1

WebGL ist eine asynchrone API. Daher müssen Sie entweder gl.finish() hinzufügen (was die Leistung verschlechtern kann), bevor Sie toDataUrl() anrufen oder beim nächsten Frame anrufen. Tun Sie so zum Beispiel können setTimeout verwenden (Sie haben das, aber es falsch zu tun):

if(getImageData == true) { 
    window.setTimeout(function() { 
     imgData = renderer.domElement.toDataURL("image/png"); 
     console.log(imgData); 
    }, 100); 
    getImageData = false; 
}