如何使用 WebGL2 修复此 16 位 RGBA PNG 的显示？

Question

我正在尝试在 WebGL2 中使用每通道 16 位 RGBA 数据（以及后来的 RGB 数据）。我无法正确显示来自 PngSuite 的参考图像之一，如果有人可以看一下，我将永远感激不已。

我正在使用 pngtoy.js 或 UPNG.js 加载一个 3x16 位 rgb 颜色 + 16 位 alpha 通道 PNG 文件（两者给出相同的值，我认为是正确的）。这是我看到的：

我的 WebGL2 代码是基于 gman 过去的答案，这些答案非常有帮助。我不知道该把重点放在哪里去调查我哪里出错了。我花了一整天的时间查看此内容，因此非常感谢任何建议或指示！！！！

https://jsfiddle.net/mortac8/yq2tfe97/13/
（为顶部带有内联资源的混乱 jsfiddle 道歉）

// 
function addWebgl(canvas, gl, img, w, h) {
    var program = gl.createProgram();

    // texture
    var tex = gl.createTexture(); // create empty texture
    gl.bindTexture(gl.TEXTURE_2D, tex);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
    gl.texImage2D(
        gl.TEXTURE_2D, // target
        0, // mip level
        gl.RGBA16UI, // internal format -> gl.RGBA16UI
        w, h, // width and height
        0, // border
        gl.RGBA_INTEGER, //format -> gm.RGBA_INTEGER
        gl.UNSIGNED_SHORT, // type -> gl.UNSIGNED_SHORT
        img // texture data
    );

    // buffer
    var buffer = gl.createBuffer();
    var bufferData =  new Float32Array([
        -1, -1,
         1, -1,
         1,  1,               
         1,  1,
        -1,  1,
        -1, -1
    ]);
    gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
    gl.bufferData(gl.ARRAY_BUFFER, bufferData, gl.STATIC_DRAW);

    // shaders
    program.vs = gl.createShader(gl.VERTEX_SHADER);
    gl.shaderSource(program.vs, `#version 300 es
    in vec4 vertex; // incoming pixel input?
    out vec2 pixelCoordinate; // variable used to pass position to fragment shader
    void main(){
        gl_Position = vertex;  // set pixel output position to incoming position (pass through)
        pixelCoordinate = vertex.xy*0.5+0.5; // set coordinate for fragment shader
        pixelCoordinate.y = 1.0 - pixelCoordinate.y; //flip
    }
    `);

    program.fs = gl.createShader(gl.FRAGMENT_SHADER);
    gl.shaderSource(program.fs, `#version 300 es
    precision highp float; // ?
    uniform highp usampler2D tex; // ?
    in vec2 pixelCoordinate; // receive pixel position from vertex shader
    out vec4 fooColor;
    void main() {
        uvec4 unsignedIntValues = texture(tex, pixelCoordinate);
        vec4 floatValues0To65535 = vec4(unsignedIntValues);
        vec4 colorValues0To1 = floatValues0To65535 / 65535.0;
        fooColor = colorValues0To1;
    }
    `);

    gl.compileShader(program.vs);
    checkCompileError(program.vs);
    gl.compileShader(program.fs);
    checkCompileError(program.fs);

    function checkCompileError(s) {
    if (!gl.getShaderParameter(s, gl.COMPILE_STATUS)) {
    console.error(gl.getShaderInfoLog(s));
    }
    }

    gl.attachShader(program,program.vs);
    gl.attachShader(program,program.fs);

    gl.deleteShader(program.vs);
    gl.deleteShader(program.fs);

    // program
    gl.bindAttribLocation(program, 0, "vertex");
    gl.linkProgram(program);
    gl.useProgram(program);
    gl.enableVertexAttribArray(0);
    gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);
    gl.clear(gl.COLOR_BUFFER_BIT);
    gl.drawArrays(gl.TRIANGLES, 0, 6); // execute program
}

Answer 1

默认情况下，webgl 上下文使用 premultiplied alpha，禁用它可以解决您的问题。

var myCtx = myCv.getContext('webgl2', { premultipliedAlpha: false });

如何使用 WebGL2 修复此 16 位 RGBA PNG 的显示？

How can I fix the display of this 16-bit RGBA PNG using WebGL2?

png

image-processing

16-bit

webgl

webgl2