LearnGL - 09 - Include IMGUI - Dear ImGui - 添加Dashboard、Debugging Panel

LearnGL - 学习笔记目录

本人才疏学浅，如有什么错误，望不吝指出。

上些篇：

• LearnGL - 08.1 - Camera - GLM 版，了解OpenGL 的一些几何变换，其中包含了摄像机的封装。

这一篇：将引入开源库 Dear ImGui，来方便后续的调试工作。

在学习 OpenGL 过程，免不了需要有一些 GUI 来方便数据调试。

我之前取搜索过，发现 Dear ImGui 在制作 2D GUI 非常的适合，库小，功能强大，GUI 还很舒服，因为基本都是纯色。

如果你想了解 Dear ImGui，可以查看我之前的一篇：IMGUI 系统 - Dear ImGUI，这里不回去写 ImGui 的教程，因为内容说多不多，说少也不少（因为如果要写好一些通俗易通的教程，最好的还是录制视频，但我又不想录制视频）。

Dashboard - 仪表板

我们的 Dashboard 主要是用于显示：

• 这次的主题是什么
• 窗口大小是多少
• 还有 fps，等信息的显示就好了

目前就这些内容，后续按需添加其他功能就可以了

长下面图片的样式

Code

代码比较简单：

void showDashboardWin(bool* p_open) {
	const float DISTANCE = 10.0f;
	static int corner = 0;
	ImGuiIO& io = ImGui::GetIO();
	if (corner != -1) {
		// 0 : top-left
		// 1 : top-right
		// 2 : bottom-left
		// 3 : bottom-right
		// corner & 1 ==> (top-left || bottom-right)
		// corner & 2 ==> (bottom-left || bottom-right)
		ImVec2 window_pos = ImVec2((corner & 1) ? io.DisplaySize.x - DISTANCE : DISTANCE, (corner & 2) ? io.DisplaySize.y - DISTANCE : DISTANCE);
		ImVec2 window_pos_pivot = ImVec2((corner & 1) ? 1.0f : 0.0f, (corner & 2) ? 1.0f : 0.0f);
		ImGui::SetNextWindowPos(window_pos, ImGuiCond_Always, window_pos_pivot);
	}
	ImGui::SetNextWindowBgAlpha(0.35f);					// 背景透明 35% 的alpha值
	ImGuiWindowFlags window_flags = 
		ImGuiWindowFlags_NoDecoration |					// 不需要标题、不需要调整大小、不需要滚动条、不需要折叠
		ImGuiWindowFlags_AlwaysAutoResize |				// 自动调整大小
		ImGuiWindowFlags_NoSavedSettings |				// 不需要保存会加载布局信息
		ImGuiWindowFlags_NoFocusOnAppearing |			// 显示时不需要获取交点
		ImGuiWindowFlags_NoNav;							// 不需要 navigation 的操作交互
	if (corner != -1) {
		window_flags |= ImGuiWindowFlags_NoMove;		// 如果不是 -1 则不能移动
	}
	if (ImGui::Begin("jave's Dashboard", p_open, window_flags)) {
		ImGui::Text(" --- Dashboard --- ");
		ImGui::Separator();
		ImGui::Text(
			"Demo : 09_Add_GUI_System_Dear_ImGui\n" 
			"Window Size : %d x %d\n"
			"(right-click to change position)", 
			win_width, win_height);
		ImGui::Separator();
		ImGui::Text("FPS : %.1f (ds : %.3f ms/frame)", 1.0f / Timer::inst()->deltaTime, Timer::inst()->deltaTime * 1000);
		if (ImGui::BeginPopupContextWindow()) {
			if (ImGui::MenuItem("Custom", NULL, corner == -1)) corner = -1;
			if (ImGui::MenuItem("Top-left", NULL, corner == 0)) corner = 0;
			if (ImGui::MenuItem("Top-right", NULL, corner == 1)) corner = 1;
			if (ImGui::MenuItem("Bottom-left", NULL, corner == 2)) corner = 2;
			if (ImGui::MenuItem("Bottom-right", NULL, corner == 3)) corner = 3;
			if (p_open && ImGui::MenuItem("Close")) *p_open = false;
			ImGui::EndPopup();
		}
	}
	ImGui::End();
}

ContextMenu - 上下文菜单/右键菜单

从 Dashboard 中的 right-click to change position 文字提示，可以知道，鼠标右键可以调整位置

从代码中可以看到我们吃根据一个 corner 来判断处理的

弄个 GIF 看看：

Debugging Panel - 调试面板

目前长这个样子

Shortcuts - 快捷键

