WebGL 变换反馈 varying：顶点属性捕获详解

变换反馈（Transform Feedback）是 WebGL 的一项强大功能，它允许您捕获顶点着色器的输出，并将其用作后续渲染通道的输入。这项技术为直接在 GPU 上实现各种高级渲染效果和几何处理任务打开了大门。变换反馈的一个关键方面是理解如何指定应捕获哪些顶点属性，即所谓的“varying”。本指南全面概述了 WebGL 变换反馈，重点关注使用 varying 进行顶点属性捕获。

什么是变换反馈？

传统上，WebGL 渲染涉及将顶点数据发送到 GPU，通过顶点和片元着色器进行处理，并将结果像素显示在屏幕上。顶点着色器的输出在裁剪和透视除法后通常会被丢弃。变换反馈改变了这种模式，它允许您拦截这些顶点着色器后的结果，并将其存回缓冲区对象中。

设想一个模拟粒子物理的场景。您可以在 CPU 上更新粒子位置，并在每一帧中将更新后的数据发送回 GPU 进行渲染。变换反馈提供了一种更高效的方法：在 GPU 上执行物理计算（使用顶点着色器），并直接将更新后的粒子位置捕获回缓冲区，为下一帧的渲染做好准备。这减少了 CPU 开销并提高了性能，尤其是在处理复杂模拟时。

变换反馈的关键概念

• 顶点着色器 (Vertex Shader): 变换反馈的核心。顶点着色器执行计算，其结果将被捕获。
• Varying 变量: 这些是您想要捕获的顶点着色器输出变量。它们定义了哪些顶点属性被写回缓冲区对象。
• 缓冲区对象 (Buffer Objects): 用于存储捕获的顶点属性。这些缓冲区被绑定到变换反馈对象上。
• 变换反馈对象 (Transform Feedback Object): 一个管理捕获顶点属性过程的 WebGL 对象。它定义了目标缓冲区和 varying 变量。
• 图元模式 (Primitive Mode): 指定顶点着色器生成的图元类型（点、线、三角形）。这对于正确的缓冲区布局很重要。

在 WebGL 中设置变换反馈

使用变换反馈的过程涉及以下几个步骤：

1. 创建并配置变换反馈对象：

   使用 gl.createTransformFeedback() 创建一个变换反馈对象。然后，使用 gl.bindTransformFeedback(gl.TRANSFORM_FEEDBACK, transformFeedback) 绑定它。

2. 创建并绑定缓冲区对象：

   使用 gl.createBuffer() 创建缓冲区对象以存储捕获的顶点属性。使用 gl.bindBufferBase(gl.TRANSFORM_FEEDBACK_BUFFER, index, buffer) 将每个缓冲区对象绑定到 gl.TRANSFORM_FEEDBACK_BUFFER 目标。`index` 对应于着色器程序中指定的 varying 变量的顺序。

3. 指定 Varying 变量：

   这是关键的一步。在链接着色器程序之前，您需要告诉 WebGL 应该捕获顶点着色器中的哪些输出变量（varying 变量）。使用 gl.transformFeedbackVaryings(program, varyings, bufferMode)。

   • program: 着色器程序对象。
   • varyings: 一个字符串数组，其中每个字符串是顶点着色器中 varying 变量的名称。这些变量的顺序很重要，因为它决定了缓冲区绑定的索引。
   • bufferMode: 指定 varying 变量如何写入缓冲区对象。常用选项是 gl.SEPARATE_ATTRIBS（每个 varying 写入一个单独的缓冲区）和 gl.INTERLEAVED_ATTRIBS（所有 varying 变量交错写入单个缓冲区）。
4. 创建并编译着色器：

   创建顶点和片元着色器。顶点着色器必须输出您想要捕获的 varying 变量。根据您的应用，片元着色器可能需要也可能不需要。它可能对调试很有用。

