將數據流式傳輸到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將該數據複製到紋理。