@fairyhunter13/opentui-core 0.1.113 → 0.1.114

package/src/examples/shader-cube-demo.ts

@@ -0,0 +1,1015 @@
+#!/usr/bin/env bun
+
+import {
+  createCliRenderer,
+  CliRenderer,
+  TextRenderable,
+  BoxRenderable,
+  FrameBufferRenderable,
+  type KeyEvent,
+} from "../index.js"
+import { setupCommonDemoKeys } from "./lib/standalone-keys.js"
+import { RGBA } from "../lib/index.js"
+import { TextureUtils } from "../3d/TextureUtils.js"
+import {
+  Scene as ThreeScene,
+  Mesh as ThreeMesh,
+  PerspectiveCamera,
+  Color,
+  DirectionalLight as ThreeDirectionalLight,
+  PointLight as ThreePointLight,
+  MeshPhongMaterial,
+  BoxGeometry,
+  AmbientLight,
+} from "three"
+import * as Filters from "../post/filters.js"
+import type { OptimizedBuffer } from "../buffer.js"
+import { ThreeCliRenderer } from "../3d.js"
+import {
+  DistortionEffect,
+  VignetteEffect,
+  CloudsEffect,
+  FlamesEffect,
+  RainbowTextEffect,
+  CRTRollingBarEffect,
+} from "../post/effects.js"
+import * as Matrices from "../post/matrices.js"
+
+// State management for the demo
+interface ShaderCubeDemoState {
+  engine: ThreeCliRenderer
+  sceneRoot: ThreeScene
+  cameraNode: PerspectiveCamera
+  mainLightNode: ThreeDirectionalLight
+  pointLightNode: ThreePointLight
+  ambientLightNode: AmbientLight
+  lightVisualizerMesh: ThreeMesh
+  cubeMeshNode: ThreeMesh
+  materials: MeshPhongMaterial[]
+  distortionEffectInstance: DistortionEffect
+  vignetteEffectInstance: VignetteEffect
+  cloudsEffectInstance: CloudsEffect
+  flamesEffectInstance: FlamesEffect
+  rainbowTextEffectInstance: RainbowTextEffect
+  crtRollingBarEffectInstance: CRTRollingBarEffect
+  pipboyVignetteEffectInstance: VignetteEffect
+  pipboyBarEffectInstance: CRTRollingBarEffect
+  brightnessValue: number
+  gainValue: number
+  colorMatrixEffectInstance: ColorMatrixEffect
+  filterFunctions: { name: string; func: ((buffer: OptimizedBuffer, deltaTime: number) => void) | null }[]
+  currentFilterIndex: number
+  time: number
+  lightColorMode: number
+  rotationEnabled: boolean
+  showLightVisualizers: boolean
+  customLightsEnabled: boolean
+  currentMaterial: number
+  manualMaterialSelection: boolean
+  specularMapEnabled: boolean
+  normalMapEnabled: boolean
+  emissiveMapEnabled: boolean
+  parentContainer: BoxRenderable
+  backgroundBox: BoxRenderable
+  lightVizText: TextRenderable
+  lightColorText: TextRenderable
+  customLightsText: TextRenderable
+  materialToggleText: TextRenderable
+  textureEffectsText: TextRenderable
+  filterStatusText: TextRenderable
+  param1StatusText: TextRenderable
+  param2StatusText: TextRenderable
+  controlsText: TextRenderable
+  keyHandler: (key: KeyEvent) => void
+  resizeHandler: (width: number, height: number) => void
+  frameCallbackId: boolean
+}
+
+let demoState: ShaderCubeDemoState | null = null
+
+export async function run(renderer: CliRenderer): Promise<void> {
+  renderer.start()
+  const WIDTH = renderer.terminalWidth
+  const HEIGHT = renderer.terminalHeight
+  const CAM_DISTANCE = 3.5
+  const CAMERA_PAN_STEP = 0.2
+  const CAMERA_ZOOM_STEP = 0.35
+  const rotationSpeed = [0.2, 0.4, 0.1]
+
+  const lightColors = [
+    { color: [255, 220, 180], name: "Warm" },
+    { color: [180, 220, 255], name: "Cool" },
+    { color: [255, 100, 100], name: "Red" },
+    { color: [100, 255, 100], name: "Green" },
+    { color: [100, 100, 255], name: "Blue" },
+    { color: [255, 255, 100], name: "Yellow" },
+  ]
+
+  // Create parent container for all UI elements
+  const parentContainer = new BoxRenderable(renderer, {
+    id: "shader-cube-container",
+    zIndex: 10,
+  })
+  renderer.root.add(parentContainer)
+
+  // Initialize effect instances
+  const distortionEffectInstance = new DistortionEffect()
+  const vignetteEffectInstance = new VignetteEffect()
+  const cloudsEffectInstance = new CloudsEffect(0.27, 0.001, 0.75, 1.0)
+  const flamesEffectInstance = new FlamesEffect(0.04, 0.02, 0.9)
+  const rainbowTextEffectInstance = new RainbowTextEffect(0.006, 1.0, 1.0, 10.0)
+  const crtRollingBarEffectInstance = new CRTRollingBarEffect(0.8, 0.1, 0.4, 0.2)
+
+  // Pipboy-specific instances (decoupled from other effects)
+  const pipboyVignetteEffectInstance = new VignetteEffect(0.75)
+  const pipboyBarEffectInstance = new CRTRollingBarEffect(2.5, 0.08, 0.75, 0.15)
+
+  // Simple value-based brightness and gain (no class instances)
+  let brightnessValue = 0.0
+  let gainValue = 1.0
+
+  // Helper function to create right-half cell masks for selective saturation
+  function createRightHalfCellMask(width: number, height: number): Float32Array {
+    const rightHalfWidth = Math.floor(width / 2)
+    const rightHalfPixels = rightHalfWidth * height
+    const cellMask = new Float32Array(rightHalfPixels * 3)
+    let i = 0
+    for (let y = 0; y < height; y++) {
+      for (let x = Math.floor(width / 2); x < width; x++) {
+        cellMask[i++] = x
+        cellMask[i++] = y
+        cellMask[i++] = 1
+      }
+    }
+    return cellMask
+  }
+
+  // Full screen saturation mode toggle (null cellMask = uniform)
+  let saturationFullScreen = false
+
+  // Saturation state variables
+  let saturationValue = 1.0
+  let saturationCellMask: Float32Array | null = createRightHalfCellMask(WIDTH, HEIGHT)
+
+  // Registry of all available color matrices with their display names
+  const colorMatrixRegistry: { name: string; matrix: Float32Array }[] = [
+    { name: "Sepia", matrix: Matrices.SEPIA_MATRIX },
+    { name: "Protanopia Sim", matrix: Matrices.PROTANOPIA_SIM_MATRIX },
+    { name: "Deuteranopia Sim", matrix: Matrices.DEUTERANOPIA_SIM_MATRIX },
+    { name: "Tritanopia Sim", matrix: Matrices.TRITANOPIA_SIM_MATRIX },
+    { name: "Achromatopsia", matrix: Matrices.ACHROMATOPSIA_MATRIX },
+    { name: "Protanopia Comp", matrix: Matrices.PROTANOPIA_COMP_MATRIX },
+    { name: "Deuteranopia Comp", matrix: Matrices.DEUTERANOPIA_COMP_MATRIX },
+    { name: "Tritanopia Comp", matrix: Matrices.TRITANOPIA_COMP_MATRIX },
+    // Creative effects
+    { name: "Technicolor", matrix: Matrices.TECHNICOLOR_MATRIX },
+    { name: "Solarization", matrix: Matrices.SOLARIZATION_MATRIX },
+    { name: "Synthwave", matrix: Matrices.SYNTHWAVE_MATRIX },
+    { name: "Greenscale", matrix: Matrices.GREENSCALE_MATRIX },
+    { name: "Grayscale", matrix: Matrices.GRAYSCALE_MATRIX },
+    { name: "Invert", matrix: Matrices.INVERT_MATRIX },
+  ]
+
+  // ColorMatrix effect that can cycle through all matrices
+  class ColorMatrixEffect {
+    private currentIndex = 0
+
+    public get currentMatrixName(): string {
+      return colorMatrixRegistry[this.currentIndex].name
+    }
+
+    public apply(buffer: OptimizedBuffer): void {
+      const { matrix } = colorMatrixRegistry[this.currentIndex]
+      buffer.colorMatrixUniform(matrix, 1.0)
+    }
+
+    public nextMatrix(): void {
+      this.currentIndex = (this.currentIndex + 1) % colorMatrixRegistry.length
+    }
+
+    public previousMatrix(): void {
+      this.currentIndex = (this.currentIndex - 1 + colorMatrixRegistry.length) % colorMatrixRegistry.length
+    }
+  }
+
+  const colorMatrixEffectInstance = new ColorMatrixEffect()
+
+  const filterFunctions: { name: string; func: ((buffer: OptimizedBuffer, deltaTime: number) => void) | null }[] = [
+    { name: "None", func: null },
+    { name: "Scanlines", func: (buf, _dt) => Filters.applyScanlines(buf, 0.85) },
+    { name: "Vignette", func: vignetteEffectInstance.apply.bind(vignetteEffectInstance) },
+    { name: "Color Matrix", func: colorMatrixEffectInstance.apply.bind(colorMatrixEffectInstance) },
+    { name: "Noise", func: (buf, _dt) => Filters.applyNoise(buf, 0.05) },
+    { name: "Chromatic Aberration", func: (buf, _dt) => Filters.applyChromaticAberration(buf, 2) },
+    { name: "ASCII Art", func: (buf, _dt) => Filters.applyAsciiArt(buf) },
+    { name: "Distortion", func: distortionEffectInstance.apply.bind(distortionEffectInstance) },
+    { name: "Clouds", func: cloudsEffectInstance.apply.bind(cloudsEffectInstance) },
+    { name: "Flames", func: flamesEffectInstance.apply.bind(flamesEffectInstance) },
+    { name: "Rainbow Text", func: rainbowTextEffectInstance.apply.bind(rainbowTextEffectInstance) },
+    { name: "CRT Rolling Bar", func: crtRollingBarEffectInstance.apply.bind(crtRollingBarEffectInstance) },
+    {
+      name: "Pipboy",
+      func: (buf, dt) => {
+        pipboyVignetteEffectInstance.apply(buf)
+        buf.colorMatrixUniform(Matrices.GREENSCALE_MATRIX, 1.0)
+        pipboyBarEffectInstance.apply(buf, dt)
+      },
+    },
+    { name: "Brightness", func: (buf, _dt) => Filters.applyBrightness(buf, brightnessValue) },
+    { name: "Gain", func: (buf, _dt) => Filters.applyGain(buf, gainValue) },
+    {
+      name: "Saturation",
+      func: (buf, _dt) => Filters.applySaturation(buf, saturationCellMask ?? undefined, saturationValue),
+    },
+  ]
+
+  // Box in the background to show alpha channel works
+  const backgroundBox = new BoxRenderable(renderer, {
+    id: "shader-cube-box",
+    position: "absolute",
+    left: 5,
+    top: 5,
+    width: WIDTH - 10,
+    height: HEIGHT - 10,
+    backgroundColor: "#131336",
+    zIndex: 0,
+    borderStyle: "single",
+    borderColor: "#FFFFFF",
+    title: "Shader Cube Demo",
+    titleAlignment: "center",
+    border: true,
+  })
+  parentContainer.add(backgroundBox)
+
+  const framebufferRenderable = new FrameBufferRenderable(renderer, {
+    id: "shader-cube-main",
+    width: WIDTH,
+    height: HEIGHT,
+    zIndex: 10,
+    respectAlpha: true,
+  })
+  renderer.root.add(framebufferRenderable)
+  const { frameBuffer: framebuffer } = framebufferRenderable
+
+  const engine = new ThreeCliRenderer(renderer, {
+    width: WIDTH,
+    height: HEIGHT,
+    focalLength: 8,
+    backgroundColor: RGBA.fromInts(0, 0, 0, 0),
+    alpha: true,
+  })
+  await engine.init()
+
+  const sceneRoot = new ThreeScene()
+
+  const mainLightNode = new ThreeDirectionalLight(new Color(1, 1, 1), 0.8)
+  mainLightNode.position.set(-10, -5, 1)
+  mainLightNode.target.position.set(0, 0, 0)
+  mainLightNode.name = "main_light"
+
+  sceneRoot.add(mainLightNode)
+  sceneRoot.add(mainLightNode.target)
+
+  const pointLightNode = new ThreePointLight(new Color(1, 220 / 255, 180 / 255), 2.0, 4)
+  pointLightNode.position.set(1.5, 0, 0)
+  pointLightNode.name = "point_light"
+  sceneRoot.add(pointLightNode)
+
+  const ambientLightNode = new AmbientLight(new Color(0.25, 0.25, 0.25), 1)
+  ambientLightNode.name = "ambient_light"
+  sceneRoot.add(ambientLightNode)
+
+  const lightVisualizerGeometry = new BoxGeometry(0.2, 0.2, 0.2)
+  const lightVisualizerMaterial = new MeshPhongMaterial({
+    color: 0x000000,
+    emissive: new Color(1.0, 0.8, 0.4),
+    emissiveIntensity: 1.0,
+    shininess: 0,
+  })
+  const lightVisualizerMesh = new ThreeMesh(lightVisualizerGeometry, lightVisualizerMaterial)
+  lightVisualizerMesh.name = "light_viz"
+  lightVisualizerMesh.position.copy(pointLightNode.position)
+  sceneRoot.add(lightVisualizerMesh)
+
+  // Create textures
+  const redTexture = TextureUtils.createCheckerboard(
+    256,
+    new Color(255 / 255, 40 / 255, 40 / 255),
+    new Color(180 / 255, 10 / 255, 10 / 255),
+  )
+  const greenTexture = TextureUtils.createCheckerboard(
+    256,
+    new Color(40 / 255, 255 / 255, 40 / 255),
+    new Color(10 / 255, 180 / 255, 10 / 255),
+  )
+  const blueTexture = TextureUtils.createCheckerboard(
+    256,
+    new Color(40 / 255, 40 / 255, 255 / 255),
+    new Color(10 / 255, 10 / 255, 180 / 255),
+  )
+  const yellowTexture = TextureUtils.createCheckerboard(
+    256,
+    new Color(255 / 255, 255 / 255, 40 / 255),
+    new Color(180 / 255, 180 / 255, 10 / 255),
+  )
+  const cyanTexture = TextureUtils.createCheckerboard(
+    256,
+    new Color(40 / 255, 255 / 255, 255 / 255),
+    new Color(10 / 255, 180 / 255, 180 / 255),
+  )
+  const magentaTexture = TextureUtils.createCheckerboard(
+    256,
+    new Color(255 / 255, 40 / 255, 255 / 255),
+    new Color(180 / 255, 10 / 255, 180 / 255),
+  )
+  const specularMapTexture = TextureUtils.createGradient(
+    256,
+    new Color(1, 1, 1),
+    new Color(0.2, 0.2, 0.2),
+    "horizontal",
+  )
+  const emissiveMapTexture = TextureUtils.createGradient(256, new Color(1, 0.6, 0), new Color(0, 0, 0), "radial")
+  const normalMapTexture = TextureUtils.createNoise(
+    256,
+    2,
+    3,
+    new Color(127 / 255, 127 / 255, 255 / 255),
+    new Color(127 / 255, 127 / 255, 127 / 255),
+  )
+
+  const materials: MeshPhongMaterial[] = [
+    new MeshPhongMaterial({ map: redTexture, shininess: 30, specular: new Color(0.8, 0.8, 0.8) }),
+    new MeshPhongMaterial({ map: greenTexture, shininess: 30, specular: new Color(0.8, 0.8, 0.8) }),
+    new MeshPhongMaterial({ map: blueTexture, shininess: 30, specular: new Color(0.8, 0.8, 0.8) }),
+    new MeshPhongMaterial({ map: yellowTexture, shininess: 30, specular: new Color(0.8, 0.8, 0.8) }),
+    new MeshPhongMaterial({ map: cyanTexture, shininess: 30, specular: new Color(0.8, 0.8, 0.8) }),
+    new MeshPhongMaterial({ map: magentaTexture, shininess: 30, specular: new Color(0.8, 0.8, 0.8) }),
+    new MeshPhongMaterial({
+      color: new Color(1, 1, 1),
+      specular: new Color(1, 1, 1),
+      shininess: 80,
+    }),
+  ]
+
+  const cubeGeometry = new BoxGeometry(1.0, 1.0, 1.0)
+  const cubeMeshNode = new ThreeMesh(cubeGeometry, materials[0])
+  cubeMeshNode.name = "cube"
+
+  sceneRoot.add(cubeMeshNode)
+
+  const cameraNode = new PerspectiveCamera(45, engine.aspectRatio, 1.0, 100.0)
+  cameraNode.position.set(0, 0, CAM_DISTANCE)
+  cameraNode.name = "main_camera"
+
+  sceneRoot.add(cameraNode)
+  engine.setActiveCamera(cameraNode)
+
+  // Initialize state variables
+  let currentFilterIndex = 0
+  let time = 0
+  let lightColorMode = 0
+  let rotationEnabled = true
+  let showLightVisualizers = true
+  let customLightsEnabled = true
+  let currentMaterial = 0
+  let manualMaterialSelection = false
+  let specularMapEnabled = false
+  let normalMapEnabled = false
+  let emissiveMapEnabled = false
+
+  // Create UI elements
+  let uiLine = 0
+  const lightVizText = new TextRenderable(renderer, {
+    id: "shader-light-viz",
+    content: "Light Visualization: ON (V to toggle)",
+    position: "absolute",
+    left: 0,
+    top: uiLine++,
+    fg: "#FFFFFF",
+    zIndex: 20,
+  })
+  parentContainer.add(lightVizText)
+
+  const lightColorText = new TextRenderable(renderer, {
+    id: "shader-light-color",
+    content: "Point Light: Warm (C to change)",
+    position: "absolute",
+    left: 0,
+    top: uiLine++,
+    fg: "#FFFFFF",
+    zIndex: 20,
+  })
+  parentContainer.add(lightColorText)
+
+  const customLightsText = new TextRenderable(renderer, {
+    id: "shader-custom-lights",
+    content: "Custom Lights: ON (L to toggle)",
+    position: "absolute",
+    left: 0,
+    top: uiLine++,
+    fg: "#FFFFFF",
+    zIndex: 20,
+  })
+  parentContainer.add(customLightsText)
+
+  const materialToggleText = new TextRenderable(renderer, {
+    id: "shader-material-toggle",
+    content: "Material: Auto-cycling (M to toggle, N to change)",
+    position: "absolute",
+    left: 0,
+    top: uiLine++,
+    fg: "#FFFFFF",
+    zIndex: 20,
+  })
+  parentContainer.add(materialToggleText)
+
+  const textureEffectsText = new TextRenderable(renderer, {
+    id: "shader-texture-effects",
+    content: "Texture Effects: P-Specular [OFF] | B-Normal [OFF] | I-Emissive [OFF]",
+    position: "absolute",
+    left: 0,
+    top: uiLine++,
+    fg: "#FFFFFF",
+    zIndex: 20,
+  })
+  parentContainer.add(textureEffectsText)
+
+  const filterStatusText = new TextRenderable(renderer, {
+    id: "shader-filter-status",
+    content: `Filter: ${filterFunctions[currentFilterIndex].name} (J/K to cycle)`,
+    position: "absolute",
+    left: 0,
+    top: uiLine++,
+    fg: "#FFFFFF",
+    zIndex: 20,
+  })
+  parentContainer.add(filterStatusText)
+
+  const param1StatusText = new TextRenderable(renderer, {
+    id: "shader-param1-status",
+    content: ``,
+    position: "absolute",
+    left: 0,
+    top: uiLine++,
+    fg: "#FFFFFF",
+    zIndex: 20,
+  })
+  param1StatusText.visible = false
+  parentContainer.add(param1StatusText)
+
+  const param2StatusText = new TextRenderable(renderer, {
+    id: "shader-param2-status",
+    content: ``,
+    position: "absolute",
+    left: 0,
+    top: uiLine++,
+    fg: "#FFFFFF",
+    zIndex: 20,
+  })
+  param2StatusText.visible = false
+  parentContainer.add(param2StatusText)
+
+  const controlsText = new TextRenderable(renderer, {
+    id: "shader-controls",
+    content:
+      "WASD: Move | QE: Rotate | ZX: Zoom | V: Light Viz | C: Light Color | L: Lights | M/N: Material | P/B/I: Maps | R: Reset | Space: Rotation | J/K Filter | [/]{/} Params | T: Saturation Mode",
+    position: "absolute",
+    left: 0,
+    top: HEIGHT - 2,
+    fg: "#FFFFFF",
+    zIndex: 20,
+  })
+  parentContainer.add(controlsText)
+
+  function updateParameterUI() {
+    const selectedFilter = filterFunctions[currentFilterIndex]
+    let param1Text = ""
+    let param1Visible = false
+
+    switch (selectedFilter.name) {
+      case "Distortion":
+        param1Text = `Distortion Chance: ${distortionEffectInstance.glitchChancePerSecond.toFixed(2)} ([/])`
+        param1Visible = true
+        break
+      case "Vignette":
+        param1Text = `Vignette Strength: ${vignetteEffectInstance.strength.toFixed(2)} ([/])`
+        param1Visible = true
+        break
+      case "Brightness":
+        param1Text = `Brightness Factor: ${brightnessValue.toFixed(2)} ([/])`
+        param1Visible = true
+        break
+      case "Gain":
+        param1Text = `Gain Factor: ${gainValue.toFixed(2)} ([/])`
+        param1Visible = true
+        break
+      case "Saturation":
+        param1Text = `Saturation: ${saturationValue.toFixed(2)} (T: ${saturationFullScreen ? "Full" : "Half"}) ([/])`
+        param1Visible = true
+        break
+      case "Color Matrix":
+        param1Text = `Matrix: ${colorMatrixEffectInstance.currentMatrixName} ([/] to cycle)`
+        param1Visible = true
+        break
+      case "Clouds":
+        param1Text = `Clouds: scale=${cloudsEffectInstance.scale.toFixed(3)} ([/] to adjust)`
+        param2StatusText.content = `speed=${cloudsEffectInstance.speed.toFixed(3)} ({/} to adjust)`
+        param1Visible = true
+        param2StatusText.visible = true
+        break
+      case "Flames":
+        param1Text = `Flames: scale=${flamesEffectInstance.scale.toFixed(3)} ([/] to adjust)`
+        param2StatusText.content = `speed=${flamesEffectInstance.speed.toFixed(3)} ({/} to adjust)`
+        param1Visible = true
+        param2StatusText.visible = true
+        break
+      case "Rainbow Text":
+        param1Text = `Rainbow: speed=${rainbowTextEffectInstance.speed.toFixed(3)} ([/] to adjust)`
+        param2StatusText.content = `repeats=${rainbowTextEffectInstance.repeats.toFixed(1)} ({/} to adjust)`
+        param1Visible = true
+        param2StatusText.visible = true
+        break
+      case "CRT Rolling Bar":
+        param1Text = `CRT Bar: speed=${crtRollingBarEffectInstance.speed.toFixed(2)} ([/] to adjust)`
+        param2StatusText.content = `intensity=${crtRollingBarEffectInstance.intensity.toFixed(2)} ({/} to adjust)`
+        param1Visible = true
+        param2StatusText.visible = true
+        break
+      case "Pipboy":
+        param1Text = `Pipboy: bar speed=${pipboyBarEffectInstance.speed.toFixed(2)} ([/] to adjust)`
+        param2StatusText.content = `vignette=${pipboyVignetteEffectInstance.strength.toFixed(2)} ({/} to adjust)`
+        param1Visible = true
+        param2StatusText.visible = true
+        break
+    }
+
+    param1StatusText.content = param1Text
+    param1StatusText.visible = param1Visible
+    if (
+      selectedFilter.name !== "Clouds" &&
+      selectedFilter.name !== "Flames" &&
+      selectedFilter.name !== "Rainbow Text" &&
+      selectedFilter.name !== "CRT Rolling Bar" &&
+      selectedFilter.name !== "Pipboy"
+    ) {
+      param2StatusText.content = ""
+      param2StatusText.visible = false
+    }
+  }
+
+  function updateTextureEffectsUI() {
+    textureEffectsText.content = `Texture Effects: P-Specular [${specularMapEnabled ? "ON" : "OFF"}] | B-Normal [${normalMapEnabled ? "ON" : "OFF"}] | I-Emissive [${emissiveMapEnabled ? "ON" : "OFF"}]`
+  }
+
+  const keyHandler = (key: KeyEvent) => {
+    const cubeObject = sceneRoot.getObjectByName("cube") as ThreeMesh | undefined
+
+    if (key.name === "w") cameraNode.translateY(CAMERA_PAN_STEP)
+    else if (key.name === "s") cameraNode.translateY(-CAMERA_PAN_STEP)
+    else if (key.name === "a") cameraNode.translateX(-CAMERA_PAN_STEP)
+    else if (key.name === "d") cameraNode.translateX(CAMERA_PAN_STEP)
+    if (key.name === "q") cameraNode.rotateY(0.1)
+    else if (key.name === "e") cameraNode.rotateY(-0.1)
+    if (key.name === "z") cameraNode.translateZ(CAMERA_ZOOM_STEP)
+    else if (key.name === "x") cameraNode.translateZ(-CAMERA_ZOOM_STEP)
+    if (key.name === "r") {
+      cameraNode.position.set(0, 0, CAM_DISTANCE)
+      cameraNode.rotation.set(0, 0, 0)
+      cameraNode.lookAt(0, 0, 0)
+    }
+    if (key.name === "space") rotationEnabled = !rotationEnabled
+
+    // Toggle light visualization
+    if (key.name === "v") {
+      showLightVisualizers = !showLightVisualizers
+      const vizObject = sceneRoot.getObjectByName("light_viz")
+      if (vizObject) {
+        vizObject.visible = showLightVisualizers
+      }
+      lightVizText.content = `Light Visualization: ${showLightVisualizers ? "ON" : "OFF"} (V to toggle)`
+    }
+
+    // Add light color cycling
+    if (key.name === "c") {
+      lightColorMode = (lightColorMode + 1) % lightColors.length
+      const colorInfo = lightColors[lightColorMode]
+
+      if (pointLightNode) {
+        pointLightNode.color.setRGB(colorInfo.color[0] / 255, colorInfo.color[1] / 255, colorInfo.color[2] / 255)
+
+        const vizObject = sceneRoot.getObjectByName("light_viz") as ThreeMesh | undefined
+        if (vizObject && vizObject.material instanceof MeshPhongMaterial) {
+          vizObject.material.emissive.setRGB(
+            colorInfo.color[0] / 255,
+            colorInfo.color[1] / 255,
+            colorInfo.color[2] / 255,
+          )
+        }
+      }
+      lightColorText.content = `Point Light: ${colorInfo.name} (C to change)`
+    }
+
+    // Toggle custom lights
+    if (key.name === "l") {
+      customLightsEnabled = !customLightsEnabled
+      if (mainLightNode) mainLightNode.visible = customLightsEnabled
+      if (pointLightNode) pointLightNode.visible = customLightsEnabled
+      customLightsText.content = `Custom Lights: ${customLightsEnabled ? "ON" : "OFF"} (L to toggle)`
+    }
+
+    // Material toggling
+    if (key.name === "m") {
+      manualMaterialSelection = !manualMaterialSelection
+      materialToggleText.content = `Material: ${manualMaterialSelection ? "Manual" : "Auto-cycling"} (M to toggle, N to change)`
+    }
+    if (key.name === "n") {
+      currentMaterial = (currentMaterial + 1) % materials.length
+      materialToggleText.content = `Material: ${manualMaterialSelection ? "Manual" : "Auto-cycling"} (#${currentMaterial}${currentMaterial === 6 ? " - White" : ""}) (M/N)`
+      if (cubeObject) {
+        const newMaterialInstance = materials[currentMaterial]
+        cubeObject.material = newMaterialInstance
+      }
+    }
+
+    // Toggle super sampling
+    if (key.name === "u") {
+      engine.toggleSuperSampling()
+    }
+
+    // Cycle through region modes for current filter (if applicable)
+    // NOTE: Region cycling removed - effects now apply to entire buffer
+    // Previously handled by key 'h'
+
+    // Toggle debug mode for console caller info
+    if (key.name === "o") {
+      renderer.console.toggle()
+    }
+
+    // Toggle texture effects
+    let effectsChanged = false
+    if (key.name === "p") {
+      specularMapEnabled = !specularMapEnabled
+      effectsChanged = true
+    } else if (key.name === "b") {
+      normalMapEnabled = !normalMapEnabled
+      effectsChanged = true
+    } else if (key.name === "i") {
+      emissiveMapEnabled = !emissiveMapEnabled
+      effectsChanged = true
+    }
+
+    if (effectsChanged) {
+      if (cubeObject) {
+        const material = cubeObject.material as MeshPhongMaterial
+        material.specularMap = specularMapEnabled ? specularMapTexture : null
+        material.normalMap = normalMapEnabled ? normalMapTexture : null
+        material.emissiveMap = emissiveMapEnabled ? emissiveMapTexture : null
+        material.emissive = new Color(0, 0, 0)
+        material.emissiveIntensity = emissiveMapEnabled ? 0.7 : 0.0
+        material.needsUpdate = true
+      }
+      updateTextureEffectsUI()
+    }
+
+    let filterChanged = false
+    if (key.name === "j") {
+      currentFilterIndex = (currentFilterIndex - 1 + filterFunctions.length) % filterFunctions.length
+      filterChanged = true
+    } else if (key.name === "k") {
+      currentFilterIndex = (currentFilterIndex + 1) % filterFunctions.length
+      filterChanged = true
+    }
+
+    if (filterChanged) {
+      const selectedFilter = filterFunctions[currentFilterIndex]
+      renderer.clearPostProcessFns()
+      if (selectedFilter.func) {
+        renderer.addPostProcessFn(selectedFilter.func)
+      }
+      filterStatusText.content = `Filter: ${selectedFilter.name} (J/K to cycle)`
+      updateParameterUI()
+    }
+
+    let paramChanged = false
+
+    if (key.name === "t" && filterFunctions[currentFilterIndex].name === "Saturation") {
+      saturationFullScreen = !saturationFullScreen
+      if (saturationFullScreen) {
+        // null cellMask = uniform saturation (uses colorMatrixUniform, much faster)
+        saturationCellMask = null
+      } else {
+        // cellMask = selective saturation on right half
+        saturationCellMask = createRightHalfCellMask(renderer.terminalWidth, renderer.terminalHeight)
+      }
+      paramChanged = true
+    }
+
+    // Parameter Adjustment Keys ([ / ] and { / })
+    const currentFilterName = filterFunctions[currentFilterIndex].name
+    const height = renderer.terminalHeight
+
+    if (key.name === "[") {
+      switch (currentFilterName) {
+        case "Distortion":
+          distortionEffectInstance.glitchChancePerSecond = Math.max(
+            0,
+            distortionEffectInstance.glitchChancePerSecond - 0.1,
+          )
+          paramChanged = true
+          break
+        case "Vignette":
+          vignetteEffectInstance.strength = Math.max(0, vignetteEffectInstance.strength - 0.05)
+          paramChanged = true
+          break
+        case "Brightness":
+          brightnessValue = Math.max(-1.0, brightnessValue - 0.05)
+          paramChanged = true
+          break
+        case "Gain":
+          gainValue = Math.max(0, gainValue - 0.05)
+          paramChanged = true
+          break
+        case "Saturation":
+          saturationValue = Math.max(0, saturationValue - 0.05)
+          paramChanged = true
+          break
+        case "Color Matrix":
+          colorMatrixEffectInstance.previousMatrix()
+          paramChanged = true
+          break
+        case "Clouds":
+          cloudsEffectInstance.scale = Math.max(0.05, cloudsEffectInstance.scale - 0.01)
+          paramChanged = true
+          break
+        case "Flames":
+          flamesEffectInstance.scale = Math.max(0.01, flamesEffectInstance.scale - 0.002)
+          paramChanged = true
+          break
+        case "Rainbow Text":
+          rainbowTextEffectInstance.speed = Math.max(0, rainbowTextEffectInstance.speed - 0.001)
+          paramChanged = true
+          break
+        case "CRT Rolling Bar":
+          crtRollingBarEffectInstance.speed = Math.max(0.1, crtRollingBarEffectInstance.speed - 0.1)
+          paramChanged = true
+          break
+        case "Pipboy":
+          pipboyBarEffectInstance.speed = Math.max(0.1, pipboyBarEffectInstance.speed - 0.1)
+          paramChanged = true
+          break
+      }
+    } else if (key.name === "]") {
+      switch (currentFilterName) {
+        case "Distortion":
+          distortionEffectInstance.glitchChancePerSecond = Math.min(
+            25,
+            distortionEffectInstance.glitchChancePerSecond + 0.1,
+          )
+          paramChanged = true
+          break
+        case "Vignette":
+          vignetteEffectInstance.strength = Math.min(5, vignetteEffectInstance.strength + 0.05)
+          paramChanged = true
+          break
+        case "Brightness":
+          brightnessValue = Math.min(1.0, brightnessValue + 0.05)
+          paramChanged = true
+          break
+        case "Gain":
+          gainValue = Math.min(50, gainValue + 0.05)
+          paramChanged = true
+          break
+        case "Saturation":
+          saturationValue = Math.min(10, saturationValue + 0.05)
+          paramChanged = true
+          break
+        case "Color Matrix":
+          colorMatrixEffectInstance.nextMatrix()
+          paramChanged = true
+          break
+        case "Clouds":
+          cloudsEffectInstance.scale = Math.min(1.0, cloudsEffectInstance.scale + 0.01)
+          paramChanged = true
+          break
+        case "Flames":
+          flamesEffectInstance.scale = Math.min(0.1, flamesEffectInstance.scale + 0.002)
+          paramChanged = true
+          break
+        case "Rainbow Text":
+          rainbowTextEffectInstance.speed = Math.min(0.5, rainbowTextEffectInstance.speed + 0.001)
+          paramChanged = true
+          break
+        case "CRT Rolling Bar":
+          crtRollingBarEffectInstance.speed = Math.min(5.0, crtRollingBarEffectInstance.speed + 0.1)
+          paramChanged = true
+          break
+        case "Pipboy":
+          pipboyBarEffectInstance.speed = Math.min(10.0, pipboyBarEffectInstance.speed + 0.1)
+          paramChanged = true
+          break
+      }
+    }
+
+    // Parameter 2 Adjustment ({/})
+    if (key.name === "{") {
+      switch (currentFilterName) {
+        case "Distortion":
+          distortionEffectInstance.maxGlitchLines = Math.max(0, distortionEffectInstance.maxGlitchLines - 1)
+          paramChanged = true
+          break
+        case "Clouds":
+          cloudsEffectInstance.speed = Math.max(0.0, cloudsEffectInstance.speed - 0.001)
+          paramChanged = true
+          break
+        case "Flames":
+          flamesEffectInstance.speed = Math.max(0.005, flamesEffectInstance.speed - 0.001)
+          paramChanged = true
+          break
+        case "Rainbow Text":
+          rainbowTextEffectInstance.repeats = Math.max(1.0, rainbowTextEffectInstance.repeats - 0.5)
+          paramChanged = true
+          break
+        case "CRT Rolling Bar":
+          crtRollingBarEffectInstance.intensity = Math.max(0.0, crtRollingBarEffectInstance.intensity - 0.05)
+          paramChanged = true
+          break
+        case "Pipboy":
+          pipboyVignetteEffectInstance.strength = Math.max(0.0, pipboyVignetteEffectInstance.strength - 0.05)
+          paramChanged = true
+          break
+      }
+    } else if (key.name === "}") {
+      switch (currentFilterName) {
+        case "Distortion":
+          distortionEffectInstance.maxGlitchLines = Math.min(height - 1, distortionEffectInstance.maxGlitchLines + 1)
+          paramChanged = true
+          break
+        case "Clouds":
+          cloudsEffectInstance.speed = Math.min(0.02, cloudsEffectInstance.speed + 0.001)
+          paramChanged = true
+          break
+        case "Flames":
+          flamesEffectInstance.speed = Math.min(0.1, flamesEffectInstance.speed + 0.001)
+          paramChanged = true
+          break
+        case "Rainbow Text":
+          rainbowTextEffectInstance.repeats = Math.min(20.0, rainbowTextEffectInstance.repeats + 0.5)
+          paramChanged = true
+          break
+        case "CRT Rolling Bar":
+          crtRollingBarEffectInstance.intensity = Math.min(1.0, crtRollingBarEffectInstance.intensity + 0.05)
+          paramChanged = true
+          break
+        case "Pipboy":
+          pipboyVignetteEffectInstance.strength = Math.min(3.0, pipboyVignetteEffectInstance.strength + 0.05)
+          paramChanged = true
+          break
+      }
+    }
+
+    if (paramChanged) {
+      updateParameterUI()
+    }
+  }
+
+  const resizeHandler = (width: number, height: number) => {
+    framebuffer.resize(width, height)
+
+    if (cameraNode) {
+      cameraNode.aspect = engine.aspectRatio
+      cameraNode.updateProjectionMatrix()
+    }
+
+    backgroundBox.width = width - 10
+    backgroundBox.height = height - 10
+    controlsText.y = height - 2
+  }
+
+  renderer.keyInput.on("keypress", keyHandler)
+  renderer.on("resize", resizeHandler)
+
+  renderer.setFrameCallback(async (deltaMs) => {
+    const deltaTime = deltaMs / 1000
+    time += deltaTime
+    const cubeObject = sceneRoot.getObjectByName("cube") as ThreeMesh | undefined
+
+    if (rotationEnabled && cubeObject) {
+      cubeObject.rotation.x += rotationSpeed[0] * deltaTime
+      cubeObject.rotation.y += rotationSpeed[1] * deltaTime
+      cubeObject.rotation.z += rotationSpeed[2] * deltaTime
+    }
+
+    if (pointLightNode) {
+      const radius = 3
+      const speed = 0.9
+      pointLightNode.position.set(Math.sin(time * speed) * radius, 1.5, Math.cos(time * speed) * radius)
+
+      const vizObject = sceneRoot.getObjectByName("light_viz")
+      if (vizObject) {
+        vizObject.position.copy(pointLightNode.position)
+      }
+    }
+
+    if (cubeObject) {
+      let materialIndex = currentMaterial
+      if (!manualMaterialSelection) {
+        materialIndex = Math.floor(time * 0.5) % (materials.length - 1)
+      }
+
+      if (materialIndex < materials.length && cubeObject.material !== materials[materialIndex]) {
+        const newMaterialInstance = materials[materialIndex]
+        cubeObject.material = newMaterialInstance
+
+        const material = cubeObject.material as MeshPhongMaterial
+        material.specularMap = specularMapEnabled ? specularMapTexture : null
+        material.normalMap = normalMapEnabled ? normalMapTexture : null
+        material.emissiveMap = emissiveMapEnabled ? emissiveMapTexture : null
+        material.emissive = new Color(0, 0, 0)
+        material.emissiveIntensity = emissiveMapEnabled ? 0.7 : 0.0
+        material.needsUpdate = true
+      }
+    }
+
+    framebuffer.clear(RGBA.fromValues(0, 0, 0, 0))
+    await engine.drawScene(sceneRoot, framebuffer, deltaTime)
+  })
+
+  // Store state for cleanup
+  demoState = {
+    engine,
+    sceneRoot,
+    cameraNode,
+    mainLightNode,
+    pointLightNode,
+    ambientLightNode,
+    lightVisualizerMesh,
+    cubeMeshNode,
+    materials,
+    distortionEffectInstance,
+    vignetteEffectInstance,
+    cloudsEffectInstance,
+    flamesEffectInstance,
+    rainbowTextEffectInstance,
+    crtRollingBarEffectInstance,
+    pipboyVignetteEffectInstance,
+    pipboyBarEffectInstance,
+    brightnessValue,
+    gainValue,
+    colorMatrixEffectInstance,
+    filterFunctions,
+    currentFilterIndex,
+    time,
+    lightColorMode,
+    rotationEnabled,
+    showLightVisualizers,
+    customLightsEnabled,
+    currentMaterial,
+    manualMaterialSelection,
+    specularMapEnabled,
+    normalMapEnabled,
+    emissiveMapEnabled,
+    parentContainer,
+    backgroundBox,
+    lightVizText,
+    lightColorText,
+    customLightsText,
+    materialToggleText,
+    textureEffectsText,
+    filterStatusText,
+    param1StatusText,
+    param2StatusText,
+    controlsText,
+    keyHandler,
+    resizeHandler,
+    frameCallbackId: true,
+  }
+}
+
+export function destroy(renderer: CliRenderer): void {
+  if (!demoState) return
+
+  renderer.keyInput.off("keypress", demoState.keyHandler)
+  renderer.root.removeListener("resize", demoState.resizeHandler)
+
+  if (demoState.frameCallbackId) {
+    renderer.clearFrameCallbacks()
+  }
+
+  demoState.engine.destroy()
+  renderer.clearPostProcessFns()
+
+  renderer.root.remove("shader-cube-main")
+  renderer.root.remove("shader-cube-container")
+
+  demoState = null
+}
+
+if (import.meta.main) {
+  const renderer = await createCliRenderer({
+    exitOnCtrlC: true,
+    targetFps: 60,
+  })
+
+  await run(renderer)
+  setupCommonDemoKeys(renderer)
+}