Pixel Bender to WebGL Fragment Shaders: Mathematical Color Grading & Image Processing

Adobe Pixel Bender introduced high-performance GPU image processing to Flash and Photoshop via domain-specific `.pbk` kernel scripts. Porting Pixel Bender convolution filters, dynamic displacements, and bloom algorithms to WebGL GLSL allows modern web apps to achieve identical visual effects.

1. Pixel Bender Kernel to GLSL Fragment Shader Translation

// GLSL Fragment Shader: Gaussian Blur & Color Grading
precision mediump float;
uniform sampler2D uImage;
uniform vec2 uResolution;
varying vec2 vTexCoord;

void main() {
  vec2 onePixel = vec2(1.0, 1.0) / uResolution;
  vec4 color = texture2D(uImage, vTexCoord) * 0.227027;
  color += texture2D(uImage, vTexCoord + vec2(onePixel.x * 1.3846, 0.0)) * 0.316216;
  color += texture2D(uImage, vTexCoord - vec2(onePixel.x * 1.3846, 0.0)) * 0.316216;
  gl_FragColor = color;
}