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

1. Anatomy of a Pixel Bender Kernel (.pbk) vs. WebGL GLSL

A Pixel Bender kernel was authored in a C-derived syntax with explicit input/output streams and metadata tags. Inside the compiled .pbj binary, the kernel defined an evaluatePixel() entry point invoked for every destination pixel coordinate:

// Legacy Adobe Pixel Bender Kernel (Color Inversion & Brightness)
<languageVersion : 1.0;>
kernel ColorGradingFilter
<
  namespace : "com.codeforflash.filters";
  vendor : "CodeForFlash";
  version : 1;
>
{
  input image4 src;
  output pixel4 dst;

  parameter float brightness < defaultValue: 0.0; minValue: -1.0; maxValue: 1.0; >;

  void evaluatePixel() {
    float2 coord = outCoord();
    pixel4 color = sampleNearest(src, coord);
    dst.rgb = color.rgb + float3(brightness);
    dst.a = color.a;
  }
}

Translating this kernel to WebGL GLSL requires accounting for several key semantic differences:

• Normalized Texture Coordinates: While Pixel Bender's outCoord() operated in absolute pixel coordinates, WebGL operates in normalized texture space [0.0, 1.0] via vTexCoord.
• Texture Sampling Primitives: Pixel Bender's sampleNearest(src, coord) is replaced by WebGL's texture2D(uSampler, vTexCoord) (or texture() in GLSL 3.00 ES).
• Uniform Parameter Binding: Parameters declared in parameter float brightness map directly to WebGL uniform float uBrightness variables passed from JavaScript via gl.uniform1f().

2. Convolution Matrices: Porting Blur, Sharpen & Edge Detect Filters

Spatial convolution filters (such as Sobel edge detection, Gaussian blurring, and Laplacian sharpening) calculate a target pixel's output color by sampling a weighted grid of neighboring pixels.

In WebGL GLSL, sampling neighbors requires calculating the inverse resolution offset vector (vec2 onePixel = vec2(1.0) / uResolution) to shift UV coordinates by exact pixel increments:

// Modern WebGL 2.0 GLSL Fragment Shader: 3x3 Convolution Matrix
#version 300 es
precision highp float;

in vec2 vTexCoord;
out vec4 fragColor;

uniform sampler2D uImage;
uniform vec2 uResolution;
uniform float uKernel[9];
uniform float uKernelWeight;

void main() {
  vec2 onePixel = vec2(1.0) / uResolution;
  vec4 colorSum = vec4(0.0);

  // 3x3 Convolution Sampling Grid
  colorSum += texture(uImage, vTexCoord + onePixel * vec2(-1, -1)) * uKernel[0];
  colorSum += texture(uImage, vTexCoord + onePixel * vec2( 0, -1)) * uKernel[1];
  colorSum += texture(uImage, vTexCoord + onePixel * vec2( 1, -1)) * uKernel[2];
  colorSum += texture(uImage, vTexCoord + onePixel * vec2(-1,  0)) * uKernel[3];
  colorSum += texture(uImage, vTexCoord + onePixel * vec2( 0,  0)) * uKernel[4];
  colorSum += texture(uImage, vTexCoord + onePixel * vec2( 1,  0)) * uKernel[5];
  colorSum += texture(uImage, vTexCoord + onePixel * vec2(-1,  1)) * uKernel[6];
  colorSum += texture(uImage, vTexCoord + onePixel * vec2( 0,  1)) * uKernel[7];
  colorSum += texture(uImage, vTexCoord + onePixel * vec2( 1,  1)) * uKernel[8];

  fragColor = vec4((colorSum / uKernelWeight).rgb, 1.0);
}

3. Feature Comparison: Pixel Bender vs. WebGL 2.0 GLSL

4. Cinematic 3D Color Lookup Tables (LUTs) in WebGL

In digital cinematography and modern web interactive experiences, complex color grading is rarely performed by chaining dozens of individual contrast, saturation, and balance formulas. Instead, the industry standard is the 3D Color Lookup Table (3D LUT).

A 3D LUT is a color cube (typically 33x33x33 or 64x64x64 samples) where the incoming red, green, and blue values act as 3-dimensional coordinate indices. By packing this cube into a 2D strip (such as a 512x512 PNG image), a WebGL fragment shader performs trilinear color interpolation in a single texture sampling step:

// WebGL 2D LUT Color Grading Shader
vec4 lookupGradedColor(sampler2D lutTexture, vec4 rawColor) {
  float blueColor = rawColor.b * 63.0; // 64-cube LUT
  vec2 quad1;
  quad1.y = floor(floor(blueColor) / 8.0);
  quad1.x = floor(blueColor) - (quad1.y * 8.0);

  vec2 texPos1 = vec2(
    (quad1.x * 0.125) + 0.5/512.0 + ((0.125 - 1.0/512.0) * rawColor.r),
    (quad1.y * 0.125) + 0.5/512.0 + ((0.125 - 1.0/512.0) * rawColor.g)
  );

  return texture(lutTexture, texPos1);
}

5. Multi-Pass Post-Processing: Ping-Pong FBO Architecture

To implement high-end post-processing effects like HDR Bloom, depth of field, or heatwave displacement, WebGL applications utilize an alternating ping-pong Framebuffer Object (FBO) pipeline:

• Pass 1 (Scene Render): Render the complete interactive 2D/3D scene into Texture A attached to FBO 1.
• Pass 2 (Brightness Threshold): Sample Texture A, isolate high-luminance pixels, and render the emissive mask into Texture B.
• Pass 3 & 4 (Separable Blur): Perform horizontal Gaussian blur from Texture B to Texture A, followed by vertical blur from Texture A back to Texture B.
• Pass 5 (Final Composite): Blend the original scene texture and the blurred bloom texture onto the screen canvas using additive tone mapping.

Frequently Asked Questions