如何使用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>