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

问题描述

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

我正在使用pngtoy.js或UPNG.js加载3x16位rgb颜色+ 16位alpha通道PNG文件（都提供了我认为正确的相同值）。这是我所看到的：

我的WebGL2代码是基于gman过去的答案的，这些答案非常有用。我不知道该集中精力调查哪里出了问题。我花了一整天的时间在研究这个问题，因此，非常感谢在此寻找任何建议或指示！！！

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

// https://stackoverflow.com/a/57704283/1469613
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
    ]);
    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,"vertex");
    gl.linkProgram(program);
    gl.useProgram(program);
    gl.enableVertexAttribArray(0);
    gl.vertexAttribPointer(0,2,gl.FLOAT,false,0);
    gl.clear(gl.COLOR_BUFFER_BIT);
    gl.drawArrays(gl.TRIANGLES,6); // execute program
}

解决方法

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

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