R16UI readpixels -> canvas2D

16 bit depth camera video frame -> R16UI texture attached to non-zero framebuffer -> readPixels -> WebGL canvas is not visible and it is used only for texImage2D(video...) and readPixels. Shaders code is redundant - I didn't spend time on cleaning up the code. 2D canvas is used to render the data received via gl.readPixels.

by astojilj

HTML

<h2>HTML5 16 bit Depth Capture WebGL, R16UI -> readPixels Test</h2>

  <div class="select">
    <label for="audioSource">Audio source: </label><select id="audioSource"></select>
  </div>

  <div class="select">
    <label for="videoSource">Video source: </label><select id="videoSource"></select>
  </div>
  
gl.readpixels from texture (R16UI) put to 2D canvas<br>
<canvas id="canvas2D" width="640" height="360" style="border:1px solid #CCCCCC;"></canvas>
<div id="implementationFormatType"></div>

JavaScript

var canvas = document.createElement("canvas");
 
    canvas.width = 1;
    canvas.height = 1;
    var gl = null;
    for (var i=0; i<5; i++)
    {
        gl = canvas.getContext(["webgl2","webgl","experimental-webgl","moz-webgl","webkit-3d"][i])
        if (gl)
            break;
    }
    var color_buffer_float_ext = gl.getExtension('EXT_color_buffer_float');

    // prepare WebGL
    gl.enable(gl.BLEND);
    gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);

    var vs = gl.createShader(gl.VERTEX_SHADER);
    gl.shaderSource(vs, "attribute vec2 vx;varying vec2 tx;void main(){gl_Position=vec4(vx.x*2.0-1.0,1.0-vx.y*2.0,0,1);tx=vx;}");
    gl.compileShader(vs);

    var ps = gl.createShader(gl.FRAGMENT_SHADER);
    gl.shaderSource(ps, "precision mediump float;uniform sampler2D sm;varying vec2 tx;void main(){gl_FragColor=texture2D(sm,tx);}");
    gl.compileShader(ps);

    var shader  = gl.createProgram();
    gl.attachShader(shader, vs);
    gl.attachShader(shader, ps);
    gl.linkProgram(shader);
    gl.useProgram(shader);

    var vx_ptr = gl.getAttribLocation(shader, "vx");
    gl.enableVertexAttribArray(vx_ptr);
    gl.uniform1i(gl.getUniformLocation(shader, "sm"), 0);

    var vx = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, vx);
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([0,0, 1,0, 1,1, 0,1]), gl.STATIC_DRAW);

    var ix = gl.createBuffer();
    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, ix);
    gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array([0,1,2, 0,2,3]), gl.STATIC_DRAW);

    var tex = gl.createTexture();
    gl.bindTexture(gl.TEXTURE_2D, tex);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T,     gl.CLAMP_TO_EDGE);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S,     gl.CLAMP_TO_EDGE);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);-
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);

// framebuffer for reading texture
    var fb = gl.createFramebuffer();
   ...