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

【问题标题】：Streaming data to a WebGL shader将数据流式传输到 WebGL 着色器
【发布时间】：2014-12-06 09:28:22
【问题描述】：

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

我正在处理的相机只支持以bayer格式输出其数据（作为一个非常大的字节数组），如下图：

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

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

我是 WebGL 的新手，因此我不确定将未转换的相机图像发送到 GPU 并访问它以便执行转换并对片段进行着色的约定和最佳实践。

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

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

编辑：我宁愿了解原始的 WebGL 技术，也不愿使用诸如 ThreeJS 之类的库，尽管如果它特别容易的话，我可能会在 ThreeJS 中实现它。

【问题讨论】：

标签： javascript video webgl shader

【解决方案1】：

听起来您是在请人教您 WebGL。这是一个很大的话题，对于 StackOverflow 问题来说太大了。如果您的问题因过于宽泛而被关闭，我不会感到惊讶。

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

在您学习了 WebGL 之后，将摄像头数据传输到 WebGL 的方法是调用 gl.texImage2D 或 gl.texSubImage2D。网络上有很多将相机数据传递给 WebGL 的示例，尽管几乎所有这些示例都从浏览器获取相机数据，而不是从套接字获取。但在基本层面上并没有什么不同。将您的数据放入像 Uint8Array 这样的 TypedArray 中，然后调用 gl.texImage2D 将该数据复制到纹理中。

【讨论】：

嗨，我已经完成了这些教程并且对它们很满意。我相信你误解了我的问题。加载纹理不是问题，加载“任意性质”的数据才是问题所在。在这种情况下，我的“纹理”不是 rgba，因此它不适合标准的 texture2D() 采样器方法（返回 vec4）。我是 WebGL 的新手，所以我不知道约定，但我不是在寻找教程。
@BrendanAnnable 你必须在着色器中转换它。选择一种您觉得最舒服的格式作为转换的基础。也是从像素中心采样，没有动态数组索引访问。 khronos.org/opengles/sdk/docs/man/xhtml/glTexImage2D.xml
@Winchestro 到目前为止我读过的论文和示例都使用 GL_LUMINANCE，因为如果您使用 texture2D().r，它“有点”像一个简单的数组 - 这似乎是一个 hack，但如果有没有其他办法。
@BrendanAnnable 听起来很合理。从这个开始，您可以对其进行优化，以便在其余的工作正常后节省 3/4 的内存：)
那不是已经使用了最少的内存吗？我宁愿早点设计好它。