解釋基本 3D 理論
本文介紹了開始處理 3D 內容時所有有用的基礎理論。
座標系
3D 本質上就是在一個 3D 空間中表示形狀，並使用座標系來計算它們的位置。
WebGL 使用右手座標系 — x 軸指向右邊，y 軸指向上邊，z 軸指向螢幕外，如上圖所示。
物件
不同型別的物件都是由頂點構建的。頂點是空間中的一個點，它在座標系中擁有自己的 3D 位置，並且通常包含一些定義它的附加資訊。每個頂點都由以下屬性描述：
- 位置：在 3D 空間中標識它 (
x,y,z)。 - 顏色：包含一個 RGBA 值（R、G 和 B 分別代表紅、綠、藍通道，alpha 代表透明度 — 所有值範圍從
0.0到1.0）。 - 法線：描述頂點朝向的方向。
- 紋理：一個 2D 影像，頂點可以用來裝飾它所屬的表面，而不是使用簡單的顏色。
你可以使用這些資訊構建幾何體 — 下面是一個立方體的例子：
給定形狀的一個面是兩個頂點之間的平面。例如，一個立方體有 8 個不同的頂點（空間中的點）和 6 個不同的面，每個面由 4 個頂點構成。法線定義了面的朝向。此外，透過連線點，我們建立了立方體的邊。幾何體由頂點和麵構成，而材質是紋理，它使用顏色或影像。如果我們把幾何體和材質連線起來，我們就得到了一個網格（mesh）。
渲染管線
渲染管線是將影像準備好並輸出到螢幕的過程。圖形渲染管線接收由頂點描述的圖元（primitives）構建的 3D 物件，對其進行處理，計算片段（fragments），並將它們渲染為螢幕上的畫素。
上圖中使用的術語如下：
- 圖元 (Primitive)：管線的輸入 — 它由頂點構成，可以是三角形、點或線。
- 片段 (Fragment)：畫素的三維投影，它擁有與畫素相同的屬性。
- 畫素 (Pixel)：螢幕上排列在 2D 網格中的點，它包含一個 RGBA 顏色。
頂點處理和片段處理是可程式設計的 — 你可以編寫自己的著色器來操作輸出。
頂點處理
頂點處理涉及將關於單個頂點的資訊組合成圖元，並設定它們在 3D 空間中的座標，以便檢視器可以看到。這就像為你準備好的風景拍照一樣 — 你必須先放置物件，配置相機，然後才能拍照。
此處理有四個階段：第一個階段涉及在世界中排列物件，稱為模型變換。然後是檢視變換，它負責在 3D 空間中定位和設定相機方向。相機有三個引數 — 位置、方向和朝向 — 必須為新建立的場景定義這些引數。
投影變換（也稱為透視變換）然後定義相機設定。它設定了相機可以看到的內容 — 配置包括視場角、寬高比以及可選的近裁剪面和遠裁剪面。閱讀 Three.js 文章中的相機段落，瞭解這些。
最後一步是視口變換，它將所有內容輸出到渲染管線的下一個階段。
光柵化
光柵化將圖元（連線起來的頂點）轉換為一組片段。
這些片段 — 它們是 2D 畫素的三維投影 — 會被對齊到畫素網格，以便在輸出合併階段最終可以作為畫素列印在 2D 螢幕顯示器上。
片段處理
片段處理側重於紋理和光照 — 它根據給定的引數計算最終顏色。
紋理
紋理是 3D 空間中使用的 2D 影像，用於使物件看起來更好、更逼真。紋理由稱為紋素（texels）的單個紋理元素組合而成，就像影像元素由畫素組合而成一樣。在渲染管線的片段處理階段將紋理應用到物件上，允許我們透過必要的包裹（wrapping）和過濾（filtering）來調整它。
紋理包裹允許我們在 3D 物件周圍重複 2D 影像。當原始解析度或紋理影像與顯示的片段不同時，會應用紋理過濾 — 它將相應地縮小或放大。
光照
我們在螢幕上看到的顏色是光源與物體材質表面顏色相互作用的結果。光可能會被吸收或反射。WebGL 中實現的標準Phong 光照模型有四種基本型別的光照：
- 漫反射：遠處定向光，如太陽。
- 鏡面反射：點光源，就像房間裡的燈泡或手電筒。
- 環境光：應用於場景中所有內容的恆定光。
- 自發光：物體直接發出的光。
輸出合併
在輸出操作階段，3D 空間中所有圖元的片段都被轉換為 2D 畫素網格，然後列印在螢幕顯示器上。
在輸出合併過程中，還會應用一些處理來忽略不需要的資訊 — 例如，螢幕外或位於其他物體後方、因此不可見的物體的引數，就不會被計算。
總結
現在你已經瞭解了 3D 操作的基礎理論。如果你想繼續實踐並觀看一些演示，請繼續閱讀下面的教程。
快來親手創造一些酷炫的前沿 3D 實驗吧！