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

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

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

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

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

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

• 正常：一種描述頂點朝向的方法。

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

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

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

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

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

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

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

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

頂點和片段處理是可編程的 — 您可以編寫自己的著色器來操作輸出。

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

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

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

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

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

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

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

紋理是在 2D 空間中使用的 3D 圖像，用于使對象看起來更好、更逼真。紋理由稱為紋素的單個紋理元素組合而成，就像圖片元素從像素組合一樣。在渲染管線的片段處理階段將紋理應(yīng)用于對象，允許我們在必要時通過包裝和過濾來調(diào)整它。

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

我們在屏幕上看到的顏色是光源與物體材質(zhì)的表面顏色相互作用的結(jié)果。光可能會被吸收或反射。在WebGL中實現(xiàn)的標(biāo)準(zhǔn)Phong照明模型有四種基本類型的照明：

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

• 鏡面反射：一個光點，就像房間里的燈泡或手電筒一樣。

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

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

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

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

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