javascript - WebGL2 texelFetch'ing纹理意外结果

我已经使用gl.R8，gl.RED，gl.UNSIGNED_BYTE和gl.texImage2D创建了一个1x1纹理。

我想这实际上只会创建一个1字节的缓冲区。

现在，我想使用texelFetch访问片段着色器中的1个字节缓冲区，但是我没有得到上载的1个字节。

我创建了一个简单的例子来说明我的问题：https://jsfiddle.net/w5hp18e0/7/

//Absolutely no error checking for clarity

var canvas=document.getElementById('canvas');
var gl=canvas.getContext('webgl2');
gl.clearColor(0,0,0,1);
gl.clear(gl.COLOR_BUFFER_BIT);

//Vertex shader
var vtx_so=gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vtx_so,`#version 300 es
in vec4 a_pos;
void main(){
    gl_Position=a_pos;
}`);
gl.compileShader(vtx_so);

//Fragment shader
var frg_so=gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(frg_so,`#version 300 es
precision mediump float;
precision mediump usampler2D;
uniform usampler2D u_samp;
out vec4 o_color;
void main(){
    // README
  uint val=texelFetch(u_samp,ivec2(0,0),0).x;
    // replace false with true in desired location
    if(false){
    // set to red IF val != 0
    if(val!=0u)
        {o_color=vec4(1.,0.,0.,1.);}
  }else if(false){
    // set to red IF val == 1
    if(val==1u)
        {o_color=vec4(1.,0.,0.,1.);}
  }else if(false){
    // set to red IF val & 0x01000000
    if((val&0x01000000u)!=0u)
        {o_color=vec4(1.,0.,0.,1.);}
  }else if(false){
    // set to red IF val == 0x01000000
    if(val==0x01000000u)
        {o_color=vec4(1.,0.,0.,1.);}
  }
}`);
gl.compileShader(frg_so);
console.log(gl.getShaderInfoLog(frg_so));

//Program
var prog=gl.createProgram();
gl.attachShader(prog,vtx_so);
gl.attachShader(prog,frg_so);
gl.linkProgram(prog);
gl.useProgram(prog);

//Verticies
var vao=gl.createVertexArray();
gl.bindVertexArray(vao);
var vbo=gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER,vbo);
gl.bufferData(gl.ARRAY_BUFFER,new Float32Array([
    0,0,0,1,1,1,1,1,1,0,0,0,
]),gl.STATIC_DRAW);
var loc=gl.getAttribLocation(prog,'a_pos');
gl.vertexAttribPointer(loc,2,gl.FLOAT,false,0,0);
gl.enableVertexAttribArray(loc);

//Texture
var tex=gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D,tex);
gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_MAX_LEVEL,0);
var tex_buf=new Uint8Array(1);
// README
tex_buf[0]=1; // set me to some 8-bit value
gl.texImage2D(gl.TEXTURE_2D,0,gl.R8,1,1,0,gl.RED,gl.UNSIGNED_BYTE,tex_buf);

//Sampler
loc=gl.getUniformLocation(prog,'u_samp');
gl.uniform1i(loc,0);

gl.activeTexture(gl.TEXTURE0);
gl.bindTexture(gl.TEXTURE_2D,tex);
gl.drawArrays(gl.TRIANGLES,0,6);

本质上，当我将值“ 1”上传到我的texelFetch时，它返回一些非零的数字，而不是1。唯一可以推断出此返回值的属性是val＆0x01000000返回true。但是，甚至val == 0x01000000都不返回true，这有点令人困惑。

我究竟做错了什么？

最佳答案

您使用了错误的内部格式。 GL_R8代表float，而GL_R8UI代表unsigned int。您同样也使用了错误的格式。在这里，您同样需要使用GL_RED_INTEGER（与之前相同的原因）。

gl.texImage2D(gl.TEXTURE_2D, 0, gl.R8UI, 1, 1, 0, gl.RED_INTEGER, gl.UNSIGNED_BYTE, tex_buf);

您还必须将过滤设置为GL_NEAREST。

gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);