Three.js toDataUrl пустой

Question

При попытке сохранить изображение из three.js WebGL делают это выходит совершенно пустой, но она возвращает тонны символов:

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

У меня есть набор preserveDrawingBuffer истина, как так:

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

И это, как я называю toDataUrl:

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; 

И вот что полотно выглядит до визуализации к изображению:

Холст

CanvasCode

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

Честно говоря, я не уверен, что еще сказать, кроме, какие-либо идеи относительно того, почему изображение подходит как совершенно пустой? Функция render() - это последняя вещь в нижней части кода.

Answer 1

WebGL - это асинхронный API. Таким образом, вам нужно либо добавить gl.finish() (который может ухудшить производительность), прежде чем звонить toDataUrl() или вызвать его на следующем кадре. Для этого вам, например, можно использовать setTimeout (у Вас есть что, но делать это неправильно):

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