Question

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

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

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

＆＃13;

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);

＆＃13;

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

＆＃13;

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

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

Console output:

Answer 1

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

但最重要的是你说

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

对于WebGL来说，这段代码是不够的。 WebGL requires you to supply a vertex shader and fragment shader，顶点的顶点数据，然后调用alt=""或gl.drawArrays来渲染某些内容。你提供的代码没有做那些事情，如果没有这些东西我们无法分辨你正在做什么。

你也只提供mip级别0.你需要提供mips或设置纹理过滤，所以只使用第一级别，否则纹理是不可渲染的（你会在大多数JavaScript控制台中收到警告）浏览器）。

这是一个有效的例子

gl.drawElements

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; }

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

1 个答案: