01a. The-Forge 入门教程 - GUI & profiler

上一篇绘制三角形的教程作为系列第一篇教程，会稍微详细一些。但是这一篇教程开始，已经出现过的代码就不会再赘述。在绘制三角形之外，我个人觉得The-Forge还有一些细节可以讲解，但是和渲染关系又不是很大，所以放在第01讲和02讲之间，作为补充知识点。以实用技巧为主，大家也可以不去过分深究其原理。本节的内容是The-Forge内置GUI和profiler功能。

The-Forge内置的GUI系统为经典的IMGUI，https://github.com/ocornut/imgui 。IMGUI 也是一代经典UI库了，如果对开源接触较多的同学，可能会经常看到这个UI风格。The-Forge内置的profiler也使用IMGUI进行绘制，想接入profiler必须接入UI，因此本教程放在一起了。

在01中的三角形上继续开发。

首先，添加全局变量：

在profiler之外，还会编写一个简单的UI，有与bToggleVSync相关联的复选框，可以控制运行时是否开启垂直同步。

在Init函数中添加：

在Exit函数中添加：

在Load函数中添加：

在Unload函数中添加：

在Update函数中添加：

在原本绘制三角形的代码中，Update的函数为空

在draw函数中：

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

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

之后就可以在该Cmd内，使用cmdBeginGpuTimestampQuery和cmdEndGpuTimestampQuery，测量任意代码段的GPU时间，比如：

在三角形drawcall后添加一个render pass，用来绘制GUI和profiler

profiler可以量自己的损耗，所以不用担心先有鸡还是先有蛋的问题

现在运行，会得到如下结果