emoemu 0.1.0

package/src/rendering/postProcessing/index.ts

@@ -0,0 +1,923 @@
+/**
+ * Post-processing effects pipeline for CRT simulation.
+ *
+ * Effects are applied in this order:
+ * 1. Color adjustments (brightness, contrast, saturation)
+ * 2. NTSC artifacts (chroma blur)
+ * 3. Chromatic aberration (RGB color fringing)
+ * 4. Curvature (barrel distortion) - optionally combines scanlines + vignette
+ * 5. Scanlines (darken odd rows)
+ * 6. Bloom (glow from bright areas) - optionally combines vignette
+ * 7. Vignette (darken edges)
+ *
+ * NOTE: This file disables no-magic-numbers because the shader-like image
+ * processing code contains many mathematical coefficients (color science values,
+ * fixed-point arithmetic, bit shifts) that are standard constants in image
+ * processing. Extracting each would significantly harm readability of the
+ * pixel processing loops.
+ *
+ * Common values used:
+ * - 3: RGB bytes per pixel
+ * - 8: bit shift for fixed-point division (>> 8 = divide by 256)
+ * - 256: fixed-point scale factor (2^8)
+ * - 255: maximum 8-bit color channel value
+ * - 128: midpoint for contrast calculations
+ * - 0.299, 0.587, 0.114: ITU-R BT.601 luminance coefficients
+ * - 77, 150, 29: fast integer luminance coefficients (≈ 0.299*256, etc.)
+ * - YIQ conversion: NTSC color space coefficients
+ */
+/* eslint-disable @typescript-eslint/no-magic-numbers */
+
+import { clamp } from 'remeda';
+import { buildGammaLUT } from '../../utils/color';
+import { DEFAULT_BLOOM_THRESHOLD } from '..';
+import {
+  LUMA_R_INT, LUMA_G_INT, LUMA_B_INT,
+  CURVATURE_INTENSITY_SCALE,
+  NTSC_CHROMA_BLUR_RADIUS,
+  BLOOM_BLUR_RADIUS,
+  CHROMATIC_ABERRATION_OFFSET_SCALE,
+  YIQ_I_R, YIQ_I_G, YIQ_I_B,
+  YIQ_Q_R, YIQ_Q_G, YIQ_Q_B,
+  YIQ_INV_R_I, YIQ_INV_R_Q,
+  YIQ_INV_G_I, YIQ_INV_G_Q,
+  YIQ_INV_B_I, YIQ_INV_B_Q,
+} from './consts';
+
+export * from './consts';
+
+export interface EffectOptions {
+  gamma?: number;          // Gamma correction (default: 1.0, CRT-like: 1.1-1.4)
+  scanlines?: number;      // Scanline intensity 0.0-1.0 (default: 0.0)
+  saturation?: number;     // Color saturation multiplier (default: 1.0)
+  brightness?: number;     // Brightness multiplier (default: 1.0)
+  contrast?: number;       // Contrast multiplier (default: 1.0)
+  vignette?: number;       // Vignette intensity (default: 0.0)
+  bloom?: number;          // Bloom/glow intensity (default: 0.0)
+  bloomThreshold?: number; // Bloom brightness threshold (default: 0.6)
+  ntsc?: number;           // NTSC artifact intensity (default: 0.0)
+  curvature?: number;      // CRT curvature intensity (default: 0.0)
+  chromaticAberration?: number; // Chromatic aberration intensity (default: 0.0)
+}
+
+export class PostProcessingPipeline {
+  // Options
+  private gamma: number;
+  private scanlineIntensity: number;
+  private saturation: number;
+  private brightness: number;
+  private contrast: number;
+  private vignette: number;
+  private bloom: number;
+  private bloomThreshold: number;
+  private ntsc: number;
+  private curvature: number;
+  private chromaticAberration: number;
+
+  // Precomputed lookup tables
+  private gammaLUT: Uint8Array;
+
+  // Vignette map
+  private vignetteMap: Uint16Array | null = null;
+  private vignetteMapWidth: number = 0;
+  private vignetteMapHeight: number = 0;
+  private vignetteMapIntensity: number = 0;
+
+  // Curvature map
+  private curvatureMap: Int32Array | null = null;
+  private curvatureMapWidth: number = 0;
+  private curvatureMapHeight: number = 0;
+  private curvatureMapIntensity: number = 0;
+
+  // Reusable buffers
+  private curvatureSrcBuffer: Uint8Array | null = null;
+  private bloomBuffer: Uint8Array | null = null;
+  private bloomTempRow: Uint8Array | null = null;
+  private bloomTempCol: Uint8Array | null = null;
+  private ntscChromaBuffer: Int32Array | null = null;
+  private ntscTempRow: Int32Array | null = null;
+  private chromaticAberrationSrcBuffer: Uint8Array | null = null;
+
+  // Chromatic aberration map (precomputed for performance)
+  // Stores source pixel indices: [redSrcIdx, blueSrcIdx] pairs for each destination pixel
+  private chromaticAberrationMap: Int32Array | null = null;
+  private chromaticAberrationMapWidth: number = 0;
+  private chromaticAberrationMapHeight: number = 0;
+  private chromaticAberrationMapIntensity: number = 0;
+
+  // Flags to track which effects have already been applied (to avoid duplicate passes)
+  private scanlinesApplied: boolean = false;
+  private vignetteApplied: boolean = false;
+
+  constructor(options: EffectOptions = {}) {
+    this.gamma = options.gamma ?? 1.0;
+    this.scanlineIntensity = clamp(options.scanlines ?? 0, { min: 0, max: 1 });
+    this.saturation = options.saturation ?? 1.0;
+    this.brightness = options.brightness ?? 1.0;
+    this.contrast = options.contrast ?? 1.0;
+    this.vignette = Math.max(0, options.vignette ?? 0);
+    this.bloom = Math.max(0, options.bloom ?? 0);
+    this.bloomThreshold = clamp(options.bloomThreshold ?? DEFAULT_BLOOM_THRESHOLD, { min: 0, max: 1 });
+    this.ntsc = Math.max(0, options.ntsc ?? 0);
+    this.curvature = Math.max(0, options.curvature ?? 0);
+    this.chromaticAberration = Math.max(0, options.chromaticAberration ?? 0);
+    this.gammaLUT = buildGammaLUT(this.gamma);
+  }
+
+  /**
+   * Get the gamma lookup table for use during frame conversion.
+   */
+  getGammaLUT(): Uint8Array {
+    return this.gammaLUT;
+  }
+
+  /**
+   * Check if any effects are enabled.
+   */
+  hasEffects(): boolean {
+    return this.bloom > 0 ||
+           this.vignette > 0 ||
+           this.scanlineIntensity > 0 ||
+           this.ntsc > 0 ||
+           this.curvature > 0 ||
+           this.chromaticAberration > 0 ||
+           this.brightness !== 1.0 ||
+           this.contrast !== 1.0 ||
+           this.saturation !== 1.0;
+  }
+
+  /**
+   * Apply all post-processing effects to the RGB buffer.
+   *
+   * Effect combination strategy (to minimize full-image iterations):
+   * - Vignette is combined with: bloom (if enabled) > curvature > scanlines > standalone
+   * - Scanlines are combined with: curvature (if enabled) > standalone
+   *
+   * This means:
+   * - If bloom is enabled: vignette is applied in bloom's final pass
+   * - Else if curvature is enabled: scanlines + vignette are applied in curvature pass
+   * - Else: scanlines + vignette can be combined in a single pass
+   */
+  apply(buffer: Uint8Array, width: number, height: number): void {
+    // Early bailout when no effects are enabled
+    if (!this.hasEffects()) {
+      return;
+    }
+
+    // Reset flags - these track whether effects were combined into an earlier pass
+    this.scanlinesApplied = false;
+    this.vignetteApplied = false;
+
+    // 1. Color adjustments (brightness, contrast, saturation)
+    this.applyColorAdjustments(buffer);
+
+    // 2. NTSC artifacts (chroma blur for color bleeding effect)
+    this.applyNtscArtifacts(buffer, width, height);
+
+    // 3. Chromatic aberration (RGB fringing toward edges)
+    this.applyChromaticAberration(buffer, width, height);
+
+    // 4. Spatial effects: curvature, scanlines, vignette
+    // These are combined where possible to reduce iterations
+    if (this.curvature > 0) {
+      // Curvature pass combines: curvature + scanlines + vignette (if no bloom)
+      this.applyCurvature(buffer, width, height);
+    } else if (this.scanlineIntensity > 0 || (this.vignette > 0 && this.bloom <= 0)) {
+      // No curvature: combine scanlines + vignette in single pass (if no bloom)
+      this.applyScanlinesAndVignette(buffer, width, height);
+    }
+
+    // 5. Bloom (glow from bright areas) - combines vignette if enabled
+    this.applyBloom(buffer, width, height);
+
+    // 6. Apply any effects that weren't combined into earlier passes
+    // (these methods check the flags internally and return early if already applied)
+    this.applyScanlines(buffer, width, height);
+    this.applyVignette(buffer, width, height);
+  }
+
+  /**
+   * Combined brightness, contrast, and saturation adjustment.
+   */
+  private applyColorAdjustments(buffer: Uint8Array): void {
+    const needsBrightness = this.brightness !== 1.0;
+    const needsContrast = this.contrast !== 1.0;
+    const needsSaturation = this.saturation !== 1.0;
+
+    if (!needsBrightness && !needsContrast && !needsSaturation) {return;}
+
+    const len = buffer.length;
+    const bright = this.brightness;
+    const con = this.contrast;
+    const sat = this.saturation;
+
+    for (let i = 0; i < len; i += 3) {
+      let r = buffer[i];
+      let g = buffer[i + 1];
+      let b = buffer[i + 2];
+
+      if (needsBrightness) {
+        r = r * bright;
+        g = g * bright;
+        b = b * bright;
+      }
+
+      if (needsContrast) {
+        r = (r - 128) * con + 128;
+        g = (g - 128) * con + 128;
+        b = (b - 128) * con + 128;
+      }
+
+      if (needsSaturation) {
+        const gray = 0.299 * r + 0.587 * g + 0.114 * b;
+        r = gray + (r - gray) * sat;
+        g = gray + (g - gray) * sat;
+        b = gray + (b - gray) * sat;
+      }
+
+      buffer[i] = r < 0 ? 0 : r > 255 ? 255 : r | 0;
+      buffer[i + 1] = g < 0 ? 0 : g > 255 ? 255 : g | 0;
+      buffer[i + 2] = b < 0 ? 0 : b > 255 ? 255 : b | 0;
+    }
+  }
+
+  /**
+   * Build vignette lookup map.
+   */
+  private buildVignetteMap(width: number, height: number): void {
+    this.vignetteMap = new Uint16Array(width * height);
+    this.vignetteMapWidth = width;
+    this.vignetteMapHeight = height;
+    this.vignetteMapIntensity = this.vignette;
+
+    const halfW = width / 2;
+    const halfH = height / 2;
+    const invMaxDistSq = 1 / (halfW * halfW + halfH * halfH);
+
+    let idx = 0;
+    for (let y = 0; y < height; y++) {
+      const dy = y - halfH;
+      const dySq = dy * dy;
+
+      for (let x = 0; x < width; x++) {
+        const dx = x - halfW;
+        const normDistSq = (dx * dx + dySq) * invMaxDistSq;
+        let factor = 1 - this.vignette * normDistSq;
+        if (factor < 0) {factor = 0;}
+        this.vignetteMap[idx++] = (factor * 256) | 0;
+      }
+    }
+  }
+
+  /**
+   * Ensure vignette map exists and is up to date.
+   * Call this before any method that needs to use the vignette map.
+   */
+  private ensureVignetteMap(width: number, height: number): void {
+    if (!this.vignetteMap ||
+        this.vignetteMapWidth !== width ||
+        this.vignetteMapHeight !== height ||
+        this.vignetteMapIntensity !== this.vignette) {
+      this.buildVignetteMap(width, height);
+    }
+  }
+
+  /**
+   * Ensure curvature map exists and is up to date.
+   */
+  private ensureCurvatureMap(width: number, height: number): void {
+    if (!this.curvatureMap ||
+        this.curvatureMapWidth !== width ||
+        this.curvatureMapHeight !== height ||
+        this.curvatureMapIntensity !== this.curvature) {
+      this.buildCurvatureMap(width, height);
+    }
+  }
+
+  /**
+   * Ensure chromatic aberration map exists and is up to date.
+   */
+  private ensureChromaticAberrationMap(width: number, height: number): void {
+    if (!this.chromaticAberrationMap ||
+        this.chromaticAberrationMapWidth !== width ||
+        this.chromaticAberrationMapHeight !== height ||
+        this.chromaticAberrationMapIntensity !== this.chromaticAberration) {
+      this.buildChromaticAberrationMap(width, height);
+    }
+  }
+
+  /**
+   * Ensure a Uint8Array buffer exists with the required size.
+   * Returns existing buffer if size matches, otherwise allocates new one.
+   */
+  private ensureUint8Buffer(current: Uint8Array | null, size: number): Uint8Array {
+    if (!current || current.length !== size) {
+      return new Uint8Array(size);
+    }
+    return current;
+  }
+
+  /**
+   * Ensure an Int32Array buffer exists with the required size.
+   * Returns existing buffer if size matches, otherwise allocates new one.
+   */
+  private ensureInt32Buffer(current: Int32Array | null, size: number): Int32Array {
+    if (!current || current.length !== size) {
+      return new Int32Array(size);
+    }
+    return current;
+  }
+
+  /**
+   * Apply vignette effect (standalone pass).
+   * Only runs if vignette wasn't already combined into an earlier pass.
+   */
+  private applyVignette(buffer: Uint8Array, width: number, height: number): void {
+    if (this.vignette <= 0 || this.vignetteApplied) {return;}
+
+    this.ensureVignetteMap(width, height);
+    const map = this.vignetteMap!;
+    const len = width * height;
+
+    for (let i = 0; i < len; i++) {
+      const factor = map[i];
+      const idx = i * 3;
+      buffer[idx] = (buffer[idx] * factor) >> 8;
+      buffer[idx + 1] = (buffer[idx + 1] * factor) >> 8;
+      buffer[idx + 2] = (buffer[idx + 2] * factor) >> 8;
+    }
+    this.vignetteApplied = true;
+  }
+
+  /**
+   * Apply scanline effect (standalone pass).
+   * Only runs if scanlines weren't already combined into an earlier pass.
+   */
+  private applyScanlines(buffer: Uint8Array, width: number, height: number): void {
+    if (this.scanlineIntensity <= 0 || this.scanlinesApplied) {return;}
+
+    const rowBytes = width * 3;
+    const mult256 = ((1 - this.scanlineIntensity) * 256) | 0;
+
+    for (let y = 1; y < height; y += 2) {
+      const rowStart = y * rowBytes;
+      for (let x = 0; x < rowBytes; x++) {
+        buffer[rowStart + x] = (buffer[rowStart + x] * mult256) >> 8;
+      }
+    }
+    this.scanlinesApplied = true;
+  }
+
+  /**
+   * Combined scanlines + vignette pass (when curvature is disabled).
+   * Combines these effects into a single iteration when both are needed.
+   * Vignette is only applied here if bloom is disabled (otherwise bloom handles it).
+   */
+  private applyScanlinesAndVignette(buffer: Uint8Array, width: number, height: number): void {
+    const needsScanlines = this.scanlineIntensity > 0;
+    const needsVignette = this.vignette > 0 && this.bloom <= 0; // Vignette goes in bloom if bloom is enabled
+
+    if (!needsScanlines && !needsVignette) {return;}
+
+    if (needsVignette) {
+      this.ensureVignetteMap(width, height);
+    }
+
+    const scanlineMult256 = needsScanlines ? ((1 - this.scanlineIntensity) * 256) | 0 : 256;
+    const vmap = needsVignette ? this.vignetteMap! : null;
+
+    if (needsScanlines && needsVignette) {
+      // Combined pass: both scanlines and vignette
+      for (let y = 0; y < height; y++) {
+        const rowStart = y * width;
+        const isOddRow = y & 1;
+        const rowMult = isOddRow ? scanlineMult256 : 256;
+
+        for (let x = 0; x < width; x++) {
+          const i = rowStart + x;
+          const idx = i * 3;
+          const vfactor = vmap![i];
+          const combinedMult = (rowMult * vfactor) >> 8;
+          buffer[idx] = (buffer[idx] * combinedMult) >> 8;
+          buffer[idx + 1] = (buffer[idx + 1] * combinedMult) >> 8;
+          buffer[idx + 2] = (buffer[idx + 2] * combinedMult) >> 8;
+        }
+      }
+      this.scanlinesApplied = true;
+      this.vignetteApplied = true;
+    } else if (needsScanlines) {
+      // Scanlines only (vignette will be in bloom or not needed)
+      const rowBytes = width * 3;
+      for (let y = 1; y < height; y += 2) {
+        const rowStart = y * rowBytes;
+        for (let x = 0; x < rowBytes; x++) {
+          buffer[rowStart + x] = (buffer[rowStart + x] * scanlineMult256) >> 8;
+        }
+      }
+      this.scanlinesApplied = true;
+    } else if (needsVignette) {
+      // Vignette only (no scanlines)
+      const pixelCount = width * height;
+      for (let i = 0; i < pixelCount; i++) {
+        const factor = vmap![i];
+        const idx = i * 3;
+        buffer[idx] = (buffer[idx] * factor) >> 8;
+        buffer[idx + 1] = (buffer[idx + 1] * factor) >> 8;
+        buffer[idx + 2] = (buffer[idx + 2] * factor) >> 8;
+      }
+      this.vignetteApplied = true;
+    }
+  }
+
+  /**
+   * Build curvature distortion map.
+   */
+  private buildCurvatureMap(width: number, height: number): void {
+    const k = this.curvature * CURVATURE_INTENSITY_SCALE;
+
+    this.curvatureMap = new Int32Array(width * height);
+    this.curvatureMapWidth = width;
+    this.curvatureMapHeight = height;
+    this.curvatureMapIntensity = this.curvature;
+
+    const halfW = width / 2;
+    const halfH = height / 2;
+    const maxDim = Math.max(halfW, halfH);
+
+    let idx = 0;
+    for (let y = 0; y < height; y++) {
+      const ny = (y - halfH) / maxDim;
+
+      for (let x = 0; x < width; x++) {
+        const nx = (x - halfW) / maxDim;
+        const r2 = nx * nx + ny * ny;
+        const factor = 1 + k * r2;
+        const srcX = nx * factor * maxDim + halfW;
+        const srcY = ny * factor * maxDim + halfH;
+        const srcXi = Math.round(srcX);
+        const srcYi = Math.round(srcY);
+
+        if (srcXi >= 0 && srcXi < width && srcYi >= 0 && srcYi < height) {
+          this.curvatureMap[idx] = srcYi * width + srcXi;
+        } else {
+          this.curvatureMap[idx] = -1;
+        }
+        idx++;
+      }
+    }
+  }
+
+  /**
+   * Apply CRT curvature with optional scanlines and vignette.
+   * Combines these effects into a single iteration to minimize passes.
+   * Vignette is only combined here if bloom is disabled.
+   */
+  private applyCurvature(buffer: Uint8Array, width: number, height: number): void {
+    if (this.curvature <= 0) {return;}
+
+    const pixelCount = width * height;
+    const bufferSize = pixelCount * 3;
+
+    this.ensureCurvatureMap(width, height);
+    this.curvatureSrcBuffer = this.ensureUint8Buffer(this.curvatureSrcBuffer, bufferSize);
+
+    const src = this.curvatureSrcBuffer;
+    const map = this.curvatureMap!;
+    src.set(buffer);
+
+    // Determine which effects to combine into this pass
+    const combineScanlines = this.scanlineIntensity > 0;
+    const combineVignette = this.vignette > 0 && this.bloom <= 0; // Vignette goes in bloom if enabled
+    const scanlineMult256 = combineScanlines ? ((1 - this.scanlineIntensity) * 256) | 0 : 256;
+
+    if (combineVignette) {
+      this.ensureVignetteMap(width, height);
+    }
+    const vmap = this.vignetteMap;
+
+    // Unified loop: multiplying by 256 then >> 8 is a no-op, so disabled effects have no cost
+    for (let y = 0; y < height; y++) {
+      const rowStart = y * width;
+      const rowMult = combineScanlines && (y & 1) ? scanlineMult256 : 256;
+
+      for (let x = 0; x < width; x++) {
+        const i = rowStart + x;
+        const srcIdx = map[i];
+        const dstIdx = i * 3;
+
+        if (srcIdx >= 0) {
+          const srcOffset = srcIdx * 3;
+          const vfactor = combineVignette ? vmap![i] : 256;
+          const finalMult = (rowMult * vfactor) >> 8;
+          buffer[dstIdx] = (src[srcOffset] * finalMult) >> 8;
+          buffer[dstIdx + 1] = (src[srcOffset + 1] * finalMult) >> 8;
+          buffer[dstIdx + 2] = (src[srcOffset + 2] * finalMult) >> 8;
+        } else {
+          buffer[dstIdx] = 0;
+          buffer[dstIdx + 1] = 0;
+          buffer[dstIdx + 2] = 0;
+        }
+      }
+    }
+
+    if (combineScanlines) {this.scanlinesApplied = true;}
+    if (combineVignette) {this.vignetteApplied = true;}
+  }
+
+  /**
+   * Apply bloom/glow effect.
+   */
+  private applyBloom(buffer: Uint8Array, width: number, height: number): void {
+    if (this.bloom <= 0) {return;}
+
+    const intensity256 = (this.bloom * 256) | 0;
+    const threshold = (this.bloomThreshold * 255) | 0;
+    const rowBytes = width * 3;
+
+    const halfW = (width + 1) >> 1;
+    const halfH = (height + 1) >> 1;
+    const halfRowBytes = halfW * 3;
+    const halfBufferSize = halfW * halfH * 3;
+
+    this.bloomBuffer = this.ensureUint8Buffer(this.bloomBuffer, halfBufferSize);
+    this.bloomTempRow = this.ensureUint8Buffer(this.bloomTempRow, halfRowBytes);
+    this.bloomTempCol = this.ensureUint8Buffer(this.bloomTempCol, halfH * 3);
+
+    const bloom = this.bloomBuffer;
+    const tempRow = this.bloomTempRow;
+    const tempCol = this.bloomTempCol;
+
+    // Downsample and extract bright pixels
+    const thresholdRange = 255 - threshold || 1;
+    for (let hy = 0; hy < halfH; hy++) {
+      const sy = hy * 2;
+      const sy1 = Math.min(sy + 1, height - 1);
+      for (let hx = 0; hx < halfW; hx++) {
+        const sx = hx * 2;
+        const sx1 = Math.min(sx + 1, width - 1);
+
+        const i00 = (sy * width + sx) * 3;
+        const i10 = (sy * width + sx1) * 3;
+        const i01 = (sy1 * width + sx) * 3;
+        const i11 = (sy1 * width + sx1) * 3;
+
+        const r = (buffer[i00] + buffer[i10] + buffer[i01] + buffer[i11]) >> 2;
+        const g = (buffer[i00 + 1] + buffer[i10 + 1] + buffer[i01 + 1] + buffer[i11 + 1]) >> 2;
+        const b = (buffer[i00 + 2] + buffer[i10 + 2] + buffer[i01 + 2] + buffer[i11 + 2]) >> 2;
+
+        const lum = (LUMA_R_INT * r + LUMA_G_INT * g + LUMA_B_INT * b) >> 8;
+        const outIdx = (hy * halfW + hx) * 3;
+
+        if (lum > threshold) {
+          const excess256 = ((lum - threshold) << 8) / thresholdRange;
+          bloom[outIdx] = (r * excess256) >> 8;
+          bloom[outIdx + 1] = (g * excess256) >> 8;
+          bloom[outIdx + 2] = (b * excess256) >> 8;
+        } else {
+          bloom[outIdx] = 0;
+          bloom[outIdx + 1] = 0;
+          bloom[outIdx + 2] = 0;
+        }
+      }
+    }
+
+    // Horizontal blur
+    const radius = BLOOM_BLUR_RADIUS;
+    for (let y = 0; y < halfH; y++) {
+      const rowStart = y * halfRowBytes;
+      let sumR = 0, sumG = 0, sumB = 0;
+      for (let dx = 0; dx <= radius && dx < halfW; dx++) {
+        const idx = rowStart + dx * 3;
+        sumR += bloom[idx];
+        sumG += bloom[idx + 1];
+        sumB += bloom[idx + 2];
+      }
+      let windowSize = Math.min(radius + 1, halfW);
+
+      for (let x = 0; x < halfW; x++) {
+        const outIdx = x * 3;
+        tempRow[outIdx] = (sumR / windowSize) | 0;
+        tempRow[outIdx + 1] = (sumG / windowSize) | 0;
+        tempRow[outIdx + 2] = (sumB / windowSize) | 0;
+
+        const leftX = x - radius;
+        const rightX = x + radius + 1;
+        if (leftX >= 0) {
+          const leftIdx = rowStart + leftX * 3;
+          sumR -= bloom[leftIdx];
+          sumG -= bloom[leftIdx + 1];
+          sumB -= bloom[leftIdx + 2];
+          windowSize--;
+        }
+        if (rightX < halfW) {
+          const rightIdx = rowStart + rightX * 3;
+          sumR += bloom[rightIdx];
+          sumG += bloom[rightIdx + 1];
+          sumB += bloom[rightIdx + 2];
+          windowSize++;
+        }
+      }
+      bloom.set(tempRow.subarray(0, halfRowBytes), rowStart);
+    }
+
+    // Vertical blur
+    for (let x = 0; x < halfW; x++) {
+      const xOffset = x * 3;
+      let sumR = 0, sumG = 0, sumB = 0;
+      for (let dy = 0; dy <= radius && dy < halfH; dy++) {
+        const idx = dy * halfRowBytes + xOffset;
+        sumR += bloom[idx];
+        sumG += bloom[idx + 1];
+        sumB += bloom[idx + 2];
+      }
+      let windowSize = Math.min(radius + 1, halfH);
+
+      for (let y = 0; y < halfH; y++) {
+        const outIdx = y * 3;
+        tempCol[outIdx] = (sumR / windowSize) | 0;
+        tempCol[outIdx + 1] = (sumG / windowSize) | 0;
+        tempCol[outIdx + 2] = (sumB / windowSize) | 0;
+
+        const topY = y - radius;
+        const bottomY = y + radius + 1;
+        if (topY >= 0) {
+          const topIdx = topY * halfRowBytes + xOffset;
+          sumR -= bloom[topIdx];
+          sumG -= bloom[topIdx + 1];
+          sumB -= bloom[topIdx + 2];
+          windowSize--;
+        }
+        if (bottomY < halfH) {
+          const bottomIdx = bottomY * halfRowBytes + xOffset;
+          sumR += bloom[bottomIdx];
+          sumG += bloom[bottomIdx + 1];
+          sumB += bloom[bottomIdx + 2];
+          windowSize++;
+        }
+      }
+
+      for (let y = 0; y < halfH; y++) {
+        const srcIdx = y * 3;
+        const dstIdx = y * halfRowBytes + xOffset;
+        bloom[dstIdx] = tempCol[srcIdx];
+        bloom[dstIdx + 1] = tempCol[srcIdx + 1];
+        bloom[dstIdx + 2] = tempCol[srcIdx + 2];
+      }
+    }
+
+    // Upsample and blend, combining with vignette if enabled
+    const combineVignette = this.vignette > 0;
+
+    if (combineVignette) {
+      this.ensureVignetteMap(width, height);
+      const vmap = this.vignetteMap!;
+
+      for (let y = 0; y < height; y++) {
+        const hy = y >> 1;
+        const srcRowStart = hy * halfRowBytes;
+        const dstRowStart = y * rowBytes;
+        const vignetteRowStart = y * width;
+
+        for (let x = 0; x < width; x++) {
+          const hx = x >> 1;
+          const bloomIdx = srcRowStart + hx * 3;
+          const dstIdx = dstRowStart + x * 3;
+          const vfactor = vmap[vignetteRowStart + x];
+
+          const blendedR = buffer[dstIdx] + ((bloom[bloomIdx] * intensity256) >> 8);
+          const blendedG = buffer[dstIdx + 1] + ((bloom[bloomIdx + 1] * intensity256) >> 8);
+          const blendedB = buffer[dstIdx + 2] + ((bloom[bloomIdx + 2] * intensity256) >> 8);
+
+          buffer[dstIdx] = ((blendedR > 255 ? 255 : blendedR) * vfactor) >> 8;
+          buffer[dstIdx + 1] = ((blendedG > 255 ? 255 : blendedG) * vfactor) >> 8;
+          buffer[dstIdx + 2] = ((blendedB > 255 ? 255 : blendedB) * vfactor) >> 8;
+        }
+      }
+      this.vignetteApplied = true;
+    } else {
+      for (let y = 0; y < height; y++) {
+        const hy = y >> 1;
+        const srcRowStart = hy * halfRowBytes;
+        const dstRowStart = y * rowBytes;
+
+        for (let x = 0; x < width; x++) {
+          const hx = x >> 1;
+          const bloomIdx = srcRowStart + hx * 3;
+          const dstIdx = dstRowStart + x * 3;
+
+          const blendedR = buffer[dstIdx] + ((bloom[bloomIdx] * intensity256) >> 8);
+          const blendedG = buffer[dstIdx + 1] + ((bloom[bloomIdx + 1] * intensity256) >> 8);
+          const blendedB = buffer[dstIdx + 2] + ((bloom[bloomIdx + 2] * intensity256) >> 8);
+
+          buffer[dstIdx] = blendedR > 255 ? 255 : blendedR;
+          buffer[dstIdx + 1] = blendedG > 255 ? 255 : blendedG;
+          buffer[dstIdx + 2] = blendedB > 255 ? 255 : blendedB;
+        }
+      }
+    }
+  }
+
+  /**
+   * Apply NTSC color artifact effect using fixed-point integer math.
+   *
+   * YIQ color space coefficients (scaled by 256 for fixed-point):
+   * - RGB to I: 0.596, -0.274, -0.322 → 153, -70, -82
+   * - RGB to Q: 0.211, -0.523, 0.312 → 54, -134, 80
+   * - RGB to Y: 0.299, 0.587, 0.114 → 77, 150, 29
+   * - I/Q to R: 0.956, 0.621 → 245, 159
+   * - I/Q to G: -0.272, -0.647 → -70, -166
+   * - I/Q to B: -1.106, 1.703 → -283, 436
+   */
+  private applyNtscArtifacts(buffer: Uint8Array, width: number, height: number): void {
+    if (this.ntsc <= 0) {return;}
+
+    const rowBytes = width * 3;
+    const halfW = (width + 1) >> 1;
+    const rowChromaSize = halfW * 2;
+
+    // Fixed-point intensity (scaled by 256)
+    const int256 = (this.ntsc * 256) | 0;
+    const oneMinusInt256 = 256 - int256;
+
+    this.ntscChromaBuffer = this.ensureInt32Buffer(this.ntscChromaBuffer, rowChromaSize);
+    this.ntscTempRow = this.ensureInt32Buffer(this.ntscTempRow, rowChromaSize);
+
+    const chromaRow = this.ntscChromaBuffer;
+    const blurredRow = this.ntscTempRow;
+    const radius = NTSC_CHROMA_BLUR_RADIUS;
+    const rowStep = this.scanlineIntensity > 0 ? 2 : 1;
+
+    for (let y = 0; y < height; y += rowStep) {
+      const rowStart = y * rowBytes;
+
+      // Extract I and Q chroma components (scaled by 256)
+      for (let hx = 0; hx < halfW; hx++) {
+        const sx = hx * 2;
+        const idx = rowStart + sx * 3;
+        const r = buffer[idx];
+        const g = buffer[idx + 1];
+        const b = buffer[idx + 2];
+
+        const chromaIdx = hx * 2;
+        chromaRow[chromaIdx] = YIQ_I_R * r - YIQ_I_G * g - YIQ_I_B * b;         // I * 256
+        chromaRow[chromaIdx + 1] = YIQ_Q_R * r - YIQ_Q_G * g + YIQ_Q_B * b;     // Q * 256
+      }
+
+      // Horizontal blur using sliding window
+      let sumI = 0, sumQ = 0;
+      for (let dx = 0; dx <= radius && dx < halfW; dx++) {
+        const idx = dx * 2;
+        sumI += chromaRow[idx];
+        sumQ += chromaRow[idx + 1];
+      }
+      let windowSize = Math.min(radius + 1, halfW);
+
+      for (let hx = 0; hx < halfW; hx++) {
+        const outIdx = hx * 2;
+        blurredRow[outIdx] = (sumI / windowSize) | 0;
+        blurredRow[outIdx + 1] = (sumQ / windowSize) | 0;
+
+        const leftX = hx - radius;
+        const rightX = hx + radius + 1;
+
+        if (leftX >= 0) {
+          const leftIdx = leftX * 2;
+          sumI -= chromaRow[leftIdx];
+          sumQ -= chromaRow[leftIdx + 1];
+          windowSize--;
+        }
+        if (rightX < halfW) {
+          const rightIdx = rightX * 2;
+          sumI += chromaRow[rightIdx];
+          sumQ += chromaRow[rightIdx + 1];
+          windowSize++;
+        }
+      }
+
+      // Apply chroma blur and convert back to RGB
+      for (let x = 0; x < width; x++) {
+        const idx = rowStart + x * 3;
+        const r = buffer[idx];
+        const g = buffer[idx + 1];
+        const b = buffer[idx + 2];
+
+        // Luma (Y) - unscaled, 0-255 range
+        const luma = (LUMA_R_INT * r + LUMA_G_INT * g + LUMA_B_INT * b) >> 8;
+
+        // Original I and Q (scaled by 256)
+        const iOrig = YIQ_I_R * r - YIQ_I_G * g - YIQ_I_B * b;
+        const qOrig = YIQ_Q_R * r - YIQ_Q_G * g + YIQ_Q_B * b;
+
+        // Blurred I and Q (already scaled by 256)
+        const hx = x >> 1;
+        const chromaIdx = hx * 2;
+        const iBlur = blurredRow[chromaIdx];
+        const qBlur = blurredRow[chromaIdx + 1];
+
+        // Blend original and blurred chroma (result still scaled by 256)
+        const iFinal = (iOrig * oneMinusInt256 + iBlur * int256) >> 8;
+        const qFinal = (qOrig * oneMinusInt256 + qBlur * int256) >> 8;
+
+        // Convert YIQ back to RGB
+        // Coefficients scaled by 256, I/Q scaled by 256, so >> 16 total
+        const newR = luma + ((YIQ_INV_R_I * iFinal + YIQ_INV_R_Q * qFinal) >> 16);
+        const newG = luma + ((-YIQ_INV_G_I * iFinal - YIQ_INV_G_Q * qFinal) >> 16);
+        const newB = luma + ((-YIQ_INV_B_I * iFinal + YIQ_INV_B_Q * qFinal) >> 16);
+
+        buffer[idx] = newR < 0 ? 0 : newR > 255 ? 255 : newR;
+        buffer[idx + 1] = newG < 0 ? 0 : newG > 255 ? 255 : newG;
+        buffer[idx + 2] = newB < 0 ? 0 : newB > 255 ? 255 : newB;
+      }
+    }
+  }
+
+  /**
+   * Build chromatic aberration lookup map.
+   * Precomputes source pixel indices for red and blue channel sampling.
+   */
+  private buildChromaticAberrationMap(width: number, height: number): void {
+    const intensity = this.chromaticAberration;
+    const maxOffset = intensity * CHROMATIC_ABERRATION_OFFSET_SCALE;
+
+    const centerX = width / 2;
+    const centerY = height / 2;
+    const maxDist = Math.sqrt(centerX * centerX + centerY * centerY);
+
+    // Store 2 indices per pixel: [redSrcIdx, blueSrcIdx]
+    this.chromaticAberrationMap = new Int32Array(width * height * 2);
+    this.chromaticAberrationMapWidth = width;
+    this.chromaticAberrationMapHeight = height;
+    this.chromaticAberrationMapIntensity = intensity;
+
+    let mapIdx = 0;
+    for (let y = 0; y < height; y++) {
+      const dy = y - centerY;
+
+      for (let x = 0; x < width; x++) {
+        const dx = x - centerX;
+        const dist = Math.sqrt(dx * dx + dy * dy) / maxDist;
+        const distSq = dist * dist; // Quadratic falloff
+
+        // Calculate direction from center (normalized)
+        const dirX = dist > 0 ? dx / (dist * maxDist) : 0;
+        const dirY = dist > 0 ? dy / (dist * maxDist) : 0;
+
+        const offset = maxOffset * distSq;
+
+        // Red channel: sample from position shifted outward
+        let redX = Math.round(x + dirX * offset);
+        let redY = Math.round(y + dirY * offset);
+        // Clamp to bounds
+        if (redX < 0) {redX = 0;} else if (redX >= width) {redX = width - 1;}
+        if (redY < 0) {redY = 0;} else if (redY >= height) {redY = height - 1;}
+
+        // Blue channel: sample from position shifted inward
+        let blueX = Math.round(x - dirX * offset);
+        let blueY = Math.round(y - dirY * offset);
+        // Clamp to bounds
+        if (blueX < 0) {blueX = 0;} else if (blueX >= width) {blueX = width - 1;}
+        if (blueY < 0) {blueY = 0;} else if (blueY >= height) {blueY = height - 1;}
+
+        // Store source pixel indices (byte offset / 3)
+        this.chromaticAberrationMap[mapIdx++] = redY * width + redX;
+        this.chromaticAberrationMap[mapIdx++] = blueY * width + blueX;
+      }
+    }
+  }
+
+  /**
+   * Apply chromatic aberration effect (RGB color fringing).
+   * Simulates CRT electron beam convergence errors and lens distortion
+   * where different color channels separate toward screen edges.
+   */
+  private applyChromaticAberration(buffer: Uint8Array, width: number, height: number): void {
+    if (this.chromaticAberration <= 0) {return;}
+
+    this.ensureChromaticAberrationMap(width, height);
+
+    const bufferSize = width * height * 3;
+    this.chromaticAberrationSrcBuffer = this.ensureUint8Buffer(this.chromaticAberrationSrcBuffer, bufferSize);
+
+    const source = this.chromaticAberrationSrcBuffer;
+    source.set(buffer);
+
+    const map = this.chromaticAberrationMap!;
+    const pixelCount = width * height;
+
+    for (let i = 0; i < pixelCount; i++) {
+      const mapIdx = i * 2;
+      const redSrcPixel = map[mapIdx];
+      const blueSrcPixel = map[mapIdx + 1];
+      const dstIdx = i * 3;
+
+      // Sample red from shifted position
+      buffer[dstIdx] = source[redSrcPixel * 3];
+
+      // Green stays at original position
+      buffer[dstIdx + 1] = source[dstIdx + 1];
+
+      // Sample blue from shifted position
+      buffer[dstIdx + 2] = source[blueSrcPixel * 3 + 2];
+    }
+  }
+}