Sprite from buffer

[ephraimt]

I am trying to display an image that I get in the form of Uint8Array.

/*
width: 640,
height: 360,
data: Uint8Array(921600) [
     89,  72, 34, 255,  97,  80, 42, 255, 105,  93, 43, 255,
    117, 105, 55, 255, 117, 106, 49, 255, 110,  99, 42, 255,
    111,  98, 31, 255, 111,  98, 31, 255, 115, 107, 22, 255,
    117, 109, 24, 255, 119, 115, 16, 255, 117, 113, 14, 255,
    127, 121, 13, 255, 131, 125, 17, 255, 144, 126, 30, 255,
    146, 128, 32, 255, 143, 131, 35, 255, 135, 123, 27, 255,
    130, 112, 26, 255, 127, 109, 23, 255, 129, 103, 32, 255,
    126, 100, 29, 255, 125,  94, 28, 255, 123,  92, 26, 255,
    121,  80, 20, 255,
    ... 921500 more items
*/

const imageTexture = PIXI.Texture.fromBuffer(data, width, height);
const sprite = PIXI.Sprite(imageTexture);

Is there something else I have to do so that the Sprite displays the Texture?

If I create imageTexture using PIXI.Loader, then it works.

[ivan.popelyshev]

Welcome to the forums

Which version of PixiJS do you use? Your code should work, I need more details.

[ephraimt]

"pixi.js-legacy": "^5.2.0"

Using canvas renderer.

My alternate method of creating an image Sprite is to use PIXI.Loader and then to pass the resulting resource.data to PIXI.Texture.from().

That works fine, so it seems the difference is isolated to the creation of the texture.

[ivan.popelyshev]

Oh, right, fromBuffer() doesnt work with canvas2d. Whole TextureResource subsystem werent coded for it yet, because no one needed that. Now that you've asked for it , we can have that in two months or so, because it requires to code whole system for canvas and not just one "fromBuffer", and most of the team is busy.

Edited February 24, 2020 by ivan.popelyshev

[ephraimt]

Thanks!

I solved it by creating an <img> from the buffer (base64) and passing that to Texture.from().

[ephraimt]

2 hours ago, ivan.popelyshev said:

Now that you've asked for it , we can have that in two months or so, because it requires to code whole system for canvas and not just one "fromBuffer", and most of the team is busy.

I am not asking for it. There are probably more important things for the team to work on!

[ivan.popelyshev]

2 hours ago, ephraimt said:

I am not asking for it. There are probably more important things for the team to work on!

Well you are kind of second person who noticed that it doesnt work, so I added to some list... maybe it'll work in later versions

[louislourson]

Hi, I would love for fromBuffer() to be implemented with canvas2d. I tested it in 5.3.0 and it was working with webgl, but not with canvas. Is there an issue number I can follow ?

Thank you 

[Charles Horsey]

Hello, I just wanted to chime in that I also ran into this problem.  Is there another way to get a buffer full of color data into a texture?  I tried making a PIXI.Graphics and drawing a rectangle for each pixel, but it was too slow, no surprise I guess.

Thanks for all your work on Pixi!

[ivan.popelyshev]

>  Is there another way to get a buffer full of color data into a texture?

this thread is about "i dont know how to do it for canvas2d". If you dont need canvas2d, just use "Texture.fromBuffer"

[Charles Horsey]

Hi Ivan, I do need canvas2D.  While testing my game some people had problems because webGL isn't available on their computer for some reason.  So I started testing with pixi.js-legacy and webGL disabled, and so far everything works except for Texture.fromBuffer().

[ivan.popelyshev]

Make canvas, use putImageData , use Texture.from(myCanvas);

If you want  to use effective fromBuffer() in webgl case, you have to either use IF's, either dig into library and implement fromBuffer for canvas2d, make a PR, be a hero  

[Charles Horsey]

Thank you Ivan, that works and it's fast!  It seems to do fine whether webgl is enabled or not.