Unite 2016 上海站 - Unity 5.x編輯器新功能Frame Debugger

作者:張黎明

Unity 5.0發佈到現在已經有一年多的時間，帶來了即時GI、PBR等新特性，相信大家已經耳熟能詳。今天Unity大中華區技術總監張黎明，將為大家介紹幾個不太容易被關注但可以為遊戲開發帶來很多的便利的功能。

首先來看一下Frame Debugger，它是隨著5.0版一起發佈的新功能。從它的名字可以看出這是一個幀除錯器，也就是用來除錯圖形渲染管線的。

如果對圖形渲染比較熟悉的工程師應該都知道，過去我們一般會採用第三方的GPU除錯工具來排除渲染錯誤，比如微軟的Visual Studio Graphics Debugger, Nvidia的Nsight，AMD的PerfStudio，Intel的GPA等等。這些工具都提供了強大的功能，但是他們獨立在Unity Editor使用不是很方便，無法支援所有的開發平臺。Frame Debugger的出現正是解決了這些不便之處。 

下面我們具體來看一下怎麼使用Frame Debugger。首先從Editor的Window視窗內選擇Frame Debugger功能表，打開Frame Debugger視窗，如下： 

點擊Frame Debugger視窗的Enable按鈕，編輯器就會立刻捕捉當下渲染的一幀，並將所有的Draw Call和渲染事件顯示到視窗左邊的樹狀結構裡面。拖動Frame Debugger視窗最上邊捲軸的滑塊可以指定當下渲染到哪一個Draw Call，你也可以點擊左邊樹狀視圖中的任意選項來指定執行到哪一個狀態。視窗右邊是當前Draw Call的狀態資訊。

下面我們透過三個案例來展示如何通過Frame Debugger分析Unity的渲染流程。 第一個Demo是分析了UGUI的渲染流程。

我們知道UGUI裡面可以通過Canvas來管理UI，在同一個Canvas內的UI元素會被優先合併到一個Draw Call裡。透過調整UI元素和Canvas的層級結構之後觀察Frame Debugger內的渲染流程可以看到不同的渲染過程。 首先我們把所有UI元素放在Hierarchy視窗的相同層級下，如圖所示：

這時候啟動Frame Debugger，逐個Draw Call查看渲染流程發現，所有三個文本元素都會被合併到一個Draw Call，兩個按鈕的背景圖案也會合並到一個Draw Call。截圖是文本元素渲染前後的截圖。

如果把5個UI元素分組，其中三個放到一個Canvas，另外兩個放到另外一個Canvas，渲染結果會發生變化，修改後的層級圖如下：

經過修改之後會發現三個元件已經不在一個Draw Call內完成，而是分配到兩個Canvas的渲染佇列中執行。首先繪製了左邊Button按鈕的Text元件，然後右邊的兩個Text元件是在一個Draw Call內完成的。

第二個Demo使用最簡單場景的Forward Rendering執行流程，可以看到動態陰影的渲染過程。首先是清空螢幕，然後渲染一張深度貼圖，以備後面的Image Effect等功能使用。

然後渲染Shadow Map, 並在Shadow Map渲染完成之後在螢幕空間內計算出陰影的圖案。之後是渲染場景，並採樣剛生成的陰影圖得到完整的光照效果。

Shadow Map：

螢幕空間的陰影圖：

場景光照+陰影結果：

最後是渲染天空盒。把天空盒放在最後渲染可以減少GPU的圖元填充，提高渲染效率。

第三個Demo透過開啟Deferred Rendering來觀察延遲渲染的執行流程。我們可以看到Unity引擎首先渲染場景資訊到GBuffer，GBuffer的資訊可以從Frame Debugger視窗的右半部查看。

這裡可以看到使用了4個Render Target及深度緩衝區，其中包含光滑度資訊、高光資訊、Diffuse顏色和法線顏色等。4個Render Target的截圖如下：

Diffuse顏色：

高光顏色及粗糙度：

法線顏色：

自發光顏色等：

深度緩衝區：

以上是Deferred Rendering下渲染的GBuffer資料，我們也可以按照以上步驟查看所需的其他資訊。