three.js如何加快renderer.domelement.todataurl？

Question

我使用three.js renderer.domelement.todataurl来获取当前视图的图像。它工作正常。 问题是我的项目需要每0.1秒以高频率捕获图像。

根据这种频繁，浏览几乎冻结，用户无能为力。函数todataurl（）占用大部分cpu时间。

欢迎提出任何建议。

我的想法是： 1）找到另一种捕获图像的方法，避免使用todataurl（）？ 2）将渲染器放在web worker中？

谢谢。

Answer 1

首先，不建议快速读取像素。在普通桌面应用程序中甚至不建议使用它。

如果必须，我建议你使用gl.readpixels。这应该是在javascript中读取像素的最快方法。同时尽量减小宽度和高度，以便更快地阅读。

使用方法：

var pixels = new Uint8Array(width * height * 4);
renderer.gl.readPixels(x, y, width, height, gl.RGBA, gl.UNSIGNED_BYTE, pixels);

然后，您可以使用worker中的像素数组来执行更多操作。或延迟像素转换直到以后的日期。

=============================================== ===

如果有任何机会，你使用的是canvasrenderer，那么你应该使用context.getImagedata。