3.6 WebGL 2.0 新特性 (WebGL 2.0 Features)

文档摘要

3.6 WebGL 2.0 新特性 (WebGL 2.0 Features) 第三章：WebGL 高级技术领域 - 3.6 WebGL 2.0 新特性 3.6.1 WebGL 2.0 概述与重要性 WebGL 1.0 基于 OpenGL ES 2.0，提供了一个在浏览器中渲染 3D 图形的标准接口。然而，随着图形技术的发展，WebGL 1.0 的一些限制逐渐显现。WebGL 2.0 的出现正是为了弥补这些不足，它基于 OpenGL ES 3.0，带来了性能、功能和灵活性方面的显著提升。 WebGL 2.0 的重要性体现在以下几个方面：性能提升： WebGL 2.

3.6 WebGL 2.0 新特性 (WebGL 2.0 Features)

第三章：WebGL 高级技术领域 - 3.6 WebGL 2.0 新特性

3.6.1 WebGL 2.0 概述与重要性

WebGL 1.0 基于 OpenGL ES 2.0，提供了一个在浏览器中渲染 3D 图形的标准接口。然而，随着图形技术的发展，WebGL 1.0 的一些限制逐渐显现。WebGL 2.0 的出现正是为了弥补这些不足，它基于 OpenGL ES 3.0，带来了性能、功能和灵活性方面的显著提升。

WebGL 2.0 的重要性体现在以下几个方面：

性能提升： WebGL 2.0 引入了诸如顶点数组对象 (VAOs)、统一缓冲区对象 (UBOs)、实例渲染 (Instancing)、变换反馈 (Transform Feedback) 等特性，这些都能显著减少 CPU 和 GPU 之间的通信开销，提高渲染效率。
功能增强： WebGL 2.0 支持 3D 纹理、纹理数组、非二次幂纹理的更灵活使用、多渲染目标 (MRT)、采样器对象、查询对象等高级特性，使得开发者能够实现更复杂的渲染技术，例如延迟渲染、后处理效果、粒子系统、物理模拟等。
更现代的图形管线： WebGL 2.0 提供了更接近现代桌面图形 API (如 OpenGL 3.3+ 和 Direct3D 11+) 的功能集，为将现有的桌面图形应用移植到 Web 平台，以及开发更前沿的 Web 图形应用奠定了基础。
GLSL ES 3.0 支持： WebGL 2.0 使用 GLSL ES 3.0 作为着色器语言，它提供了更强大的语法和内置函数，例如纹理 LOD 控制、位操作、整数类型支持等，增强了着色器的表达能力和灵活性。

3.6.2 核心新特性详解与代码实践

接下来，我们将详细介绍 WebGL 2.0 的一些核心新特性，并结合代码示例进行说明。

3.6.2.1 顶点数组对象 (Vertex Array Objects, VAOs)

特性详解：

在 WebGL 1.0 中，顶点属性的绑定状态是全局的，每次绘制调用前都需要重新绑定和配置顶点属性，这会产生较大的开销。WebGL 2.0 引入了顶点数组对象 (VAOs)，VAOs 封装了顶点属性的配置状态，包括顶点缓冲对象 (VBOs)、属性指针、启用状态等。通过使用 VAOs，可以将顶点属性的配置信息预先存储起来，在绘制时只需绑定对应的 VAO 即可，大大减少了状态切换的开销，提升了渲染性能。

代码实践：


// 获取 WebGL 2.0 上下文
const canvas = document.getElementById('webglCanvas');
const gl = canvas.getContext('webgl2');
if (!gl) {
    console.error("WebGL 2.0 context not supported");
}
// 1. 创建 VAO
const vao = gl.createVertexArray();
// 2. 绑定 VAO
gl.bindVertexArray(vao);
// --- 以下操作在 VAO 绑定状态下进行 ---
// 创建并绑定顶点缓冲对象 (VBO)
const positionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
const positions = [
    // ... 顶点坐标数据 ...
];
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);
// 获取顶点着色器中 position 属性的位置
const positionAttributeLocation = gl.getAttribLocation(program, "position");
// 启用顶点属性并配置属性指针
gl.enableVertexAttribArray(positionAttributeLocation);
gl.vertexAttribPointer(positionAttributeLocation, 3, gl.FLOAT, false, 0, 0);
// --- VAO 绑定状态结束 ---
gl.bindVertexArray(null); // 解绑 VAO
// 绘制时，只需绑定 VAO
gl.bindVertexArray(vao);
gl.drawArrays(gl.TRIANGLES, 0, vertexCount);
gl.bindVertexArray(null); // 解绑 VAO

