WebGL 변환 피드백: 고급 효과를 위한 정점 셰이더 출력 캡처

            const transformFeedback = gl.createTransformFeedback();

            

              
                Copy
              
            
          

            gl.bindTransformFeedback(gl.TRANSFORM_FEEDBACK, transformFeedback);

            

              
                Copy
              
            
          

            const varyings = ['vPosition', 'vVelocity', 'vLife']; // Example varying names
gl.transformFeedbackVaryings(program, varyings, gl.INTERLEAVED_ATTRIBS);
gl.linkProgram(program);

            

              
                Copy
              
            
          

            const positionBuffer = gl.createBuffer();
const velocityBuffer = gl.createBuffer();
const lifeBuffer = gl.createBuffer();

            

              
                Copy
              
            
          

            gl.bindBufferBase(gl.TRANSFORM_FEEDBACK_BUFFER, 0, positionBuffer); // vPosition
gl.bindBufferBase(gl.TRANSFORM_FEEDBACK_BUFFER, 1, velocityBuffer); // vVelocity
gl.bindBufferBase(gl.TRANSFORM_FEEDBACK_BUFFER, 2, lifeBuffer);   // vLife

            

              
                Copy
              
            
          

            const interleavedBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, interleavedBuffer);
gl.bufferData(gl.ARRAY_BUFFER, particleData, gl.DYNAMIC_COPY); // particleData is a TypedArray

gl.bindBufferBase(gl.TRANSFORM_FEEDBACK_BUFFER, 0, interleavedBuffer);

            

              
                Copy
              
            
          

            gl.beginTransformFeedback(gl.POINTS); // Specify the primitive type

            

              
                Copy
              
            
          

            gl.drawArrays(gl.POINTS, 0, numParticles); // Render the points

            

              
                Copy
              
            
          

            gl.endTransformFeedback();

            

              
                Copy
              
            
          

            gl.bindTransformFeedback(gl.TRANSFORM_FEEDBACK, null);
gl.bindBufferBase(gl.TRANSFORM_FEEDBACK_BUFFER, 0, null);
gl.bindBufferBase(gl.TRANSFORM_FEEDBACK_BUFFER, 1, null);
gl.bindBufferBase(gl.TRANSFORM_FEEDBACK_BUFFER, 2, null);

            

              
                Copy
              
            
          

            #version 300 es

in vec4 aPosition;
in vec4 aVelocity;
in float aLife;

out vec4 vPosition;
out vec4 vVelocity;
out float vLife;

uniform float uTimeDelta;

void main() {
  vVelocity = aVelocity;
  vPosition = aPosition + vVelocity * uTimeDelta;
  vLife = aLife - uTimeDelta;

  gl_Position = vPosition; // Still needs to output gl_Position for rendering.
}

            

              
                Copy
              
            
          

            // 1. Initialization
const numParticles = 1000;

// Create initial particle data (positions, velocities, life)
const initialParticleData = createInitialParticleData(numParticles);

// Create and bind vertex array objects (VAOs) for input and output
const vao1 = gl.createVertexArray();
const vao2 = gl.createVertexArray();

// Create buffers for positions, velocities, and life
const positionBuffer1 = gl.createBuffer();
const velocityBuffer1 = gl.createBuffer();
const lifeBuffer1 = gl.createBuffer();

const positionBuffer2 = gl.createBuffer();
const velocityBuffer2 = gl.createBuffer();
const lifeBuffer2 = gl.createBuffer();

// Initialize buffers with initial data
gl.bindVertexArray(vao1);
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer1);
gl.bufferData(gl.ARRAY_BUFFER, initialParticleData.positions, gl.DYNAMIC_COPY);
// ... bind and buffer velocityBuffer1 and lifeBuffer1 similarly ...

gl.bindVertexArray(vao2);
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer2);
gl.bufferData(gl.ARRAY_BUFFER, initialParticleData.positions, gl.DYNAMIC_COPY);
// ... bind and buffer velocityBuffer2 and lifeBuffer2 similarly ...

gl.bindVertexArray(null);

// Create transform feedback object
const transformFeedback = gl.createTransformFeedback();

// Shader program setup (compile and link shaders)
const program = createShaderProgram(vertexShaderSource, fragmentShaderSource);

