将数据流式传输到WebGL着色器

Question

我在浏览器上下文中工作，摄像头图像通过二进制SocketIO通道进行流式传输。

我处理在bayer格式仅支持输出其数据（作为一个非常大的字节数组），如下图所示的摄像机：

我希望显示在真实摄像机图像流时间在浏览器的画布上。

到目前为止，我的想法是使用WebGL作为渲染器（用于速度），并在片段着色器内执行从bayer到RGBA的conversion。

我对WebGL相当陌生，所以我不确定将未转换的摄像头图像发送到GPU并访问它的约定和最佳做法，以便我可以执行转换和遮挡片段。

它似乎是一种常见的技术将它作为纹理发送并通过纹理采样器（如texture2d）访问它？但是这似乎假定为RGBA格式，其中拜耳格式是完全不同的结构，只能访问原始字节数组会更有用。

指向正确的方向就足够了。我想真正的问题是'如何发送任意数据到GPU并在WebGL上下文中访问它？'

编辑：我宁愿知道原始的WebGL技术，而不是使用像ThreeJS这样的库的东西，尽管如果它特别容易，我可能会在ThreeJS中实现它。

Answer 1

这听起来像你问别人教你WebGL。这是一个很大的话题，对于StackOverflow问题来说太大了。如果你的问题太宽泛，我不会感到惊讶。

阅读http://webglfundamentals.org或http://learningwebgl.org或许多其他网站之一。

学习WebGL之后，将摄像机数据传输到WebGL的方法是调用gl.texImage2D或gl.texSubImage2D。网络上有很多WebGL相机数据传递的例子，虽然几乎所有的人都从浏览器中获取相机数据，而不是从套接字中获取数据。但在基本的层面上，它并没有什么不同。将数据存入TypedArray中，如Uint8Array，然后致电gl.texImage2D将该数据复制到纹理。