mermaid 图表：

内容详解：

代码示例展示了 VAO 的基本使用流程：

创建 VAO: 使用 gl.createVertexArray() 创建一个 VAO 对象。
绑定 VAO: 使用 gl.bindVertexArray(vao) 将 VAO 绑定为当前顶点数组对象。后续的顶点属性配置操作（如 VBO 绑定、glVertexAttribPointer、glEnableVertexAttribArray）都会记录到当前绑定的 VAO 中。
顶点属性配置: 在 VAO 绑定状态下，进行顶点缓冲对象 (VBO) 的创建和绑定，以及顶点属性的配置，例如指定属性位置、数据类型、步长、偏移量等。
解绑 VAO: 使用 gl.bindVertexArray(null) 解绑 VAO，结束 VAO 的配置阶段。
绘制时绑定 VAO: 在需要绘制图形时，只需使用 gl.bindVertexArray(vao) 重新绑定之前配置好的 VAO，即可快速恢复所有顶点属性的配置状态，然后进行绘制调用。

使用 VAO 可以有效地组织和管理顶点属性状态，减少状态切换的开销，特别是在场景复杂、需要绘制大量不同几何体的情况下，VAO 的性能优势更加明显。

3.6.2.2 统一缓冲区对象 (Uniform Buffer Objects, UBOs)

特性详解：

在 WebGL 1.0 中，uniform 变量的更新是逐个进行的，当 uniform 变量较多时，频繁地调用 gl.uniformXXX() 函数会产生较大的 CPU 开销。WebGL 2.0 引入了统一缓冲区对象 (UBOs)，UBOs 允许将多个 uniform 变量组织成一个缓冲区对象，一次性上传到 GPU。这不仅减少了 CPU 开销，还能够更有效地利用 uniform 块的布局，提高 uniform 数据的访问效率。

代码实践：


// 1. 创建 UBO
const ubo = gl.createBuffer();
// 2. 绑定 UBO 到 uniform 缓冲区绑定点 (例如绑定到索引 0)
const uboBindingPointIndex = 0;
gl.bindBufferBase(gl.UNIFORM_BUFFER, uboBindingPointIndex, ubo);
// 3. 获取 uniform 块的索引
const blockIndex = gl.getUniformBlockIndex(program, "MyUniformBlock");
// 4. 将 uniform 块索引绑定到指定的 UBO 绑定点
gl.uniformBlockBinding(program, blockIndex, uboBindingPointIndex);
// 5. 获取 uniform 块的大小 (用于分配缓冲区)
const blockSize = gl.getActiveUniformBlockParameter(program, blockIndex, gl.UNIFORM_BLOCK_DATA_SIZE);
// 6. 创建并填充 UBO 数据 (需要根据 uniform 块的布局)
const uboData = new ArrayBuffer(blockSize);
const dataView = new DataView(uboData);
let offset = 0;
// 假设 uniform 块包含 mat4 modelMatrix; vec3 lightDir; float intensity;
offset = setMat4(dataView, offset, modelMatrix); // 自定义函数设置 mat4 数据
offset = setVec3(dataView, offset, lightDir);   // 自定义函数设置 vec3 数据
dataView.setFloat32(offset, intensity, true);     // 设置 float 数据
// 7. 将数据上传到 UBO
gl.bindBuffer(gl.UNIFORM_BUFFER, ubo);
gl.bufferData(gl.UNIFORM_BUFFER, uboData, gl.DYNAMIC_DRAW); // 或 gl.STATIC_DRAW 等
gl.bindBuffer(gl.UNIFORM_BUFFER, null); // 解绑 UBO

