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

我在浏览器环境中工作，相机图像通过二进制SocketIO通道传输

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

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

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

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

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

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

---

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

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

阅读或浏览其他许多网站中的一个

---

学习WebGL后，将相机数据获取到WebGL的方法是调用

gl.texImage2D

或

gl.texSubImage2D

。在web上有许多将相机数据传递到WebGL的示例，尽管几乎所有这些示例都是从浏览器而不是从套接字获取相机数据。但在基本层面上也没什么不同。将数据放入类型Darray，如

Uint8Array

，然后调用

gl.texImage2D

将数据复制到纹理中。

您好，我已经完成了这些教程，对它们非常熟悉。我相信你误解了我的问题。加载纹理不是问题，加载“任意性质”的数据才是问题所在。在本例中，我的“纹理”不是rgba，因此它不适合标准的texture2D（）采样器方法（返回vec4）。我是WebGL新手，所以我不知道约定，但我不是在寻找教程。@Brendannable您必须在着色器中转换它。选择一种您觉得最适合的格式作为转换的基础。还可以从像素中心采样，并且没有动态数组索引访问@Winchestro到目前为止，我读到的论文和例子都使用GL_亮度，因为如果使用texture2D（）.r，它的工作原理类似于一个简单的数组-这看起来像是一个黑客，但如果没有其他方法，它将不得不这样做。@Brendannable听起来很合理。首先，您可以对其进行优化，以便在其余部分正常工作后节省3/4的内存：）这是否还没有使用最小的内存量？我宁愿早一点把它设计好，也不愿晚一点。