WebGL（TODO）

（TODO）

https://webglsamples.org/aquarium/aquarium.html

SpectorJS - Explore and Troubleshoot your WebGL scenes with ease

判断一个 WebGL 程序是否使用了 GPU，可以通过以下几种方法进行检查：

### 1. **使用浏览器的开发者工具**
大多数现代浏览器都提供了开发者工具，可以用来检查 WebGL 的运行情况，并查看是否正在使用 GPU 进行渲染。

- **Chrome 浏览器**:
  1. 打开开发者工具（`F12` 或 `Ctrl+Shift+I`）。
  2. 转到 “Performance” 标签。
  3. 录制一段页面的运行情况，然后查看是否有 GPU 的相关活动，如 GPU 图层的渲染、绘制等。

  你还可以在 “WebGL” 调试选项卡中查看当前的 WebGL 程序状态，以及运行时使用的渲染上下文。

- **Firefox 浏览器**:
  1. 打开开发者工具（`F12` 或 `Ctrl+Shift+I`）。
  2. 转到 “WebGL 调试” 选项卡（如果没有看到这个选项卡，可能需要在设置中启用它）。
  3. 在该选项卡中，可以查看 WebGL 程序的详细信息，如着色器程序、缓冲区等。

### 2. **查看 WebGL 渲染上下文信息**
WebGL 提供了一个 `getParameter` 方法，可以用来查询当前 WebGL 渲染上下文的信息。

你可以在控制台中执行以下 JavaScript 代码，来查看 WebGL 使用的 GPU 和渲染器信息：

```javascript
const canvas = document.createElement('canvas');
const gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');

const debugInfo = gl.getExtension('WEBGL_debug_renderer_info');
const vendor = gl.getParameter(debugInfo.UNMASKED_VENDOR_WEBGL);
const renderer = gl.getParameter(debugInfo.UNMASKED_RENDERER_WEBGL);

console.log(`Vendor: ${vendor}`);
console.log(`Renderer: ${renderer}`);
```

- **`UNMASKED_VENDOR_WEBGL`** 会显示 GPU 的制造商（如 `NVIDIA`, `AMD`, `Intel`）。
- **`UNMASKED_RENDERER_WEBGL`** 会显示具体的 GPU 型号。

如果返回的 `renderer` 值为 `Software Renderer` 或类似字样，说明程序正在使用软件渲染，而不是 GPU。

### 3. **检查系统任务管理器或 GPU 监控工具**
在运行 WebGL 程序时，可以通过系统任务管理器或专用的 GPU 监控工具查看 GPU 的使用情况。

- **Windows**:
  - 打开任务管理器 (`Ctrl + Shift + Esc`)。
  - 转到“性能”选项卡，然后选择“GPU”。你可以在“3D”或“视频编码”部分查看 GPU 使用情况。
  
- **macOS**:
  - 使用“活动监视器”（Activity Monitor），转到“GPU 压力”或“GPU 压力（延迟）”查看 GPU 的负载情况。

### 4. **性能对比测试**
可以通过在禁用 GPU 加速和启用 GPU 加速两种情况下运行 WebGL 程序进行性能对比。

- **禁用 GPU 加速**:
  1. 在 Chrome 浏览器中，访问 `chrome://settings/`，搜索 `Hardware acceleration`，然后关闭“Use hardware acceleration when available”。
  2. 重启浏览器后运行 WebGL 程序，观察性能。

- **启用 GPU 加速**:
  1. 打开 GPU 加速选项，重启浏览器后再运行 WebGL 程序，观察性能是否有显著提升。

### 5. **使用 WebGL Profiler 工具**
可以使用一些第三方工具，如 `webgl-inspector`、`Spector.js`，这些工具可以深入分析 WebGL 程序的性能，并提供详细的 GPU 使用情况。

- **Spector.js** 是一个很受欢迎的 WebGL 调试和分析工具，能够捕获和分析 WebGL 调用，并显示 GPU 资源的使用情况。可以通过 [Spector.js 官方网站](https://spector.babylonjs.com/) 安装和使用该工具。

通过这些方法，你可以有效地判断 WebGL 程序是否正在使用 GPU。