GLSL 着色器代码 (顶点着色器示例):


#version 300 es
in vec4 position;
uniform MVPMatrixBlock { // 定义 uniform 块
    mat4 modelMatrix;
    mat4 viewMatrix;
    mat4 projectionMatrix;
};
out vec4 fragColor;
void main() {
    gl_Position = projectionMatrix * viewMatrix * modelMatrix * position;
    // ...
}

mermaid 图表：

内容详解：

UBO 的使用流程包括：

定义 GLSL Uniform 块: 在 GLSL 着色器中，使用 uniform <块名> { ... } 语法定义 uniform 块，将相关的 uniform 变量组织在一起。
获取 Uniform 块索引: 使用 gl.getUniformBlockIndex(program, "UniformBlockName") 获取 uniform 块在 program 中的索引。
创建 UBO: 使用 gl.createBuffer() 创建一个缓冲区对象作为 UBO。
绑定 UBO 到绑定点: 使用 gl.bindBufferBase(gl.UNIFORM_BUFFER, bindingPointIndex, ubo) 将 UBO 绑定到指定的 uniform 缓冲区绑定点索引。绑定点索引是一个整数，用于在着色器中关联 uniform 块和 UBO。
Uniform 块索引绑定到绑定点: 使用 gl.uniformBlockBinding(program, blockIndex, bindingPointIndex) 将 uniform 块索引与之前绑定的 UBO 绑定点关联起来。
获取 Uniform 块大小: 使用 gl.getActiveUniformBlockParameter(program, blockIndex, gl.UNIFORM_BLOCK_DATA_SIZE) 获取 uniform 块所需的大小，用于分配 UBO 缓冲区。
创建并填充 UBO 数据: 创建一个 ArrayBuffer 来存储 UBO 数据，大小为 uniform 块的大小。使用 DataView 或其他方法按照 uniform 块的布局填充数据。 注意： Uniform 块的布局在 GLSL ES 3.0 中有标准布局 (std140) 和共享布局 (shared) 等，需要根据布局规则正确填充数据。
上传 UBO 数据: 绑定 UBO，使用 gl.bufferData() 或 gl.bufferSubData() 将数据上传到 UBO。

使用 UBO 可以显著减少 uniform 数据的更新开销，特别是在需要频繁更新多个 uniform 变量的情况下，例如骨骼动画、粒子系统等。

3.6.2.3 实例渲染 (Instancing)

特性详解：

实例渲染 (Instancing) 是一种高效地渲染大量相似几何体的技术。在 WebGL 1.0 中，如果要渲染多个相同的物体，通常需要多次绘制调用，每次绘制调用都需要设置模型矩阵等 uniform 变量。实例渲染允许在一次绘制调用中，通过提供实例数据 (例如每个实例的模型矩阵、颜色等)，渲染成千上万个相似的物体，极大地减少了绘制调用的次数和状态切换的开销，提升了渲染性能。

代码实践：


// 1. 创建实例数据缓冲对象 (Instance Buffer Object, IBO)
const instanceMatrixBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, instanceMatrixBuffer);
const instanceMatrices = [
    // ... 实例模型矩阵数据 (例如多个 mat4) ...
];
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(instanceMatrices), gl.STATIC_DRAW);
// 2. 获取顶点着色器中实例矩阵属性的位置 (假设属性名为 instanceMatrix)
const instanceMatrixAttributeLocation = gl.getAttribLocation(program, "instanceMatrix");
// 3. 配置实例属性指针 (注意使用 divisor)
const matrixSize = 4 * 4; // mat4 is 4x4 float matrix
const bytesPerMatrix = matrixSize * 4; // 4 bytes per float
for (let i = 0; i < 4; ++i) { // mat4 has 4 columns (vec4)
    const attribLocation = instanceMatrixAttributeLocation + i;
    gl.enableVertexAttribArray(attribLocation);
    // 每个实例更新一次属性 (divisor = 1)
    gl.vertexAttribPointer(
        attribLocation,     // attribute location
        4,                  // size: vec4
        gl.FLOAT,           // type: float
        false,              // normalized: false
        bytesPerMatrix,     // stride: bytes per matrix
        i * matrixSize * 4  // offset: offset for each vec4 in matrix
    );
    gl.vertexAttribDivisor(attribLocation, 1); // 关键: 设置 divisor 为 1
}
// 4. 绘制实例
const instanceCount = instanceMatrices.length;
gl.drawArraysInstanced(gl.TRIANGLES, 0, vertexCount, instanceCount); // 使用 instanced draw call

