如何在three.js 中切换preserveDrawingBuffer？答案

【问题标题】：How to toggle preserveDrawingBuffer in three.js?如何在three.js 中切换preserveDrawingBuffer？
【发布时间】：2015-08-18 03:12:14
【问题描述】：

基本上，我想要的设置是preserveDrawingBuffer=true，渲染一次场景，抓取屏幕截图，然后返回。然而，这带来了两个问题：

渲染器中没有处理所有缓冲区的方法，
如果我这样做，画布会变黑

renderer = new THREE.WebGLRenderer({canvas:renderer.domElement,preserveDrawingBuffer:true});

我该如何正确地做到这一点？

编辑：我没有找到切换它的方法，所以我不得不克隆场景并创建第二个渲染器来制作屏幕截图。见https://github.com/mrdoob/three.js/issues/189

【问题讨论】：

为什么要切换它？
正如 gaitat 所问，为什么需要切换它？您不需要 preserveDrawingBuffer=true 来抓取屏幕截图。
preserveDrawingBuffer=true 会导致某些机器上的渲染错误，preserveDrawingBuffer=false 会使屏幕截图全黑
我相信@gman 是正确的。将preserveDrawingBuffer 设置为false，尝试立即重新渲染，如下所示：renderer.render( scene, camera ); var dataUrl = renderer.domElement.toDataURL( "image/jpeg" );

标签： javascript three.js

【解决方案1】：

我也遇到过这个问题。我的截图在threejs webgl画布中是空白的，因为没有设置renderer = new THREE.WebGLRenderer({canvas:renderer.domElement,preserveDrawingBuffer:true});, 这是我切换 preserveDrawingBuffer 的方法。

let canvas = this.renderer.domElement;
    canvas.getContext('webgl' , {preserveDrawingBuffer: true});
this.render();
var data = {
  image: canvas.toDataURL(),
};
canvas.getContext('webgl' , {preserveDrawingBuffer: false});

【讨论】：

哪个浏览器会改变 CanvasContext 的初始化选项？如果它确实可以在您的某个浏览器上运行，那就是一个错误。（Ps：在osX上用FF和Chrome试过了，还是不行。）
是的，我错了，你是对的，上下文只能先初始化，不能再改变了，在我的情况下，“this.render()”可以解决我的问题，我会继续调查解决方案。

【解决方案2】：

您不需要preserveDrawingBuffer: true 来截取屏幕截图。您需要的是在渲染后立即截取屏幕截图。只要您在渲染之后但在退出当前事件之前截取屏幕截图，它就可以保证正常工作。

例如，这将始终有效

renderer.render( scene, camera );
var screenshot = renderer.domElement.toDataURL();

如果你运气好，这只会随机工作

someElement.addEventListener('click', function() {
   // this is not immediately after rendering. you have no
   // idea when it is relative to rendering.
   var screenshot = renderer.domElement.toDataURL();
});

大多数 THREE.js 示例都有一个渲染功能，如果您需要在用户请求截屏时截屏，您可以这样做

someElement.addEventListener('click', function() {
   render();
   var screenshot = renderer.domElement.toDataURL();
});

或者你可以这样做

var takeScreenshot;

function render() {
   ...
   if (takeScreenshot) {
     takeScreenshot = false;
     var screenshot = renderer.domElement.toDataURL();
   }
}

someElement.addEventListener('click', function() {
   takeScreenshot = true;
});

或任何其他方式来确保您在渲染后立即截取屏幕截图。

【讨论】：

你有“保证工作，只要你在渲染之后但在退出当前事件之前”的来源吗？我很好奇 WebGL 规范是否确实保证了这一点。