5. 链接着色器程序：

   使用 gl.linkProgram(program) 链接着色器程序。重要的是在链接程序*之前*调用 gl.transformFeedbackVaryings()。

6. 开始和结束变换反馈：

   要开始捕获顶点属性，调用 gl.beginTransformFeedback(primitiveMode)，其中 primitiveMode 指定生成的图元类型（例如 gl.POINTS, gl.LINES, gl.TRIANGLES）。渲染后，调用 gl.endTransformFeedback() 停止捕获。

7. 绘制几何体：

   使用 gl.drawArrays() 或 gl.drawElements() 来渲染几何体。顶点着色器将执行，并且指定的 varying 变量将被捕获到缓冲区对象中。

示例：捕获粒子位置

让我们用一个捕获粒子位置的简单示例来说明这一点。假设我们有一个顶点着色器，它根据速度和重力更新粒子位置。

顶点着色器 (particle.vert)

#version 300 es

in vec3 a_position;

in vec3 a_velocity;

uniform float u_timeStep;

out vec3 v_position;

out vec3 v_velocity;

void main() {
 vec3 gravity = vec3(0.0, -9.8, 0.0);
 v_velocity = a_velocity + gravity * u_timeStep;
 v_position = a_position + v_velocity * u_timeStep;

 gl_Position = vec4(v_position, 1.0);
}

这个顶点着色器将 a_position 和 a_velocity 作为输入属性。它计算每个粒子的新速度和位置，并将结果存储在 v_position 和 v_velocity 这两个 varying 变量中。gl_Position 被设置为新位置以供渲染。

JavaScript 代码

// ... WebGL 上下文初始化 ...

// 1. 创建变换反馈对象
const transformFeedback = gl.createTransformFeedback();
gl.bindTransformFeedback(gl.TRANSFORM_FEEDBACK, transformFeedback);

// 2. 为位置和速度创建缓冲区对象
const positionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
gl.bufferData(gl.ARRAY_BUFFER, particlePositions, gl.DYNAMIC_COPY); // 初始粒子位置

const velocityBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, velocityBuffer);
gl.bufferData(gl.ARRAY_BUFFER, particleVelocities, gl.DYNAMIC_COPY); // 初始粒子速度

// 3. 指定 Varying 变量
const varyings = ['v_position', 'v_velocity'];
gl.transformFeedbackVaryings(program, varyings, gl.SEPARATE_ATTRIBS);  // 必须在链接程序*之前*调用。

// 4. 创建并编译着色器（为简洁起见省略）
// ...

// 5. 链接着色器程序
gl.linkProgram(program);

// 绑定变换反馈缓冲区
gl.bindBufferBase(gl.TRANSFORM_FEEDBACK_BUFFER, 0, positionBuffer);  // 索引 0 用于 v_position
gl.bindBufferBase(gl.TRANSFORM_FEEDBACK_BUFFER, 1, velocityBuffer);  // 索引 1 用于 v_velocity

// 获取属性位置
const positionLocation = gl.getAttribLocation(program, 'a_position');
const velocityLocation = gl.getAttribLocation(program, 'a_velocity');

