javascript - 如何使用 WebGl 在 Canvas 上呈现二进制数据？

Question

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

如何在 Canvas 上呈现二进制数据？

我正在运行以下代码:我认为在运行此代码后我应该得到一个灰色 Canvas ，因为我将 (120,120,120,1) 的 RGBA 值传递给合成数据。

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>

我应该在 Canvas 上显示一个灰色的 16x16 框，但我没有得到。我需要采取哪些额外步骤才能在 Canvas 上正确渲染 2D 位图？

附言。我正在从 this article 寻求帮助.

Console output:

Answer 1

正如评论中所指出的，在您创建的纹理类型中，WebGL 中的 alpha 是 0 到 255。您输入的是 1.0 = 1/255 或 0.004 的 alpha

但除此之外你还说

I am running the following code: I presume that I should get a grey canvas after running this code

该代码对于 WebGL 来说还不够。 WebGL requires you to supply a vertex shader and fragment shader ，顶点的顶点数据，然后调用 gl.drawArrays 或 gl.drawElements 来渲染一些东西。您提供的代码不会执行这些操作，如果没有这些操作，我们无法判断您还做了什么。

您也只提供 mip 级别 0。您需要提供 mip 或设置纹理过滤，以便仅使用第一级别，否则纹理无法渲染(您将在大多数应用程序的 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>