☑ How to get pixel data of application-canvas?

[Ryotaro.TSUDA]

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.

[steven]

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

[Leonidas]

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:

Save specific rendered entities to image

@max is it possible to render specific elements to some offscreen canvas? I would like to take a screenshot of the current without GUI elements. With my current code I get a flickering for some milliseconds as I am enabling/disabling entities on the main canvas. I am doing something like this: this.enableGUIEntities(false); window.setTimeout(function(){ this.renderToTexture(function(base64){ this.enableGUIEntities(true); downloadImage(base64); }.bind(this) …

[Ryotaro.TSUDA]

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.

[Leonidas]

@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.