WebGL2双程序transform feedback实现顶点动画问题排查

你的代码存在3个直接导致Transform Feedback（以下简称TF）失效的配置错误：

• gl.bindAttribLocation 调用时机错误：该接口只有在程序链接（gl.linkProgram）前调用才会生效，你当前是在createProgram完成链接后才执行属性位置绑定，两个着色器程序的输入属性实际位置和你预设的0号位置不匹配，根本读不到缓冲区数据。
• TF绑定逻辑顺序错误：你在绑定TFO（Transform Feedback对象）、绑定输出缓冲区后，直接调用gl.bindTransformFeedback(gl.TRANSFORM_FEEDBACK, null)解绑了TFO，之后才执行gl.beginTransformFeedback和绘制计算，此时上下文没有绑定激活的TFO，计算结果完全不会写入目标缓冲区。
• 缓冲区读写冲突+着色器逻辑缺失：你将同一个缓冲区同时作为顶点着色器的输入数据源、TF的写入目标，属于WebGL明确禁止的未定义行为，会触发渲染错误。另外你的计算用顶点着色器没有给内置变量gl_Position赋值，即使开启了光栅化丢弃，WebGL也要求顶点着色器必须写入该变量，否则会触发程序链接/运行错误。

你当前使用1个TFO、1个VAO的配置是可行的，但1个缓冲区无法满足需求：WebGL禁止在同一次绘制中对同一缓冲区同时读写，必须采用双缓冲（Ping-Pong）方案才能避免资源竞争。

按照以下步骤修改即可实现预期效果：

1. 调整属性绑定时机，把属性位置绑定逻辑移到程序链接前执行，修正createProgram函数逻辑：

const createProgram = function (gl, vsGLSL, fsGLSL, outVaryings, attribLocs) {
  const vs = createShader(gl, gl.VERTEX_SHADER, vsGLSL);
  const fs = createShader(gl, gl.FRAGMENT_SHADER, fsGLSL);
  const prg = gl.createProgram();
  gl.attachShader(prg, vs);
  gl.attachShader(prg, fs);
  // 链接前先绑定属性位置
  if (attribLocs) {
    for (const [name, loc] of Object.entries(attribLocs)) {
      gl.bindAttribLocation(prg, loc, name);
    }
  }
  // 配置TF输出变量
  if (outVaryings) {
    gl.transformFeedbackVaryings(prg, outVaryings, gl.SEPARATE_ATTRIBS);
  }
  // 最后执行程序链接
  gl.linkProgram(prg);
  if (!gl.getProgramParameter(prg, gl.LINK_STATUS)) {
    throw new Error(gl.getProgramInfoLog(prg));
  }
  return prg;
};

// 初始化程序时传入属性位置配置
const genProg = createProgram(gl, genPointsVSGLSL, genPointsFSGLSL, ["vPosition"], {
  "position": 0
});
const timeLocGen = gl.getUniformLocation(genProg, "time");

const drawProg = createProgram(gl, drawVSGLSL, drawFSGLSL, null, {
  "vPosition": 0
});
const timeLocDraw = gl.getUniformLocation(drawProg, "time");

2. 补全计算用顶点着色器的gl_Position赋值：

const genPointsVSGLSL = `#version 300 es
uniform float time;
in vec2 position;
out vec2 vPosition;
void main() {
  vPosition = vec2(position * (sin(time) + 1.0));
  gl_Position = vec4(0.0); // 必须赋值，值不影响TF输出结果
}
`;

3. 创建两个等大的顶点缓冲区做双缓冲，标记当前读/写缓冲区：

const initialData = generatePoints(numPoints);
const buffers = [gl.createBuffer(), gl.createBuffer()];
// 给两个缓冲区分配同样大小的空间，初始数据写入第一个缓冲区
for (let i = 0; i < 2; i++) {
  gl.bindBuffer(gl.ARRAY_BUFFER, buffers[i]);
  gl.bufferData(gl.ARRAY_BUFFER, initialData, gl.DYNAMIC_DRAW);
}
let readIdx = 0, writeIdx = 1;

4. 修正渲染循环的TF操作顺序，每帧切换缓冲区读/写角色，添加清屏逻辑避免帧残留：

function loop() {
  // === 计算阶段：读readIdx缓冲区数据，计算结果写入writeIdx缓冲区 ===
  gl.useProgram(genProg);
  gl.enable(gl.RASTERIZER_DISCARD);

  // 绑定读缓冲区到VAO作为计算输入
  gl.bindVertexArray(dotVertexArray);
  gl.bindBuffer(gl.ARRAY_BUFFER, buffers[readIdx]);
  gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);

  // 绑定TFO和写缓冲区
  gl.bindTransformFeedback(gl.TRANSFORM_FEEDBACK, tf);
  gl.bindBufferBase(gl.TRANSFORM_FEEDBACK_BUFFER, 0, buffers[writeIdx]);

  // 执行GPU计算
  gl.beginTransformFeedback(gl.POINTS);
  gl.uniform1f(timeLocGen, time);
  gl.drawArrays(gl.POINTS, 0, numPoints);
  gl.endTransformFeedback();

  // 解绑TF相关资源
  gl.bindTransformFeedback(gl.TRANSFORM_FEEDBACK, null);
  gl.disable(gl.RASTERIZER_DISCARD);

  // === 绘制阶段：读取刚计算完的writeIdx缓冲区内容渲染到屏幕 ===
  gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
  gl.clearColor(1,1,1,1);
  gl.clear(gl.COLOR_BUFFER_BIT);
  gl.useProgram(drawProg);
  // 绑定刚计算完的缓冲区作为绘制输入
  gl.bindBuffer(gl.ARRAY_BUFFER, buffers[writeIdx]);
  gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);
  gl.uniform1f(timeLocDraw, time);
  gl.drawArrays(gl.POINTS, 0, numPoints);

  gl.bindVertexArray(null);

  // 交换读写索引，下一帧缓冲区角色互换
  [readIdx, writeIdx] = [writeIdx, readIdx];
}

内容的提问来源于stack exchange，提问作者mtx