@fairyhunter13/opentui-core 0.1.88 → 0.1.90

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

@@ -0,0 +1,772 @@
+#!/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 { DistortionEffect, VignetteEffect, BrightnessEffect, BlurEffect, BloomEffect } from "../post/filters.js"
+import type { OptimizedBuffer } from "../buffer.js"
+import { ThreeCliRenderer } from "../3d.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
+  brightnessEffectInstance: BrightnessEffect
+  blurEffectInstance: BlurEffect
+  bloomEffectInstance: BloomEffect
+  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 = 2
+  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 brightnessEffectInstance = new BrightnessEffect()
+  const blurEffectInstance = new BlurEffect(1)
+  const bloomEffectInstance = new BloomEffect(0.7, 0.3, 2)
+
+  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: "Grayscale", func: (buf, _dt) => Filters.applyGrayscale(buf) },
+    { name: "Sepia", func: (buf, _dt) => Filters.applySepia(buf) },
+    { name: "Invert", func: (buf, _dt) => Filters.applyInvert(buf) },
+    { name: "Noise", func: (buf, _dt) => Filters.applyNoise(buf, 0.05) },
+    { name: "Blur", func: blurEffectInstance.apply.bind(blurEffectInstance) },
+    { name: "Chromatic Aberration", func: (buf, _dt) => Filters.applyChromaticAberration(buf, 2) },
+    { name: "ASCII Art", func: (buf, _dt) => Filters.applyAsciiArt(buf) },
+    { name: "Bloom", func: bloomEffectInstance.apply.bind(bloomEffectInstance) },
+    { name: "Distortion", func: distortionEffectInstance.apply.bind(distortionEffectInstance) },
+    { name: "Brightness", func: brightnessEffectInstance.apply.bind(brightnessEffectInstance) },
+  ]
+
+  // 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 | [/]{/} Param Adjust",
+    position: "absolute",
+    left: 0,
+    top: HEIGHT - 2,
+    fg: "#FFFFFF",
+    zIndex: 20,
+  })
+  parentContainer.add(controlsText)
+
+  function updateParameterUI() {
+    const selectedFilter = filterFunctions[currentFilterIndex]
+    let param1Text = ""
+    let param2Text = ""
+    let param1Visible = false
+    let param2Visible = false
+
+    switch (selectedFilter.name) {
+      case "Distortion":
+        param1Text = `Distortion Chance: ${distortionEffectInstance.glitchChancePerSecond.toFixed(2)} ([/])`
+        param2Text = `Distortion Lines: ${distortionEffectInstance.maxGlitchLines} ({/})`
+        param1Visible = true
+        param2Visible = true
+        break
+      case "Vignette":
+        param1Text = `Vignette Strength: ${vignetteEffectInstance.strength.toFixed(2)} ([/])`
+        param1Visible = true
+        break
+      case "Brightness":
+        param1Text = `Brightness Factor: ${brightnessEffectInstance.brightness.toFixed(2)} ([/])`
+        param1Visible = true
+        break
+      case "Blur":
+        param1Text = `Blur Radius: ${blurEffectInstance.radius} ([/])`
+        param1Visible = true
+        break
+      case "Bloom":
+        param1Text = `Bloom Strength: ${bloomEffectInstance.strength.toFixed(2)} ([/])`
+        param2Text = `Bloom Radius: ${bloomEffectInstance.radius} ({/})`
+        param1Visible = true
+        param2Visible = true
+        break
+    }
+
+    param1StatusText.content = param1Text
+    param1StatusText.visible = param1Visible
+    param2StatusText.content = param2Text
+    param2StatusText.visible = param2Visible
+  }
+
+  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(0.5)
+    else if (key.name === "s") cameraNode.translateY(-0.5)
+    else if (key.name === "a") cameraNode.translateX(-0.5)
+    else if (key.name === "d") cameraNode.translateX(0.5)
+    if (key.name === "q") cameraNode.rotateY(0.1)
+    else if (key.name === "e") cameraNode.rotateY(-0.1)
+    if (key.name === "z") cameraNode.translateZ(1)
+    else if (key.name === "x") cameraNode.translateZ(-1)
+    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()
+    }
+
+    // Toggle debug mode for console caller info
+    if (key.name === "k") {
+      renderer.console.toggleDebugMode()
+    }
+
+    // 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()
+    }
+
+    // Parameter Adjustment Keys ([ / ] and { / })
+    let paramChanged = false
+    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":
+          brightnessEffectInstance.brightness = Math.max(0, brightnessEffectInstance.brightness - 0.05)
+          paramChanged = true
+          break
+        case "Blur":
+          blurEffectInstance.radius = Math.max(0, blurEffectInstance.radius - 1)
+          paramChanged = true
+          break
+        case "Bloom":
+          bloomEffectInstance.strength = Math.max(0, bloomEffectInstance.strength - 0.05)
+          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":
+          brightnessEffectInstance.brightness = Math.min(50, brightnessEffectInstance.brightness + 0.05)
+          paramChanged = true
+          break
+        case "Blur":
+          blurEffectInstance.radius = Math.min(50, blurEffectInstance.radius + 1)
+          paramChanged = true
+          break
+        case "Bloom":
+          bloomEffectInstance.strength = Math.min(25, bloomEffectInstance.strength + 0.05)
+          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 "Bloom":
+          bloomEffectInstance.radius = Math.max(0, bloomEffectInstance.radius - 1)
+          paramChanged = true
+          break
+      }
+    } else if (key.name === "}") {
+      switch (currentFilterName) {
+        case "Distortion":
+          distortionEffectInstance.maxGlitchLines = Math.min(height - 1, distortionEffectInstance.maxGlitchLines + 1)
+          paramChanged = true
+          break
+        case "Bloom":
+          bloomEffectInstance.radius = Math.min(20, bloomEffectInstance.radius + 1)
+          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,
+    brightnessEffectInstance,
+    blurEffectInstance,
+    bloomEffectInstance,
+    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)
+}