WebGL Inspector:专业级 WebGL 调试工具箱
WebGL Inspector 借鉴了 gDEBugger 和 PIX 的设计理念,专为简化高级 WebGL 应用开发而生。它就像 HTML/JS 开发中的 Firebug 或开发者工具一样,为 WebGL 提供了强大的调试能力。
核心功能特性
WebGL Inspector 提供了丰富的调试功能,主要包括:
- 无缝嵌入:只需引入一个
<script>标签,就能将其整合进现有的项目中 - 扩展使用:无需修改目标代码,即可作为浏览器扩展注入页面
- 全面捕获:记录整个帧的 GL 活动,包含带冗余调用警告的注释调用日志
- 逐帧分析:支持逐步浏览帧中的所有调用(前进/后退/跳转等)
- 像素历史:查看影响特定像素的所有绘制调用及混合信息
- 非破坏性:所有操作都在独立的 GL 上下文中进行,不影响宿主页面
- 状态显示:实时显示内部 GL 状态
- 资源信息:提供纹理、缓冲区、程序、着色器等资源信息
- 性能优化:提供性能调优选项和统计信息
集成与使用方式
直接嵌入方式
在您的 WebGL 应用程序中包含单个脚本即可开始调试:
<script src="core/embed.js"></script>
如果需要调试检查器本身,可以在脚本包含前设置 gliEmbedDebug 变量:
var gliEmbedDebug = true;
<script src="core/embed.js"></script>
浏览器扩展方式
WebGL Inspector 支持多种浏览器的扩展安装:
Chromium 浏览器
- 导航到
chrome://extensions - 点击'加载已解压的扩展程序',选择
extensions/chrome/目录 - 打开包含 WebGL 内容的页面,点击地址栏右上角的'GL'图标
Firefox 浏览器
- 运行
cd core && ./buildextensions.sh - 在 Firefox 中打开
core/extensions/firefox/webglinspector.xpi
项目结构
WebGL Inspector 采用模块化设计,主要目录结构包括:
- - 核心功能代码

