WebGL2 texel获取纹理意想不到的结果

Question

我创建了一个1x1纹理，参数gl.R8，gl.RED，gl.UNSIGNED_BYTE到gl.texImage2D。

我想这基本上只是创建一个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); 

在本质上，当我texelFetch我的纹理我上传的值“1”时，它返回一些非零数不是1.我可以推导出这个返回值的唯一属性是val & 0x01000000返回true。但是，甚至没有val == 0x01000000返回true，这有点令人困惑。

我在做什么错？

Answer 1

您正在使用错误的内部格式。 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);