JS `WebGL 2.0` `Transform Feedback`：GPU 上的数据转换与循环

各位同学，欢迎来到今天的“WebGL 2.0 Transform Feedback：GPU 上的数据转换与循环”讲座！我是你们的临时导游，准备好开启一段奇妙的 GPU 数据之旅了吗？

今天要聊的 Transform Feedback，是 WebGL 2.0 中一个相当酷的功能。简单来说，它允许我们把 GPU 上顶点着色器处理过的数据，直接捕获并存回到缓冲区对象中。这就像给 GPU 安装了一个“录音机”，记录下顶点着色器说了些什么，然后把“录音”变成数据，供我们后续使用。听起来是不是有点像科幻电影？

为什么我们需要 Transform Feedback？

在没有 Transform Feedback 的日子里，如果我们想对顶点数据进行一些处理，比如粒子系统的位置更新、物理模拟等等，通常需要经历以下步骤：

1. CPU 将顶点数据上传到 GPU。
2. 顶点着色器处理数据。
3. GPU 将处理后的数据渲染到屏幕上。
4. 如果我们需要这些处理后的数据，必须从 GPU 将数据读回 CPU。
5. CPU 对数据进行进一步处理。
6. CPU 再次将处理后的数据上传到 GPU。
7. 重复以上步骤。

这个过程的瓶颈在于 CPU 和 GPU 之间的数据传输。CPU 的速度远不如 GPU，频繁地在两者之间传输数据会严重影响性能。想象一下，你用一只蜗牛给超级计算机搬运数据，这效率能高吗？

Transform Feedback 就像给 GPU 配备了一个内部的“数据传送带”，它可以直接把顶点着色器的输出数据“传送”回缓冲区对象，避免了 CPU 的参与，大大提高了效率。

Transform Feedback 的基本概念

Transform Feedback 涉及到几个关键概念：

• 顶点着色器 (Vertex Shader): 这是 Transform Feedback 的“数据源”，它负责处理顶点数据，并输出我们需要捕获的数据。
• 缓冲区对象 (Buffer Object): 这是 Transform Feedback 的“存储器”，用于存储顶点着色器输出的数据。
• Transform Feedback 对象 (Transform Feedback Object): 这是一个 WebGL 对象，用于管理 Transform Feedback 的状态，包括使用哪个缓冲区对象存储数据、捕获哪些变量等等。
• varying 变量: 这是顶点着色器中用来声明需要捕获的输出变量的关键字。必须使用 out 关键字声明。

Transform Feedback 的工作流程

1. 创建和配置 Transform Feedback 对象: 创建一个 Transform Feedback 对象，并绑定一个或多个缓冲区对象，用于存储顶点着色器输出的数据。同时，还需要指定顶点着色器中哪些 out 变量需要捕获。
2. 修改顶点着色器: 在顶点着色器中，使用 out 关键字声明需要捕获的输出变量。这些变量被称为 "transform feedback varyings"。
3. 链接着色器程序: 在链接着色器程序之前，需要使用 gl.transformFeedbackVaryings() 函数告诉 WebGL 系统，哪些 out 变量需要参与 Transform Feedback。
4. 开始 Transform Feedback: 使用 gl.beginTransformFeedback() 函数开始 Transform Feedback。
5. 绘制: 使用 gl.drawArrays() 或 gl.drawElements() 函数触发顶点着色器的执行。顶点着色器处理后的数据会被自动捕获并存储到指定的缓冲区对象中。
6. 结束 Transform Feedback: 使用 gl.endTransformFeedback() 函数结束 Transform Feedback。
7. 使用捕获的数据: 现在，我们可以从缓冲区对象中读取 Transform Feedback 捕获的数据，用于后续的渲染或其他计算。

代码示例：一个简单的粒子系统

为了更好地理解 Transform Feedback 的用法，我们来看一个简单的粒子系统的例子。在这个例子中，我们将使用 Transform Feedback 来更新粒子的位置和速度。

1. 创建 WebGL 上下文 (boilerplate code, 略过)

这部分代码是标准的 WebGL 初始化代码，包括获取 canvas 元素、创建 WebGL 上下文等等。在这里我们假设已经成功创建了 gl 对象。

2. 创建顶点着色器和片段着色器

• 顶点着色器 (particle.vert):

#version 300 es
in vec3 a_position;    // 粒子的初始位置
in vec3 a_velocity;    // 粒子的初始速度
out vec3 v_position;   // 更新后的粒子位置 (Transform Feedback 输出)
out vec3 v_velocity;   // 更新后的粒子速度 (Transform Feedback 输出)

uniform float u_timeStep; // 时间步长

void main() {
    v_velocity = a_velocity;
    v_position = a_position + a_velocity * u_timeStep;
    gl_Position = vec4(v_position, 1.0); // 渲染用，为了能看见粒子
    gl_PointSize = 5.0;                  // 渲染用，设置粒子大小
}

• 片段着色器 (particle.frag):

#version 300 es
precision highp float;
out vec4 fragColor;

void main() {
    fragColor = vec4(1.0, 1.0, 1.0, 1.0); // 白色粒子
}

