webgl 不僅僅可以用來進行圖形可視化, 它還能進行圖像處理
之前已經進行了點和 uv 資料的傳輸
webgl 進行圖形處理的第二步: 傳輸圖檔到 GPU
下圖為傳輸圖檔并進行相應渲染的結果
對圖像進行模糊處理, 并轉換為數組輸出
加載圖檔
由于加載圖檔是異步方法, 是以很多内容都需要寫在加載圖檔的回調函數内
在回調函數中進行傳輸圖檔操作
傳輸圖檔到 GPU
之前傳輸資料的步驟
建立緩存區
綁定緩沖區
向緩存區中寫入内容
綁定 shader 中的變量
開始傳輸資料
現在傳輸圖像的步驟, 類似
建立材質 Texture ( 對應前面第 1 步 )
y 軸反轉, 這是由于浏覽器 y 軸向下, 需要矯正
激活紋理單元 ( 簡單了解為與紋理綁定的 内容, 一個紋理綁定一個紋理單元 )
綁定 texture ( 對應前面第 2 步)
配置圖檔資訊, 兩種, 一種是縮放相關參數, 用來将圖檔的寬高置為 2 的幂次方, 一種是圖檔内容 ( 對應前面第 3 步)
傳輸圖檔 ( 對應前面第 4,5 步)
查詢目前像素的上下左右的顔色值并進行平均
目前節點的 uv 為 vUv, 是一個二維向量, 範圍從 0-1
由于圖檔設定為 200 * 200, 是以可以将 vUv 轉換為具體的像素點位置, floor(vUv * 200.0)/200.0
計算周邊點的位置及像素值
例如該像素左邊點位置為, floor(vUv * 200.0 + vec2(-1.0, 0.0)) / 200.0
像素值為, texture2D(u_Texture, floor(vUv * 200.0 + vec2(-1.0, 0.0)) / 200.0)
輸出圖像到數組中
最後去得到一個 arrayBuffer 數組
目前階段對圖檔進行像素顆粒的控制, 利用這個思路能實作大部分對圖檔的操作
下個階段是輸入一個數組, 在 GPU 中對數組進行計算, 最後得到相應的數值, 加速計算, 充分利用 GPU 并行計算的能力
希望讀者在看完後能提出意見, 點個贊, 鼓勵一下, 我們一起進步. 加油 !!