GLSL 着色器代码 (顶点着色器示例):


#version 300 es
in vec4 position;
in mat4 instanceMatrix; // 实例矩阵属性
uniform mat4 viewMatrix;
uniform mat4 projectionMatrix;
void main() {
    gl_Position = projectionMatrix * viewMatrix * instanceMatrix * position;
    // ...
}

mermaid 图表：

内容详解：

实例渲染的核心步骤包括：

创建实例数据缓冲 (IBO): 创建一个缓冲区对象 (IBO) 用于存储每个实例的属性数据，例如模型矩阵、颜色等。实例数据可以存储在 ARRAY_BUFFER 中。
配置实例属性指针: 在顶点着色器中声明实例属性 (例如 in mat4 instanceMatrix)，并在 JavaScript 代码中使用 gl.getAttribLocation() 获取属性位置。关键在于使用 gl.vertexAttribDivisor(attributeLocation, 1) 设置属性的 divisor 为 1。divisor = 1 表示该属性是实例属性，每渲染一个实例，属性值更新一次。如果 divisor 为 0 (默认值)，则表示顶点属性，每个顶点更新一次。
绘制实例: 使用 gl.drawArraysInstanced(mode, first, count, instanceCount) 或 gl.drawElementsInstanced(mode, count, type, offset, instanceCount) 进行绘制。instanceCount 参数指定要渲染的实例数量。

实例渲染非常适合渲染大量的重复物体，例如草地、树木、人群、粒子等。它可以大幅度减少绘制调用次数，提高渲染效率，是优化场景性能的重要技术。

3.6.2.4 变换反馈 (Transform Feedback)

特性详解：

变换反馈 (Transform Feedback) 允许将顶点着色器处理后的顶点数据重新捕获到缓冲区对象中。在 WebGL 1.0 中，顶点着色器的输出只能用于光栅化和片段着色器，无法直接用于后续的顶点处理阶段。变换反馈打破了这个限制，使得 GPU 计算的结果可以反馈回顶点处理阶段，实现更灵活的 GPU 计算和数据处理流程。例如，可以使用变换反馈实现粒子系统的位置更新、物理模拟等。

代码实践：


// 1. 创建变换反馈对象
const transformFeedback = gl.createTransformFeedback();
// 2. 创建缓冲区对象用于接收变换反馈数据 (例如 positionBufferOut)
const positionBufferOut = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, positionBufferOut);
gl.bufferData(gl.ARRAY_BUFFER, bufferSize, gl.DYNAMIC_COPY); // 分配缓冲区空间
// 3. 绑定变换反馈缓冲区
gl.bindTransformFeedback(gl.TRANSFORM_FEEDBACK, transformFeedback);
gl.bindBufferBase(gl.TRANSFORM_FEEDBACK_BUFFER, 0, positionBufferOut); // 绑定到索引 0
// 4. 指定要捕获的顶点着色器输出变量
const varyings = ["v_position"]; // 顶点着色器输出变量名
gl.transformFeedbackVaryings(program, varyings, gl.SEPARATE_ATTRIBS); // 或 gl.INTERLEAVED_ATTRIBS
// 5. 链接程序 (在 transformFeedbackVaryings 之后链接)
gl.linkProgram(program);
// ... 设置输入顶点数据 (例如 positionBufferIn) ...
// 6. 执行变换反馈
gl.useProgram(program);
gl.bindVertexArray(vao); // 绑定输入 VAO
gl.beginTransformFeedback(gl.POINTS); // 指定图元模式
gl.drawArrays(gl.POINTS, 0, vertexCount); // 绘制调用触发变换反馈
gl.endTransformFeedback();
gl.bindTransformFeedback(gl.TRANSFORM_FEEDBACK, null); // 解绑变换反馈对象
// 7. positionBufferOut 中现在包含了变换后的顶点位置数据
// 可以用于后续的渲染或其他计算

