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

Post-processing shaders transform flat 2D canvas games into rich cinematic visual experiences. By rendering the entire game scene to an off-screen **Framebuffer Object (FBO)** texture, custom GLSL fragment shaders apply screen-space distortions, chromatic aberration, shockwaves, and bloom glow effects in a single GPU pass.

1. Shockwave Displacement Fragment Shader

// GLSL 2D Shockwave Displacement Shader
precision mediump float;
uniform sampler2D uSceneTexture;
uniform vec2 uCenter;     // Shockwave origin in UV coordinates (0.0 to 1.0)
uniform float uTime;      // Shockwave progress (0.0 to 1.0)
uniform float uStrength;  // Refraction power
varying vec2 vTexCoord;

void main() {
  float distance = length(vTexCoord - uCenter);
  if (distance >= uTime - 0.1 && distance <= uTime + 0.1) {
    float diff = (distance - uTime);
    float powDiff = 1.0 - pow(abs(diff * 10.0), 0.8);
    float diffTime = diff * powDiff;
    vec2 diffUV = normalize(vTexCoord - uCenter);
    vec2 uv = vTexCoord + (diffUV * diffTime * uStrength);
    gl_FragColor = texture2D(uSceneTexture, uv);
  } else {
    gl_FragColor = texture2D(uSceneTexture, vTexCoord);
  }
}