關於 UIFX - Motion Blur
概述
是什麼？
UIFX-MotionBlur 是一種新型的視覺效果，能在不使用 Post Processing Stack 套件的情況下，為 Unity 的 UI (uGUI) 組件添加動態模糊效果。
為什麼？
添加動態模糊效果能顯著提升快速移動的 UI 組件的視覺效果和專業感，因為這會讓動畫看起來更流暢，尤其在大型顯示設備（如影片牆，數位看板）以及文字上十分明顯。
目前，Unity 的 UI 系統並未提供任何動態模糊的渲染選項。
CHOCOLATE DINOSAUR 致力於創造流暢且專業的動態效果，因此我們建立了這個動態模糊系統以提升我們的 UI 動畫品質，我們希望能提供給更多人使用。
如何使用？
只需要將一個 UIFX-MotionBlur 組件添加到你的 UI 組件上，這樣就可以了！
無論是在變換層面還是在每個頂點層面，該組件會追蹤物件的所有動態（包括平移、旋轉和縮放），然後，會根據這些動態生成一個新的網格，並將其渲染在原始 UI 幾何圖形的位置。只有在物件移動時，這種效果才會發揮作用。
特點
- 容易使用
- 高度優化
- 支援跨平台
- 內建/通用渲染管線(URP)/高清渲染管線(HDRP)
- 包含源代碼
- 文件齊全
- 提供良好的支援
- 提供 API 文件
- 支援 TextMeshPro (TMP)
- 無需 Post Processing Stack 套件。
相容性
| Unity 版本 | 2023.x | 2022.x | 2021.x | 2020.x | 2019.x | 2018.x | 2017.x |
|---|---|---|---|---|---|---|---|
| 支援 | ✓ | ✓ | ✓ | ✓ | ✓ | ✗ | ✗ |
| 平台 | Windows/UWP | macOS | Linux | Android | iOS / tvOS | WebGL | PS4 / PS5 | XBox One |
|---|---|---|---|---|---|---|---|---|
| 支援 | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
| 渲染管線 | 內建 | 通用渲染管線(URP) | 高清渲染管線(HDRP) |
|---|---|---|---|
| 支援 | ✓ | ✓ | ✓ |
相依性
這個插件需要 Unity 預設即包含Unity.UI套件。
資源套件
這個資源套件包含以下檔案：
包含一個示範場景，所有的腳本都使用組件定義檔案進行分組。
組件
我們提供兩種品質等級不同的組件，名為MotionBlurSimple和MotionBlurReal。
MotionBlurSimple組件雖然在效能上表現較好，但MotionBlurReal組件在視覺品質上卻更勝一籌。
為了支援 TextMeshPro，我們還額外提供了 MotionBlurSimpleTMP 和 MotionBlurRealTMP 這兩個組件。
整體功能對照表
| 功能 | MotionBlurSimple | MotionBlurReal |
|---|---|---|
| 視覺品質 | 中 | 高 |
| CPU 負載 | 低 | 低 |
| GPU 負載 | 低 | 中 |
支援功能
| UI 功能 | MotionBlurSimple | MotionBlurReal | 註解 |
|---|---|---|---|
| 組件： | |||
| 文字(Text) | ✓ | ✓ | |
| 圖像(Image) | ✓ | ✓ | |
| 原始圖像(RawImage) | ✓ | ✓ | |
| 遮罩(Mask) | ✓ | ✓ | |
| 2D 矩形遮罩(Rect Mask 2D) | ✓ | ✓ | |
| CanvasGroup | ✓ | ✓ | |
| TextMeshPro | ✓ | ✓ | See Notes for MotionBlurReal |
| 自定義(Custom) | ✓ | ✓ | See Notes for MotionBlurReal |
| Canvas 渲染模式： | |||
| 螢幕空間重疊(Screen-Space Overlay) | ✓ | ✗ | 即將推出* |
| 螢幕空間相機(Screen-Space Camera) | ✓ | ✓ | |
| 世界空間(World Space) | ✓ | ✗ | 即將推出* |
| 世界空間相機類型： | |||
| 正交(Orthographic) | ✓ | ✓ | |
| 投影(Perspective) | ✓ | ✗ | |
| 渲染管線： | |||
| 內建(Built-in) | ✓ | ✓ | |
| 通用渲染管線(URP) | ✓ | ✓ | |
| 高清渲染管線(HDRP) | ✓ | ✓ | |
| 效果： | |||
| 陰影(Shadow) | ✓ | ✓ | 如果先應用陰影效果，MotionBlurSimple 會出現閃爍的渲染。 |
| 輪廓(Outline) | ✓ | ✓ | 如果先應用輪廓效果，MotionBlurSimple 會出現閃爍的渲染。 |
| 色彩空間： | |||
| 伽瑪值(Gamma) | ✓ | ✓ | |
| 線性(Linear) | ✓ | ✓ |
進階註解
Frame-rate Independent Notes
There is an property FrameRateIndependent which enables frame-rate independent motion blur. This option is enabled by default, and it causes scaling of the motion blur length based on the frame rate. This results in a consistent motion blur length regardless of the frame-rate. This is often desired if motion-blur is meant to be used artistically so that it looks the same at different frame-rates. With this option disabled, the motion-blur will behave more naturally - ie, when the frame-rate is low the motion blur trail will become longer, and when the frame-rate is higher it will become shorter.
UI 效果
Shadow 和 Outline 這類型的效果，可以和任何的動態模糊效果配合使用，但如果想要達到最好的效果，建議在應用動態模糊效果之後再使用這些效果。
由於MotionBlurSimple直接將動態模糊的四邊形渲染到 UI 上，所以任何應用的效果（例如Shadow或Outline）也會被多次渲染，這會造成使用這些效果比使用只渲染單個四邊形的MotionBlurReal價格更高。
表現
UIFX-MotionBlur資源已經進行了多次優化，因此我們可以確信它在執行其任務時的效能相當高。但還是有些事項需要考慮，請參閱每個組件的功能說明文件。
垃圾收集
兩個組件都已經過優化，可減少垃圾生成。
TextMeshPro (TMP) / 自定義 UI 組件
請參考MotionBlurSimple的註解。
請參考MotionBlurReal的註解。