You must use a same-domain image.
GLSL
precision highp float;
uniform sampler2D u_image;
varying vec2 vTextureCoordinate;
mat4 achromatopsia = mat4(
0.21, 0.72, 0.07, 0,
0.21, 0.72, 0.07, 0,
0.21, 0.72, 0.07, 0,
0, 0, 0, 1
);
void main() {
vec4 source = texture2D(u_image, vTextureCoordinate);
vec4 target = source;
gl_FragColor = target;
}
JS
const achromatopsia = [
[0.21, 0.72, 0.07, 0],
[0.21, 0.72, 0.07, 0],
[0.21, 0.72, 0.07, 0],
[0, 0, 0, 1],
];
const result = Matrix.crossMultiplyMatrixVector(color, achromatopsia);
return result;
WGSL
z