Как визуализировать двоичные данные на холсте с помощью 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>

я должен получить серый 16x16 окно представлены на холсте, но я не получаю это. Какие дополнительные шаги я должен предпринять, чтобы правильно отобразить 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>