大家好，我是前端西瓜哥。

本文講解如何用 WebGL 繪制一個點。

WebGL

WebGL 是瀏覽器支持的一種繪制圖形的 API，是一個標準。我們可以通過 Canvas 元素 在網頁的特定區域繪制 2D 和 3D 圖形。

相比 Canvas 2D，WebGL 利用了 GPU 的計算能力，繪制速度更快，性能更優。

WebGL 基于 OpenGL 發展而來，某種意義上就是 Web 版的 OpenGL，但是閹割了一些功能。

更具體點，是來自 OpenGL 的一個特殊版本 OpenGL ES 2.0，全稱為 OpenGL for Embedded Systems，“用于嵌入式系統的 OpenGL”。

使用 WebGL，除了瀏覽器正統腳本語言 JavaScript，還要使用一種 名為 GLSL ES 的類 C  著色器語言。

繪制過程和著色器

將代碼描述的效果真正繪制到屏幕上的過程，稱為 渲染管線。

管線（pipeling）這個詞有點奇怪，因為它沒有對應的比較好的翻譯，是一個直譯。

管線指的是 數據處理的流水線，這個流水線上有很多處理器，會將數據一步步地進行處理，最終得到一個成品。渲染管線，就是渲染過程中執行的一個個步驟。

渲染管線的流程為：

1. 頂點處理階段。接收頂點信息，比如我要畫一個三角形，三個點的位置在哪里，尺寸、顏色分別是多少。
2. 圖形裝配。多個點組合成怎樣的圖形。我們會用 API 進行指定，比如點、線段、三角形。
3. 光柵化。將頂點轉換為需要繪制的像素信息，比如位置、深度。
4. 片元處理階段。設置像素的顏色信息。

這四個流程中，我們能操作的是第 1 和第 4 步。

繪制一個點

Demo 地址：

https://codesandbox.io/s/webgl-hui-zhi-yi-ge-dian-2-bpwz8p。

下面我們來講解如何繪制一個點。

首先是 WebGL 繪制的地方 Canvas。我們需要在 HTML 中添加一個 Canvas 元素，然后在 JavaScript 中獲取這個元素，并拿到 WebGL 渲染上下文。

const canvas = document.querySelector("canvas");
const gl = canvas.getContext("webgl");

如果你用過 Canvas 2D，它對應的上下文變量命名通常是 ctx（context）。但對于 WebGL，我們通常會跟隨 OpenGL 的習慣，將變量命名為 gl（OpenGL 的 gl，Graphics Library 的意思）。

接著是頂點著色器。

頂點著色器，用于設置圖形的頂點相關的信息，設置好頂點，WebGL 才能確定好圖形的位置等信息，好繪制出來。

著色器的代碼是在 JavaScript 腳本中，用字符串來寫 glsl。

頂點著色器

先是頂點著色器。

const vertexShaderSrc = `
void main() {
 gl_Position = vec4(0.0, 0.0, 0.0, 1.0);
 gl_PointSize = 20.0;
}
`;

gl_Postion 和 gl_PointSize 是 WebGL 頂點著色器的內部變量，用于設置點的位置和點的大小。

vec4 表示矢量類型，同時也是內置函數，調用它就能得到一個 vec4 類型。

這里設置了頂點的位置 (0.0, 0.0, 0.0, 1.0)。WebGL 使用的是三維坐標系，并使用右手坐標系，就是 x 軸指向右側，y 軸指向上方，z 軸指向觀察者。原點就在畫布的正中央。

三維中，一個點只要三個維度 x、y、z 就夠了，但引入了第四個維度 w，從笛卡爾坐標升維為齊次坐標，作用是方便做矩陣變換和透視投影。齊次坐標 ??(x, y, z, w)??? 等價于三維坐標 ??(x/w, y/w, z/w)??。w 通常會設置為 1。

需要注意的是，著色器中的的數值需要加上小數點，表示用的是浮點數類型。這和 JavaScript 隨便寫都會變成浮點數不一樣。

片元著色器

然后是片元著色器。

頂點著色器確定圖形的點的位置，片元著色器則是用于設置多個頂點圍成的圖形的像素點的 顏色。

const fragmentShaderSrc = `
void main() {
  gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
}
`;

gl_FragColor 是片元著色器的內部變量，這里設置為紅色。

創建渲染器

因為是入門文章，細節不展開講了。

總之下面這段代碼，將前面聲明的頂點著色器和片元著色器的兩段源碼，進行了編譯。

/**** 渲染器生成處理 ****/
// 創建頂點渲染器
const vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vertexShaderSrc);
gl.compileShader(vertexShader);

// 創建片元渲染器
const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, fragmentShaderSrc);
gl.compileShader(fragmentShader);

// 程序對象
const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
gl.useProgram(program);
gl.program = program;

清空緩存

gl.clearColor(0, 0, 0, 1);
gl.clear(gl.COLOR_BUFFER_BIT);

首先第一行代碼將背景色設置為黑色。當然你也可以設置為其他顏色，比如綠色 (0, 1, 0, 1)。

第二行是清空緩存區，填充背景色。

繪制點

gl.drawArrays(gl.POINTS, 0, 1);

該 API 用于調用繪制指令，有三個參數：

1. mode。繪制怎樣的圖元。比如點（gl.POINTS）、各種類型的線段、各種類型的三角形。也就這三種圖元。再復雜的圖形也是由一個個三角形組成的。這里用到的微積分的思想，將三維物體不斷的細分，其實就是一個個非常小的平面組成的，三個點確定一個平面，也就是三角形。正方形也是兩個三角形組成。
2. first。從哪個頂點開始繪制，通常是 0。本文只是畫一個點，這個參數沒太大意義，存在多個頂點時才有用，雖然也少用。
3. count。使用到幾個頂點。

繪制結果如下：

結尾

下一篇畫個三角形。