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

本文講解如何用 WebGL 繪制一個(gè)點(diǎn)。

WebGL

WebGL 是瀏覽器支持的一種繪制圖形的 API，是一個(gè)標(biāo)準(zhǔn)。我們可以通過 Canvas 元素 在網(wǎng)頁的特定區(qū)域繪制 2D 和 3D 圖形。

相比 Canvas 2D，WebGL 利用了 GPU 的計(jì)算能力，繪制速度更快，性能更優(yōu)。

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

更具體點(diǎn)，是來自 OpenGL 的一個(gè)特殊版本 OpenGL ES 2.0，全稱為 OpenGL for Embedded Systems，“用于嵌入式系統(tǒng)的 OpenGL”。

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

繪制過程和著色器

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

管線（pipeling）這個(gè)詞有點(diǎn)奇怪，因?yàn)樗鼪]有對(duì)應(yīng)的比較好的翻譯，是一個(gè)直譯。

管線指的是 數(shù)據(jù)處理的流水線，這個(gè)流水線上有很多處理器，會(huì)將數(shù)據(jù)一步步地進(jìn)行處理，最終得到一個(gè)成品。渲染管線，就是渲染過程中執(zhí)行的一個(gè)個(gè)步驟。

渲染管線的流程為：

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

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

繪制一個(gè)點(diǎn)

Demo 地址：

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

下面我們來講解如何繪制一個(gè)點(diǎn)。

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

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

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

接著是頂點(diǎn)著色器。

頂點(diǎn)著色器，用于設(shè)置圖形的頂點(diǎn)相關(guān)的信息，設(shè)置好頂點(diǎn)，WebGL 才能確定好圖形的位置等信息，好繪制出來。

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

頂點(diǎn)著色器

先是頂點(diǎn)著色器。

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

gl_Postion 和 gl_PointSize 是 WebGL 頂點(diǎn)著色器的內(nèi)部變量，用于設(shè)置點(diǎn)的位置和點(diǎn)的大小。

vec4 表示矢量類型，同時(shí)也是內(nèi)置函數(shù)，調(diào)用它就能得到一個(gè) vec4 類型。

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

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

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

片元著色器

然后是片元著色器。

頂點(diǎn)著色器確定圖形的點(diǎn)的位置，片元著色器則是用于設(shè)置多個(gè)頂點(diǎn)圍成的圖形的像素點(diǎn)的 顏色。

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

gl_FragColor 是片元著色器的內(nèi)部變量，這里設(shè)置為紅色。

創(chuàng)建渲染器

因?yàn)槭侨腴T文章，細(xì)節(jié)不展開講了。

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

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

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

// 程序?qū)ο?/span>
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);

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

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

繪制點(diǎn)

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

該 API 用于調(diào)用繪制指令，有三個(gè)參數(shù)：

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

繪制結(jié)果如下：

結(jié)尾

下一篇畫個(gè)三角形。