Get pixel data for threejs canvas getImageData()

Questions
#1

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.

#2

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?

#3

oh yes that blast preserveDrawingBuffer ahhhhhh thanks

#4

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

#5

If

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