WebGL2 texelFetch'ing a texture unexpected results

Question

I have created a 1x1 texture with the parameters gl.R8, gl.RED, gl.UNSIGNED_BYTE to gl.texImage2D.

I imagine that this will essentially just create a 1 byte buffer.

Now I want to access this 1 byte buffer in my fragment shader, using texelFetch, however I do not get the 1 byte that I uploaded.

I have created a bare-bones example illustrating my problem: 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);

In essence, when I texelFetch my texture that I uploaded the value "1" to, it returns some non-zero number that is not 1. The only property that I could deduce of this returned value is that val&0x01000000 returns true. But, not even val==0x01000000 returns true, which is a little confusing.

What am I doing wrong?

Answer 1

You're using the wrong internal format. GL_R8 represents float whereas GL_R8UI represents unsigned int . You're equally also using the wrong format. Here you likewise need to use GL_RED_INTEGER (same reason as before).

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

You also have to set the filtering to GL_NEAREST .

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