WebGL Uniform Argument Type - glsl

Question

I am attempting to write a WebGL image filter using the PixiJS library. My filter should take an array of arrays, where each inner array represents a possible pixel color. The function will then decide which element in the outer array to use.
I have managed to write a simple GLSL function which takes a single color array as a "uniform" argument, however I can't figure out how to pass the nested array. Could you point me to the proper type declaration to accept a nested array of floats from this snippet?
var fragmentSrc = [
"uniform vec4 colorList;", // WHAT TYPE DO I NEED HERE TO PASS THE ARRY IN THE COMMENT BELOW?
"void main() {",
" float GrayScale = (gl_FragCoord.r * 299.0 / 1000.0) + (gl_FragCoord.g * 587.0 / 1000.0) + (gl_FragCoord.b * 114.0 / 1000.0);",
" float sigmoidThreshold = 1.0 / (1.0 + pow(2.7182818284590452353602874713527, (-((GrayScale - 128.0) /32.0))));",
" gl_FragColor = colorList;",
"}",
];
var renderer = PIXI.autoDetectRenderer(750, 750);
document.body.appendChild(renderer.view);
var stage = new PIXI.Container();
function CustomFilter(fragmentSource) {
PIXI.Filter.call(this,
null,
fragmentSource
);
}
CustomFilter.prototype = Object.create(PIXI.Filter.prototype);
CustomFilter.prototype.constructor = CustomFilter;
var bg = new PIXI.Graphics();
bg.drawRect(0, 0, 375, 375);
bg.endFill();
stage.addChild(bg);
var filter = new CustomFilter(fragmentSrc.join('\r\n'));
filter.uniforms.colorList = [1.0, 1.0, 0.0, 1.0] // WANT TO PASS AN ARRAY OF ARRAYS LIKE:
// [[1.0, 1.0, 0.0, 1.0], [0.0, 0.0, 1.0, 1.0]]
bg.filters = [filter];
renderer.render(stage);
<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.5.1/pixi.min.js"></script>
var fragmentSrc = [
"uniform vec4 colorList;", // WHAT TYPE DO I NEED HERE TO PASS THE ARRY IN THE COMMENT BELOW?
"void main() {",
" float GrayScale = (gl_FragCoord.r * 299.0 / 1000.0) + (gl_FragCoord.g * 587.0 / 1000.0) + (gl_FragCoord.b * 114.0 / 1000.0);",
" float sigmoidThreshold = 1.0 / (1.0 + pow(2.7182818284590452353602874713527, (-((GrayScale - 128.0) /32.0))));",
" gl_FragColor = colorList;",
"}",
];

Answer 1

I changed the code to this
var fragmentSrc = `
uniform vec4 colorList[10];
void main() {
float GrayScale = (gl_FragCoord.r * 299.0 / 1000.0) + (gl_FragCoord.g * 587.0 / 1000.0) + (gl_FragCoord.b * 114.0 / 1000.0);
float sigmoidThreshold = 1.0 / (1.0 + pow(2.7182818284590452353602874713527, (-((GrayScale - 128.0) /32.0))));
gl_FragColor = colorList[9];
}
`;
var filter = new CustomFilter(fragmentSrc);
console.log(filter.uniforms);
And it prints
so this works
filter.uniforms.colorList = [
1, 0, 0, 0, // 0
1, 1, 0, 0, // 1
0, 1, 0, 0, // 2
0, 1, 1, 0, // 3
0, 0, 1, 0, // 4
1, 0, 1, 0, // 5
.5, 0, 0, 0, // 6
0, .5, 0, 0, // 7
1, 1, 0, 1, // 8
.5, .5, .7, 1., // 9
];
and this
filter.uniforms.colorList = new Float32Array([
1, 0, 0, 0, // 0
1, 1, 0, 0, // 1
0, 1, 0, 0, // 2
0, 1, 1, 0, // 3
0, 0, 1, 0, // 4
1, 0, 1, 0, // 5
.5, 0, 0, 0, // 6
0, .5, 0, 0, // 7
1, 1, 0, 1, // 8
.5, .5, .7, 1., // 9
]);
etc...
If you really want an array of arrays in JavaScript you can do this to make ArrayBufferViews into the larger array
const colorValues = [];
for (let i = 0; i < filter.uniforms.colorList.length; i += 4) {
const buffer = filter.uniforms.colorList.buffer;
const byteOffset = i * Float32Array.BYTES_PER_ELEMENT;
const length = 4;
colorValues.push(new Float32Array(buffer, byteOffset, length));
}
now you can set an array element like this
colorValues[9].set([1, 1, 0, 1]);
var fragmentSrc = `
uniform vec4 colorList[10]; // WHAT TYPE DO I NEED HERE TO PASS THE ARRY IN THE COMMENT BELOW?
void main() {
float GrayScale = (gl_FragCoord.r * 299.0 / 1000.0) + (gl_FragCoord.g * 587.0 / 1000.0) + (gl_FragCoord.b * 114.0 / 1000.0);
float sigmoidThreshold = 1.0 / (1.0 + pow(2.7182818284590452353602874713527, (-((GrayScale - 128.0) /32.0))));
gl_FragColor = colorList[9];
}
`;
var renderer = PIXI.autoDetectRenderer(750, 750);
document.body.appendChild(renderer.view);
var stage = new PIXI.Container();
function CustomFilter(fragmentSource) {
PIXI.Filter.call(this,
null,
fragmentSource
);
}
CustomFilter.prototype = Object.create(PIXI.Filter.prototype);
CustomFilter.prototype.constructor = CustomFilter;
var bg = new PIXI.Graphics();
bg.drawRect(0, 0, 375, 375);
bg.endFill();
stage.addChild(bg);
var filter = new CustomFilter(fragmentSrc);
const colorValues = [];
for (let i = 0; i < filter.uniforms.colorList.length; i += 4) {
const buffer = filter.uniforms.colorList.buffer;
const byteOffset = i * Float32Array.BYTES_PER_ELEMENT;
const length = 4;
colorValues.push(new Float32Array(buffer, byteOffset, length));
}
colorValues[9].set([1, 1, 0, 1]);
bg.filters = [filter];
renderer.render(stage);
<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.5.1/pixi.min.js"></script>