Advice on alpha mask from array

[GreenSpiny]

Hi there!  I'm new to this forum, and somewhat new to PIXI.js.

I am making an alpha mask for a sprite, that is updated every frame (so it should be lightweight as possible).  The data is stored in an array, so if the array is

0 0 1 1

And applied to a 2x2 sprite, only half of the sprite will be visible.  As I see it, I have three options:

 

1. Draw many 1x1 PIXI.Rects onto a graphics object, and use it as the sprite mask

This is simple, but I imagine very inefficient with larger textures.  My intended size is 512 x 512, so that's 262144 Rects redrawn every frame.

2. Use WebGL to turn the array into a texture, create a sprite from the texture, and use the new sprite as the sprite mask

This seems good.  I have been able to make a WebGL texture from a Uint8Array with gl.ALPHA specified.

Quote

 

gl.createTexture();

gl.bindTexture(...code...);

gl.texImage2D(...code...)

 

However, once I get the resulting WebGL texture, I don't know how to convert it to a PIXI.Texture.

3. Use WebGL to turn the array into a texture, then apply a custom filter to the sprite using the texture as a uniform

This also seems good, but being inexperienced I've failed to correctly set up an additional sampler2D uniform.  I might get it to work eventually but it's just not there yet.  If you have an example, it might help.

 

So... what is the best approach?  And is there a way to create a PIXI.Texture from a WebGL texture? Thanks.

[ivan.popelyshev]

var maskSource = document.createElement("canvas");
var tex = PIXI.Texture.fromCanvas(maskSource);

function frame() {
    //fill maskSource
    maskSource.putImageData(foobarArray);
    tex.dirty = true;
}

Uniforms have limit, from 128 up to 1024 vector uniforms per device. What you need is a canvas and texture.

[GreenSpiny]

That is just what I needed!  Thanks.

And since I can draw to specific parts of a canvas, I don't need to update sections which didn't change last frame.  Cool.