HTML5與WebGL程式設計（3）：Three.js中的圖形和渲染

   Three.js提供了人們對3D程式碼庫期望的特性，以及用多邊形網格構建的2D和3D幾何圖形，包含層級結構物體和變換的場景影像，材質、紋理和燈光，實時陰影，開放給使用者定義的可程式設計著色器，以及一個可用於高階特殊效果的、支援多通道和延遲渲染技術的靈活渲染系統。

3.1 幾何圖形和網格

    包括預置的幾何形狀（如立方體和圓柱）、路徑繪製形狀、2D擠出幾何體，以及使用者可擴充套件的基類，以供我們自由新增自定義的幾何形狀。

    幾何形狀基礎類：scr/core/Geometry.js基類，

    多數時候，並不直接使用程式設計方式來構造幾何形狀，而是直接在程式中載入用專業的建模軟體（如3ds Max、Maya和Blender）所構建的3D模型。

    examples/webgl_loader_obj_mtl.html

     Three.js提供了一系列用於轉換和載入模型檔案的靜態函式。為多種檔案格式提供了載入器，某些格式只提供了對集合形狀和材質的支援，但另一些可能更為複雜：包括整個場景、相機、燈光和動畫。

3.2 場景圖和空間變換的層級結構

     Three.js基於成熟的場景圖（scene graph）概念定義了一個結構化場景的模型。場景圖代表一個以父子關係層級結構儲存的3D物體集合，場景圖的根節點通常用root變數來表示。應用從根節點開始遞迴地渲染場景的每個子層級。

     利用場景圖來管理複雜場景：小汽車的整體沿軌跡運動，而輪子同時在旋轉。

     最基本的物件型別是THREE.Object3D（src/core/Object3D.js）。它是所有可見物體（如網格、線條、粒子系統）的基類，同時也是場景圖層級結構組織的基本要素。

     每個object3D物件都包含它自身的變換資訊，這些資訊分別儲存在position（位置，即平移）、rotation和scale屬性中。通過設定這些屬性，可以移動、旋轉和縮放相應的物體。後代也將繼承這些變換。

3.3 材質

     標準網格材質： src/materials目錄，使用三種著名的材質技術來實現

• unlit（又稱prelit）：當使用這種材質型別時，僅紋理、顏色和透明度屬性會被用於物體的外觀渲染。場景的光照對物體的外觀不會產生影響。這是用於扁平風格渲染效果或者繪製無需複雜著色效果的簡單幾何形狀的絕佳材質型別。這種材質對已經將光照資訊和材質結合計算並預先輸出到紋理中（例如使用3D建模工具建立並使用了洪培貼圖）的情況同樣適用，因為此時物體的外觀效果無需由渲染器再次進行計算。
• Phong著色法：這種材質提供了一個簡單而優秀的模擬風格的高效能著色模型。它已經成為迅速而簡便地實現明暗視覺效果的常規方法，同時許多遊戲和應用也還在使用這種著色方法。用Phong著色法渲染的物體會在光線直接照射的地方顯示高光區域（鏡面反射），物體表面的亮度隨各點到光源的距離產生衰減，而背光區域會被渲染成完全黑暗的效果。
• 朗伯反射（Lambertian reflectance）：在Lambert著色法中，物體外觀的明暗不隨觀察者視角的改變而改變。它非常適合於用來表現雲朵等會漫反射大部分光線的物體，或者像月球這類具有高反射率（表面反射光非常明亮）的衛星。

3.4 光源

   對應建模工具和其他場景相簿中定義的光源型別。最常用的光源型別有定向光、點光源、聚光燈和環境光。

• 定向光：實現了一類產生定向平行光的光源
• 點光源：包含位置資訊，但不包含方向資訊
• 聚光燈：同時具備位置和方向資訊。同時它們提供了用於定義聚光燈內圓錐和外圓錐尺寸（角度）的引數，以及定義它們能夠照亮多遠距離的引數。
• 環境光：沒有位置，也沒有方向。它均勻地投射於整個場景。

3.5 陰影

   一直以來，設計師都使用陰影來營造更加真實的視覺效果。通常這些陰影都是偽造的、預渲染的效果，移動場景中的燈光或者移動帶陰影的物體，都會破壞這種效果。

3.6 著色器

   使用可程式設計著色器，開發者可以建立出高效能、高度逼真的視覺效果，從預置的材質和燈光模型的限制中解放出來。

3.7 渲染

   3D場景控制的最終輸出是渲染在瀏覽器Canvas元素上的2D影像。無論是使用WebGL，還是2D Canvas繪圖API，抑或是通過更改CSS來使得元素在頁面上移動，都無關緊要；我們的最終目的都是繪製畫素點。