javascript - three.js how can speed up renderer.domelement.todataurl?

Question

I use three.js renderer.domelement.todataurl to get the image of current view. It works fine. The problem is my project need capture the image in high frequent, every 0.1 second.

under this frequent , browse almost freeze, user can not do anything. As function todataurl() occupy most cpu time.

any suggestion is welcome.

my think is: 1) find another way to capture image, avoid todataurl()? 2) put renderer in web worker?

Thank you.

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);

然后，您可以在工作人员中使用像素数组来执行更多操作。或者将像素的转换延迟到以后。

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

如果有任何机会，您正在使用 canvasrenderer，那么您应该使用 context.getImagedata。