GPU Particle Systems: WebGL 2.0 Transform Feedback & Instanced Mesh Rendering

The Triple Bottleneck of CPU Particle Engines

Traditional 2D Canvas and early WebGL 1.0 particle systems execute simulation updates in JavaScript:

// Iterating 20,000 objects on CPU every 16ms
for (let i = 0; i < particles.length; i++) {
  const p = particles[i];
  p.vy += GRAVITY * dt;
  p.x += p.vx * dt;
  p.y += p.vy * dt;
  p.life -= dt;
  // Pack into Float32Array for GPU upload...
}
gl.bufferSubData(gl.ARRAY_BUFFER, 0, particleDataArray); // Bus bottleneck!

This CPU-bound pipeline founders against three structural bottlenecks:

1. Single-Threaded Compute Saturation: Calculating physics updates for 50,000 particles requires tens of thousands of trigonometric and vector operations in JavaScript, starving physics and AI systems of CPU cycles.
2. Garbage Collection & Memory Allocation Thrashing: Continuously allocating temporary vector objects or splicing expired particles from arrays triggers aggressive V8 garbage collection sweeps, introducing intermittent 50ms stutter frames.
3. PCI-e Bus Bandwidth Saturation: Streaming a 50,000-particle array buffer (containing positions, velocities, colors, and UV rotations) from system RAM to GPU VRAM via gl.bufferSubData() every 16.6ms consumes massive memory bus bandwidth, choking graphics rendering.

WebGL 2.0 Transform Feedback Architecture

Transform Feedback bypasses the CPU entirely. It instructs the GPU to capture vertex attributes emitted by the vertex shader and write them directly back into a designated Vertex Buffer Object (VBO) stored directly in high-speed GPU VRAM.

During the simulation pass, rasterization is explicitly disabled using gl.enable(gl.RASTERIZER_DISCARD). The GPU acts strictly as a massively parallel compute engine, evaluating thousands of particle positions simultaneously across hundreds of shader execution cores. Data never travels across the PCI-e bus between frames.

Double-Buffered Ping-Pong VBO Pipeline

Because GPU architecture forbids reading from and writing to the exact same buffer within a single draw dispatch (preventing read-after-write hazards), developers implement a double-buffered ping-pong architecture.

Two sets of buffers are allocated:

• Buffer Set A: Stores current particle positions, velocities, and lifetimes.
• Buffer Set B: Allocated with identical byte dimensions to receive updated values.

On even frames, Buffer A is bound as input (VAO A) while Buffer B is bound to the Transform Feedback target. On odd frames, Buffer B serves as the input while Buffer A receives the simulation output:

export class TransformFeedbackParticleSystem {
  private gl: WebGL2RenderingContext;
  private simProgram: WebGLProgram;
  private renderProgram: WebGLProgram;

  private vaos: WebGLVertexArrayObject[] = [];
  private vbos: WebGLBuffer[] = [];
  private tfObjects: WebGLTransformFeedback[] = [];

  private currentSourceIdx: number = 0;
  private particleCount: number = 500000; // Half a million particles!

  constructor(gl: WebGL2RenderingContext) {
    this.gl = gl;
    this.simProgram = this.createSimulationProgram();
    this.renderProgram = this.createRenderProgram();
    this.initBuffers();
  }

  private createSimulationProgram(): WebGLProgram {
    const gl = this.gl;
    const prog = gl.createProgram()!;
    // Compile shaders...
    // CRITICAL: Specify transform feedback varyings before linking!
    gl.transformFeedbackVaryings(
      prog,
      ['v_position', 'v_velocity', 'v_life'],
      gl.SEPARATE_ATTRIBS
    );
    gl.linkProgram(prog);
    return prog;
  }

  public stepSimulation(dt: number): void {
    const gl = this.gl;
    const src = this.currentSourceIdx;
    const dest = 1 - src;

    gl.useProgram(this.simProgram);
    gl.uniform1f(gl.getUniformLocation(this.simProgram, 'u_dt'), dt);

    // Disable rasterizer: zero fragments drawn during physics pass
    gl.enable(gl.RASTERIZER_DISCARD);

    gl.bindVertexArray(this.vaos[src]);
    gl.bindTransformFeedback(gl.TRANSFORM_FEEDBACK, this.tfObjects[dest]);

    gl.beginTransformFeedback(gl.POINTS);
    gl.drawArrays(gl.POINTS, 0, this.particleCount);
    gl.endTransformFeedback();

    gl.bindTransformFeedback(gl.TRANSFORM_FEEDBACK, null);
    gl.disable(gl.RASTERIZER_DISCARD);

    // Swap buffers for the next frame
    this.currentSourceIdx = dest;
  }
}

The Simulation Vertex Shader: Physics on the GPU

The simulation vertex shader contains the entirety of the particle physics engine. It evaluates gravitational acceleration, wind vectors, velocity dampening, and boundary reflections. Most importantly, it handles life cycle recycling using procedural hash functions:

#version 300 es
precision highp float;

in vec2 a_position;
in vec2 a_velocity;
in float a_life;

uniform float u_dt;
uniform vec2 u_gravity;
uniform vec2 u_emitterPos;
uniform float u_time;

out vec2 v_position;
out vec2 v_velocity;
out float v_life;

// Fast pseudo-random hash
float hash(vec2 co) {
  return fract(sin(dot(co, vec2(12.9898, 78.233))) * 43758.5453);
}

void main() {
  float newLife = a_life - u_dt;

  if (newLife <= 0.0) {
    // Respawn particle at emitter with randomized velocity
    v_position = u_emitterPos;
    float seed = float(gl_VertexID) + u_time;
    float angle = hash(vec2(seed, 1.0)) * 6.283185;
    float speed = 50.0 + hash(vec2(seed, 2.0)) * 150.0;
    v_velocity = vec2(cos(angle), sin(angle)) * speed;
    v_life = 1.0 + hash(vec2(seed, 3.0)) * 2.0; // 1 to 3 seconds
  } else {
    // Normal physics integration
    v_velocity = a_velocity + (u_gravity * u_dt);
    v_velocity *= 0.985; // Drag dampening
    v_position = a_position + (v_velocity * u_dt);
    v_life = newLife;
  }
}

Rendering with Instanced Mesh Quads

Once the simulation pass completes, the resulting output VBO is bound immediately as an instanced attribute stream in the render pass. Using gl.drawArraysInstanced(), the engine renders a textured quad billboard for every simulated particle.

In the render vertex shader, gl_InstanceID accesses each particle position and lifetime, scaling the quad, applying camera matrices, and computing particle alpha fading (alpha = life / maxLife) directly in hardware.

Comparative Architectural Matrix: Particle Systems on the Web

Comparing performance ceilings and technical trade-offs:

Conclusion

WebGL 2.0 Transform Feedback transforms the browser into an industrial-strength graphics workstation. By offloading particle simulation and recycling logic to the GPU, developers eliminate JavaScript garbage collection stutters, liberate CPU cycles for game AI, and deliver breathtaking million-particle visual effects that maintain an uncompromised 60 FPS.