Three.js#02#Next Steps

以下內容由GPT輔助生成。

Disposing resources

這段內容主要講解了在Three.js中如何釋放不再使用的對象,以提高性能並避免內存泄漏。

重要的是要注意,Three.js無法自動釋放一些與WebGL相關的資源,如緩衝區、着色器程序等。你需要通過特定的API來釋放這些資源。

  1. 幾何體(Geometries):通過調用BufferGeometry.dispose()方法來釋放與幾何體相關的資源。
  2. 材質(Materials):通過調用Material.dispose()方法來釋放與材質相關的資源。
  3. 紋理(Textures):通過調用Texture.dispose()方法來釋放與紋理相關的資源。如果使用ImageBitmap作爲紋理的數據源,則還需要調用ImageBitmap.close()以釋放CPU側資源。
  4. 渲染目標(Render Targets):通過調用WebGLRenderTarget.dispose()方法來釋放與渲染目標相關的資源。

此外,還有一些其他類(例如控制器或後處理過程),它們也提供了dispose()方法來移除內部事件偵聽器或渲染目標。建議檢查類的API或文檔,並在清理時使用dispose()方法(如果存在)。

這段內容還回答了一些關於Three.js資源管理的常見問題,例如:

  • Three.js無法自動釋放對象的原因
  • 從場景中刪除一個網格是否會釋放其幾何體和材質
  • Three.js是否提供關於緩存對象數量的信息
  • 在紋理圖片尚未加載時調用dispose()會發生什麼
  • 在調用dispose()之後再次使用該對象會發生什麼
  • 如何在應用中管理Three.js對象,何時應該釋放資源

總之,在Three.js中釋放對象資源取決於具體的使用場景,沒有絕對的建議。但是,理解何時調用dispose()方法以釋放相關資源是很重要的。

  1. 爲什麼Three.js無法自動釋放對象?

    Three.js無法知道用戶創建的幾何體、材質等實體的生命週期或作用域,這是應用程序的責任。例如,即使一個材質當前未用於渲染,下一幀可能仍然需要。因此,如果應用程序決定某個對象可以被刪除,它需要通過調用相應的dispose()方法通知引擎。

  2. 從場景中刪除一個網格是否會釋放其幾何體和材質?

    不會。你需要顯式地通過調用dispose()方法來釋放幾何體和材質。請注意,幾何體和材質可以在多個3D對象(如網格)之間共享。

  3. Three.js是否提供關於緩存對象數量的信息?

    是的。你可以查看WebGLRenderer.info屬性,該屬性提供了關於顯存和渲染過程的統計信息。其中包括內部存儲的紋理、幾何體和着色器程序的數量。如果你發現應用程序性能存在問題,建議調試此屬性以輕鬆識別內存泄漏。

  4. 在紋理圖片尚未加載時調用dispose()會發生什麼?

    如果紋理圖片尚未加載,內部資源尚未分配,因此在調用dispose()時不會發生任何事情。換句話說,不需要執行任何清理操作。

  5. 在調用dispose()之後再次使用該對象會發生什麼?

    引擎會再次創建已刪除的內部資源。因此,不會發生運行時錯誤,但在當前幀可能會產生負面的性能影響,尤其是當着色器程序需要重新編譯時。

  6. 如何在應用中管理Three.js對象?何時應該釋放資源?

    並沒有一種通用的建議來說明何時應該調用dispose()方法。這主要取決於具體的使用場景。需要強調的是,無需始終釋放對象。例如,一個包含多個關卡的遊戲,在切換關卡時釋放對象是個不錯的選擇。應用程序可以遍歷舊場景並釋放所有不再使用的材質、幾何體和紋理。如前所述,如果你釋放了實際仍在使用的對象,也不會產生運行時錯誤。最壞的情況是單幀性能下降。

How to use post-processing

Three.js的很多應用會將3D對象直接渲染到屏幕上。然而,有時候我們可能需要對渲染結果添加一些圖形效果,比如景深(Depth-Of-Field)、泛光(Bloom)、膠片顆粒(Film Grain)或各種類型的抗鋸齒(Anti-aliasing)。後期處理(Post-processing)是一種實現這些效果的常用方法。首先,場景被渲染到一個渲染目標(Render target),它表示顯卡內存中的一個緩衝區。接下來,一個或多個後期處理過程將在最終渲染到屏幕之前,對圖像緩衝區應用濾鏡和效果。

Three.js通過EffectComposer提供了一個完整的後期處理解決方案來實現這樣的工作流程。

首先,從examples目錄中導入所需的文件。接下來,通過將WebGLRenderer的實例傳遞給EffectComposer來創建composer。

使用composer時,需要修改應用程序的動畫循環。現在需要使用EffectComposer的相應方法,而不是調用WebGLRenderer的渲染方法。

function animate() {
  requestAnimationFrame(animate);
  composer.render();
}

Three.js提供了許多內置的後期處理通道供你使用。你還可以編寫自定義的後期處理着色器,將其包含到後期處理通道鏈中。

