推薦：使用NSDT場(chǎng)景編輯器快速搭建3D應(yīng)用場(chǎng)景

3D 本質(zhì)上是關(guān)于 3D 空間中形狀的表示，并使用坐標(biāo)系來(lái)計(jì)算它們的位置。

WebGL 使用右側(cè)坐標(biāo)系 — 軸指向右側(cè)，軸指向上方，軸指向屏幕外，如上圖所示。xyz

使用頂點(diǎn)構(gòu)建不同類型的對(duì)象。頂點(diǎn)是空間中的一個(gè)點(diǎn)，在坐標(biāo)系中具有自己的 3D 位置，通常是定義它的一些附加信息。每個(gè)頂點(diǎn)都由以下屬性描述：

• 位置：在 3D 空間中標(biāo)識(shí)它 （、、）。xyz

• 顏色：保存 RGBA 值（R、G 和 B 表示紅色、綠色和藍(lán)色通道，alpha 表示透明度 — 所有值的范圍從 到 ）。0.01.0

• 正常：一種描述頂點(diǎn)朝向的方法。

• 紋理：頂點(diǎn)可用于裝飾其所屬表面的 2D 圖像，而不是簡(jiǎn)單的顏色。

您可以使用此信息構(gòu)建幾何圖形 — 下面是一個(gè)立方體示例：

給定形狀的面是頂點(diǎn)之間的平面。例如，立方體有 8 個(gè)不同的頂點(diǎn)（空間中的點(diǎn)）和 6 個(gè)不同的面，每個(gè)面由 4 個(gè)頂點(diǎn)構(gòu)成。法線定義面部的方向。此外，通過(guò)連接點(diǎn)，我們正在創(chuàng)建立方體的邊緣。幾何體是從頂點(diǎn)和面構(gòu)建的，而材質(zhì)是紋理，它使用顏色或圖像。如果我們將幾何體與材料連接起來(lái)，我們將得到一個(gè)網(wǎng)格。

渲染管線是準(zhǔn)備圖像并將其輸出到屏幕上的過(guò)程。圖形渲染管道采用從使用頂點(diǎn)描述的基元構(gòu)建的 3D 對(duì)象，應(yīng)用處理，計(jì)算片段并將其作為像素在 2D 屏幕上呈現(xiàn)。

上圖中使用的術(shù)語(yǔ)如下：

• 基元：管道的輸入 — 它由頂點(diǎn)構(gòu)建，可以是三角形、點(diǎn)或線。

• 片段：像素的 3D 投影，具有與像素相同的所有屬性。

• 像素：屏幕上排列在 2D 網(wǎng)格中的點(diǎn)，具有 RGBA 顏色。

頂點(diǎn)和片段處理是可編程的 — 您可以編寫自己的著色器來(lái)操作輸出。

頂點(diǎn)處理是將有關(guān)各個(gè)頂點(diǎn)的信息組合成基元，并在 3D 空間中設(shè)置它們的坐標(biāo)以供查看者查看。這就像拍攝您準(zhǔn)備的給定風(fēng)景的照片一樣 - 您必須首先放置對(duì)象，配置相機(jī)，然后拍攝。

這種處理有四個(gè)階段：第一個(gè)階段涉及排列世界中的對(duì)象，稱為模型轉(zhuǎn)換。然后是視圖轉(zhuǎn)換，負(fù)責(zé)在3D空間中定位和設(shè)置相機(jī)的方向。攝像機(jī)有三個(gè)參數(shù) - 位置、方向和方向 - 必須為新創(chuàng)建的場(chǎng)景定義。

然后，投影變換（也稱為****變換）定義相機(jī)設(shè)置。它設(shè)置了攝像機(jī)可以看到的內(nèi)容——配置包括視野、縱橫比和可選的近平面和遠(yuǎn)平面。閱讀三.js文章中的相機(jī)段落以了解這些內(nèi)容。

最后一步是視口轉(zhuǎn)換，它涉及輸出渲染管線中下一步的所有內(nèi)容。

柵格化將基元（連接的折點(diǎn)）轉(zhuǎn)換為一組片段。

這些片段（即 3D 像素的 2D 投影）與像素網(wǎng)格對(duì)齊，因此最終它們可以在輸出合并階段作為像素打印在 2D 屏幕顯示器上。

片段處理側(cè)重于紋理和照明——它根據(jù)給定的參數(shù)計(jì)算最終顏色。

紋理是在 2D 空間中使用的 3D 圖像，用于使對(duì)象看起來(lái)更好、更逼真。紋理由稱為紋素的單個(gè)紋理元素組合而成，就像圖片元素從像素組合一樣。在渲染管線的片段處理階段將紋理應(yīng)用于對(duì)象，允許我們?cè)诒匾獣r(shí)通過(guò)包裝和過(guò)濾來(lái)調(diào)整它。

紋理包裝允許我們?cè)?2D 對(duì)象周圍重復(fù) 3D 圖像。當(dāng)原始分辨率或紋理圖像與顯示的片段不同時(shí)，將應(yīng)用紋理過(guò)濾 - 它將相應(yīng)地縮小或放大。

我們?cè)谄聊簧峡吹降念伾枪庠磁c物體材質(zhì)的表面顏色相互作用的結(jié)果。光可能會(huì)被吸收或反射。在WebGL中實(shí)現(xiàn)的標(biāo)準(zhǔn)Phong照明模型有四種基本類型的照明：

• 漫反射：遙遠(yuǎn)的定向光，如太陽(yáng)。

• 鏡面反射：一個(gè)光點(diǎn)，就像房間里的燈泡或手電筒一樣。

• 環(huán)境：常光應(yīng)用于場(chǎng)景中的所有內(nèi)容。

• 自發(fā)光：物體直接發(fā)出的光。

在輸出操作階段，來(lái)自 3D 空間的所有基元片段都轉(zhuǎn)換為像素的 2D 網(wǎng)格，然后在屏幕顯示器上打印出來(lái)。

在輸出合并期間，還會(huì)應(yīng)用一些處理來(lái)忽略不需要的信息 - 例如，不會(huì)計(jì)算屏幕外部或其他對(duì)象后面的對(duì)象的參數(shù)，因此不可見。

原文鏈接：解釋基本的3D理論 (mvrlink.com)