出處：https://segmentfault.com/a/1190000024442475
作者：Aral Roca翻譯：瘋狂的技術宅
未經允許嚴禁轉載
在本文中，我們將了解什麼是WebGL，以及如何通過與GPU 進行對話來繪製“三角形”。儘管有更好的方法來實現本文中的例子，例如用具有2d 上下文的canvas 甚至可以用CSS，但我們要從WebGL 開始。就像“hello world” 一樣，了解它是如何工作的。
什麼是WebGL？
WebGL 的字面定義是 但這並不意味著我們可以通過3D 庫提供的一個好用的API 去指揮電腦：“在這裡放個茶杯，在這裡放攝像機，在這裡畫一個字符等”。
它屬於低級API，可以將 你可以把WebGL 理解為柵格化引擎。它基於OpenGL ES 3.0 圖形API。
網上現有的3d 庫（例如 他們需要一種能夠與GPU 通訊來告知繪製內容的方法。
當然也可以通過THREE.js 的 但是本文的目的是了解其在內部的工作方式，即這些3d 庫時如何通過WebGL 與GPU 通信的。我們要在沒有任何3D 庫的幫助下渲染出一個三角形。THREE.Triangle
創建WebGL 畫布
在繪製三角形之前，需要先定義WebGL 渲染的三角形的區域。
我們將使用HTML5 的元素canvas，將上下文設置為webgl2
import
export ) {
useEffect
gl.
}, [])
return clearColor 方法用RGBA（取值範圍：0 到1）設置畫布的背景色。
clear方法用來把緩衝區初始化為預設值。其對應的常數值將取決於你的GPU。
創建canvas 後，就可以用WebGL 渲染三角形了。
頂點坐標
首先要知道我們所使用的這些向量的取值範圍是-1 至1。
畫布的坐標範圍：
- （0，0）
- （1，1）
- （1，-1）
- （-1，1）
- （-1，-1）
要繪製的三角形的三個頂點為 把三角的頂點坐標存儲到數組中：：
constGLSL 和著色器
著色器是計算機圖形學中的一種程序，可以高度靈活地計算渲染效果。這些著色器用類似於C 或C++ 的OpenGL ES 著色語言（GLSL ES）編寫，並在GPU上編碼並運行。
每個WebGL 程序都由兩個著色器函數組成；幾乎所有的WebGL API 都以不同的方式運行這兩個函數。
頂點著色器
頂點著色器的工作是計算頂點的位置。有了這個結果（所以要先創建這個頂點著色器：
const
precision mediump float;
in vec2 position;
void main () {
gl_Position = vec4(position.x, position.y, 0.0, 1.0); // x,y,z,w
}
`可以將其作為模板字符串保存在我們的JavaScript 代碼中。
第一行（#version 300 es
第二行（可用的選項有precision mediump float;highpmediumplowphighp
在第三行（三角形的每個向量都是二維的。in vec2 position;
初始化後在程序啟動時調用 GPU 將通過將當前頂點的位置保存到 第一個和第二個參數是 第三個參數是 最後一個參數是maingl_Positiongl_Position = vec4(position.x, position.y, 0.0, 1.0);vec2xyz0.0w1.0
GLSL 識別並在內部使用 gl_Position
創建著色器後，應對其進行編譯：
const
gl.gl.
// Catch some possible errors on vertex shader
}片段著色器
“片段著色器”在“頂點著色器”之後執行。著色器的工作是計算與每個位置對應的像素點的顏色。
我們用相同的顏色填充這個三角形：
const
precision mediump float;
out vec4 color;
void main () {
color = vec4(0.7, 0.89, 0.98, 1.0); // r,g,b,a
}`
gl.gl.
// 在片段著色器上捕獲一些可能出現的錯誤
}儘管在這裡返回的 由於要用 vect4rgba(179, 229, 252, 1)
從著色器創建程序
編譯好著色器後，需要創建要運行GPU 的程序，同時添加兩個著色器。
constgl.
// 捕獲在程序中可能出現的錯誤
}創建緩衝區
我們將使用緩衝區把內存分配給GPU，並把內存綁定到用於CPU-GPU 通信的通道。用此通道將三角形坐標發送到GPU。
// 為gpu分配內存
// 將此內存綁定到通道
// 使用此通道將數據發送到GPU（三角形坐標）gl. gl.
)
// 發送數據後釋放內存，避免內存洩漏問題
把數據從CPU 鏈接到GPU
在我們的 但是尚未指定此變量應採用我們要通過緩衝區的值。必須通過以下方式表明它：position
constgl.gl.gl.position,
繪製三角形
一旦為三角形創建了帶有著色器的程序，並創建了將數據從CPU發送到GPU的鏈接緩衝區之後，最後就可以告訴GPU 渲染三角形了。
gl.gl.
這個方法用來從數組數據渲染圖元。圖元可以是點、線或三角形。在這裡指定gl.TRIANGLES
結論
用WebGL 只能繪製三角形、直線或點，因為它只能柵格化，所以只能進行向量可以執行的操作。這意味著WebGL 從概念上講是簡單的，而過程卻相當複雜，而且根據你要開發的內容會變得越來越複雜。光柵化2D 三角形並不像在3D 遊戲中使用紋理、變化，變換那樣。
其它高讚文章：
- 深入理解Shadow DOM v1
- 一步步教你用WebVR 實現虛擬現實遊戲
- 13個幫你提高開發效率的現代CSS框架
- 快速上手BootstrapVue
- JavaScript引擎是如何工作的？從調用棧到Promise你需要知道的一切
- WebSocket實戰：在Node 和React 之間進行實時通信
- 關於Git 的20 個面試題
- 深入解析Node.js 的console.log
- Node.js 究竟是什麼？
- 30分鐘用Node.js構建一個API服務器
- Javascript的對象拷貝
- 程序員30歲前月薪達不到30K，該何去何從
- 14個最好的JavaScript 數據可視化庫
- 8 個給前端的頂級VS Code 擴展插件
- Node.js 多線程完全指南
- 把HTML轉成PDF的4個方案及實現
沒有留言:
張貼留言