// Specify varyings (before linking the program)
gl.transformFeedbackVaryings(program, ['vPosition', 'vVelocity', 'vLife'], gl.INTERLEAVED_ATTRIBS);
gl.linkProgram(program);
gl.useProgram(program);

// Get attribute locations (after linking the program)
const positionLocation = gl.getAttribLocation(program, 'aPosition');
const velocityLocation = gl.getAttribLocation(program, 'aVelocity');
const lifeLocation = gl.getAttribLocation(program, 'aLife');

// 2. Render Loop (Simplified)
let useVAO1 = true; // Toggle between VAOs for ping-ponging

function render() {
  // Switch VAOs for ping-ponging
  const readVAO = useVAO1 ? vao1 : vao2;
  const writeVAO = useVAO1 ? vao2 : vao1;

  const readPositionBuffer = useVAO1 ? positionBuffer1 : positionBuffer2;
  const readVelocityBuffer = useVAO1 ? velocityBuffer1 : velocityBuffer2;
  const readLifeBuffer = useVAO1 ? lifeBuffer1 : lifeBuffer2;

  const writePositionBuffer = useVAO1 ? positionBuffer2 : positionBuffer1;
  const writeVelocityBuffer = useVAO1 ? velocityBuffer2 : velocityBuffer1;
  const writeLifeBuffer = useVAO1 ? lifeBuffer2 : lifeBuffer1;

gl.bindVertexArray(readVAO);

  // Set attribute pointers
  gl.bindBuffer(gl.ARRAY_BUFFER, readPositionBuffer);
gl.vertexAttribPointer(positionLocation, 3, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(positionLocation);

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

  gl.bindBuffer(gl.ARRAY_BUFFER, readLifeBuffer);
gl.vertexAttribPointer(lifeLocation, 1, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(lifeLocation);

  // Bind transform feedback object
  gl.bindTransformFeedback(gl.TRANSFORM_FEEDBACK, transformFeedback);

  // Bind output buffers
  gl.bindBufferBase(gl.TRANSFORM_FEEDBACK_BUFFER, 0, writePositionBuffer);
gl.bindBufferBase(gl.TRANSFORM_FEEDBACK_BUFFER, 1, writeVelocityBuffer);
gl.bindBufferBase(gl.TRANSFORM_FEEDBACK_BUFFER, 2, writeLifeBuffer);

  // Begin transform feedback
  gl.beginTransformFeedback(gl.POINTS);

  // Draw particles
  gl.drawArrays(gl.POINTS, 0, numParticles);

  // End transform feedback
  gl.endTransformFeedback();

  // Unbind
gl.bindTransformFeedback(gl.TRANSFORM_FEEDBACK, null);
gl.bindBufferBase(gl.TRANSFORM_FEEDBACK_BUFFER, 0, null);
gl.bindBufferBase(gl.TRANSFORM_FEEDBACK_BUFFER, 1, null);
gl.bindBufferBase(gl.TRANSFORM_FEEDBACK_BUFFER, 2, null);
gl.bindVertexArray(null);

  // Draw the particles (using a separate rendering shader)
  drawParticles(writePositionBuffer); // Assumes a drawParticles function exists.

  // Toggle VAOs for next frame
  useVAO1 = !useVAO1;

  requestAnimationFrame(render);
}

render();

            

              
                Copy
              
            
          

            #version 300 es

in vec3 aPosition;
in vec3 aVelocity;
in float aLife;

uniform float uTimeDelta;

out vec3 vPosition;
out vec3 vVelocity;
out float vLife;

void main() {
  // Update particle properties
  vVelocity = aVelocity * 0.98; // Apply damping
  vPosition = aPosition + vVelocity * uTimeDelta;
  vLife = aLife - uTimeDelta;

  // Respawn if life is zero
  if (vLife <= 0.0) {
    vLife = 1.0;
    vPosition = vec3(0.0); // Reset position to origin
    vVelocity = vec3((rand(gl_VertexID) - 0.5) * 2.0, 1.0, (rand(gl_VertexID + 1) - 0.5) * 2.0); // Random velocity
  }

  gl_Position = vec4(vPosition, 1.0); // gl_Position is still required for rendering!
  gl_PointSize = 5.0;                  // Adjust particle size as needed
}

// Simple pseudo-random number generator for WebGL 2 (not cryptographically secure!)
float rand(int n) {
    return fract(sin(float(n) * 12.9898 + 78.233) * 43758.5453);
}

            

              
                Copy