GLSL 着色器代码 (顶点着色器示例):


#version 300 es
in vec4 position;
out vec4 v_position; // 变换反馈输出变量
void main() {
    // ... 顶点变换和计算 ...
    v_position = position + vec4(0.1, 0.0, 0.0, 0.0); // 简单示例: 位置偏移
    gl_Position = position; // gl_Position 仍然需要赋值，即使不进行光栅化
}

mermaid 图表：

内容详解：

变换反馈的使用流程包括：

创建变换反馈对象: 使用 gl.createTransformFeedback() 创建一个变换反馈对象。
创建输出缓冲区: 创建一个或多个缓冲区对象，用于接收顶点着色器输出的变换反馈数据。
绑定变换反馈缓冲区: 使用 gl.bindTransformFeedback(gl.TRANSFORM_FEEDBACK, transformFeedback) 绑定变换反馈对象，然后使用 gl.bindBufferBase(gl.TRANSFORM_FEEDBACK_BUFFER, index, buffer) 将输出缓冲区绑定到指定的索引。
指定变换反馈变量: 使用 gl.transformFeedbackVaryings(program, varyings, bufferMode) 指定要捕获的顶点着色器输出变量名 (varyings 数组)。bufferMode 可以是 gl.SEPARATE_ATTRIBS (每个变量使用单独的缓冲区) 或 gl.INTERLEAVED_ATTRIBS (所有变量交错存储在一个缓冲区中)。 注意： gl.transformFeedbackVaryings 必须在 gl.linkProgram 之前调用。
链接程序: 调用 gl.linkProgram() 链接程序，使变换反馈设置生效。
绑定变换反馈对象: 在执行变换反馈之前，使用 gl.bindTransformFeedback(gl.TRANSFORM_FEEDBACK, transformFeedback) 绑定变换反馈对象。
开始变换反馈: 使用 gl.beginTransformFeedback(primitiveMode) 启动变换反馈，primitiveMode 指定图元模式 (例如 gl.POINTS, gl.LINES, gl.TRIANGLES)，必须与绘制调用的图元模式匹配。
绘制调用: 执行绘制调用 (gl.drawArrays 或 gl.drawElements)，触发顶点着色器执行和变换反馈。 注意： 在变换反馈过程中，通常不会进行光栅化和片段着色器处理，只执行顶点着色器。
结束变换反馈: 使用 gl.endTransformFeedback() 结束变换反馈。
输出缓冲区包含变换后数据: 变换反馈结束后，输出缓冲区中包含了顶点着色器处理后的顶点数据。

变换反馈为 WebGL 2.0 带来了强大的 GPU 计算能力，可以用于实现各种高级效果和模拟，例如粒子系统、碰撞检测、流体模拟等。

3.6.2.5 纹理增强 (Texture Enhancements)

WebGL 2.0 在纹理方面也进行了大幅增强，提供了更多类型的纹理和更灵活的纹理使用方式。

3D 纹理 (3D Textures): WebGL 2.0 支持 3D 纹理，也称为体积纹理。3D 纹理是一个三维数据数组，可以用于存储体数据 (例如医学扫描数据、密度场等) 或实现更复杂的纹理效果。
纹理数组 (Texture Arrays): 纹理数组允许将多个 2D 纹理存储在一个纹理对象中。这对于存储动画帧序列、图集纹理等非常有用，可以减少纹理切换的开销。
非二次幂纹理 (Non-Power-of-Two Textures) 的更灵活使用: WebGL 1.0 中，非二次幂纹理的使用受到限制 (例如不能使用 mipmap)。WebGL 2.0 放宽了这些限制，非二次幂纹理可以更自由地使用，简化了纹理管理。
纹理过滤增强: WebGL 2.0 提供了更丰富的纹理过滤选项，例如 anisotropic filtering (各向异性过滤)，可以提高纹理在倾斜角度下的渲染质量。
整数纹理 (Integer Textures): WebGL 2.0 支持整数纹理，可以存储和操作整数数据。这对于数据可视化、GPU 计算等应用非常有用。

