javascript - How to render binary data on canvas using WebGl? -

i using pnacl ffmpeg open, read , decode rtsp stream. having raw video frames need transfer webgl render on canvas.

how can render binary data on canvas?

i running following code: presume should grey canvas after running code, because passing rgba values of (120,120,120,1) synthetic data.

var canvas = document.getelementbyid('canvas');    var gl = initwebgl(canvas); //function initializes webgl    initviewport(gl, canvas); //initializes view port    console.log('viewport initialized');    var data = [];  (var = 0 ; < 256; i++){    data.push(120,120,120,1.0);  }    console.log(data);    var pixels = new uint8array(data); // 16x16 rgba image  var texture = gl.createtexture();    gl.bindtexture(gl.texture_2d, texture);  gl.teximage2d(    gl.texture_2d, // target    0, // mip level    gl.rgba, // internal format    16, 16, // width , height    0, // border    gl.rgba, //format    gl.unsigned_byte, // type    pixels // texture data  );    console.log('pixels');  console.log(pixels);

<canvas id="canvas"></canvas>

i should grey 16x16 box being represented on canvas, not getting that. additional steps need take correctly render 2d bitmap on canvas?

ps. taking this article.

console output:

as pointed out in comments, alpha in webgl in type of texture you're creating 0 255. you're putting in 1.0 = 1/255 or alpha of 0.004

but on top of say

i running following code: presume should grey canvas after running code

that code not enough webgl. webgl requires supply vertex shader , fragment shader, vertex data vertices , call either gl.drawarrays or gl.drawelements render something. code provided doesn't things , without things can't tell else you're doing.

you're supplying mip level 0. either need supply mips or set texture filtering first level used otherwise texture unrenderable (you'll warning in javascript console of browsers).

here's working example

var canvas = document.getelementbyid('canvas');    var gl = canvas.getcontext("webgl");    var data = [];  (var = 0 ; < 256; i++){    data.push(120,120,120,255);  }    var pixels = new uint8array(data); // 16x16 rgba image  var texture = gl.createtexture();    gl.bindtexture(gl.texture_2d, texture);  gl.teximage2d(    gl.texture_2d, // target    0, // mip level    gl.rgba, // internal format    16, 16, // width , height    0, // border    gl.rgba, //format    gl.unsigned_byte, // type    pixels // texture data  );  gl.generatemipmap(gl.texture_2d);  // need or set filtering    // compiles , links shaders , looks uniform , attribute locations  var programinfo = twgl.createprograminfo(gl, ["vs", "fs"]);  var arrays = {    position: [       -1, -1, 0,         1, -1, 0,        -1,  1, 0,        -1,  1, 0,         1, -1, 0,         1,  1, 0,    ],  };  // calls gl.createbuffer, gl.bindbuffer, gl.bufferdata each array  var bufferinfo = twgl.createbufferinfofromarrays(gl, arrays);    var uniforms = {    u_texture: texture,  };    gl.useprogram(programinfo.program);  // calls gl.bindbuffer, gl.enablevertexattribarray, gl.vertexattribpointer  twgl.setbuffersandattributes(gl, programinfo, bufferinfo);  // calls gl.activetexture, gl.bindtexture, gl.uniformxxx  twgl.setuniforms(programinfo, uniforms);  // calls gl.drawarrays or gl.drawelements  twgl.drawbufferinfo(gl, gl.triangles, bufferinfo);

canvas { border: 1px solid black; }

<script id="vs" type="notjs">  attribute vec4 position;    varying vec2 v_texcoord;    void main() {    gl_position = position;      // since know we'll passing in -1 +1 position    v_texcoord = position.xy * 0.5 + 0.5;  }    </script>    <script id="fs" type="notjs">  precision mediump float;    uniform sampler2d u_texture;    varying vec2 v_texcoord;    void main() {    gl_fragcolor = texture2d(u_texture, v_texcoord);  }    </script>    <script src="https://twgljs.org/dist/twgl.min.js"></script>    <canvas id="canvas"></canvas>