Get pixel data for threejs canvas getImageData()

Hello. I am getting errors calling getImageData.

Is there a way to capture the 2D pixel data of a threejs canvas?

I am trying to grab the pixels of the threejs canvas and paste it over another 2D canvas to generate the thumbnail I want to save.

I believe getImageData is not happy with a wegbl or wegbl2 canvas.

I suspect there is an easy solution to this but I can’t seem to find it.

If you want to extract data from a canvas, you have to set the WebGL context parameter preserveDrawingBuffer to true. Are you already doing this?

What errors?

oh yes that blast preserveDrawingBuffer ahhhhhh thanks

Hey I have been trying to do the same for long. Could you share what you have done?


preserveDrawingBuffer = true

makes your application too slow, you can try alternatively converting canvas.image to base64, in a function ejecuted right after renderer.render(). @tfoller shared a clever demo of this a couple months ago, here is the link