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

【问题标题】：How to render binary data on canvas using WebGl?如何使用 WebGl 在画布上呈现二进制数据？
【发布时间】：2016-01-27 07:25:43
【问题描述】：

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

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

我正在运行以下代码：我认为在运行此代码后我应该得到一个灰色画布，因为我将 (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);

&lt;canvas id="canvas"&gt;&lt;/canvas&gt;

我应该在画布上显示一个灰色的 16x16 框，但我不明白。我需要采取哪些额外步骤才能在画布上正确渲染 2D 位图？

PS。我正在接受this article 的帮助。

Console output:

【问题讨论】：

可能有一些帮助：developer.mozilla.org/en-US/docs/Web/API/WebGL_API/Tutorial/…
谢谢你，但由于我使用的是 RTSP 流，它不能在视频标签中播放，我使用 PNaCl ffmpeg 来获取流，所以从视频元素中获取数据将不工作。
你不应该做“gl.bufferData(gl.ARRAY_BUFFER, pixel);”对于纹理数据。纹理数据通过 teximage2d 传递。同时发布完整的代码，以及浏览器的控制台输出。
@prabindh 是的，我已经删除了 gl.bufferData(gl.ARRAY_BUFFER, pixel)，输出保持不变。我已经在编辑中发布了完整的 javascript 代码（初始化 WegGl 和 initviewport 的 initWebGL 除外）。最后我还添加了控制台输出作为图像
您传递的 alpha 值为 1.0，但缓冲区是无符号的 8 位。 Alpha 将四舍五入为 1，你需要一些好眼睛才能看到。 Alpha 是一个 0 - 255 的 8 位值，您必须将其设置为高于 1 才能看到任何内容。

标签： javascript html canvas webgl binary-data

【解决方案1】：

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

但最重要的是你说

我正在运行以下代码：我认为运行此代码后我应该得到一个灰色画布

这些代码对于 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>

【讨论】：