上一篇繪制三角形的教程作為系列第一篇教程，會稍微詳細一些。但是這一篇教程開始，已經(jīng)出現(xiàn)過的代碼就不會再贅述。在繪制三角形之外，我個人覺得The-Forge還有一些細節(jié)可以講解，但是和渲染關(guān)系又不是很大，所以放在第01講和02講之間，作為補充知識點。以實用技巧為主，大家也可以不去過分深究其原理。本節(jié)的內(nèi)容是The-Forge內(nèi)置GUI和profiler功能。

The-Forge內(nèi)置的GUI系統(tǒng)為經(jīng)典的IMGUI，https://github.com/ocornut/imgui 。IMGUI 也是一代經(jīng)典UI庫了，如果對開源接觸較多的同學(xué)，可能會經(jīng)?？吹竭@個UI風(fēng)格。The-Forge內(nèi)置的profiler也使用IMGUI進行繪制，想接入profiler必須接入UI，因此本教程放在一起了。

在01中的三角形上繼續(xù)開發(fā)。

首先，添加全局變量：

在profiler之外，還會編寫一個簡單的UI，有與bToggleVSync相關(guān)聯(lián)的復(fù)選框，可以控制運行時是否開啟垂直同步。

在Init函數(shù)中添加：

在Exit函數(shù)中添加：

在Load函數(shù)中添加：

在Unload函數(shù)中添加：

在Update函數(shù)中添加：

在原本繪制三角形的代碼中，Update的函數(shù)為空

在draw函數(shù)中：

在beginCmd后添加：cmdBeginGpuFrameProfile(cmd, gGpuProfileToken);

在endCmd前添加：cmdEndGpuTimestampQuery(cmd, gGpuProfileToken);

之后就可以在該Cmd內(nèi)，使用cmdBeginGpuTimestampQuery和cmdEndGpuTimestampQuery，測量任意代碼段的GPU時間，比如：

在三角形drawcall后添加一個render pass，用來繪制GUI和profiler

profiler可以量自己的損耗，所以不用擔(dān)心先有雞還是先有蛋的問題

現(xiàn)在運行，會得到如下結(jié)果