3. 创建着色器程序

function createShader(gl, type, source) {
    const shader = gl.createShader(type);
    gl.shaderSource(shader, source);
    gl.compileShader(shader);
    if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
        console.error('An error occurred compiling the shaders: ' + gl.getShaderInfoLog(shader));
        gl.deleteShader(shader);
        return null;
    }
    return shader;
}

function createProgram(gl, vertexShader, fragmentShader) {
    const program = gl.createProgram();
    gl.attachShader(program, vertexShader);
    gl.attachShader(program, fragmentShader);
    gl.linkProgram(program);
    if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
        console.error('Unable to initialize the shader program: ' + gl.getProgramInfoLog(program));
        return null;
    }
    return program;
}

// 假设已经读取了顶点着色器和片段着色器的源代码
const vertexShaderSource = `...`; // 从文件中读取或直接定义
const fragmentShaderSource = `...`; // 从文件中读取或直接定义

const vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexShaderSource);
const fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentShaderSource);
const program = createProgram(gl, vertexShader, fragmentShader);

if (!program) {
    console.error("Failed to create program");
}

4. 创建 Transform Feedback 对象和缓冲区对象

const numParticles = 1000; // 粒子数量
const particleData = new Float32Array(numParticles * 6); // 每个粒子包含位置 (x, y, z) 和速度 (x, y, z)

// 初始化粒子数据 (随机位置和速度)
for (let i = 0; i < numParticles; i++) {
    particleData[i * 6 + 0] = (Math.random() - 0.5) * 10; // x
    particleData[i * 6 + 1] = (Math.random() - 0.5) * 10; // y
    particleData[i * 6 + 2] = (Math.random() - 0.5) * 10; // z
    particleData[i * 6 + 3] = (Math.random() - 0.5) * 1;  // vx
    particleData[i * 6 + 4] = (Math.random() - 0.5) * 1;  // vy
    particleData[i * 6 + 5] = (Math.random() - 0.5) * 1;  // vz
}

// 创建缓冲区对象
const particleBuffer1 = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, particleBuffer1);
gl.bufferData(gl.ARRAY_BUFFER, particleData, gl.DYNAMIC_COPY); // 使用 DYNAMIC_COPY，因为数据会更新

const particleBuffer2 = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, particleBuffer2);
gl.bufferData(gl.ARRAY_BUFFER, particleData, gl.DYNAMIC_COPY);

gl.bindBuffer(gl.ARRAY_BUFFER, null); // 解绑

// 创建 Transform Feedback 对象
const transformFeedback = gl.createTransformFeedback();

// 获取顶点属性位置
const positionAttribLocation = gl.getAttribLocation(program, 'a_position');
const velocityAttribLocation = gl.getAttribLocation(program, 'a_velocity');

// 获取 uniform 位置
const timeStepUniformLocation = gl.getUniformLocation(program, 'u_timeStep');

// 声明要捕获的 varying 变量
const varyings = ['v_position', 'v_velocity'];

// 告诉 WebGL 系统，哪些 varying 变量需要参与 Transform Feedback
gl.transformFeedbackVaryings(program, varyings, gl.SEPARATE_ATTRIBS);

// 重新链接程序 (必须在 transformFeedbackVaryings 之后)
gl.linkProgram(program);

if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
    console.error('Unable to re-initialize the shader program: ' + gl.getProgramInfoLog(program));
}

5. 渲染循环

let currentBuffer = particleBuffer1;
let nextBuffer = particleBuffer2;

function render() {
    // 清空画布
    gl.clearColor(0.0, 0.0, 0.0, 1.0);
    gl.clear(gl.COLOR_BUFFER_BIT);

    // 使用着色器程序
    gl.useProgram(program);

    // 设置时间步长
    const timeStep = 0.01;
    gl.uniform1f(timeStepUniformLocation, timeStep);

    // 绑定顶点属性
    gl.bindBuffer(gl.ARRAY_BUFFER, currentBuffer);
    gl.enableVertexAttribArray(positionAttribLocation);
    gl.vertexAttribPointer(positionAttribLocation, 3, gl.FLOAT, false, 24, 0); // 3 floats for position, stride 24 (6 * 4), offset 0
    gl.enableVertexAttribArray(velocityAttribLocation);
    gl.vertexAttribPointer(velocityAttribLocation, 3, gl.FLOAT, false, 24, 12); // 3 floats for velocity, stride 24, offset 12

    // 绑定 Transform Feedback 对象
    gl.bindTransformFeedback(gl.TRANSFORM_FEEDBACK, transformFeedback);

    // 绑定 Transform Feedback 缓冲区
    gl.bindBufferBase(gl.TRANSFORM_FEEDBACK_BUFFER, 0, nextBuffer); // index 0 corresponds to v_position
    //  gl.bindBufferBase(gl.TRANSFORM_FEEDBACK_BUFFER, 1, nextBuffer); // index 1 corresponds to v_velocity

    // 开始 Transform Feedback
    gl.beginTransformFeedback(gl.POINTS);

    // 绘制粒子
    gl.drawArrays(gl.POINTS, 0, numParticles);

    // 结束 Transform Feedback
    gl.endTransformFeedback();

    // 解绑
    gl.bindTransformFeedback(gl.TRANSFORM_FEEDBACK, null);
    gl.bindBufferBase(gl.TRANSFORM_FEEDBACK_BUFFER, 0, null); // 解绑

    // 禁用顶点属性
    gl.disableVertexAttribArray(positionAttribLocation);
    gl.disableVertexAttribArray(velocityAttribLocation);

    // 交换缓冲区
    let temp = currentBuffer;
    currentBuffer = nextBuffer;
    nextBuffer = temp;

    // 请求下一帧
    requestAnimationFrame(render);
}

