npm - claude-code-arcane - Versions diffs - 1.0.0 - Mend

claude-code-arcane 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1778) hide show

package/skills/shader-dev/techniques/post-processing.md ADDED Viewed

@@ -0,0 +1,788 @@
+## WebGL2 Adaptation Requirements
+**IMPORTANT: Critical Warning for Standalone HTML Deployment**: Post-processing effects require an input texture to work. When generating standalone HTML, you must:
+1. Set `#define USE_DEMO_SCENE 1` to use the built-in demo scene (recommended), or
+2. Pass a valid input texture to the `iChannel0` channel, otherwise the screen will be completely black
+3. **Critical**: When USE_DEMO_SCENE=1, ensure the #else branch code does not reference non-existent uniforms (e.g., iChannel0)
+**IMPORTANT: GLSL Type Strictness Rules**:
+- `vec2 = float` is illegal — must use `vec2(x, x)` or `vec2(x)`
+- Function parameters must be defined before use; using a variable name in its own initializer is forbidden (e.g., `float w = filmicCurve(w, w)` is an error)
+- Variables must be declared before use
+- **#version must be the very first line of shader code**: No characters (including whitespace or comments) may precede `#version 300 es`
+- **Code in preprocessor branches is still compiled**: Even if `#if USE_DEMO_SCENE` is true, the `#else` branch code is still compiled by the GPU — all branches must be valid GLSL code
+Code templates in this document use ShaderToy GLSL style. When generating standalone HTML pages, you must adapt to WebGL2:
+- Use `canvas.getContext("webgl2")`
+- First line of shader: `#version 300 es`, add `precision highp float;` for fragment shaders
+- Vertex shader: `attribute` → `in`, `varying` → `out`
+- Fragment shader: `varying` → `in`, `gl_FragColor` → custom `out vec4 fragColor`, `texture2D()` → `texture()`
+- ShaderToy's `void mainImage(out vec4 fragColor, in vec2 fragCoord)` must be adapted to standard `void main()` entry
+- Must create Framebuffers and render to texture before post-processing
+### Complete WebGL2 Standalone HTML Template
+```html
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <title>Post-Processing Shader</title>
+    <style>
+        body { margin: 0; overflow: hidden; background: #000; }
+        canvas { display: block; width: 100vw; height: 100vh; }
+    </style>
+</head>
+<body>
+    <canvas id="canvas"></canvas>
+    <!-- Vertex Shader: #version must be the first line -->
+    <script id="vs" type="x-shader/x-vertex">
+        #version 300 es
+        in vec2 a_position;
+        out vec2 v_uv;
+        void main() {
+            v_uv = a_position * 0.5 + 0.5;
+            gl_Position = vec4(a_position, 0.0, 1.0);
+        }
+    </script>
+    <!-- Fragment Shader: #version must be the first line, precision follows -->
+    <script id="fs" type="x-shader/x-fragment">
+        #version 300 es
+        precision highp float;
+        in vec2 v_uv;
+        out vec4 fragColor;
+        uniform float iTime;
+        uniform vec2 iResolution;
+        // Note: Do not use iChannel0 in standalone HTML unless a valid texture is bound
+        // Recommended: Use USE_DEMO_SCENE=1 for the built-in demo scene
+        #define USE_DEMO_SCENE 1  // Recommended: use built-in demo scene
+        // Demo scene function (replaces iChannel0 sampling)
+        vec3 demoScene(vec2 uv, float time) {
+            vec3 col = 0.5 + 0.5 * cos(time + uv.xyx + vec3(0.0, 2.0, 4.0));
+            float d = length(uv - 0.5) - 0.12;
+            col += vec3(3.0, 2.5, 1.8) * smoothstep(0.02, 0.0, d);
+            return col;
+        }
+        // Tone mapping and other post-processing functions...
+        // Note: Do not reference iChannel0 in the #else branch of #if USE_DEMO_SCENE
+        // If you need iChannel0, use #ifdef or ensure the texture is bound when USE_DEMO_SCENE=0
+        void main() {
+            vec2 uv = v_uv;
+            vec3 color;
+            #if USE_DEMO_SCENE
+                color = demoScene(uv, iTime);
+            #else
+                // This branch only executes when USE_DEMO_SCENE=0 and a texture is bound
+                // Requires binding in JavaScript: gl.bindTexture(gl.TEXTURE_2D, texture);
+                color = vec3(0.0);  // fallback
+            #endif
+            fragColor = vec4(color, 1.0);
+        }
+    </script>
+    <script>
+        const canvas = document.getElementById('canvas');
+        const gl = canvas.getContext('webgl2');
+        // Compile shader
+        function createShader(gl, type, source) {
+            const shader = gl.createShader(type);
+            gl.shaderSource(shader, source);
+            gl.compileShader(shader);
+            if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+                console.error(gl.getShaderInfoLog(shader));
+                gl.deleteShader(shader);
+                return null;
+            }
+            return shader;
+        }
+        // Create program
+        const vs = createShader(gl, gl.VERTEX_SHADER, document.getElementById('vs').textContent);
+        const fs = createShader(gl, gl.FRAGMENT_SHADER, document.getElementById('fs').textContent);
+        const program = gl.createProgram();
+        gl.attachShader(program, vs);
+        gl.attachShader(program, fs);
+        gl.linkProgram(program);
+        // Fullscreen quad
+        const positions = new Float32Array([-1,-1, 1,-1, -1,1, 1,1]);
+        const vao = gl.createVertexArray();
+        gl.bindVertexArray(vao);
+        const buffer = gl.createBuffer();
+        gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+        gl.bufferData(gl.ARRAY_BUFFER, positions, gl.STATIC_DRAW);
+        const posLoc = gl.getAttribLocation(program, 'a_position');
+        gl.enableVertexAttribArray(posLoc);
+        gl.vertexAttribPointer(posLoc, 2, gl.FLOAT, false, 0, 0);
+        // Uniform locations
+        const timeLoc = gl.getUniformLocation(program, 'iTime');
+        const resLoc = gl.getUniformLocation(program, 'iResolution');
+        // Render loop
+        function render(time) {
+            canvas.width = window.innerWidth;
+            canvas.height = window.innerHeight;
+            gl.viewport(0, 0, canvas.width, canvas.height);
+            gl.useProgram(program);
+            gl.uniform1f(timeLoc, time * 0.001);
+            gl.uniform2f(resLoc, canvas.width, canvas.height);
+            gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+            requestAnimationFrame(render);
+        }
+        requestAnimationFrame(render);
+    </script>
+</body>
+</html>
+```
+### Multi-Pass Post-Processing HTML Template (with FBO)
+Bloom separable blur, TAA, multi-step post-processing pipelines, etc. require rendering to intermediate textures. The following skeleton demonstrates the pattern: render scene to FBO → post-processing reads FBO → output to screen:
+```html
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <title>Multi-Pass Post-Processing</title>
+    <style>
+        body { margin: 0; overflow: hidden; background: #000; }
+        canvas { display: block; width: 100vw; height: 100vh; }
+    </style>
+</head>
+<body>
+<canvas id="c"></canvas>
+<script>
+let frameCount = 0;
+const canvas = document.getElementById('c');
+const gl = canvas.getContext('webgl2');
+const ext = gl.getExtension('EXT_color_buffer_float');
+function createShader(type, src) {
+    const s = gl.createShader(type);
+    gl.shaderSource(s, src);
+    gl.compileShader(s);
+    if (!gl.getShaderParameter(s, gl.COMPILE_STATUS))
+        console.error(gl.getShaderInfoLog(s));
+    return s;
+}
+function createProgram(vsSrc, fsSrc) {
+    const p = gl.createProgram();
+    gl.attachShader(p, createShader(gl.VERTEX_SHADER, vsSrc));
+    gl.attachShader(p, createShader(gl.FRAGMENT_SHADER, fsSrc));
+    gl.linkProgram(p);
+    return p;
+}
+const vsSource = `#version 300 es
+in vec2 pos;
+void main(){ gl_Position=vec4(pos,0,1); }`;
+// fsScene: Scene rendering shader (outputs HDR color to FBO)
+// fsPost:  Post-processing shader (samples scene texture from iChannel0, applies bloom/tonemap/etc)
+const progScene = createProgram(vsSource, fsScene);
+const progPost = createProgram(vsSource, fsPost);
+function createFBO(w, h) {
+    const tex = gl.createTexture();
+    gl.bindTexture(gl.TEXTURE_2D, tex);
+    // IMPORTANT: Critical: Check for float texture extension, fall back to RGBA8 if unsupported
+    const fmt = ext ? gl.RGBA16F : gl.RGBA;
+    const typ = ext ? gl.FLOAT : gl.UNSIGNED_BYTE;
+    gl.texImage2D(gl.TEXTURE_2D, 0, fmt, w, h, 0, gl.RGBA, typ, 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);
+    const fbo = gl.createFramebuffer();
+    gl.bindFramebuffer(gl.FRAMEBUFFER, fbo);
+    gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, tex, 0);
+    gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+    return { fbo, tex };
+}
+let W, H, sceneFBO;
+const vao = gl.createVertexArray();
+gl.bindVertexArray(vao);
+const vbo = gl.createBuffer();
+gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
+gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1,-1, 1,-1, -1,1, 1,1]), gl.STATIC_DRAW);
+gl.enableVertexAttribArray(0);
+gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);
+function resize() {
+    canvas.width = W = innerWidth;
+    canvas.height = H = innerHeight;
+    sceneFBO = createFBO(W, H);
+}
+addEventListener('resize', resize);
+resize();
+function render(t) {
+    t *= 0.001;
+    // Pass 1: Scene rendering → FBO
+    gl.useProgram(progScene);
+    gl.bindFramebuffer(gl.FRAMEBUFFER, sceneFBO.fbo);
+    gl.viewport(0, 0, W, H);
+    gl.uniform2f(gl.getUniformLocation(progScene, 'iResolution'), W, H);
+    gl.uniform1f(gl.getUniformLocation(progScene, 'iTime'), t);
+    gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+    // Pass 2: Post-processing reads scene texture → screen
+    gl.useProgram(progPost);
+    gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+    gl.viewport(0, 0, W, H);
+    gl.activeTexture(gl.TEXTURE0);
+    gl.bindTexture(gl.TEXTURE_2D, sceneFBO.tex);
+    gl.uniform1i(gl.getUniformLocation(progPost, 'iChannel0'), 0);
+    gl.uniform2f(gl.getUniformLocation(progPost, 'iResolution'), W, H);
+    gl.uniform1f(gl.getUniformLocation(progPost, 'iTime'), t);
+    gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+    frameCount++;
+    requestAnimationFrame(render);
+}
+requestAnimationFrame(render);
+</script>
+</body>
+</html>
+```
+# Screen-Space Post-Processing Effects
+## Use Cases
+Screen-space image enhancement on already-rendered scenes: Tone Mapping, Bloom, Vignette, Chromatic Aberration, Motion Blur, DoF, FXAA/TAA, Color Grading, Film Grain, Lens Flare, etc.
+Typical pipeline order: Scene Rendering → AA → Bloom → Chromatic Aberration → Motion Blur/DoF → Tone Mapping → Color Grading → Contrast → Vignette → Film Grain → Gamma → Dithering.
+## Core Principles
+The essence of post-processing is **per-pixel transformation of an already-rendered image** — input is a framebuffer texture, output is the transformed color value.
+- **Tone Mapping**: HDR [0, ∞) → LDR [0, 1]. Reinhard `c/(1+c)`, Filmic Reinhard (white point/shoulder parameters), ACES (3×3 matrix + rational polynomial), generic rational polynomial
+- **Gaussian Blur**: 2D Gaussian kernel is separable into two 1D passes, O(n²) → O(2n)
+- **Bloom**: Bright-pass extraction → multi-level Gaussian blur → additive blend back to original
+- **Vignette**: Brightness falloff based on pixel distance to center. Multiplicative or radial
+- **Chromatic Aberration**: Sample the same texture at different scales for R/G/B channels
+## Implementation Steps
+### Step 1: Tone Mapping
+```glsl
+// Reinhard
+vec3 reinhard(vec3 color) { return color / (1.0 + color); }
+// Filmic Reinhard (W=white point, T2=shoulder parameter)
+// IMPORTANT: GLSL critical rule: function parameters must be defined before use; using a variable name in its own initializer is forbidden
+const float W = 1.2, T2 = 7.5; // adjustable
+float filmic_reinhard_curve(float x) {
+    float q = (T2 * T2 + 1.0) * x * x;
+    return q / (q + x + T2 * T2);
+}
+vec3 filmic_reinhard(vec3 x) {
+    float w = filmic_reinhard_curve(W);  // compute w using constant W first
+    return vec3(filmic_reinhard_curve(x.r), filmic_reinhard_curve(x.g), filmic_reinhard_curve(x.b)) / w;
+}
+// ACES industry standard
+vec3 aces_tonemap(vec3 color) {
+    mat3 m1 = mat3(0.59719,0.07600,0.02840, 0.35458,0.90834,0.13383, 0.04823,0.01566,0.83777);
+    mat3 m2 = mat3(1.60475,-0.10208,-0.00327, -0.53108,1.10813,-0.07276, -0.07367,-0.00605,1.07602);
+    vec3 v = m1 * color;
+    vec3 a = v * (v + 0.0245786) - 0.000090537;
+    vec3 b = v * (0.983729 * v + 0.4329510) + 0.238081;
+    return clamp(m2 * (a / b), 0.0, 1.0);
+}
+// Generic rational polynomial
+vec3 rational_tonemap(vec3 x) {
+    float a=0.010, b=0.132, c=0.010, d=0.163, e=0.101; // adjustable
+    return (x * (a * x + b)) / (x * (c * x + d) + e);
+}
+```
+### Step 2: Gamma Correction
+```glsl
+color = pow(color, vec3(1.0 / 2.2)); // after tone mapping; ACES already includes gamma, skip this step
+```
+### Step 3: Contrast Enhancement (Hermite S-Curve)
+```glsl
+color = clamp(color, 0.0, 1.0);
+color = color * color * (3.0 - 2.0 * color);
+// Controllable intensity: color = mix(color, color*color*(3.0-2.0*color), strength);
+// smoothstep equivalent: color = smoothstep(-0.025, 1.0, color);
+```
+### Step 4: Color Grading
+```glsl
+color = color * vec3(1.11, 0.89, 0.79); // per-channel multiply (warm tone), adjustable
+color = pow(color, vec3(1.3, 1.2, 1.0)); // pow color grading, adjustable
+// HSV hue shift: hsv.x = fract(hsv.x + 0.05); hsv.y *= 1.1;
+// Desaturation: color = mix(color, vec3(dot(color, vec3(0.299,0.587,0.114))), 0.2);
+```
+### Step 5: Vignette
+```glsl
+// Option A: Multiplicative
+vec2 q = fragCoord / iResolution.xy;
+float vignette = pow(16.0 * q.x * q.y * (1.0 - q.x) * (1.0 - q.y), 0.25);
+color *= 0.5 + 0.5 * vignette;
+// Option B: Radial distance
+vec2 centered = (uv - 0.5) * vec2(iResolution.x / iResolution.y, 1.0);
+float vig = mix(1.0, max(0.0, 1.0 - pow(length(centered)/1.414 * 0.6, 3.0)), 0.5);
+color *= vig;
+// Option C: Inverse quadratic falloff
+vec2 p = 1.0 - 2.0 * fragCoord / iResolution.xy;
+p.y *= iResolution.y / iResolution.x;
+float vig2 = 1.25 / (1.1 + 1.1 * dot(p, p)); vig2 *= vig2;
+color *= mix(1.0, smoothstep(0.1, 1.1, vig2), 0.25);
+```
+### Step 6: Gaussian Blur
+```glsl
+float normpdf(float x, float sigma) {
+    return 0.39894 * exp(-0.5 * x * x / (sigma * sigma)) / sigma;
+}
+vec3 gaussianBlur(sampler2D tex, vec2 fragCoord, vec2 resolution) {
+    const int KERNEL_SIZE = 11, HALF = 5; // adjustable: KERNEL_SIZE must be odd
+    float sigma = 7.0; // adjustable
+    float kernel[KERNEL_SIZE]; float Z = 0.0;
+    for (int j = 0; j <= HALF; ++j)
+        kernel[HALF + j] = kernel[HALF - j] = normpdf(float(j), sigma);
+    for (int j = 0; j < KERNEL_SIZE; ++j) Z += kernel[j];
+    vec3 result = vec3(0.0);
+    for (int i = -HALF; i <= HALF; ++i)
+        for (int j = -HALF; j <= HALF; ++j)
+            result += kernel[HALF+j] * kernel[HALF+i]
+                    * texture(tex, (fragCoord + vec2(float(i), float(j))) / resolution).rgb;
+    return result / (Z * Z);
+}
+```
+### Step 7: Bloom (Single Pass, Hardware Mipmap)
+```glsl
+vec3 simpleBloom(sampler2D tex, vec2 uv) {
+    vec3 bloom = vec3(0.0); float tw = 0.0; float maxB = 5.0; // adjustable
+    for (int x = -1; x <= 1; x++)
+        for (int y = -1; y <= 1; y++) {
+            vec2 off = vec2(float(x), float(y)) / iResolution.xy; float w = 1.0;
+            bloom += w * min(vec3(maxB), textureLod(tex, uv+off*exp2(5.0), 5.0).rgb); tw += w;
+            bloom += w * min(vec3(maxB), textureLod(tex, uv+off*exp2(6.0), 6.0).rgb); tw += w;
+            bloom += w * min(vec3(maxB), textureLod(tex, uv+off*exp2(7.0), 7.0).rgb); tw += w;
+        }
+    return pow(bloom / tw, vec3(1.5)) * 0.3; // adjustable: gamma and intensity
+}
+// Usage: color = color * 0.8 + simpleBloom(iChannel0, uv);
+```
+### Step 8: Chromatic Aberration
+```glsl
+#define CA_SAMPLES 8       // adjustable
+#define CA_STRENGTH 0.003  // adjustable
+vec3 chromaticAberration(sampler2D tex, vec2 uv) {
+    vec2 center = uv - 0.5; vec3 color = vec3(0.0);
+    float rf = 1.0, gf = 1.0, bf = 1.0, f = 1.0 / float(CA_SAMPLES);
+    for (int i = 0; i < CA_SAMPLES; ++i) {
+        color.r += f * texture(tex, 0.5 - 0.5 * (center * 2.0 * rf)).r;
+        color.g += f * texture(tex, 0.5 - 0.5 * (center * 2.0 * gf)).g;
+        color.b += f * texture(tex, 0.5 - 0.5 * (center * 2.0 * bf)).b;
+        rf *= 1.0 - CA_STRENGTH; gf *= 1.0 - CA_STRENGTH*0.3; bf *= 1.0 + CA_STRENGTH*0.4;
+    }
+    return clamp(color, 0.0, 1.0);
+}
+```
+### Step 9: Film Grain
+```glsl
+float hash(float c) { return fract(sin(dot(c, vec2(12.9898, 78.233))) * 43758.5453); }
+#define GRAIN_STRENGTH 0.012 // adjustable
+color += vec3(GRAIN_STRENGTH * hash(length(fragCoord / iResolution.xy) + iTime));
+// Bayer matrix ordered dithering (eliminates color banding)
+const mat4 bayerMatrix = mat4(
+    vec4(0.,8.,2.,10.), vec4(12.,4.,14.,6.), vec4(3.,11.,1.,9.), vec4(15.,7.,13.,5.));
+float orderedDither(vec2 fc) {
+    return (bayerMatrix[int(fc.x)&3][int(fc.y)&3] + 1.0) / 17.0;
+}
+color += (orderedDither(fragCoord) - 0.5) * 4.0 / 255.0;
+```
+### Step 10: Demo Scene (Required for Standalone HTML!)
+**IMPORTANT: Critical Warning**: Standalone HTML deployment must provide an input texture, otherwise post-processing effects will output solid black.
+```glsl
+// Demo scene fallback: used when no valid input texture is available
+vec3 demoScene(vec2 uv, float time) {
+    // Dynamic gradient background
+    vec3 col = 0.5 + 0.5 * cos(time + uv.xyx + vec3(0, 2, 4));
+    // Center glowing sphere (for testing bloom)
+    float d = length(uv - 0.5) - 0.15;
+    col += vec3(2.0) * smoothstep(0.02, 0.0, d); // extremely bright region
+    // Moving highlight bar (for testing bloom bleed)
+    float bar = step(0.48, uv.y) * step(uv.y, 0.52);
+    bar *= step(0.0, sin(uv.x * 10.0 - time * 2.0));
+    col += vec3(1.5, 0.8, 0.3) * bar;
+    // Colored blocks (for testing chromatic aberration and tone mapping)
+    vec2 id = floor(uv * 4.0);
+    float rand = fract(sin(dot(id, vec2(12.9898, 78.233))) * 43758.5453);
+    vec2 rect = fract(uv * 4.0);
+    float box = step(0.1, rect.x) * step(rect.x, 0.9) * step(0.1, rect.y) * step(rect.y, 0.9);
+    col += vec3(rand, 1.0 - rand, 0.5) * box * 0.5;
+    return col;
+}
+```
+### Step 10: Motion Blur
+```glsl
+#define MB_SAMPLES 32    // adjustable
+#define MB_STRENGTH 0.25 // adjustable
+vec3 motionBlur(sampler2D tex, vec2 uv, vec2 velocity) {
+    vec2 dir = velocity * MB_STRENGTH; vec3 color = vec3(0.0); float tw = 0.0;
+    for (int i = 0; i < MB_SAMPLES; i++) {
+        float t = float(i) / float(MB_SAMPLES - 1), w = 1.0 - t;
+        color += w * textureLod(tex, uv + dir * t, 0.0).rgb; tw += w;
+    }
+    return color / tw;
+}
+```
+### Step 11: Depth of Field
+```glsl
+#define DOF_SAMPLES 64
+#define DOF_FOCAL_LENGTH 0.03
+float getCoC(float depth, float focusDist) {
+    float aperture = min(1.0, focusDist * focusDist * 0.5);
+    return abs(aperture * (DOF_FOCAL_LENGTH * (depth - focusDist))
+             / (depth * (focusDist - DOF_FOCAL_LENGTH)));
+}
+float goldenAngle = 3.14159265 * (3.0 - sqrt(5.0));
+vec3 depthOfField(sampler2D tex, vec2 uv, float depth, float focusDist) {
+    float coc = getCoC(depth, focusDist);
+    vec3 result = texture(tex, uv).rgb * max(0.001, coc);
+    float tw = max(0.001, coc);
+    for (int i = 1; i < DOF_SAMPLES; i++) {
+        float fi = float(i);
+        float theta = fi * goldenAngle * float(DOF_SAMPLES);
+        float r = coc * sqrt(fi) / sqrt(float(DOF_SAMPLES));
+        vec2 tapUV = uv + vec2(sin(theta), cos(theta)) * r;
+        vec4 s = textureLod(tex, tapUV, 0.0);
+        float w = max(0.001, getCoC(s.w, focusDist));
+        result += s.rgb * w; tw += w;
+    }
+    return result / tw;
+}
+```
+### Step 12: FXAA
+```glsl
+vec3 fxaa(sampler2D tex, vec2 fragCoord, vec2 resolution) {
+    vec2 pp = 1.0 / resolution;
+    vec4 color = texture(tex, fragCoord * pp);
+    vec3 luma = vec3(0.299, 0.587, 0.114);
+    float lumaNW = dot(texture(tex, (fragCoord+vec2(-1.,-1.))*pp).rgb, luma);
+    float lumaNE = dot(texture(tex, (fragCoord+vec2( 1.,-1.))*pp).rgb, luma);
+    float lumaSW = dot(texture(tex, (fragCoord+vec2(-1., 1.))*pp).rgb, luma);
+    float lumaSE = dot(texture(tex, (fragCoord+vec2( 1., 1.))*pp).rgb, luma);
+    float lumaM  = dot(color.rgb, luma);
+    float lumaMin = min(lumaM, min(min(lumaNW,lumaNE), min(lumaSW,lumaSE)));
+    float lumaMax = max(lumaM, max(max(lumaNW,lumaNE), max(lumaSW,lumaSE)));
+    vec2 dir = vec2(-((lumaNW+lumaNE)-(lumaSW+lumaSE)), ((lumaNW+lumaSW)-(lumaNE+lumaSE)));
+    float dirReduce = max((lumaNW+lumaNE+lumaSW+lumaSE)*0.03125, 1.0/128.0);
+    dir = clamp(dir * 2.5/(min(abs(dir.x),abs(dir.y))+dirReduce), vec2(-8.0), vec2(8.0)) * pp;
+    vec3 rgbA = 0.5 * (texture(tex, fragCoord*pp+dir*(1./3.-0.5)).rgb
+                      + texture(tex, fragCoord*pp+dir*(2./3.-0.5)).rgb);
+    vec3 rgbB = rgbA*0.5 + 0.25*(texture(tex, fragCoord*pp+dir*-0.5).rgb
+                                 + texture(tex, fragCoord*pp+dir*0.5).rgb);
+    float lumaB = dot(rgbB, luma);
+    return (lumaB < lumaMin || lumaB > lumaMax) ? rgbA : rgbB;
+}
+```
+## Complete Code Template
+Can be run directly in ShaderToy. `iChannel0` is the scene texture.
+**IMPORTANT: Important Warning**: For standalone HTML deployment, you must:
+1. Pass a valid input texture to iChannel0 (or uChannel0)
+2. Or set `#define USE_DEMO_SCENE 1` to use the built-in demo scene
+```glsl
+// Post-Processing Pipeline — ShaderToy Template
+#define ENABLE_TONEMAP  1
+#define ENABLE_BLOOM    1
+#define ENABLE_CA       1
+#define ENABLE_VIGNETTE 1
+#define ENABLE_GRAIN    1
+#define ENABLE_CONTRAST 1
+#define USE_DEMO_SCENE  1    // set to 1 to use built-in demo scene (required for standalone HTML)
+#define TONEMAP_MODE    2    // 0=Reinhard, 1=Filmic, 2=ACES
+#define BRIGHTNESS      1.0
+#define WHITE_POINT     1.2
+#define SHOULDER        7.5
+#define BLOOM_STRENGTH  0.08
+#define BLOOM_LOD_START 4.0
+#define COLOR_TINT      vec3(1.11, 0.89, 0.79)
+#define CA_SAMPLES      8
+#define CA_INTENSITY    0.003
+#define VIG_POWER       0.25
+#define GRAIN_AMOUNT    0.012
+float hash11(float p) { return fract(sin(p * 12.9898) * 43758.5453); }
+// Demo scene fallback: used when no input texture is available
+vec3 demoScene(vec2 uv, float time) {
+    // Dynamic gradient background
+    vec3 col = 0.5 + 0.5 * cos(time + uv.xyx + vec3(0, 2, 4));
+    // Center glowing sphere (for testing bloom)
+    float d = length(uv - 0.5) - 0.15;
+    col += vec3(2.0) * smoothstep(0.02, 0.0, d);
+    // Moving highlight bar (for testing bloom bleed)
+    float bar = step(0.48, uv.y) * step(uv.y, 0.52);
+    bar *= step(0.0, sin(uv.x * 10.0 - time * 2.0));
+    col += vec3(1.5, 0.8, 0.3) * bar;
+    // Colored blocks (for testing chromatic aberration and tone mapping)
+    vec2 id = floor(uv * 4.0);
+    float rand = fract(sin(dot(id, vec2(12.9898, 78.233))) * 43758.5453);
+    vec2 rect = fract(uv * 4.0);
+    float box = step(0.1, rect.x) * step(rect.x, 0.9) * step(0.1, rect.y) * step(rect.y, 0.9);
+    col += vec3(rand, 1.0 - rand, 0.5) * box * 0.5;
+    return col;
+}
+vec3 tonemapReinhard(vec3 c) { return c / (1.0 + c); }
+// IMPORTANT: Critical: filmicCurve takes only one parameter x; w is computed externally via WHITE_POINT
+float filmicCurve(float x) {
+    float q = (SHOULDER*SHOULDER+1.0)*x*x; return q/(q+x+SHOULDER*SHOULDER);
+}
+vec3 tonemapFilmic(vec3 c) {
+    float w = filmicCurve(WHITE_POINT);  // compute w using WHITE_POINT constant first
+    return vec3(filmicCurve(c.r), filmicCurve(c.g), filmicCurve(c.b)) / w;
+}
+vec3 tonemapACES(vec3 color) {
+    mat3 m1 = mat3(0.59719,0.07600,0.02840, 0.35458,0.90834,0.13383, 0.04823,0.01566,0.83777);
+    mat3 m2 = mat3(1.60475,-0.10208,-0.00327, -0.53108,1.10813,-0.07276, -0.07367,-0.00605,1.07602);
+    vec3 v = m1*color;
+    vec3 a = v*(v+0.0245786)-0.000090537;
+    vec3 b = v*(0.983729*v+0.4329510)+0.238081;
+    return clamp(m2*(a/b), 0.0, 1.0);
+}
+vec3 applyTonemap(vec3 c) {
+    c *= BRIGHTNESS;
+    #if TONEMAP_MODE == 0
+        return tonemapReinhard(c);
+    #elif TONEMAP_MODE == 1
+        return tonemapFilmic(c);
+    #else
+        return tonemapACES(c);
+    #endif
+}
+vec3 sampleBloom(sampler2D tex, vec2 uv) {
+    vec3 bloom = vec3(0.0); float tw = 0.0;
+    for (int x = -1; x <= 1; x++)
+        for (int y = -1; y <= 1; y++) {
+            vec2 off = vec2(float(x),float(y))/iResolution.xy; float w = 1.0;
+            bloom += w*textureLod(tex, uv+off*exp2(BLOOM_LOD_START), BLOOM_LOD_START).rgb;
+            bloom += w*textureLod(tex, uv+off*exp2(BLOOM_LOD_START+1.0), BLOOM_LOD_START+1.0).rgb;
+            bloom += w*textureLod(tex, uv+off*exp2(BLOOM_LOD_START+2.0), BLOOM_LOD_START+2.0).rgb;
+            tw += w*3.0;
+        }
+    return bloom / tw;
+}
+vec3 applyChromaticAberration(sampler2D tex, vec2 uv) {
+    vec2 center = 1.0 - 2.0*uv; vec3 color = vec3(0.0);
+    float rf=1.0, gf=1.0, bf=1.0, f=1.0/float(CA_SAMPLES);
+    for (int i = 0; i < CA_SAMPLES; ++i) {
+        color.r += f*texture(tex, 0.5-0.5*(center*rf)).r;
+        color.g += f*texture(tex, 0.5-0.5*(center*gf)).g;
+        color.b += f*texture(tex, 0.5-0.5*(center*bf)).b;
+        rf *= 1.0-CA_INTENSITY; gf *= 1.0-CA_INTENSITY*0.3; bf *= 1.0+CA_INTENSITY*0.4;
+    }
+    return clamp(color, 0.0, 1.0);
+}
+void mainImage(out vec4 fragColor, in vec2 fragCoord) {
+    vec2 uv = fragCoord / iResolution.xy;
+    // Get input color: demo scene or input texture
+    #if USE_DEMO_SCENE
+        vec3 color = demoScene(uv, iTime);
+    #else
+        #if ENABLE_CA
+            vec3 color = applyChromaticAberration(iChannel0, uv);
+        #else
+            vec3 color = texture(iChannel0, uv).rgb;
+        #endif
+    #endif
+    #if ENABLE_BLOOM && !USE_DEMO_SCENE
+        color += sampleBloom(iChannel0, uv) * BLOOM_STRENGTH;
+    #else
+        // In demo scene mode, use simplified bloom sampling from itself
+        #if ENABLE_BLOOM
+            vec3 bloom = vec3(0.0); float tw = 0.0;
+            for (int x = -1; x <= 1; x++)
+                for (int y = -1; y <= 1; y++) {
+                    vec2 off = vec2(float(x),float(y))/iResolution.xy * 0.02;
+                    vec3 s = demoScene(uv + off, iTime);
+                    float w = 1.0;
+                    bloom += w * min(vec3(5.0), s); tw += w;
+                }
+            color += bloom / tw * BLOOM_STRENGTH;
+        #endif
+    #endif
+    color *= COLOR_TINT;
+    #if ENABLE_TONEMAP
+        #if TONEMAP_MODE == 2
+            color = applyTonemap(color);
+        #else
+            color = applyTonemap(color);
+            color = pow(color, vec3(1.0/2.2));
+        #endif
+    #else
+        color = pow(color, vec3(1.0/2.2));
+    #endif
+    #if ENABLE_CONTRAST
+        color = clamp(color, 0.0, 1.0);
+        color = color*color*(3.0-2.0*color);
+    #endif
+    #if ENABLE_VIGNETTE
+        vec2 q = fragCoord/iResolution.xy;
+        color *= 0.5 + 0.5*pow(16.0*q.x*q.y*(1.0-q.x)*(1.0-q.y), VIG_POWER);
+    #endif
+    #if ENABLE_GRAIN
+        color += GRAIN_AMOUNT * hash11(dot(uv, vec2(12.9898,78.233)) + iTime);
+    #endif
+    fragColor = vec4(clamp(color, 0.0, 1.0), 1.0);
+}
+```
+## Common Variants
+### Variant 1: Multi-Pass Separable Bloom
+```glsl
+// Buffer A: Horizontal Gaussian blur + bright-pass
+#define BLOOM_THRESHOLD vec3(0.2)
+#define BLOOM_DOWNSAMPLE 3
+#define BLUR_RADIUS 16
+void mainImage(out vec4 fragColor, in vec2 fragCoord) {
+    ivec2 xy = ivec2(fragCoord);
+    if (xy.x >= int(iResolution.x)/BLOOM_DOWNSAMPLE) { fragColor = vec4(0); return; }
+    vec3 sum = vec3(0.0); float tw = 0.0;
+    for (int k = -BLUR_RADIUS; k <= BLUR_RADIUS; ++k) {
+        vec3 texel = max(vec3(0.0), texelFetch(iChannel0, (xy+ivec2(k,0))*BLOOM_DOWNSAMPLE, 0).rgb - BLOOM_THRESHOLD);
+        float w = exp(-8.0 * pow(abs(float(k))/float(BLUR_RADIUS), 2.0));
+        sum += texel*w; tw += w;
+    }
+    fragColor = vec4(sum/tw, 1.0);
+}
+// Buffer B: Vertical blur, same as above but with direction changed to ivec2(0, k)
+```
+### Variant 2: ACES + Full Color Pipeline (with Built-in Gamma)
+```glsl
+vec3 aces_tonemap(vec3 color) {
+    mat3 m1 = mat3(0.59719,0.07600,0.02840, 0.35458,0.90834,0.13383, 0.04823,0.01566,0.83777);
+    mat3 m2 = mat3(1.60475,-0.10208,-0.00327, -0.53108,1.10813,-0.07276, -0.07367,-0.00605,1.07602);
+    vec3 v = m1*color;
+    vec3 a = v*(v+0.0245786)-0.000090537;
+    vec3 b = v*(0.983729*v+0.4329510)+0.238081;
+    return pow(clamp(m2*(a/b), 0.0, 1.0), vec3(1.0/2.2));
+}
+```
+### Variant 3: DoF + Motion Blur Combination
+```glsl
+for (int i = 1; i < BLUR_TAPS; i++) {
+    float t = float(i)/float(BLUR_TAPS);
+    float randomT = hash(iTime + t + uv.x + uv.y*12.345);
+    vec2 tapUV = mix(currentUV, prevFrameUV, (randomT-0.5)*shutterAngle); // motion blur
+    float theta = t*goldenAngle*float(BLUR_TAPS);
+    float r = coc*sqrt(t*float(BLUR_TAPS))/sqrt(float(BLUR_TAPS));
+    tapUV += vec2(sin(theta), cos(theta))*r; // DoF
+    vec4 tap = textureLod(sceneTex, tapUV, 0.0);
+    float w = max(0.001, getCoC(decodeDepth(tap.w), focusDistance));
+    result += tap.rgb*w; totalWeight += w;
+}
+```
+### Variant 4: TAA Temporal Anti-Aliasing
+```glsl
+vec4 current = textureLod(currentFrame, uv - jitterOffset/iResolution.xy, 0.0);
+vec3 vMin = vec3(1e5), vMax = vec3(-1e5);
+for (int iy = -1; iy <= 1; iy++)
+    for (int ix = -1; ix <= 1; ix++) {
+        vec3 s = texelFetch(currentFrame, ivec2(fragCoord)+ivec2(ix,iy), 0).rgb;
+        vMin = min(vMin, s); vMax = max(vMax, s);
+    }
+vec4 history = textureLod(historyBuffer, reprojectToPrevFrame(worldPos, prevViewProjMatrix), 0.0);
+float blend = (all(greaterThanEqual(history.rgb, vMin)) && all(lessThanEqual(history.rgb, vMax))) ? 0.9 : 0.0;
+color = mix(current.rgb, history.rgb, blend);
+```
+### Variant 5: Lens Flare + Starburst
+```glsl
+#define NUM_APERTURE_BLADES 8.0
+vec2 toSun = normalize(sunScreenPos - uv);
+float angle = atan(toSun.y, toSun.x);
+float starburst = pow(0.5+0.5*cos(1.5*3.14159+angle*NUM_APERTURE_BLADES),
+                      max(1.0, 500.0-sunDist*sunDist*501.0));
+float ghost = smoothstep(0.015, 0.0, length(ghostCenter-uv)-ghostRadius);
+totalFlare += wavelengthToRGB(300.0+fract((length(ghostCenter-uv)-ghostRadius)*5.0)*500.0) * ghost * 0.25;
+```
+## Performance & Composition
+**Performance**: Separable blur 121→22 samples | `textureLod` hardware mipmap for free downsampling | Downsample 2-4x before blurring | Sample counts: MB 16-32, DoF 32-64, CA 4-8 | Inter-texel sampling = free bilinear | `#define` switches have zero cost | Use `mix`/`step`/`smoothstep` instead of branches
+**Composition**: Bloom+ToneMap (compute bloom in HDR space then tonemap, not reversible) | TAA+MB+DoF (shared sampling loop) | CA+Vignette+Grain (lens trio) | ColorGrading+ToneMap+Contrast (grade in linear space → HDR compression → gamma-space S-curve) | Bloom+LensFlare (shared bright-pass) | Multi-pass pipeline: BufA scene → BufB/C Bloom H/V → BufD TAA → Image compositing
+## Further Reading
+For complete step-by-step tutorials, mathematical derivations, and advanced usage, see [reference](../reference/post-processing.md)