I'm doing a project that involves transform feedback and WebGL2. I was able to make a transform feedback work using two buffers, to calculate an update in 3d positions of particles.

But now I'd like to add age to the particles. Currently I have something like:

    function makeTransformFeedback(gl, buffer, idx) {
      const tf = gl.createTransformFeedback();
      gl.bindTransformFeedback(gl.TRANSFORM_FEEDBACK, tf);
      gl.bindBufferBase(gl.TRANSFORM_FEEDBACK_BUFFER, idx, buffer);
      return tf;

    const tf1 = makeTransformFeedback(gl, this.position1Buffer, 0);
    const tf2 = makeTransformFeedback(gl, this.position2Buffer, 0); 

And in the drawing part:

    gl.bindTransformFeedback(gl.TRANSFORM_FEEDBACK, this.current.tf);
    gl.drawArrays(gl.POINTS, 0, this.numParticles);
    gl.bindTransformFeedback(gl.TRANSFORM_FEEDBACK, null);

Which works. But I'm not sure how to add a second parameter. Should I create new "transform feedback" objects? (e.g. calling to makeTransformFeedback again). Also, should I use the same buffers for all the variables involved in the transform feedback or should I use different buffers?

Sorry if the question is vague. Basically I'd like to know what would be the simplest approach to add a second variable to an existing code that uses transform feedback to update positions to particles, but that was created to only do that.

One difference between particle age and particle position is that the last one is related with the drawing program while the first one would only be related with the "update vertex data" program (the code contains two programs, one for updating data and one for drawing).


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.