0

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.

max
  • 146
  • 1
  • 8

1 Answers1

1

First of all, it is not recommended to read pixels that fast. It isn't even recommended in normal desktop applications.

If you have to, I would suggest you use gl.readpixels. That should be the fastest way to read pixels in javascript. Also reduce the width and height as much as you can to allow faster reading.

how to use:

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

You could then use the pixels array in a worker to execute more with it. Or delay transformation of the pixels until a later date.

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

If by any chance, you are using canvasrenderer, then you should be using context.getImagedata.

Gero3
  • 2,817
  • 1
  • 22
  • 21
  • Docs here: https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/readPixels Also note you can use gl.RGB to reduce the total data copied. – Ian Danforth May 03 '16 at 00:40