WebGL 是什么：能力边界与 OpenGL ES 的关系
一句话结论：WebGL 是浏览器内置的 GPU 绘图接口，把 OpenGL ES 的能力暴露给 JavaScript，它只负责画，不负责场景管理。
WebGL 技术定位与能力边界
是什么
WebGL（Web Graphics Library）是一套浏览器内置的 JavaScript 图形接口，运行在 canvas 元素上，让网页直接调用 GPU 完成 2D 与 3D 渲染。它由 Khronos Group 制定，本质是 OpenGL ES 在浏览器环境中的 JavaScript 绑定，不需要任何插件。
解决什么问题
WebGL 解决的是网页图形渲染性能问题。传统 Canvas 2D 由 CPU 逐个像素绘制，绘制十万个顶点就会明显掉帧；WebGL 把顶点变换与像素着色交给 GPU 并行执行，同一帧可以处理百万级顶点，并且能把结果直接输出到页面，不需要服务端预渲染图片。
为什么这样做
浏览器不能让网页直接访问显卡驱动，否则等于开放内核权限。WebGL 的做法是把 GPU 能力裁剪成一条受控管线：JavaScript 只提交数据与状态，GPU 按着色器执行，驱动与浏览器负责校验与隔离。代价是接口粒度粗、状态切换昂贵，能力也被限制在 OpenGL ES 的安全子集内。
怎么用
const canvas = document.getElementById('scene');
const gl = canvas.getContext('webgl');
if (!gl) throw new Error('当前环境不支持 WebGL');
gl.clearColor(0.1, 0.1, 0.15, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
常见坑
- 拿到
null上下文仍继续调用接口 → 原因：设备不支持或上下文创建失败 → 处理：判断返回值并降级到 Canvas 2D 或静态图 - 以为 WebGL 自带相机、光照、模型加载 → 原因：它只是绘图接口 → 处理：矩阵运算、材质、场景图都需自己实现或交给引擎
- 主线程卡顿 → 原因：每帧在 CPU 侧做大量几何计算与状态切换 → 处理：把固定几何数据预计算并复用缓冲对象
WebGL 与 OpenGL ES 的对应关系
是什么
WebGL 1.0 对应 OpenGL ES 2.0，WebGL 2.0 对应 OpenGL ES 3.0。函数命名、状态机语义、着色器语言 GLSL ES 都沿用同一套规范，仅在浏览器无法保证的能力上做了删减，例如不能直接操作内存地址、不能加载本地着色器文件。
解决什么问题
版本对应关系决定了代码可移植性。按 OpenGL ES 3.0 写的渲染逻辑可以平滑迁移到 WebGL 2.0，移动端图形代码也能与网页共享思路；同时明确 1.0 与 2.0 的能力差距，才能判断某个特性是否可用、是否需要扩展。
为什么这样做
浏览器要同时兼容桌面、移动与老旧设备，因此必须保留一条低基线：WebGL 1.0 要求的特性在所有目标设备上几乎都能满足，而纹理数组、多重渲染目标这类进阶能力被放进 WebGL 2.0 或扩展中按需启用，避免新特性把老设备挡在外面。
怎么用
| 能力 | WebGL 1.0（OpenGL ES 2.0） | WebGL 2.0（OpenGL ES 3.0） |
|---|---|---|
| 着色器语言 | GLSL ES 1.00 | GLSL ES 3.00（#version 300 es） |
| 多重渲染目标 | 依赖 WEBGL_draw_buffers 扩展 | 原生支持 |
| 纹理数组、3D 纹理 | 不支持 | 原生支持 |
| 统一缓冲（UBO） | 不支持 | 原生支持 |
| 实例化绘制 | 依赖 ANGLE_instanced_arrays 扩展 | 原生支持 |
// 优先取 WebGL 2.0，失败再回退 1.0
const gl = canvas.getContext('webgl2') || canvas.getContext('webgl');
const isWebGL2 = typeof WebGL2RenderingContext !== 'undefined'
&& gl instanceof WebGL2RenderingContext;
常见坑
- 照搬桌面 OpenGL 的 GLSL 语法 → 原因：桌面版支持隐式类型转换与旧语法 → 处理：GLSL ES 要求显式精度限定符与类型转换
- 在 WebGL 1.0 上下文使用 3.0 特性 → 原因：上下文与代码版本不匹配 → 处理：用能力检测切换实现，而不是直接写死
- 依赖扩展却不检测可用性 → 原因：扩展在部分设备缺失 → 处理：先
getExtension()判断，再决定渲染分支
要点总结
- WebGL 是浏览器内置的 GPU 绘图接口，是 OpenGL ES 在网页端的绑定，不需要插件
- WebGL 只负责绘制，相机、光照、场景管理都要自行实现或使用引擎
- WebGL 1.0 对应 OpenGL ES 2.0，WebGL 2.0 对应 OpenGL ES 3.0，升级前需做能力检测
- 二维图表与简单动画优先选 Canvas 2D、SVG，三维与海量图元才用 WebGL
- 上下文创建失败必须显式降级，不能假定所有设备都支持
