Как визуализировать двоичные данные на холсте, используя WebGl?

Question

Я использую PNaCl fffpeg, чтобы открыть, прочитать и декодировать поток 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. Я пользуюсь помощью этой статьи.

Консольный вывод:

Answer 1

Как указано в комментариях, альфа в WebGL в типе текстуры, которую вы создаете, составляет от 0 до 255. Вы вводите 1,0, что = 1/255 или альфа 0,004

Но помимо этого вы говорите

Я запускаю следующий код: я предполагаю, что я должен получить серый холст после выполнения этого кода

Этого кода недостаточно для WebGL. WebGL требует от вас предоставить вершинный шейдер и фрагментный шейдер, данные вершин для вершин, а затем вызвать либо 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>