Cannot find a way to get the pixel data from texture or sprite.

[ben0bi]

Hello. I don't know if I miss something, but...

How can I get the raw pixel array of a texture? Every and every post talks about putting stuff onto a RenderTexture but there is absolutely no post about how to get the data from that texture.

I need the pixel data to output it with another protocol to a self made LED-strip-screen.

I render a RenderTexture with my whole output screen in the browser, create a sprite from it and add that to a new container, resize it to the LED-screen size and render it (scaled) to another RenderTexture....and now I am stuck by not getting this damn pixel data.

I post this as an issue because absolutely nowwhere is something about getting the data in a raw format. Only about PUTing data on the texture/sprite/container.

So, my request is: Please add a function RenderTexture.getPixelArray()/getRawData() or something like that. Or link me to the appropiate website where this is explained, I searched about 3 hours and found nothing.

[EDIT] there must be a webGL way, with NOT putting the stuff on a canvas and...so...on...don't you think?

Thanks in advance.
PIXI is great, just to say.

Regards,
ben0bi

[englercj]

Look at the WebGLExtract API:

https://github.com/pixijs/pixi.js/blob/master/src/extract/webgl/WebGLExtract.js

PIXI.extract.webGL.pixels(renderTexture)

[ben0bi]

Thank you very much. It would be great if this is referred in the docs, Texture-classes, with a link.

[ben0bi]

I get "Uncaught TypeError: Cannot read property 'webGL' of undefined"

Is that a v4 functionality or do I have to add the class manually?
I am using v3 right now.

Regards,
Beni Yager

[ivanpopelyshev]

That's how it works in V4:

renderer.extract.pixels(myContainer)

That's the code: https://github.com/pixijs/pixi.js/blob/master/src/extract/webgl/WebGLExtract.js#L126

I am not sure how did it work in V3, I'm looking at the code and just cant find it :( I remember there was something

[ben0bi]

Oh I see here, I do not need a second renderTexture to render the scaled container, seems like I can just use the container itself. (...pixels(container)), very nice very nice. downloading v4, looking if it works.

[closed for now ;) ]

[ivanpopelyshev]

Oh, there's something for V3:

var canvas = renderTexture.getCanvas();
var pixels = renderTexture.getPixels();

It is here: https://github.com/pixijs/pixi.js/blob/v3/src/core/textures/RenderTexture.js#L392

You need to render your stuff into renderTexture first.

[ben0bi]

a little bit of nice makes the spice. :) thanks.

[ivanpopelyshev]

Just remember that its a slow method. Every upload/download of texture from/to GPU is slow.

[ben0bi]

Yeah but I need the bytestream to output it to the LED array. Is extract faster?

[ivanpopelyshev]

No, its slow in general, in WebGL. You can do that may be one time per frame, but not more :) Also you don't have to call "renderer.render" if you only need that output. "pixels" has one inside.

[ivanpopelyshev]

How big is your LED?

[ben0bi]

The size of the LED screen should be adjustable, that is why I scale the output with a renderTexture + Sprite combination. It is fast enough each 10 frames for now. We can right now control about 300 LED without flickering (serial data speed issues), so the screen will not be really big, only look big because of big LEDs.

Really thanks for your help. I will post some photos or a utube video when it's done and working.

[ben0bi]

Here is the first image, proofing that it may work. 400x400 scaled down to 40x40 and then put out as html text image. (once)

Thanks, guys.

[lock]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.