WebGL Custom Shaders: 2D Water Reflection, Shockwaves & Bloom Post-Processing

The Multi-Pass Framebuffer Object (FBO) Pipeline

Direct rendering to the browser screen is inherently single-pass: once a pixel is drawn to the default framebuffer (null), its color cannot be easily repurposed for global screen effects.

Advanced post-processing requires Framebuffer Objects (FBOs). An FBO is an offscreen rendering target containing attached texture buffers.

A production post-processing pipeline operates as a sequence of discrete passes:

1. Scene Pass: All background props, character sprites, and particle effects are rendered normally into Scene_FBO.
2. Downsample / Extraction Pass: A brightness threshold shader extracts highlights exceeding $1.0$ luminance into a downsampled bloom texture.
3. Post-Processing Filter Pass: A full-screen quad (two triangles spanning $[-1, 1]$ NDC coordinates) executes custom fragment shaders that sample Scene_FBO and apply distortion or color transformations.
4. Composite Pass: The final processed texture is blended to the screen canvas.

export class RenderTargetFBO {
  public fbo: WebGLFramebuffer;
  public texture: WebGLTexture;
  private gl: WebGL2RenderingContext;
  public width: number;
  public height: number;

  constructor(gl: WebGL2RenderingContext, width: number, height: number) {
    this.gl = gl;
    this.width = width;
    this.height = height;

    this.fbo = gl.createFramebuffer()!;
    this.texture = gl.createTexture()!;

    gl.bindTexture(gl.TEXTURE_2D, this.texture);
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA8, width, height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);

    gl.bindFramebuffer(gl.FRAMEBUFFER, this.fbo);
    gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, this.texture, 0);

    const status = gl.checkFramebufferStatus(gl.FRAMEBUFFER);
    if (status !== gl.FRAMEBUFFER_COMPLETE) {
      throw new Error('Framebuffer creation failed: ' + status);
    }
    gl.bindFramebuffer(gl.FRAMEBUFFER, null);
  }
}

Planar Water Reflection & Wave Distortion Shader

To create dynamic water in 2D platformers or top-down RPGs, the scene above the water plane is drawn inverted into a reflection FBO.

The water surface fragment shader samples this reflection texture, offsetting the sampling UVs using scrolling trigonometric wave functions combined with a procedural normal map. A depth-dependent gradient darkens the water with depth, while Fresnel equations brighten the specular highlight at grazing angles:

#version 300 es
precision highp float;

in vec2 v_uv;
out vec4 fragColor;

uniform sampler2D u_reflectionTexture;
uniform sampler2D u_normalMap;
uniform float u_time;
uniform vec4 u_waterColor;

void main() {
  // Distort UVs using scrolling normal map
  vec2 waveOffset1 = texture(u_normalMap, v_uv * 3.0 + vec2(u_time * 0.05, u_time * 0.02)).rg * 2.0 - 1.0;
  vec2 waveOffset2 = texture(u_normalMap, v_uv * 7.0 - vec2(u_time * 0.03, u_time * 0.04)).rg * 2.0 - 1.0;
  vec2 totalDistortion = (waveOffset1 + waveOffset2) * 0.015;

  // Flip vertical coordinate for water reflection
  vec2 reflectUV = vec2(v_uv.x, 1.0 - v_uv.y) + totalDistortion;
  vec4 reflectColor = texture(u_reflectionTexture, reflectUV);

  // Depth tinting & Fresnel surface blend
  float fresnel = pow(1.0 - v_uv.y, 2.0) * 0.5;
  vec4 finalColor = mix(u_waterColor, reflectColor, 0.65 + fresnel);

  // Specular wave highlights
  float specular = pow(max(0.0, totalDistortion.x * 20.0), 4.0);
  finalColor += vec4(specular);

  fragColor = finalColor;
}

Refractive Explosion Shockwaves

When a bomb detonates or a boss creature impacts the ground, a refractive shockwave ripples across the screen.

Instead of drawing a simple expanding alpha circle, a shockwave fragment shader refracts the underlying scene image. In the fragment shader, each pixel computes its distance to the explosion epicenter. If the pixel lies within the expanding wavefront, its UV lookup is pushed radially outward:

#version 300 es
precision highp float;

in vec2 v_uv;
out vec4 fragColor;

uniform sampler2D u_sceneTexture;
uniform vec2 u_epicenter; // In normalized 0.0 - 1.0 UV space
uniform float u_progress;  // 0.0 (detonation) to 1.0 (dissipated)
uniform float u_aspectRatio;

void main() {
  vec2 aspectVec = vec2(u_aspectRatio, 1.0);
  vec2 dir = (v_uv - u_epicenter) * aspectVec;
  float dist = length(dir);

  float waveRadius = u_progress * 0.8;
  float waveWidth = 0.08;
  float diff = dist - waveRadius;

  vec2 displacedUV = v_uv;

  if (diff >= -waveWidth && diff <= waveWidth) {
    float factor = 1.0 - abs(diff / waveWidth);
    // Smooth cosine pulse
    float displacement = sin(factor * 3.14159265) * (1.0 - u_progress) * 0.03;
    displacedUV -= normalize(dir / aspectVec) * displacement;
  }

  fragColor = texture(u_sceneTexture, displacedUV);
}

Dual-Kawase Bloom: Velvet Glows with Mobile Fillrate Efficiency

Bloom conveys emissive energy: neon signs, laser beams, glowing runes, and molten lava. However, naive Gaussian bloom filters require wide convolution matrices (15 to 30 texture taps per pixel), collapsing fillrates on mobile GPUs.

The Dual-Kawase Bloom algorithm solves this through progressive downsampling and upsampling:

1. The bright regions of the scene are downsampled sequentially across 4 mipmap levels (Half, Quarter, Eighth, Sixteenth resolution) using a staggered 4-tap box filter.
2. The downsampled textures are then blended back up sequentially using an 8-tap bilinear filter.
3. This produces a rich, cinematic wide-radius glow using over 70% fewer GPU instructions than Gaussian blurs, running effortlessly at 60 FPS on iOS Safari and Android Chrome.

Comparative Architectural Matrix: WebGL Post-Processing Filters

Comparing performance and capabilities across post-processing techniques:

Conclusion

Custom GLSL shaders and multi-pass Framebuffer pipelines bridge the visual gulf between flat browser toys and immersive commercial games. By mastering offscreen FBO composition, planar water reflection algorithms, refractive shockwave mathematics, and fillrate-optimized Dual-Kawase bloom, graphics engineers create breathtaking visual spectacles that maintain uncompromised 60 FPS performance on the open web.