WebGL2 how to draw feedback buffer to texture that is passed to shader uniform

Question

Apologies in advance if I don't have all the right terminology, I'm still learning and it takes time to get your head around GPU coding.

Anyway, I have a transform feedback particle program working (see first part of the loop code) and a separate program that uses fbos to feedback the output of the shader as a uniform to itself.

What I've been trying to do is feed the render of the transform feedback into the sampler2d uniform of the second program shader but I can't work out how to feed the transform feedback buffer into the texture. Any thoughts?

loop = {
  let t = 0;
  while (true) {
    gl.viewport(0, 0, canvas.width, canvas.height);
    
    particleProg.use();
    
    gl.uniform1f(particleProg.uniforms.uTick, t);

    gl.bindBuffer(gl.ARRAY_BUFFER, buffers[t % 2]);
    gl.vertexAttribPointer(particleProg.aPosLoc, 4, gl.FLOAT, gl.FALSE, 0, 0);
    gl.bindBufferBase(gl.TRANSFORM_FEEDBACK_BUFFER, 0, buffers[(t + 1) % 2]);

    gl.beginTransformFeedback(gl.POINTS);
    gl.drawArrays(gl.POINTS, 0, size);
    gl.endTransformFeedback();

    // unbinds feedback buffer
    gl.bindBufferBase(gl.TRANSFORM_FEEDBACK_BUFFER, 0, null);


/// transform feedback ^ ////////////// FBO v ////////////////////

    postProg.use();
    gl.activeTexture(gl.TEXTURE0 + fbos.first[2]);
    gl.bindTexture(gl.TEXTURE_2D, fbos.first[0]);
    gl.uniform1f(postProg.uniforms.uTick, t);
    gl.uniform1i(postProg.uniforms.currState, fbos.first[2]);
    
    blit(fbos.second[1]);
    fbos.swap();
    
    blit(null);
  }
}

Answer 1

What I've been trying to do is feed the render of the transform feedback into the sampler2d uniform of the second program shader

This probably won't work in WebGL (at least not if you really do want to take a buffer and access it via a sampler in the fragment shader). On desktop OpenGL, you have access to buffer textures, which would permit exactly this sort of operation, but on WebGL, buffer textures don't exist.

One workaround that you might use is to have the first pass also output data to a framebuffer object (instead of writing to a transform feedback buffer). This would allow you to bind the FBO's textures as input to the second pass fragment shader and then access that data using texture functions in the second pass.

Answer 2

texImage2D() can read data from a PIXEL_UNPACK_BUFFER target.

I think this means that if you can bind a buffer with bindBuffer() as the TRANSFORM_FEEDBACK_BUFFER and do transform feedback, you could then rebind it as a PIXEL_UNPACK_BUFFER and use texImage2D() to upload the content to a texture? I don't know the exact sequence of commands but it seems like it would be possible.