如何使用WebGl在画布上呈现二进制数据？

Question

我正在使用PNaCl ffmpeg打开，读取和解码RTSP流。我现在有原始视频帧，我需要将其转移到WebGl以在画布上呈现。

如何在画布上渲染二进制数据？

我正在运行下面的代码：我认为我应该在运行此代码后得到一个灰色的画布，因为我将RGBA值（120,120,120,1）传递给合成数据。

var canvas = document.getElementById('canvas'); 
 

 
var gl = initWebGL(canvas); //function initializes webgl 
 

 
initViewport(gl, canvas); //initializes view port 
 

 
console.log('viewport initialized'); 
 

 
var data = []; 
 
for (var i = 0 ; i < 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 and height 
 
    0, // border 
 
    gl.RGBA, //format 
 
    gl.UNSIGNED_BYTE, // type 
 
    pixels // texture data 
 
); 
 

 
console.log('pixels'); 
 
console.log(pixels);

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

我应该得到一个灰色的16×16盒被代表在画布上，但我没有得到这一点。我需要采取哪些额外步骤才能在画布上正确呈现2D位图？

PS。我从this article获得帮助。

Console output:

Answer 1

正如指出的评论，阿尔法在WebGL的在你创建的纹理类型是0到255你在其中1.0 = 1/255或0.004

阿尔法投入

但最重要的是你说

我运行下面的代码：我相信我应该运行此代码

后获得灰色帆布

该代码对WebGL不够。 WebGL requires you to supply a vertex shader and fragment shader，顶点的顶点数据，然后调用gl.drawArrays或gl.drawElements来呈现一些东西。你提供的代码不会做那些事情，如果没有这些事情，我们不能说出你在做什么。

您也只提供mip级别0.您需要提供mips或设置纹理过滤，以便只使用第一级别，否则纹理将无法呈现（您将在JavaScript控制台中获得关于它的警告大多数浏览器）。

这里的工作示例

var canvas = document.getElementById('canvas'); 
 

 
var gl = canvas.getContext("webgl"); 
 

 
var data = []; 
 
for (var i = 0 ; i < 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 and height 
 
    0, // border 
 
    gl.RGBA, //format 
 
    gl.UNSIGNED_BYTE, // type 
 
    pixels // texture data 
 
); 
 
gl.generateMipmap(gl.TEXTURE_2D); // you need to do this or set filtering 
 

 
// compiles and links the shaders and looks up uniform and 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 for 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 we know we'll be passing in -1 to +1 for 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>