WebGL2简介

WebGL2 是 WebGL 的升级版本，基于 OpenGL ES 3.0 规范，而 WebGL 1.0 基于 OpenGL ES 2.0。WebGL2 在功能、性能和灵活性上均有显著提升。以下是两者的主要区别和 WebGL2 的关键改进：

1. 核心区别

特性 WebGL 1.0 WebGL 2.0
基础规范 OpenGL ES 2.0 OpenGL ES 3.0
着色器语言 GLSL ES 1.00 GLSL ES 3.00
兼容性 广泛支持（包括老旧设备） 要现代浏览器（Chrome、Firefox、Edge 等）
扩展功能内置化 许多功能需通过扩展（如实例化渲染） 直接支持（如实例化、VAO 等）

2. WebGL2 的主要改进

(1) 着色器增强

GLSL ES 3.00 支持：

更灵活的纹理访问（如非 2 幂纹理无需特殊处理）。

循环控制（loop 支持动态限制）。

位运算（如 bitfieldExtract）。

新的内置函数（如 textureSize 获取纹理尺寸）。

(2) 纹理与渲染

3D 纹理支持：直接支持 TEXTURE_3D 和 TEXTURE_2D_ARRAY。

更多纹理格式：如浮点纹理（RGBA32F）、深度纹理（DEPTH24_STENCIL8）。

多重采样渲染：内置 WEBGL_multisampled_render_to_texture。

(3) 顶点处理

顶点数组对象 (VAO)：原生支持，减少绘制调用的开销（WebGL1 需扩展 OES_vertex_array_object）。

实例化渲染：原生 gl.drawArraysInstanced 和 gl.drawElementsInstanced。

(4) 缓冲与数据操作

统一缓冲区 (UBO)：允许高效共享数据 between 着色器。

变换反馈：捕获顶点着色器输出（需扩展 WEBGL_transform_feedback）。

像素缓冲区对象 (PBO)：异步像素数据传输（gl.readPixels 更高效）。

(5) 其他功能

非幂次纹理 (NPOT)：无需强制处理为 2 的幂次尺寸。

增强的混合模式：如 gl.min/gl.max 混合方程。

3. 代码差异示例

顶点着色器（GLSL）

glsl
// WebGL 1.0 (GLSL ES 1.00)
attribute vec3 position;
uniform mat4 modelViewMatrix;

// WebGL 2.0 (GLSL ES 3.00)
in vec3 position;
uniform mat4 modelViewMatrix;
out vec3 vPosition; // 支持更多输出变量

纹理采样

// WebGL 1.0 需要检查 NPOT 支持
const texture = gl.createTexture();
if (isPowerOf2(image.width)) {
  gl.generateMipmap(gl.TEXTURE_2D);
}

// WebGL 2.0 直接支持 NPOT
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);

4. 兼容性与启用

检测支持：

const canvas = document.createElement('canvas');
const gl = canvas.getContext('webgl2');
if (!gl) console.warn("WebGL2 not supported!");

回退方案：若不支持 WebGL2，可降级到 WebGL1 或提示用户升级浏览器。

5. 适用场景

WebGL1：简单项目或需要最大兼容性时。

WebGL2：复杂 3D 应用（如游戏、科学可视化），需高性能渲染或高级功能时。

总结

WebGL2 通过规范升级和功能内置化，显著提升了图形渲染能力，减少了扩展依赖。对于新项目，建议优先考虑 WebGL2（需权衡目标用户设备的支持情况）。