總之,Three.js的後期處理是一種用於在渲染場景到屏幕之前,對圖像應用各種圖形效果的方法。通過使用EffectComposer,可以創建一個後期處理通道鏈,對渲染結果進行處理和優化。這使得您可以爲3D渲染結果添加諸如景深、泛光、膠片顆粒和抗鋸齒等效果。在創建自定義效果時,還可以使用ShaderPass並編寫自己的着色器代碼。這些功能共同提供了更多的控制和創意自由度,以便根據需要調整渲染結果。

Matrix transformations

在Three.js中,矩陣變換被用於表示3D物體的平移(位置)、旋轉和縮放。每個Object3D實例都有一個矩陣,用於存儲其位置、旋轉和縮放信息。

更新對象的變換有兩種方法:

  1. 修改對象的位置、四元數(旋轉)和縮放屬性,然後讓Three.js根據這些屬性重新計算對象的矩陣。可以根據需要自動或手動更新矩陣。

  2. 直接修改對象的矩陣。通過這種方式,您需要確保將matrixAutoUpdate屬性設置爲false,並手動更新矩陣。

對象矩陣與世界矩陣:對象的矩陣存儲的是對象相對於其父對象的變換;要獲取對象在世界座標系下的變換,需要訪問對象的matrixWorld屬性。當父對象或子對象的變換髮生改變時,可以調用updateMatrixWorld()方法來更新子對象的matrixWorld。

Three.js提供了兩種表示3D旋轉的方法:歐拉角和四元數。歐拉角容易出現“萬向鎖”問題,因此對象的旋轉信息始終存儲在對象的四元數中。在以前的庫版本中,有一個useQuaternion屬性,但現在已經被棄用。轉而使用setRotationFromEuler方法來更新四元數。

Animation system

這段內容主要介紹了Three.js動畫系統的概述、組件和它們是如何協同工作的。在Three.js動畫系統中,可以對模型的各種屬性進行動畫處理:有骨架和綁定模型的骨骼、變形目標、不同的材質屬性(顏色、不透明度、布爾值)、可見性和變換。動畫屬性可以淡入、淡出、交叉淡入以及扭曲。同時在同一對象和不同對象上的不同動畫的權重和時間尺度可以獨立改變。同一對象和不同對象上的各種動畫可以同步。

爲了在一個統一的系統中實現所有這些功能,Three.js動畫系統在2015年進行了全面改變,現在具有類似於Unity/Unreal Engine 4的架構。以下是系統的主要組件以及它們是如何協同工作的簡要概述:

  1. 動畫片段(Animation Clips):導入一個包含動畫的3D對象後,其中應包含一個名爲“animations”的數組,其中包含該模型的動畫片段。
  2. 關鍵幀軌跡(Keyframe Tracks):在動畫片段中,每個動畫屬性的數據都存儲在一個獨立的關鍵幀軌跡中。一個動畫片段可以由許多這樣的軌跡組成。
  3. 動畫混合器(Animation Mixer):動畫混合器控制實際的播放,可以將其視爲一個可以同時控制多個動畫的動畫播放器,混合和合並它們。
  4. 動畫操作(Animation Actions):動畫混合器由動畫操作控制。通過配置動畫操作,可以確定何時播放、暫停或停止混合器上的某個動畫片段,是否以及多久重複該片段,是否用淡入淡出或時間縮放等方式進行操作。
  5. 動畫對象組(Animation Object Groups):如果需要一組對象接收共享的動畫狀態,可以使用動畫對象組。
  6. 支持的格式和加載器(Supported Formats and Loaders):請注意,並非所有模型格式都包含動畫(如OBJ),並且只有部分Three.js加載器支持動畫片段序列。支持此類動畫的一些加載器包括:THREE.ObjectLoader、THREE.BVHLoader、THREE.ColladaLoader、THREE.FBXLoader、THREE.GLTFLoader、THREE.MMDLoader。請注意,3ds Max和Maya目前不能將多個動畫(指不在同一時間線上的動畫)直接導出到一個文件中。

Color management

色彩空間(color space)是一種特定的色彩組織方式,能夠在不同設備和應用之間準確、一致地表示、傳輸和再現色彩。色彩空間由若干參數定義,包括顏色原色、白點和轉換函數。每個色彩空間都旨在支持廣泛的顏色範圍,同時遵循精度和顯示技術的技術約束。

顏色原色(color primaries)定義了色彩空間中使用的基本顏色(例如紅、綠、藍),基於精度限制和可用顯示設備的功能進行選擇。白點(white point)是爲了平衡無色(如白色或灰色)在觀察者環境中的感知而指定的。轉換函數(transfer functions)定義了數值在色彩空間內外的映射,確定數值是如何表示物理照明或人類感知的。

色彩空間在3D應用和渲染工作流中扮演着各種角色,包括輸入色彩空間、工作色彩空間和輸出色彩空間。輸入色彩空間是指從各種來源(如顏色選擇器、紋理或3D模型)提供給應用程序的顏色。工作色彩空間是進行渲染、插值和其他操作的地方,通常採用開放域線性色彩空間,如線性sRGB(Linear-sRGB)。最後,輸出色彩空間決定了如何在設備上顯示顏色或將其寫入圖像,通常需要從工作色彩空間轉換爲另一個色彩空間。

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章