@rosetears/aili-pi 0.1.0

package/skills/shader-dev/reference/multipass-buffer.md

@@ -0,0 +1,571 @@
+# Multi-Pass Buffer Techniques — Detailed Reference
+
+This document is a detailed supplement to [SKILL.md](SKILL.md), covering prerequisites, in-depth explanations of each step, complete variant descriptions, performance optimization analysis, and full combination code examples.
+
+## Prerequisites
+
+### GLSL Fundamentals
+
+- GLSL basic syntax: `uniform`, `varying`, `sampler2D`
+- ShaderToy execution model: `iChannel0-3` texture inputs, `iResolution`, `iTime`, `iFrame`, `iMouse`
+- Difference between `texture()` and `texelFetch()`:
+  - `texture()` performs interpolated sampling (bilinear filtering), suitable for continuous field sampling
+  - `texelFetch()` reads a specific texel exactly, without interpolation, suitable for data storage reads
+- `textureLod()` is used for explicit MIP level sampling, avoiding the blur caused by automatic MIP selection
+- Buffer A/B/C/D concept in ShaderToy: each buffer is an independent render pass that outputs to a corresponding texture, which can be read by other passes or itself via iChannel
+
+### Basic Math
+
+- Basic vector math and matrix transforms
+- Finite difference method: using neighboring pixels to approximate gradients and the Laplacian operator
+- Iterative mapping: the concept of `x(n+1) = f(x(n))`, the mathematical basis for self-feedback
+
+## Implementation Steps
+
+### Step 1: Establish a Minimal Self-Feedback Loop
+
+**What**: Create a Buffer that reads its own previous frame output, adds new content, and outputs the result. The Image pass simply displays the Buffer result.
+
+**Why**: This is the cornerstone of all multi-pass techniques. Once you understand self-feedback loops, fluid simulation, temporal accumulation, etc. are all extensions of this foundation. An initialization guard (`iFrame == 0` or `iFrame < N`) prevents reading uninitialized data.
+
+**iChannel Binding**: Buffer A's iChannel0 → Buffer A (self-feedback); Image's iChannel0 → Buffer A
+
+**Key Points**:
+- `exp(-33.0 / iResolution.y)` controls the decay rate; higher values produce faster decay
+- The `fragCoord + vec2(1.0, sin(iTime))` offset creates motion effects
+- The `iFrame < 4` guard ensures stable initial values for the first few frames
+
+### Step 2: Implement Self-Advection
+
+**What**: Building on self-feedback, interpret the buffer values as a velocity field and implement self-advection — each pixel offsets its sampling position based on the local velocity.
+
+**Why**: Self-advection is the core of all Eulerian grid fluid simulations. By accumulating rotational information across multiple scales through rotational sampling, rich vortex structures can be produced without a complete Navier-Stokes solver.
+
+**Parameter Tuning**:
+- `ROT_NUM` (rotation sample count): Affects the sampling accuracy of the rotation field; 5 is a good balance
+- `SCALE_NUM` (number of scale levels): Affects the detail level of vortices; 20 levels produce rich multi-scale structures
+- `bbMax = 0.7 * iResolution.y`: Adaptive loop termination threshold
+
+**Mathematical Principles**:
+- The `getRot` function samples the velocity field at ROT_NUM equally spaced angular directions around a given position
+- Computes the rotational component via `dot(velocity - 0.5, perpendicular)`
+- The multi-scale loop `b *= 2.0` progressively enlarges the sampling radius, capturing vortices at different scales
+
+### Step 3: Navier-Stokes Fluid Solver
+
+**What**: Implement velocity field solving based on the paper "Simple and fast fluids" (Guay, Colin, Egli, 2011), including advection, viscous forces, and vorticity confinement.
+
+**Why**: More physically accurate than pure rotational self-advection, supporting low-viscosity fluid simulation (e.g., smoke, fire). Vorticity is stored in the alpha channel to avoid extra buffer overhead.
+
+**Complete `solveFluid` Function Breakdown**:
+
+```glsl
+vec4 solveFluid(sampler2D smp, vec2 uv, vec2 w, float time, vec3 mouse, vec3 lastMouse) {
+    const float K = 0.2;   // Pressure coefficient: controls the strength of the incompressibility constraint
+    const float v = 0.55;  // Viscosity coefficient: high value = viscous fluid, low value = thin fluid
+
+    // Read four neighboring pixels (basis for central differencing)
+    vec4 data = textureLod(smp, uv, 0.0);
+    vec4 tr = textureLod(smp, uv + vec2(w.x, 0), 0.0);
+    vec4 tl = textureLod(smp, uv - vec2(w.x, 0), 0.0);
+    vec4 tu = textureLod(smp, uv + vec2(0, w.y), 0.0);
+    vec4 td = textureLod(smp, uv - vec2(0, w.y), 0.0);
+
+    // Density and velocity gradients (central differencing)
+    vec3 dx = (tr.xyz - tl.xyz) * 0.5;  // x-direction gradient
+    vec3 dy = (tu.xyz - td.xyz) * 0.5;  // y-direction gradient
+    vec2 densDif = vec2(dx.z, dy.z);     // Density gradient
+
+    // Density update: continuity equation ∂ρ/∂t + ∇·(ρv) = 0
+    data.z -= DT * dot(vec3(densDif, dx.x + dy.y), data.xyz);
+
+    // Viscous force (Laplacian operator): μ∇²v
+    // Discrete Laplacian = up + down + left + right - 4*center
+    vec2 laplacian = tu.xy + td.xy + tr.xy + tl.xy - 4.0 * data.xy;
+    vec2 viscForce = vec2(v) * laplacian;
+
+    // Advection: Semi-Lagrangian backtrace method
+    // Trace backward from the current position along the reverse velocity direction, sample previous step's value
+    data.xyw = textureLod(smp, uv - DT * data.xy * w, 0.0).xyw;
+
+    // External forces (mouse interaction)
+    vec2 newForce = vec2(0);
+    if (mouse.z > 1.0 && lastMouse.z > 1.0) {
+        // Mouse movement velocity as force direction
+        vec2 vv = clamp((mouse.xy * w - lastMouse.xy * w) * 400.0, -6.0, 6.0);
+        // Force magnitude inversely proportional to distance from mouse (similar to a point charge field)
+        newForce += 0.001 / (dot(uv - mouse.xy * w, uv - mouse.xy * w) + 0.001) * vv;
+    }
+
+    // Velocity update: v += dt * (viscous force - pressure gradient + external forces)
+    data.xy += DT * (viscForce - K / DT * densDif + newForce);
+    // Linear decay: simulates energy dissipation
+    data.xy = max(vec2(0), abs(data.xy) - 1e-4) * sign(data.xy);
+
+    // Vorticity Confinement
+    // Compute curl = ∂vy/∂x - ∂vx/∂y
+    data.w = (tr.y - tl.y - tu.x + td.x);
+    // Vorticity gradient direction
+    vec2 vort = vec2(abs(tu.w) - abs(td.w), abs(tl.w) - abs(tr.w));
+    // Normalize then multiply by vorticity value to produce a force that enhances vortices
+    vort *= VORTICITY_AMOUNT / length(vort + 1e-9) * data.w;
+    data.xy += vort;
+
+    // Top/bottom boundaries: soft decay to avoid hard edges
+    data.y *= smoothstep(0.5, 0.48, abs(uv.y - 0.5));
+    // Numerical stability: clamp extreme values
+    data = clamp(data, vec4(vec2(-10), 0.5, -10.0), vec4(vec2(10), 3.0, 10.0));
+
+    return data;
+}
+```
+
+**RGBA Channel Packing Strategy**:
+- `xy` = velocity components (vx, vy)
+- `z` = density
+- `w` = vorticity (curl)
+
+A single vec4 carries the complete fluid state without needing extra buffers.
+
+### Step 4: Chained Buffers for Accelerated Simulation
+
+**What**: Execute the same simulation code in a chain through Buffer A → B → C, completing multiple simulation sub-steps per frame.
+
+**Why**: Each ShaderToy buffer executes only once per frame. By chaining identical code (A reads itself → B reads A → C reads B), three iterations are completed in a single frame, significantly increasing simulation speed without adding buffer count. Use the Common tab to avoid code duplication.
+
+**iChannel Binding**:
+- Buffer A: iChannel0 → Buffer C (reads previous frame's final result)
+- Buffer B: iChannel0 → Buffer A (reads current frame's first step result)
+- Buffer C: iChannel0 → Buffer B (reads current frame's second step result)
+
+**Mouse State Inter-Frame Transfer**:
+- `if (fragCoord.y < 1.0) data = iMouse;` writes the current frame's mouse state into the first row of pixels
+- `texelFetch(iChannel0, ivec2(0, 0), 0)` reads the previous frame's mouse state in the next frame
+- The delta between two frames' mouse positions gives mouse velocity, used to calculate the direction and magnitude of applied forces
+
+### Step 5: Separable Gaussian Blur Pipeline
+
+**What**: Use two Buffers to implement horizontal and vertical separable Gaussian blur.
+
+**Why**: A 2D Gaussian kernel can be separated into the product of two 1D kernels. An NxN kernel drops from N² samples to 2N. This is the standard implementation for Bloom, the diffusion term in reaction-diffusion, and various post-processing blurs.
+
+**iChannel Binding**: Buffer B: iChannel0 → Buffer A (source); Buffer C: iChannel0 → Buffer B (horizontal blur result)
+
+**Vertical blur complete code** (horizontal version in SKILL.md; vertical version symmetrically replaces the y-axis):
+```glsl
+void mainImage(out vec4 fragColor, in vec2 fragCoord) {
+    vec2 pixelSize = 1.0 / iResolution.xy;
+    vec2 uv = fragCoord * pixelSize;
+
+    float v = pixelSize.y;
+    vec4 sum = vec4(0.0);
+    sum += texture(iChannel0, fract(vec2(uv.x, uv.y - 4.0*v))) * 0.05;
+    sum += texture(iChannel0, fract(vec2(uv.x, uv.y - 3.0*v))) * 0.09;
+    sum += texture(iChannel0, fract(vec2(uv.x, uv.y - 2.0*v))) * 0.12;
+    sum += texture(iChannel0, fract(vec2(uv.x, uv.y - 1.0*v))) * 0.15;
+    sum += texture(iChannel0, fract(vec2(uv.x, uv.y         ))) * 0.16;
+    sum += texture(iChannel0, fract(vec2(uv.x, uv.y + 1.0*v))) * 0.15;
+    sum += texture(iChannel0, fract(vec2(uv.x, uv.y + 2.0*v))) * 0.12;
+    sum += texture(iChannel0, fract(vec2(uv.x, uv.y + 3.0*v))) * 0.09;
+    sum += texture(iChannel0, fract(vec2(uv.x, uv.y + 4.0*v))) * 0.05;
+
+    fragColor = vec4(sum.xyz / 0.98, 1.0);
+}
+```
+
+**9-tap Weight Explanation**:
+- Weights [0.05, 0.09, 0.12, 0.15, 0.16, 0.15, 0.12, 0.09, 0.05] approximate a Gaussian distribution with sigma≈2.0
+- Total sum is 0.98, divided by 0.98 for normalization
+- `fract()` implements wrap addressing
+
+### Step 6: Structured State Storage (Texel-Addressed Registers)
+
+**What**: Use specific pixels in a Buffer as named registers to store non-image data (positions, velocities, scores, etc.).
+
+**Why**: GPUs have no global variables. By assigning semantic meaning to specific texel positions, arbitrary structured state can be persisted in a buffer. This enables complete game logic, particle system state, etc. to be implemented in shaders.
+
+**Design Pattern Details**:
+
+1. **Address Constants**: Use `const ivec2` to define the texel address for each state variable
+2. **Load Function**: `texelFetch(iChannel0, addr, 0)` for exact reads (no interpolation)
+3. **Store Function**: Use conditional assignment `fragColor = (px == addr) ? val : fragColor`, ensuring each pixel only writes data belonging to its own address
+4. **Region Storage**: `ivec4 rect` defines rectangular regions for grid-like data (e.g., brick matrices)
+5. **Discard outside data region**: `if (fragCoord.x > 14.0 || fragCoord.y > 14.0) discard;` skips unnecessary computation
+
+**Notes**:
+- `ivec2(fragCoord - 0.5)` ensures correct integer texel coordinates (fragCoord's center offset)
+- Initialization must set all state values when `iFrame == 0`
+- Default behavior `fragColor = loadValue(px)` keeps unmodified state unchanged
+
+### Step 7: Inter-Frame Mouse State Tracking
+
+**What**: Store the mouse position in specific pixels of a Buffer, and compute mouse movement delta by reading the previous frame's value.
+
+**Why**: ShaderToy does not directly provide mouse velocity. Storing the current frame's `iMouse` in a fixed pixel allows calculating the delta in the next frame. This is critical for fluid interaction — mouse velocity is needed to apply forces.
+
+**Comparison of Two Methods**:
+
+| Feature | Method 1 (First Row Pixel) | Method 2 (Fixed UV Region) |
+|---------|---------------------------|---------------------------|
+| Source | Chimera's Breath | Reaction-Diffusion |
+| Storage Location | `fragCoord.y < 1.0` | Fixed UV coordinate |
+| Read Method | `texelFetch(ch, ivec2(0,0), 0)` | `texture(ch, vec2(7.5/8, 2.5/8))` |
+| Advantage | Simple, suitable for fluids | Resolution-independent |
+| Disadvantage | Occupies the first row of pixels | Requires extra buffer channel |
+
+## Variant Details
+
+### Variant 1: Temporal Accumulation Anti-Aliasing (TAA)
+
+**Difference from basic version**: The Buffer does not perform physics simulation, but instead renders a jittered image and blends it with history frames to achieve supersampling. Uses YCoCg color space neighborhood clamping to prevent ghosting.
+
+**How It Works**:
+1. Buffer A renders the scene with sub-pixel level random jitter
+2. New frames are blended with history frames at a 10:90 ratio, accumulating supersampling over time
+3. The TAA buffer performs YCoCg neighborhood clamping: constraining the history frame color to the statistical range of the current frame's 3x3 neighborhood
+4. A 0.75 sigma clamping range balances ghost removal and detail preservation
+
+**Complete TAA Flow**:
+```
+Buffer A (render+jitter) → Buffer B (motion vectors, optional) → Buffer C (TAA blend) → Image
+```
+
+### Variant 2: Deferred Rendering G-Buffer Pipeline
+
+**Difference from basic version**: Buffers do not use self-feedback, but instead process in stages within a single frame: geometry → edge detection → post-processing.
+
+**G-Buffer Encoding Scheme**:
+- `col.xy`: View-space normal xy components (multiplied by camMat to convert to screen space)
+- `col.z`: Linear depth (normalized to [0,1])
+- `col.w`: Diffuse lighting + shadow information
+
+**Edge Detection Principle**:
+- The `checkSame` function compares normal and depth differences between adjacent pixels
+- `Sensitivity.x` controls normal edge sensitivity
+- `Sensitivity.y` controls depth edge sensitivity
+- Threshold 0.1 determines the edge detection criterion
+
+### Variant 3: HDR Bloom Post-Processing Pipeline
+
+**Difference from basic version**: Uses Buffers to build a MIP pyramid, achieving wide-range glow through multiple levels of downsampling and blur.
+
+**MIP Pyramid Packing Strategy**:
+- All MIP levels are packed into a single texture
+- `CalcOffset` computes the offset position of each level within the texture
+- Each level is half the size, with padding to prevent inter-level leakage
+
+**Complete Bloom Pipeline**:
+```
+Buffer A (scene render) → Buffer B (MIP pyramid) → Buffer C (horizontal blur) → Buffer D (vertical blur) → Image (compositing)
+```
+
+**Tone Mapping**:
+```glsl
+// Reinhard tone mapping
+color = pow(color, vec3(1.5));  // Gamma preprocessing
+color = color / (1.0 + color);  // Reinhard compression
+```
+
+### Variant 4: Reaction-Diffusion System
+
+**Difference from basic version**: Simulates chemical reaction-diffusion (e.g., Gray-Scott model). Diffusion is implemented via separable blur, and the reaction term is computed in the main buffer.
+
+**Gray-Scott Equations**:
+- `∂u/∂t = Du∇²u - uv² + F(1-u)` — Diffusion and reaction of chemical substance u
+- `∂v/∂t = Dv∇²v + uv² - (F+k)v` — Diffusion and reaction of chemical substance v
+- `Du`, `Dv` are diffusion coefficients, `F` is the feed rate, `k` is the kill rate
+
+**Implementation Strategy**:
+- The diffusion term is implemented via separable blur buffers (reusing the blur pipeline from Step 5)
+- The reaction term is computed in the main buffer
+- The offset of `uv_red` implements diffusion expansion
+- Random noise decay prevents pattern stagnation
+
+### Variant 5: Multi-Scale MIP Fluid
+
+**Difference from basic version**: Uses `textureLod` to explicitly sample different MIP levels, achieving O(n) complexity multi-scale computation (turbulence, vorticity confinement, Poisson solving), with each physical quantity in its own buffer.
+
+**Core Advantage**:
+- Traditional multi-scale computation requires O(N²) samples (sampling N neighbors at each scale)
+- MIP sampling leverages hardware automatic averaging; a single `textureLod` at high MIP levels is equivalent to a large-range mean
+- Total complexity drops to O(NUM_SCALES × 9) (3x3 neighborhood per scale)
+
+**Weight Function Choices**:
+- `1.0/float(i+1)`: Logarithmic decay, reduces large-scale influence
+- `1.0/float(1<<i)`: Exponential decay, rapidly suppresses large scales
+- Constant: Equal weight for all scales
+
+## In-Depth Performance Optimization
+
+### 1. Reduce Texture Samples
+
+**Separable Blur**:
+- Principle: The 2D Gaussian function G(x,y) = G(x) × G(y) can be separated into two 1D convolutions
+- An NxN kernel drops from N² to 2N samples
+- 9-tap example: 81 → 18 samples
+
+**Bilinear Tap Trick**:
+```glsl
+// Standard 9-tap: requires 9 samples
+// Bilinear optimization: achieves equivalent results with 5 samples using hardware interpolation
+// Key: place sample points between two texels, GPU hardware automatically computes weighted average
+float offset1 = 1.0 + weight2 / (weight1 + weight2);  // Offset encodes weight ratio
+vec4 s1 = texture(smp, uv + vec2(offset1, 0) * texelSize);
+// s1 is automatically the weighted average of texel[1] and texel[2]
+```
+
+**MIP Sampling Replaces Large Kernels**:
+- `textureLod(smp, uv, 3.0)` samples MIP level 3, equivalent to an 8×8 area mean
+- A single sample replaces 64 samples
+- Suitable for coarse-scale approximation in multi-scale computation
+
+### 2. Limit Computation Region
+
+**Data Region Discard**:
+```glsl
+// In a state storage shader, only the first 14×14 pixels store data
+// Remaining pixels are discarded, GPU skips subsequent computation
+if (fragCoord.x > 14.0 || fragCoord.y > 14.0) discard;
+```
+
+**Soft Boundaries**:
+```glsl
+// Use smoothstep instead of if-statements
+// Avoids branch divergence (warp divergence), more efficient on GPU
+data.y *= smoothstep(0.5, 0.48, abs(uv.y - 0.5));
+// Smoothly decays to 0 in the y=0.48~0.52 range
+```
+
+### 3. Reduce Buffer Count
+
+**RGBA Channel Packing**:
+| Channel | Fluid Simulation | G-Buffer | Particle System |
+|---------|-----------------|----------|----------------|
+| R | Velocity x | Normal x | Position x |
+| G | Velocity y | Normal y | Position y |
+| B | Density | Depth | Lifetime |
+| A | Vorticity | Diffuse | Type ID |
+
+**Chained Sub-Steps**:
+- 3 buffers running identical code = 3 iterations per frame
+- Equivalent to 3x time step, but more stable (each step is still a small step)
+- Code is shared via the Common tab, zero maintenance cost
+
+### 4. Reduce Iteration/Sample Count
+
+**Adaptive Loop Termination**:
+```glsl
+// In multi-scale sampling, exit early when the sampling radius exceeds the effective range
+float bbMax = 0.7 * iResolution.y;
+bbMax *= bbMax;
+for (int l = 0; l < SCALE_NUM; l++) {
+    if (dot(b, b) > bbMax) break;  // Beyond screen range, no need to continue
+    // ...
+    b *= 2.0;
+}
+```
+
+**MIP Level Count Adjustment**:
+- `TURBULENCE_SCALES = 11`: Full multi-scale, highest quality
+- `TURBULENCE_SCALES = 7`: Removes the largest scales, minimal quality loss
+- `TURBULENCE_SCALES = 5`: Noticeable speedup, suitable for mobile
+
+### 5. Initialization Strategy
+
+**Progressive Initialization**:
+```glsl
+// Output stable initial values for the first 20 frames
+if (iFrame < 20) data = vec4(0.5, 0, 0, 0);
+```
+- Why not `iFrame == 0`? Because some buffers depend on the output of other buffers
+- 20 frames ensures all buffers complete initialization propagation
+
+**Tiny Noise Initialization**:
+```glsl
+if (iFrame == 0) fragColor = 1e-6 * noise;
+```
+- Avoids exact zero values causing `0/0` or `normalize(vec2(0))` problems
+- Tiny noise breaks symmetry, allowing vortices to develop naturally
+
+## Combination Examples with Complete Code
+
+### 1. Fluid Simulation + Lighting
+
+```glsl
+// Image: Compute gradient from fluid buffer as normal, apply Phong lighting
+void mainImage(out vec4 fragColor, in vec2 fragCoord) {
+    vec2 uv = fragCoord / iResolution.xy;
+    float delta = 1.0 / iResolution.y;
+
+    // Compute fluid surface gradient
+    float valC = getVal(uv);
+    vec2 grad = vec2(
+        getVal(uv + vec2(delta, 0)) - getVal(uv - vec2(delta, 0)),
+        getVal(uv + vec2(0, delta)) - getVal(uv - vec2(0, delta))
+    ) / delta;
+
+    // Build normal (z=150 controls surface flatness)
+    vec3 normal = normalize(vec3(grad, 150.0));
+
+    // Lighting
+    vec3 lightDir = normalize(vec3(-1.0, -1.0, 2.0));
+    vec3 viewDir = vec3(0, 0, 1);
+
+    float diff = clamp(dot(normal, lightDir), 0.5, 1.0);
+    float spec = pow(clamp(dot(reflect(lightDir, normal), viewDir), 0.0, 1.0), 36.0);
+
+    vec3 baseColor = vec3(0.2, 0.4, 0.8);  // Water surface color
+    fragColor = vec4(baseColor * diff + vec3(1.0) * spec * 0.5, 1.0);
+}
+```
+
+### 2. Fluid Simulation + Color Advection
+
+```glsl
+// Color Buffer: Track a color field, advected by the velocity field
+void mainImage(out vec4 fragColor, in vec2 fragCoord) {
+    vec2 uv = fragCoord / iResolution.xy;
+    vec2 w = 1.0 / iResolution.xy;
+    float dt = 0.15;
+    float scale = 3.0;
+
+    // Read velocity field
+    vec2 velocity = textureLod(iChannel0, uv, 0.0).xy;
+
+    // Color advection: sample own previous frame in the reverse velocity direction
+    vec4 col = textureLod(iChannel1, uv - dt * velocity * w * scale, 0.0);
+
+    // Inject color at the emission point
+    vec2 emitPos = vec2(0.5, 0.5);
+    float dist = length(uv - emitPos);
+    float emitterStrength = 0.0025;
+    float epsilon = 0.0005;
+    col += emitterStrength / (epsilon + pow(dist, 1.75)) * dt * 0.12 * palette(iTime * 0.05);
+
+    // Color decay
+    float decay = 0.004;
+    col = max(col - (0.0001 + col * decay) * 0.5, 0.0);
+    col = clamp(col, 0.0, 5.0);
+
+    fragColor = col;
+}
+```
+
+### 3. Scene Rendering + Bloom + TAA Post-Processing Chain
+
+Four-Buffer pipeline:
+- **Buffer A**: Scene rendering (with sub-pixel jitter for TAA)
+- **Buffer B**: Brightness extraction + downsampling to build bloom pyramid
+- **Buffer C/D**: Separable Gaussian blur
+- **Image**: Bloom compositing + tone mapping + chromatic aberration + vignette
+
+```glsl
+// Image: Final compositing
+void mainImage(out vec4 fragColor, in vec2 fragCoord) {
+    vec2 uv = fragCoord / iResolution.xy;
+
+    // Original scene
+    vec3 scene = texture(iChannel0, uv).rgb;
+
+    // Multi-level bloom compositing
+    vec3 bloom = vec3(0);
+    bloom += Grab(uv, 1.0, CalcOffset(0.0)).rgb * 1.0;
+    bloom += Grab(uv, 2.0, CalcOffset(1.0)).rgb * 1.5;
+    bloom += Grab(uv, 4.0, CalcOffset(2.0)).rgb * 2.0;
+    bloom += Grab(uv, 8.0, CalcOffset(3.0)).rgb * 3.0;
+
+    // Compositing
+    vec3 color = scene + bloom * 0.08;
+
+    // Filmic tone mapping
+    color = pow(color, vec3(1.5));
+    color = color / (1.0 + color);
+
+    // Chromatic Aberration
+    float ca = 0.002;
+    color.r = texture(iChannel0, uv + vec2(ca, 0)).r;
+    color.b = texture(iChannel0, uv - vec2(ca, 0)).b;
+
+    // Vignette
+    float vignette = 1.0 - dot(uv - 0.5, uv - 0.5) * 0.5;
+    color *= vignette;
+
+    fragColor = vec4(color, 1.0);
+}
+```
+
+### 4. G-Buffer + Screen-Space Effects
+
+Two-Buffer pipeline, no temporal feedback:
+- **Buffer A**: Output normals + depth + diffuse to G-Buffer
+- **Buffer B**: Screen-space edge detection / SSAO / SSR
+- **Image**: Stylized compositing (e.g., hand-drawn style, noise distortion)
+
+```glsl
+// Buffer B: Screen-space edge detection
+void mainImage(out vec4 fragColor, in vec2 fragCoord) {
+    vec2 uv = fragCoord / iResolution.xy;
+    vec2 offset = 1.0 / iResolution.xy;
+
+    vec4 center = texture(iChannel0, uv);
+
+    // Roberts Cross edge detection
+    vec4 tl = texture(iChannel0, uv + vec2(-offset.x, offset.y));
+    vec4 tr = texture(iChannel0, uv + vec2(offset.x, offset.y));
+    vec4 bl = texture(iChannel0, uv + vec2(-offset.x, -offset.y));
+    vec4 br = texture(iChannel0, uv + vec2(offset.x, -offset.y));
+
+    float edge = checkSame(center, tl) * checkSame(center, tr) *
+                 checkSame(center, bl) * checkSame(center, br);
+
+    fragColor = vec4(edge, center.w, center.z, 1.0);
+}
+```
+
+### 5. State Storage + Visualization Separation
+
+Standard pattern for games/particle systems. Logic and rendering are fully separated:
+- **Buffer A**: Pure logic computation, state stored in fixed texel positions
+- **Image**: Pure rendering, reads state via `texelFetch`, draws visuals using distance fields/rasterization
+
+```glsl
+// Image: Read game state from Buffer A and render
+void mainImage(out vec4 fragColor, in vec2 fragCoord) {
+    vec2 uv = fragCoord / iResolution.xy;
+    vec2 aspect = vec2(iResolution.x / iResolution.y, 1.0);
+
+    // Read ball state
+    vec4 ballPV = texelFetch(iChannel0, ivec2(0, 0), 0);
+    vec2 ballPos = ballPV.xy;
+
+    // Read paddle position
+    float paddleX = texelFetch(iChannel0, ivec2(1, 0), 0).x;
+
+    // Draw ball (distance field)
+    float ballDist = length((uv - ballPos * 0.5 - 0.5) * aspect);
+    vec3 ballColor = vec3(1.0, 0.8, 0.2) * smoothstep(0.02, 0.015, ballDist);
+
+    // Draw paddle
+    vec2 paddleCenter = vec2(paddleX * 0.5 + 0.5, 0.05);
+    vec2 paddleSize = vec2(0.08, 0.01);
+    vec2 d = abs((uv - paddleCenter) * aspect) - paddleSize;
+    float paddleDist = length(max(d, 0.0));
+    vec3 paddleColor = vec3(0.2, 0.6, 1.0) * smoothstep(0.005, 0.0, paddleDist);
+
+    // Read and draw brick grid
+    vec3 brickColor = vec3(0);
+    for (int y = 1; y <= 12; y++) {
+        for (int x = 0; x <= 13; x++) {
+            float alive = texelFetch(iChannel0, ivec2(x, y), 0).x;
+            if (alive > 0.5) {
+                vec2 brickCenter = vec2(float(x) / 14.0 + 0.036, float(y) / 14.0 + 0.036);
+                vec2 bd = abs((uv - brickCenter) * aspect) - vec2(0.03, 0.015);
+                float brickDist = length(max(bd, 0.0));
+                brickColor += vec3(0.8, 0.3, 0.5) * smoothstep(0.003, 0.0, brickDist);
+            }
+        }
+    }
+
+    fragColor = vec4(ballColor + paddleColor + brickColor, 1.0);
+}
+```