// --- 渲染循环 --- 
function render() {
 gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

 gl.useProgram(program);

 // 启用属性
 gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
gl.vertexAttribPointer(positionLocation, 3, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(positionLocation);

 gl.bindBuffer(gl.ARRAY_BUFFER, velocityBuffer);
gl.vertexAttribPointer(velocityLocation, 3, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(velocityLocation);

 // 6. 开始变换反馈
 gl.enable(gl.RASTERIZER_DISCARD); // 禁用光栅化
gl.beginTransformFeedback(gl.POINTS);

 // 7. 绘制几何体
 gl.drawArrays(gl.POINTS, 0, numParticles);

 // 8. 结束变换反馈
 gl.endTransformFeedback();
gl.disable(gl.RASTERIZER_DISCARD); // 重新启用光栅化

 // 交换缓冲区（可选，如果你想渲染这些点）
 // 例如，重新渲染更新后的位置缓冲区。

 requestAnimationFrame(render);
}

render();

在此示例中：

• 我们创建了两个缓冲区对象，一个用于粒子位置，一个用于速度。
• 我们将 v_position 和 v_velocity 指定为 varying 变量。
• 我们将位置缓冲区绑定到变换反馈缓冲区的索引 0，将速度缓冲区绑定到索引 1。
• 我们使用 gl.enable(gl.RASTERIZER_DISCARD) 禁用了光栅化，因为我们只想捕获顶点属性数据，而不想在这一遍中渲染任何东西。这对性能很重要。
• 我们调用 gl.drawArrays(gl.POINTS, 0, numParticles) 来对每个粒子执行顶点着色器。
• 更新后的粒子位置和速度被捕获到缓冲区对象中。
• 在变换反馈通道之后，您可以交换输入和输出缓冲区，并根据更新后的位置渲染粒子。

Varying 变量：细节和注意事项

gl.transformFeedbackVaryings() 中的 `varyings` 参数是一个字符串数组，代表您希望从顶点着色器中捕获的输出变量的名称。这些变量必须：

• 在顶点着色器中被声明为 out 变量。
• 在顶点着色器输出和缓冲区对象存储之间具有匹配的数据类型。例如，如果一个 varying 变量是 vec3，则相应的缓冲区对象必须足够大，以存储所有顶点的 vec3 值。
• 顺序正确。`varyings` 数组中的顺序决定了缓冲区绑定的索引。第一个 varying 将被写入缓冲区索引 0，第二个写入索引 1，依此类推。

数据对齐和缓冲区布局

理解数据对齐对于正确的变换反馈操作至关重要。捕获的顶点属性在缓冲区对象中的布局取决于 gl.transformFeedbackVaryings() 中的 bufferMode 参数：

• gl.SEPARATE_ATTRIBS: 每个 varying 变量被写入一个单独的缓冲区对象。绑定到索引 0 的缓冲区对象将包含第一个 varying 的所有值，绑定到索引 1 的缓冲区对象将包含第二个 varying 的所有值，依此类推。这种模式通常更容易理解和调试。
• gl.INTERLEAVED_ATTRIBS: 所有 varying 变量都交错写入单个缓冲区对象。例如，如果您有两个 varying 变量，v_position (vec3) 和 v_velocity (vec3)，缓冲区将包含一个序列：vec3 (位置), vec3 (速度), vec3 (位置), vec3 (速度)，依此类推。这种模式在某些用例中可能更高效，特别是当捕获的数据将在后续渲染通道中用作交错的顶点属性时。

匹配数据类型

顶点着色器中 varying 变量的数据类型必须与缓冲区对象的存储格式兼容。例如，如果您将一个 varying 变量声明为 out vec3 v_color，您应确保缓冲区对象足够大，以存储所有顶点的 vec3 值（通常是浮点值）。数据类型不匹配可能导致意外结果或错误。

处理光栅化丢弃

当仅使用变换反馈来捕获顶点属性数据（而不是在初始通道中渲染任何东西）时，至关重要的是在调用 gl.beginTransformFeedback() 之前使用 gl.enable(gl.RASTERIZER_DISCARD) 禁用光栅化。这可以防止 GPU 执行不必要的光栅化操作，从而显著提高性能。如果您打算在后续通道中渲染某些内容，请记得在调用 gl.endTransformFeedback() 之后使用 gl.disable(gl.RASTERIZER_DISCARD) 重新启用光栅化。

变换反馈的用例

变换反馈在 WebGL 渲染中有许多应用，包括：

• 粒子系统：如示例所示，变换反馈非常适合直接在 GPU 上更新粒子的位置、速度和其他属性，从而实现高效的粒子模拟。
• 几何处理：您可以使用变换反馈完全在 GPU 上执行几何变换，例如网格变形、细分或简化。想象一下为动画变形一个角色模型。
• 流体动力学：可以使用变换反馈在 GPU 上模拟流体流动。更新流体粒子的位置和速度，然后使用单独的渲染通道来可视化流体。
• 物理模拟：更广泛地说，任何需要更新顶点属性的物理模拟都可以从变换反馈中受益。这可能包括布料模拟、刚体动力学或其他基于物理的效果。
• 点云处理：从点云中捕获已处理的数据以进行可视化或分析。这可以涉及在 GPU 上进行过滤、平滑或特征提取。
• 自定义顶点属性：根据其他顶点数据计算自定义顶点属性，例如法线向量或纹理坐标。这对于过程生成技术可能很有用。
• 延迟着色预处理通道：将位置和法线数据捕获到 G-buffers 中，用于延迟着色管线。这种技术允许进行更复杂的照明计算。

性能注意事项

虽然变换反馈可以提供显著的性能改进，但考虑以下因素很重要：

• 缓冲区对象大小：确保缓冲区对象足够大以存储所有捕获的顶点属性。根据顶点数量和 varying 变量的数据类型分配正确的大小。
• 数据传输开销：避免 CPU 和 GPU 之间不必要的数据传输。使用变换反馈在 GPU 上执行尽可能多的处理。
• 光栅化丢弃：当变换反馈仅用于捕获数据时，启用 gl.RASTERIZER_DISCARD。
• 着色器复杂度：优化顶点着色器代码以最小化计算成本。复杂的着色器会影响性能，尤其是在处理大量顶点时。
• 缓冲区交换：当在循环中使用变换反馈时（例如，粒子模拟），考虑使用双缓冲（交换输入和输出缓冲区）以避免写后读的风险。
• 图元类型：图元类型（gl.POINTS, gl.LINES, gl.TRIANGLES）的选择会影响性能。为您的应用选择最合适的图元类型。

调试变换反馈

调试变换反馈可能具有挑战性，但这里有一些技巧：

• 检查错误：在变换反馈设置的每一步之后，使用 gl.getError() 检查 WebGL 错误。
• 验证缓冲区大小：确保缓冲区对象足够大以存储捕获的数据。
• 检查缓冲区内容：使用 gl.getBufferSubData() 将缓冲区对象的内容读回 CPU 并检查捕获的数据。这可以帮助识别数据对齐或着色器计算中的问题。
• 使用调试器：使用 WebGL 调试器（例如 Spector.js）来检查 WebGL 状态和着色器执行情况。这可以为变换反馈过程提供有价值的见解。
• 简化着色器：从一个只输出少量 varying 变量的简单顶点着色器开始。在验证每个步骤时逐步增加复杂性。
• 检查 Varying 顺序：仔细检查 `varyings` 数组中 varying 变量的顺序是否与它们在顶点着色器中的写入顺序以及缓冲区绑定索引相匹配。
• 禁用优化：暂时禁用着色器优化，使调试更容易。

兼容性与扩展

变换反馈在 WebGL 2 和 OpenGL ES 3.0 及更高版本中受支持。在 WebGL 1 中，OES_transform_feedback 扩展提供了类似的功能。然而，WebGL 2 的实现更高效且功能更丰富。

使用以下方式检查扩展支持：

const transformFeedbackExtension = gl.getExtension('OES_transform_feedback');
if (transformFeedbackExtension) {
 // 使用该扩展
}

结论

WebGL 变换反馈是一项强大的技术，用于直接在 GPU 上捕获顶点属性数据。通过理解 varying 变量、缓冲区对象和变换反馈对象的概念，您可以利用此功能创建高级渲染效果、执行几何处理任务并优化您的 WebGL 应用程序。在实现变换反馈时，请记住仔细考虑数据对齐、缓冲区大小和性能影响。通过精心的规划和调试，您可以释放这一宝贵 WebGL 功能的全部潜力。