提示一些快捷键信息

• Exiting Application(Shift+F4) ，退出程序
• Enabled Cursor(H)，是否启用鼠标/光标

Informations - 其他信息

目前我是直接放到一些简单的分栏中

后面还可以自己制作一个完全的 Console 或是 Log 面板，方便输出日志记录用。

Time - 时间相关的

目前就：

• ScaleTime 当前的时间缩放倍率，后续在调试一些动画效果，比较有用
• TargetFPS 设置的期望的 FPS 更新频率

Draw State - 绘制状态

目前为了代表性的添加 GUI 功能，象征性的只添加一个：Clear Color，就是 glClear 值的 ClearColor 的颜色值

Camera - 相机

最后是我们的相机

Reset - 重置

重置相机的设置参数，下面就是我们本身的镜头参数，之前拉远一些镜头方便其他 GUI 的效果查看

Enabled Camera Control - 启用相机控制

开启后（勾上复选框）后，我们就可以用鼠标的左右上下来控制相机的：Yaw、Pitch，也可以用 W, S, A, D 按键来控制相机的左右上下的平移

可以用鼠标来勾选复选框，也可以用快捷键：C，来启用或禁用相机的控制

GIF 效果如下：

Transform - 变换

• Pos 相机的位置
• Fov 全写是：Field Of View 相机的视角（Frustum 的 Top 与 Bottom 的夹角）（单位：角度）
• Near 近截面
• Far 远截面
• Yaw 相机绕Y轴的旋转量
• Pitch 相机绕X轴的旋转量

Code

void showToolsPanel() {
	ImGui::Begin("Jave's Debugging Panel");
	if (ImGui::CollapsingHeader("Shortcuts")) {
		ImGui::Text("Exiting Application(Shift+F4)");
		ImGui::Text("Enabled Cursor(H) : %s", getEnabledCursor() ? "true" : "false");
	}
	if (ImGui::CollapsingHeader("Informations")) {
		ImGui::Text("IsAnyItemActive : %s", ImGui::IsAnyItemActive() ? "true" : "false");
		ImGui::Checkbox("ShowDashBoard", &show_dashboard);
	}
	if (ImGui::CollapsingHeader("Time")) {
		ImGui::SliderFloat("ScaleTime", &Timer::inst()->scaled, 0, 2);
		ImGui::SliderInt("TargetFPS", &targetFPS, 1, 120);
	}
	if (ImGui::CollapsingHeader("Draw State")) {
		ImGui::ColorEdit4("ClearColor", glm::value_ptr(clearCol));
	}
	if (ImGui::CollapsingHeader("Camera")) {
		if (ImGui::Button("Reset")) {									// 恢复相机
			memcpy(cam, backupCam, sizeof(Camera));
			memcpy(camCtrl, backupCamCtrl, sizeof(CameraController));
		}
		ImGui::Checkbox("Enabled Camera Control(C)", &enabledCamCtrl);
		ImGui::Separator();
		ImGui::Text("Transform:");
		ImGui::Separator();
		ImGui::Indent();
		//ImGui::InputFloat3("Pos", glm::value_ptr(cam->mPosition), 1); // 可以用输入条
		//ImGui::SliderFloat3("Pos", glm::value_ptr(cam->mPosition), -100.0f, 100.0f); // 也可以使用滑动条
		ImGui::DragFloat3("Pos", glm::value_ptr(cam->mPosition), 0.01f, -100.0f, 100.0f); // 可以使用拖拽条，这个体验就好，所以使用这个
		ImGui::DragFloat("Fov", &cam->mFov, 0.1f, 1.0f, 60.0f);
		ImGui::DragFloat("Near", &cam->mNear, 0.1f, 0.1f, 1000.0f);
		ImGui::DragFloat("Far", &cam->mFar, 0.1f, 0.1f, 1000.0f);
		ImGui::DragFloat("Yaw", &camCtrl->mYaw, 0.01f);
		ImGui::DragFloat("Pitch", &camCtrl->mPitch, 0.01f);
		camCtrl->updateCameraVectors();
		ImGui::Unindent();
	}
	ImGui::End();

	if (show_dashboard) {
		showDashboardWin(&show_dashboard);
	}
}

OK，就到这里吧，这个 Dear ImGui 还有很多强大的功能，后续需要的时候再使用。

如果你要制作一个 3D Engine，GUI 截面可以考虑使用 Dear ImGui，至于场景的 3D IMGUI，也是可以使用另一些开源库来实现（有现成的，真的太好了）

References

• IMGUI 系统 - Dear ImGUI