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

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

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

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

var canvas=document.getElementById（'canvas'）；
var gl=initWebGL（画布）//函数初始化webgl
初始化视口（gl、画布）//初始化视图端口
log（'viewport initialized'）；
var数据=[]；
对于（变量i=0；i<256；i++）{
数据推送（120120,1.0）；
}
控制台日志（数据）；
var像素=新的UINT8阵列（数据）；//16x16 RGBA图像
var texture=gl.createTexture（）；
gl.bindTexture（gl.TEXTURE_2D，纹理）；
gl.texImage2D(
gl.TEXTURE_2D，//目标
0，//mip级别
gl.RGBA，//内部格式
16，16，//宽度和高度
0，//边框
gl.RGBA，//格式
gl.UNSIGNED_字节，//类型
像素//纹理数据
);
console.log（'pixels'）；
console.log（像素）
正如评论中指出的，您正在创建的纹理类型中WebGL中的alpha为0到255。你要输入1.0，它=1/255或0.004的alpha

但最重要的是你说

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

这些代码对于WebGL来说是不够的，顶点的顶点数据，然后调用
gl.drawArray
或
gl.drawElements
来渲染某些内容。你提供的代码不能做这些事情，如果没有这些事情，我们就无法知道你在做什么

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

这里有一个有效的例子


var canvas=document.getElementById（'canvas'）；
var gl=canvas.getContext（“webgl”）；
var数据=[]；
对于（变量i=0；i<256；i++）{
数据推送（120255）；
}
var像素=新的UINT8阵列（数据）；//16x16 RGBA图像
var texture=gl.createTexture（）；
gl.bindTexture（gl.TEXTURE_2D，纹理）；
gl.texImage2D(
gl.TEXTURE_2D，//目标
0，//mip级别
gl.RGBA，//内部格式
16，16，//宽度和高度
0，//边框
gl.RGBA，//格式
gl.UNSIGNED_字节，//类型
像素//纹理数据
);
gl.GenerateMap（gl.TEXTURE_2D）；//您需要执行此操作或设置筛选
//编译和链接着色器，并查找统一和属性位置
var programInfo=twgl.createProgramInfo（gl，[“vs”，“fs]”）；
变量数组={
职位：[
-1, -1, 0, 
1, -1, 0, 
-1,  1, 0, 
-1,  1, 0, 
1, -1, 0, 
1,  1, 0,
],
};
//为每个数组调用gl.createBuffer、gl.bindBuffer、gl.bufferData
var bufferInfo=twgl.createBufferInfoFromArrays（gl，arrays）；
变量={
u_纹理：纹理，
};
总账使用程序（programInfo.program）；
//调用gl.bindBuffer、gl.enableVertexAttributeArray、gl.VertexAttributePointer
twgl.setBuffersAndAttributes（总帐、程序信息、缓冲信息）；
//调用gl.activeTexture、gl.bindTexture、gl.uniformXXX
twgl.设置制服（程序信息、制服）；
//调用gl.DrawArray或gl.drawElements
twgl.drawBufferInfo（总图，总图三角形，bufferInfo）
canvas{边框：1px纯黑；}

属性向量4位置；
可变矢量2 v_texcoord；
void main（）{
gl_位置=位置；
//因为我们知道我们将通过-1到+1的位置
v_texcoord=位置.xy*0.5+0.5；
}
精密中泵浮子；
均匀的二维u_纹理；
可变矢量2 v_texcoord；
void main（）{
gl_FragColor=纹理2D（u_纹理，v_texcoord）；
}
可能有些帮助：谢谢，但由于我使用的是RTSP流，无法在视频标记中播放，因此我使用PNaCl ffmpeg来获取流，因此从视频元素获取数据将不起作用。您不应该对纹理数据执行“gl.bufferData（gl.ARRAY_BUFFER，pixels）；”。纹理数据通过teximage2d传递。同时发布完整代码和浏览器的控制台输出。@prabindh是的，我已经删除了gl.bufferData（gl.ARRAY\u BUFFER，pixels），输出保持不变。我已经在编辑中发布了完整的javascript代码（除了初始化WegGl和initviewport的initWebGL）。我还将控制台输出作为图像添加到了endYou传递的alpha值为1.0，但缓冲区为无符号8位。Alpha将四舍五入为1，您需要一些好的眼睛才能看到它。Alpha是0-255之间的8位值，您必须将其设置为高于1才能看到任何内容。