render();

代码解释：

• 顶点着色器 (particle.vert): 接收粒子的位置和速度作为输入，根据时间步长更新粒子的位置，并将更新后的位置和速度作为 out 变量输出。gl_Position 和 gl_PointSize 是为了渲染粒子，让我们能看到效果。
• 数据初始化: 创建一个 Float32Array 来存储所有粒子的位置和速度。注意每个粒子需要6个浮点数 (3个位置 + 3个速度)。
• 缓冲区对象: 创建两个缓冲区对象 particleBuffer1 和 particleBuffer2。这两个缓冲区对象用于在每一帧之间交换数据。我们称之为“乒乓缓冲”。
• Transform Feedback 对象: 创建一个 transformFeedback 对象来管理 Transform Feedback 的状态。
• gl.transformFeedbackVaryings(): 这个函数告诉 WebGL 系统，顶点着色器中的 v_position 和 v_velocity 变量需要参与 Transform Feedback。SEPARATE_ATTRIBS 意味着每个 out 变量都存储在不同的缓冲区中。如果我们使用 INTERLEAVED_ATTRIBS，所有 out 变量都会存储在一个缓冲区中，以交错的方式。在这个例子中，我们虽然只绑定了一个buffer，但是实际上数据是按照 SEPARATE_ATTRIBS的方式写入的。
• 渲染循环: 在渲染循环中，我们首先绑定当前的粒子数据缓冲区 currentBuffer，然后启用顶点属性，并设置顶点属性指针。接着，我们绑定 transformFeedback 对象，并使用 gl.bindBufferBase() 函数将 nextBuffer 绑定到 GL_TRANSFORM_FEEDBACK_BUFFER 目标。gl.beginTransformFeedback() 函数开始 Transform Feedback，gl.drawArrays() 函数触发顶点着色器的执行，顶点着色器处理后的数据会被自动捕获并存储到 nextBuffer 中。最后，我们使用 gl.endTransformFeedback() 函数结束 Transform Feedback。
• 乒乓缓冲: 在每一帧结束时，我们交换 currentBuffer 和 nextBuffer，以便下一帧可以使用更新后的粒子数据。

Transform Feedback 的优势

• 性能提升: 避免了 CPU 和 GPU 之间的数据传输，显著提高了性能，尤其是在处理大量数据时。
• 简化代码: 减少了 CPU 端的代码量，使代码更简洁易懂。
• 更高效的算法: 允许在 GPU 上实现更复杂的算法，例如物理模拟、粒子系统等等。

Transform Feedback 的限制

• WebGL 2.0 only: Transform Feedback 是 WebGL 2.0 的特性，在 WebGL 1.0 中不可用。
• 着色器程序限制: 顶点着色器必须输出需要捕获的数据，并且需要在链接着色器程序之前使用 gl.transformFeedbackVaryings() 函数声明需要捕获的变量。
• 缓冲区对象限制: 用于存储 Transform Feedback 数据的缓冲区对象必须使用 DYNAMIC_COPY 或 DYNAMIC_READ 标志创建。
• 顶点数据格式: Transform Feedback 只能捕获顶点数据，不能捕获片段数据。

Transform Feedback 的应用场景

Transform Feedback 在许多领域都有广泛的应用，包括：

• 粒子系统: 更新粒子的位置、速度、生命周期等等。
• 物理模拟: 模拟刚体、流体、布料等等。
• 几何着色器: 生成新的几何体。
• 通用计算 (GPGPU): 在 GPU 上进行通用计算，例如图像处理、信号处理等等。

进阶技巧

• 使用多个缓冲区对象: 可以使用多个缓冲区对象来存储不同的 out 变量，提高数据的组织性和访问效率。
• 使用实例化渲染 (Instanced Rendering): 可以结合实例化渲染来绘制大量的相同物体，例如粒子。
• 使用计算着色器 (Compute Shader): 计算着色器是 WebGL 2.0 中另一种强大的计算工具，可以与 Transform Feedback 结合使用，实现更复杂的算法。

总结

Transform Feedback 是 WebGL 2.0 中一个非常强大的功能，它允许我们把 GPU 上顶点着色器处理过的数据直接捕获并存回到缓冲区对象中，避免了 CPU 和 GPU 之间的数据传输，大大提高了性能。希望通过今天的讲座，大家对 Transform Feedback 有了更深入的理解，并能够在自己的项目中灵活运用。

好了，今天的讲座就到这里，谢谢大家！如果有什么问题，欢迎提问。