Passing and using Uint8Array in fragment shader?

[Darker]

I kept searching the internets and I found this demo, which is exactly what I need - define a color pallete, a list of pixels, width and height and render it:

 

http://jsfiddle.net/greggman/cvADG/

 

The problem is this demo uses raw WebGL+some helper functions. I would like to go with Pixi.JS approach, which is better readable:

function CustomFilter(fragmentSource){    PIXI.AbstractFilter.call(this,        // vertex shader        null,        // fragment shader        fragmentSource,        // set the uniforms        {            pixels : {type : '???', value : new Uint8Array(100)},            colors : {type : '???', value : new Uint8Array(6)},            width  : {type : 'int', value : 10},            height : {type : 'int', value : 10},        }    );}

The problem is I don't know the following two things for start:

 

1.  What type name should I use for Uint8Array? And what type name will that be in GLSL?
2. How do I read the array values? How do I know at which pixel offset am I located, so that I know which one should I render?

Also there are other concerns, like:

 

1. How do I notify Pixi that an array offset has changed?

[xerver]

Depends how you want it represented in the shader.

You can look at:

https://github.com/pixijs/pixi.js/blob/master/src/core/renderers/webgl/shaders/Shader.js#L225

To see what types become what webgl types.

[Darker]

Actually I think I wanna use the array is a texture - which is 2Dshader I guess? This would allow me to access the elements through float offsets so that, if properly implemented, the game field would be easily scalable.

[xerver]

Actually I think I wanna use the array is a texture - which is 2Dshader I guess? This would allow me to access the elements through float offsets so that, if properly implemented, the game field would be easily scalable.

Yup, that is the correct way to do it. Unfortunately there is no easy data texture support in filters right now. It is something we plan to add though.

[Darker]

So I'll have to hack it in through original WebGL? Basically by copy-pasting the Fiddle I shared in the original post?

[xerver]

So I'll have to hack it in through original WebGL? Basically by copy-pasting the Fiddle I shared in the original post?

Or you could write a PR that adds data texture support

[Darker]

What is a PR? If I were to try to help implement this feature in Pixi, what advice can I get on that matter?

[xerver]

It is just a matter of adding support in the Shader.js syncUnifrom methods.

PR = Pull Request.

https://help.github.com/articles/using-pull-requests/

https://help.github.com/articles/creating-a-pull-request/