代码实践 (3D 纹理示例):


// 创建 3D 纹理
const texture3D = gl.createTexture();
gl.bindTexture(gl.TEXTURE_3D, texture3D);
// 设置纹理参数
gl.texParameteri(gl.TEXTURE_3D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
gl.texParameteri(gl.TEXTURE_3D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
gl.texParameteri(gl.TEXTURE_3D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_3D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_3D, gl.TEXTURE_WRAP_R, gl.CLAMP_TO_EDGE); // 3D 纹理多了 TEXTURE_WRAP_R
// 定义 3D 纹理数据 (例如体积数据)
const width = 64;
const height = 64;
const depth = 64;
const data = new Uint8Array(width * height * depth * 4); // RGBA 数据
// ... 填充 data 数组 ...
// 上传 3D 纹理数据
gl.texImage3D(gl.TEXTURE_3D, 0, gl.RGBA8, width, height, depth, 0, gl.RGBA, gl.UNSIGNED_BYTE, data);
// 在着色器中使用 3D 纹理 (sampler3D)
// uniform sampler3D volumeTexture;
// vec4 color = texture(volumeTexture, vec3(texCoord.x, texCoord.y, texCoord.z));

代码实践 (纹理数组示例):


// 创建纹理数组
const textureArray = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D_ARRAY, textureArray);
// 设置纹理参数
gl.texParameteri(gl.TEXTURE_2D_ARRAY, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
gl.texParameteri(gl.TEXTURE_2D_ARRAY, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
gl.texParameteri(gl.TEXTURE_2D_ARRAY, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D_ARRAY, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
const width = 256;
const height = 256;
const depth = 4; // 纹理数组的层数 (例如 4 层)
// 创建空纹理数组 (先分配空间)
gl.texStorage3D(gl.TEXTURE_2D_ARRAY, 1, gl.RGBA8, width, height, depth);
// 加载并上传每个纹理层的数据 (例如加载 4 张 2D 纹理图像)
for (let i = 0; i < depth; ++i) {
    const imageData = loadImageData(`texture_layer_${i}.png`); // 假设加载图像数据函数
    gl.texSubImage3D(gl.TEXTURE_2D_ARRAY, 0, 0, 0, i, width, height, 1, gl.RGBA, gl.UNSIGNED_BYTE, imageData);
}
// 在着色器中使用纹理数组 (sampler2DArray)
// uniform sampler2DArray textureArraySampler;
// vec4 color = texture(textureArraySampler, vec3(texCoord.x, texCoord.y, layerIndex)); // layerIndex 指定纹理层索引

内容详解：

WebGL 2.0 的纹理增强功能为开发者提供了更多选择和灵活性，可以实现更丰富的视觉效果和更高效的纹理管理。3D 纹理和纹理数组扩展了纹理的应用范围，非二次幂纹理的放宽限制简化了纹理的使用，而纹理过滤增强则提高了渲染质量。

3.6.2.6 多渲染目标 (Multiple Render Targets, MRT)

特性详解：

多渲染目标 (MRT) 允许在一个渲染过程中，同时将片段着色器的输出渲染到多个颜色缓冲中。在 WebGL 1.0 中，每次渲染调用只能输出到一个颜色缓冲。MRT 使得一次渲染过程可以生成多个输出结果，这对于延迟渲染、G-Buffer 生成等高级渲染技术至关重要。

作者与出处

原作者：灏天文库

来源：灏天文库

原文： https://aiknowledge.cn/collection/222-webgl-3d%E5%9B%BE%E5%BD%A2%E7%BC%96%E7%A8%8B%E5%AE%9E%E6%88%98%E6%95%99%E7%A8%8B

整理：灏天文库整理

由灏天文库平台收录，内容或由平台用户上传，仅供学习交流