☑ How to get pixel data of application-canvas?


#1

Hi.

I want to get all pixel data of canvas.
But webgl readpixels is always returning 0,0,0,0

code :

var canvas = this.app.graphicsDevice;
var gl = this.app.graphicsDevice.gl;
var pixels = new Uint8Array(window.innerWidth * window.innerHeight * 4);
gl.readPixels(0, 0, window.innerWidth, window.innerHeight, gl.RGBA, gl.UNSIGNED_BYTE, pixels);
console.log(pixels) // return all [0,0,0,0]...

//using getElement is also situation the same as before
var canvas = document.getElementById('application-canvas');
var gl = canva.getContext("experimental-webgl", {preserveDrawingBuffer: true});
var pixels = new Uint8Array(window.innerWidth * window.innerHeight * 4);
gl.readPixels(0, 0, window.innerWidth, window.innerHeight, gl.RGBA, gl.UNSIGNED_BYTE, pixels);
console.log(pixels) // return all [0,0,0,0]...

Is it wrong ?
Please tell me how to get pixel data.


#2

Silly question: Have you enabled ‘Preserve drawing buffer’ in the project settings?


#3

If you want to avoid preserving the drawing buffer for performance reasons check this thread on how to render on texture and grab pixel data from there:


#4

Thank you @Leonidas
I was successful to get pixel data using your code.

A cause of the issue is I was to get pixel data without colorbuffer.


#5

@Ryotaro.TSUDA just be careful to follow the advice of @max and remove the timeouts, so everything can happen in sync. As well as his performance advice for pre-allocating whatever is possible.