@directivegames/genesys.js 3.1.24

package/games/postprocess-demo.ts

@@ -0,0 +1,867 @@
+import * as dat from 'dat.gui';
+import * as ENGINE from 'genesys.js';
+import { ObjectOutlineEffect } from 'genesys.js';
+import * as THREE from 'three';
+
+/**
+ * PostprocessDemo - Demonstrates post-processing effects with sphere meshes loaded from world data
+ *
+ * Features:
+ * - World loading: Scene objects are loaded from serialized world data instead of direct creation
+ * - 1 GLTF sphere with material file loading from dev/materials and shaders folders
+ * - 1 primitive sphere with customizable material properties
+ * - 1 billboard sprite with texture loading capabilities
+ * - Material file system supporting various material types (PBR, shader-based, matcap)
+ * - Option to disable material override and use original GLB materials
+ * - GUI controls for toggling mesh visibility and material properties
+ * - Post-processing effects: Bloom, SMAA anti-aliasing, Tone mapping
+ * - Outline effects: PostProcess Outline (selection-based) and Edge Outline (shader-based)
+ * - Environment controls: skybox intensity and background blur
+ * - Error handling with fallback to direct object creation
+ * - Debug tools for inspecting actor and material states
+ */
+export class PostprocessDemo extends ENGINE.BaseGameLoop {
+  private gui: dat.GUI;
+  private skyboxComponent: ENGINE.SkyboxComponent | null = null;
+  private gltfMesh: ENGINE.Actor | null = null;
+  private primitiveMesh: ENGINE.Actor | null = null;
+  private billboardActor: ENGINE.Actor | null = null;
+  private groundActor: ENGINE.Actor | null = null;
+  private damagedHelmet: ENGINE.Actor | null = null;
+  private shipWreck: ENGINE.Actor | null = null;
+  private currentMaterialFile: string = '@engine/assets/dev/materials/MetalGoldPaint.json';
+  private pawn: ENGINE.Pawn | null = null;
+  private verticalMovement: number = 0; // -1 for down (Q), 1 for up (E), 0 for none
+  private verticalSpeed: number = 50; // units per second
+
+  constructor(container: HTMLElement) {
+    super(container);
+    this.gui = new dat.GUI({ width: 400 });
+  }
+
+  protected override async preStart(): Promise<void> {
+    // Create default lighting and player
+    ENGINE.GameBuilder.createDefaultLighting(this.world, false);
+    this.groundActor = ENGINE.GameBuilder.createDefaultGround(this.world);
+
+    // Create skybox with HDR environment
+    this.skyboxComponent = ENGINE.GameBuilder.createDefaultSkybox(this.world, {
+      ...ENGINE.SkyboxComponent.DEFAULT_OPTIONS,
+      envMapIntensity: 1.2,
+    });
+
+    // Create player/camera
+    const { pawn } = ENGINE.GameBuilder.createDefaultPawn(this.world);
+    this.pawn = pawn;
+    pawn.rootComponent.setWorldPosition(ENGINE.MathHelpers.makeVector({ forward: -8, right: 0, up: 3 }));
+    // Increase camera movement speed
+    if (pawn.movementComponent instanceof ENGINE.CharacterMovementComponent) {
+      pawn.movementComponent.options.maxSpeed = 50; // Increased from default 5
+    }
+    // Setup E/Q vertical movement
+    this.setupVerticalMovement();
+
+    // Enable camera visibility layers to match editor behavior
+    this.world.postProcessManager.setUseCameraVisibilityLayers(true);
+
+    // Setup GUI controls (will be populated after world loading)
+    this.setupGUIControls();
+
+    // Load world data after a short delay to ensure world is fully initialized
+    setTimeout(() => {
+      this.createSceneObjects();
+    }, 100);
+  }
+
+
+  private async createSceneObjects(): Promise<void> {
+    this.createObjectsDirectly();
+  }
+
+  private createObjectsDirectly(): void {
+    console.log('🏗️ Creating objects directly (fallback method)...');
+
+    const sphereHeight = 3; // Slightly higher to ensure visibility
+
+    // Create primitive sphere directly
+    this.primitiveMesh = new ENGINE.Actor({
+      name: 'primitiveSphere',
+      rootComponent: new ENGINE.MeshComponent({
+        geometry: new THREE.SphereGeometry(1.5, 32, 16),
+        material: new THREE.MeshStandardMaterial({
+          color: 0x4a90e2,
+          roughness: 0.1,
+          metalness: 0.9,
+          emissive: 0x001122,
+          emissiveIntensity: 0.2
+        })
+      }),
+      position: new THREE.Vector3(4, sphereHeight, 0)
+    });
+    this.world.addActor(this.primitiveMesh);
+
+    // Create GLTF actor directly
+    this.gltfMesh = new ENGINE.Actor({
+      name: 'gltfMesh',
+      rootComponent: new ENGINE.GLTFMeshComponent({
+        modelUrl: '@engine/assets/models/SM_ChamferCube.glb',
+        scale: new THREE.Vector3(2, 2, 2)
+      }),
+      position: new THREE.Vector3(-2, sphereHeight, 0)
+    });
+    this.world.addActor(this.gltfMesh);
+
+    // Create billboard actor directly
+    this.billboardActor = new ENGINE.Actor({
+      name: 'billboardSprite',
+      rootComponent: new ENGINE.BillboardComponent({
+        imageUrl: '@engine/assets/dev/textures/T_Checker_01.png',
+        depthTest: true,
+        depthWrite: true,
+        transparent: true
+      }),
+      position: new THREE.Vector3(4, sphereHeight + 3, 0), // Above primitive sphere
+      scale: new THREE.Vector3(3, 3, 1) // Make it same size as sphere (radius 1.5 * 2 = 3)
+    });
+    this.world.addActor(this.billboardActor);
+
+    // Create damaged helmet actor directly
+    this.damagedHelmet = new ENGINE.Actor({
+      name: 'damagedHelmet',
+      rootComponent: new ENGINE.GLTFMeshComponent({
+        modelUrl: '@engine/assets/dev/models/DamagedHelmet.glb',
+        scale: new THREE.Vector3(1.5, 1.5, 1.5)
+      }),
+      position: new THREE.Vector3(0, sphereHeight + 1, -4)
+    });
+    this.world.addActor(this.damagedHelmet);
+
+    // Create ship wreck actor directly
+    this.shipWreck = new ENGINE.Actor({
+      name: 'shipWreck',
+      rootComponent: new ENGINE.GLTFMeshComponent({
+        modelUrl: '@engine/assets/models/demo/LowPoly/low_poly_ship_wreck.glb',
+        scale: new THREE.Vector3(1, 1, 1)
+      }),
+      position: new THREE.Vector3(-4, sphereHeight, 4)
+    });
+    this.world.addActor(this.shipWreck);
+
+    // Apply material to GLTF actor
+    this.applyMaterialToGLTFActor();
+
+    console.log('✅ Objects created directly at positions:');
+    console.log('🎯 Primitive sphere:', this.primitiveMesh.getWorldPosition());
+    console.log('🎯 GLTF mesh:', this.gltfMesh.getWorldPosition());
+    console.log('🎯 Billboard:', this.billboardActor.getWorldPosition());
+    console.log('🎯 Damaged Helmet:', this.damagedHelmet.getWorldPosition());
+    console.log('🎯 Ship Wreck:', this.shipWreck.getWorldPosition());
+  }
+
+  private applyMaterialToGLTFActor(): void {
+    if (this.gltfMesh) {
+      const gltfComponent = this.gltfMesh.rootComponent as ENGINE.GLTFMeshComponent;
+
+      console.log('🎨 Applying material to GLTF actor:', this.currentMaterialFile);
+      gltfComponent.setMaterial(this.currentMaterialFile);
+    }
+  }
+
+  private setupGUIControls(): void {
+    // Mesh visibility controls
+    const meshSettings = {
+      showGLTFMesh: true,
+      showPrimitive: true,
+      showBillboard: true,
+      showDamagedHelmet: true,
+      showShipWreck: true,
+      showGround: true
+    };
+
+    const meshFolder = this.gui.addFolder('🎭 Mesh Controls');
+    meshFolder.open();
+
+    meshFolder.add(meshSettings, 'showGLTFMesh').name('Show GLTF (Material File)').onChange((value: boolean) => {
+      if (this.gltfMesh) {
+        this.gltfMesh.setHidden(!value);
+        console.log('🎭 GLTF Sphere visibility:', value);
+      }
+    });
+
+    meshFolder.add(meshSettings, 'showPrimitive').name('Show Primitive Sphere').onChange((value: boolean) => {
+      if (this.primitiveMesh) {
+        this.primitiveMesh.setHidden(!value);
+        console.log('🎭 Primitive sphere visibility:', value);
+      }
+    });
+
+    meshFolder.add(meshSettings, 'showBillboard').name('Show Billboard Sprite').onChange((value: boolean) => {
+      if (this.billboardActor) {
+        this.billboardActor.setHidden(!value);
+        console.log('🎭 Billboard sprite visibility:', value);
+      }
+    });
+
+    meshFolder.add(meshSettings, 'showDamagedHelmet').name('Show Damaged Helmet').onChange((value: boolean) => {
+      if (this.damagedHelmet) {
+        this.damagedHelmet.setHidden(!value);
+        console.log('🎭 Damaged Helmet visibility:', value);
+      }
+    });
+
+    meshFolder.add(meshSettings, 'showShipWreck').name('Show Ship Wreck').onChange((value: boolean) => {
+      if (this.shipWreck) {
+        this.shipWreck.setHidden(!value);
+        console.log('🎭 Ship Wreck visibility:', value);
+      }
+    });
+
+    meshFolder.add(meshSettings, 'showGround').name('Show Ground').onChange((value: boolean) => {
+      if (this.groundActor) {
+        this.groundActor.setHidden(!value);
+        console.log('🎭 Ground visibility:', value);
+      }
+    });
+
+    // Material controls
+    const materialSettings = {
+      materialFile: 'dev/materials/MetalGoldPaint.json',
+      billboardTexture: '@engine/assets/dev/textures/T_Checker_01.png',
+      primitiveColor: [74, 144, 226],
+      primitiveRoughness: 0.1,
+      primitiveMetalness: 0.9,
+      primitiveEmissiveIntensity: 0.2
+    };
+
+    const materialFolder = this.gui.addFolder('🎨 Material Controls');
+    materialFolder.open();
+
+    // Material file controls for GLTF Sphere
+    const materialFileFolder = materialFolder.addFolder('GLTF Sphere Material File');
+    materialFileFolder.open();
+
+    // Available material files from different folders
+    const availableMaterialFiles = [
+      // Dev materials (PBR with textures) - Vibrant and varied
+      'dev/materials/GroundSand005.json',
+      'dev/materials/MetalGoldPaint.json',
+      'dev/materials/TerrazzoSlab.json',
+      'dev/materials/MosaicPennyTiles.json',
+      'dev/materials/PoolTiles.json',
+      'dev/materials/CorrodedMetal.json',
+      'dev/materials/BoucleFabric.json',
+      // Shader materials (procedural/simple)
+      'shaders/M_Chrome.material.json',
+      'shaders/M_Emissive_Blue.material.json',
+      'shaders/M_Glossy_Grey.material.json',
+      'shaders/M_Matte_White.material.json',
+      'shaders/matcap/M_Matcap_Blue.material.json',
+      'shaders/matcap/M_Matcap_White.material.json',
+      // Option to disable material override
+      'None (Original GLB Material)'
+    ];
+
+    materialFileFolder.add(materialSettings, 'materialFile', availableMaterialFiles).name('Material File').onChange((value: string) => {
+      this.updateMaterialFile(value);
+    });
+
+    // Billboard texture controls
+    const billboardFolder = materialFolder.addFolder('Billboard Sprite Texture');
+    billboardFolder.open();
+
+    // Available texture files
+    const availableTextures = [
+      'Empty (No Texture)',
+      '@engine/assets/dev/textures/T_Checker_01.png',
+      'dev/T_Checker_02.png',
+      'dev/T_Grid_01.png',
+      'dev/T_Noise_01.png',
+      'dev/T_UV_Test.png',
+      'dev/T_White.png',
+      'dev/T_Black.png',
+      'dev/T_Red.png',
+      'dev/T_Green.png',
+      'dev/T_Blue.png',
+      'textures/grass.png',
+      'textures/rock.png',
+      'textures/sand.png',
+      'textures/snow.png'
+    ];
+
+    billboardFolder.add(materialSettings, 'billboardTexture', availableTextures).name('Texture').onChange((value: string) => {
+      this.updateBillboardTexture(value);
+    });
+
+    // Billboard size and material controls
+    const billboardSettings = {
+      size: 3.0,
+      depthTest: true,
+      depthWrite: true,
+      transparent: true
+    };
+
+    billboardFolder.add(billboardSettings, 'size', 0.5, 10.0, 0.1).name('Size').onChange((value: number) => {
+      if (this.billboardActor) {
+        this.billboardActor.setWorldScale(new THREE.Vector3(value, value, 1));
+        console.log('📏 Billboard size updated:', value);
+      }
+    });
+
+    billboardFolder.add(billboardSettings, 'depthTest').name('Depth Test').onChange((value: boolean) => {
+      if (this.billboardActor) {
+        const billboardComponent = this.billboardActor.rootComponent as ENGINE.BillboardComponent;
+        const spriteMaterial = (billboardComponent as any).spriteMaterial;
+        if (spriteMaterial) {
+          spriteMaterial.depthTest = value;
+          spriteMaterial.needsUpdate = true;
+          console.log('🔍 Billboard depth test:', value);
+        }
+      }
+    });
+
+    billboardFolder.add(billboardSettings, 'depthWrite').name('Depth Write').onChange((value: boolean) => {
+      if (this.billboardActor) {
+        const billboardComponent = this.billboardActor.rootComponent as ENGINE.BillboardComponent;
+        const spriteMaterial = (billboardComponent as any).spriteMaterial;
+        if (spriteMaterial) {
+          spriteMaterial.depthWrite = value;
+          spriteMaterial.needsUpdate = true;
+          console.log('✍️ Billboard depth write:', value);
+        }
+      }
+    });
+
+    billboardFolder.add(billboardSettings, 'transparent').name('Transparent').onChange((value: boolean) => {
+      if (this.billboardActor) {
+        const billboardComponent = this.billboardActor.rootComponent as ENGINE.BillboardComponent;
+        const spriteMaterial = (billboardComponent as any).spriteMaterial;
+        if (spriteMaterial) {
+          spriteMaterial.transparent = value;
+          spriteMaterial.needsUpdate = true;
+          console.log('👻 Billboard transparent:', value);
+        }
+      }
+    });
+
+
+    // Primitive material controls
+    const primitiveFolder = materialFolder.addFolder('Primitive Material');
+    primitiveFolder.open();
+
+    primitiveFolder.addColor(materialSettings, 'primitiveColor').name('Color').onChange((value: number[]) => {
+      if (this.primitiveMesh) {
+        try {
+          const meshComponent = this.primitiveMesh.rootComponent as ENGINE.MeshComponent;
+          const mesh = meshComponent.getMesh();
+          if (mesh && mesh.material instanceof THREE.MeshStandardMaterial) {
+            mesh.material.color.setRGB(value[0] / 255, value[1] / 255, value[2] / 255);
+            console.log('🎨 Updated primitive color:', value);
+          } else {
+            console.warn('⚠️ Primitive mesh material not found or wrong type');
+          }
+        } catch (error) {
+          console.error('❌ Error updating primitive color:', error);
+        }
+      }
+    });
+
+    primitiveFolder.add(materialSettings, 'primitiveRoughness', 0, 1, 0.01).name('Roughness').onChange((value: number) => {
+      if (this.primitiveMesh) {
+        try {
+          const meshComponent = this.primitiveMesh.rootComponent as ENGINE.MeshComponent;
+          const mesh = meshComponent.getMesh();
+          if (mesh && mesh.material instanceof THREE.MeshStandardMaterial) {
+            mesh.material.roughness = value;
+            console.log('🎨 Updated primitive roughness:', value);
+          } else {
+            console.warn('⚠️ Primitive mesh material not found or wrong type');
+          }
+        } catch (error) {
+          console.error('❌ Error updating primitive roughness:', error);
+        }
+      }
+    });
+
+    primitiveFolder.add(materialSettings, 'primitiveMetalness', 0, 1, 0.01).name('Metalness').onChange((value: number) => {
+      if (this.primitiveMesh) {
+        try {
+          const meshComponent = this.primitiveMesh.rootComponent as ENGINE.MeshComponent;
+          const mesh = meshComponent.getMesh();
+          if (mesh && mesh.material instanceof THREE.MeshStandardMaterial) {
+            mesh.material.metalness = value;
+            console.log('🎨 Updated primitive metalness:', value);
+          } else {
+            console.warn('⚠️ Primitive mesh material not found or wrong type');
+          }
+        } catch (error) {
+          console.error('❌ Error updating primitive metalness:', error);
+        }
+      }
+    });
+
+    primitiveFolder.add(materialSettings, 'primitiveEmissiveIntensity', 0, 1, 0.01).name('Emissive Intensity').onChange((value: number) => {
+      if (this.primitiveMesh) {
+        try {
+          const meshComponent = this.primitiveMesh.rootComponent as ENGINE.MeshComponent;
+          const mesh = meshComponent.getMesh();
+          if (mesh && mesh.material instanceof THREE.MeshStandardMaterial) {
+            mesh.material.emissiveIntensity = value;
+            console.log('🎨 Updated primitive emissive intensity:', value);
+          } else {
+            console.warn('⚠️ Primitive mesh material not found or wrong type');
+          }
+        } catch (error) {
+          console.error('❌ Error updating primitive emissive intensity:', error);
+        }
+      }
+    });
+
+    // Outline effects controls
+    this.setupOutlineControls();
+
+    // Postprocess controls
+    this.setupPostprocessControls();
+
+    // Add debug button to check current state
+    const debugFolder = this.gui.addFolder('🔍 Debug');
+    debugFolder.add({ checkState: () => this.debugCurrentState() }, 'checkState').name('Check Current State');
+  }
+
+  private debugCurrentState(): void {
+    console.log('🔍 === DEBUG: Current State ===');
+    console.log('Actors:', {
+      gltfMesh: !!this.gltfMesh,
+      primitiveMesh: !!this.primitiveMesh,
+      billboardActor: !!this.billboardActor,
+      damagedHelmet: !!this.damagedHelmet,
+      shipWreck: !!this.shipWreck
+    });
+    console.log('Materials:', {
+      currentMaterialFile: this.currentMaterialFile
+    });
+
+    if (this.gltfMesh) {
+      const gltfComponent = this.gltfMesh.rootComponent as ENGINE.GLTFMeshComponent;
+      const model = gltfComponent.getModel();
+      console.log('GLTF Mesh:', {
+        hasModel: !!model,
+        modelLoaded: gltfComponent.isModelLoaded()
+      });
+
+      if (model) {
+        model.traverse((child) => {
+          if (child instanceof THREE.Mesh) {
+            console.log('GLTF Mesh Material:', {
+              name: child.name,
+              materialType: child.material.constructor.name,
+              isStandardMaterial: child.material instanceof THREE.MeshStandardMaterial,
+              materialId: child.material.id
+            });
+          }
+        });
+      }
+    }
+
+    if (this.primitiveMesh) {
+      const meshComponent = this.primitiveMesh.rootComponent as ENGINE.MeshComponent;
+      const mesh = meshComponent.getMesh();
+      if (mesh && mesh.material instanceof THREE.MeshStandardMaterial) {
+        console.log('Primitive Material Properties:', {
+          color: mesh.material.color.getHex(),
+          roughness: mesh.material.roughness,
+          metalness: mesh.material.metalness,
+          emissiveIntensity: mesh.material.emissiveIntensity
+        });
+      }
+    }
+
+    if (this.billboardActor) {
+      const billboardComponent = this.billboardActor.rootComponent as ENGINE.BillboardComponent;
+      console.log('Billboard Component:', {
+        componentType: billboardComponent.constructor.name,
+        hasSprite: !!(billboardComponent as any).sprite,
+        position: this.billboardActor.getWorldPosition()
+      });
+    }
+    console.log('🔍 === END DEBUG ===');
+  }
+
+
+  private setupOutlineControls(): void {
+    const outlineSettings = {
+      // outlineType: 'None',
+      outlineType: 'PostProcess Outline',
+      // PostProcess outline settings
+      postprocessEdgeThickeness: 1,
+      postprocessEdgeIntensity: 100,
+      postprocessVisibleEdgeColor: [255, 255, 255],
+      // Edge outline settings
+      edgeThickness: 5,
+      edgeColor: [255, 255, 255],
+      edgeAlpha: 1.0
+    };
+
+    const outlineFolder = this.gui.addFolder('🔲 Outline Effects');
+    outlineFolder.open();
+
+    // Outline type selector
+    const outlineTypes = ['None', 'PostProcess Outline', 'Edge Outline'];
+    outlineFolder.add(outlineSettings, 'outlineType', outlineTypes).name('Outline Type').onChange((value: string) => {
+      const postProcessManager = this.world.postProcessManager;
+
+      // Disable all outline types first and clear selections
+      postProcessManager.configureEffect(ENGINE.PostProcessPass.ObjectOutline, { enabled: false });
+      postProcessManager.configureEffect(ENGINE.PostProcessPass.EdgeOutline, { enabled: false });
+
+      // Clear both outline selections
+      const outlineEffect = postProcessManager.getEffectFromPass(ENGINE.PostProcessPass.ObjectOutline, ObjectOutlineEffect);
+      if (outlineEffect) {
+        outlineEffect.selection.clear();
+      }
+      postProcessManager.getEdgeOutlineEffect()?.clearSelection();
+
+      // Enable the selected type and add all objects
+      if (value === 'PostProcess Outline') {
+        postProcessManager.configureEffect(ENGINE.PostProcessPass.ObjectOutline, { enabled: true });
+        if (outlineEffect) {
+          const actors = [this.gltfMesh, this.primitiveMesh, this.billboardActor, this.damagedHelmet, this.shipWreck, this.groundActor].filter((a): a is ENGINE.Actor => a !== null);
+          outlineEffect.addSelectedActors(actors);
+        }
+        console.log('🔲 PostProcess Outline enabled with all objects.');
+      } else if (value === 'Edge Outline') {
+        postProcessManager.configureEffect(ENGINE.PostProcessPass.EdgeOutline, {
+          enabled: true,
+          thickness: outlineSettings.edgeThickness,
+          color: (outlineSettings.edgeColor[0] << 16) | (outlineSettings.edgeColor[1] << 8) | outlineSettings.edgeColor[2],
+          alpha: outlineSettings.edgeAlpha
+        });
+        // Add all objects to Edge Outline
+        const actors = [this.gltfMesh, this.primitiveMesh, this.billboardActor, this.damagedHelmet, this.shipWreck, this.groundActor].filter((a): a is ENGINE.Actor => a !== null);
+        if (actors.length > 0) {
+          postProcessManager.getEdgeOutlineEffect()?.addSelectedActors(actors);
+        }
+        console.log('🔲 Edge Outline enabled with all objects.');
+      } else {
+        console.log('🔲 All outlines disabled.');
+      }
+    });
+
+    // PostProcess Outline Settings
+    const postProcessFolder = outlineFolder.addFolder('PostProcess Outline Settings');
+    postProcessFolder.open();
+    postProcessFolder.add(outlineSettings, 'postprocessEdgeThickeness', 0, 10, 0.01).name('Edge Thickness').onChange((value: number) => {
+      this.world.postProcessManager.configureEffect(ENGINE.PostProcessPass.ObjectOutline, { edgeThickness: value });
+    });
+
+    postProcessFolder.add(outlineSettings, 'postprocessEdgeIntensity', 0, 200, 1).name('Edge Intensity').onChange((value: number) => {
+      this.world.postProcessManager.configureEffect(ENGINE.PostProcessPass.ObjectOutline, { edgeIntensity: value });
+    });
+
+    postProcessFolder.addColor(outlineSettings, 'postprocessVisibleEdgeColor').name('Visible Edge Color').onChange((value: number[]) => {
+      const color = (value[0] << 16) | (value[1] << 8) | value[2];
+      this.world.postProcessManager.configureEffect(ENGINE.PostProcessPass.ObjectOutline, { visibleEdgeColor: color });
+    });
+
+    // Edge Outline Settings
+    const edgeFolder = outlineFolder.addFolder('Edge Outline Settings');
+    edgeFolder.open();
+    edgeFolder.add(outlineSettings, 'edgeThickness', 0, 10, 0.1).name('Thickness').onChange((value: number) => {
+      this.world.postProcessManager.configureEffect(ENGINE.PostProcessPass.EdgeOutline, { thickness: value });
+      console.log('🔲 Edge outline thickness updated:', value);
+    });
+
+    edgeFolder.addColor(outlineSettings, 'edgeColor').name('Color').onChange((value: number[]) => {
+      const color = (value[0] << 16) | (value[1] << 8) | value[2];
+      this.world.postProcessManager.configureEffect(ENGINE.PostProcessPass.EdgeOutline, { color });
+      console.log('🔲 Edge outline color updated:', value);
+    });
+
+    edgeFolder.add(outlineSettings, 'edgeAlpha', 0, 1, 0.01).name('Alpha').onChange((value: number) => {
+      this.world.postProcessManager.configureEffect(ENGINE.PostProcessPass.EdgeOutline, { alpha: value });
+      console.log('🔲 Edge outline alpha updated:', value);
+    });
+
+    console.log('🔲 Outline controls initialized!');
+
+    // Apply initial outline type after a short delay to ensure PostProcessManager is ready
+    setTimeout(() => {
+      if (outlineSettings.outlineType !== 'None') {
+        const postProcessManager = this.world.postProcessManager;
+        const outlineEffect = postProcessManager.getEffectFromPass(ENGINE.PostProcessPass.ObjectOutline, ObjectOutlineEffect);
+
+        if (outlineSettings.outlineType === 'PostProcess Outline') {
+          postProcessManager.configureEffect(ENGINE.PostProcessPass.ObjectOutline, { enabled: true });
+          // Add all objects to PostProcess outline
+          if (outlineEffect && this.gltfMesh && this.primitiveMesh && this.billboardActor && this.damagedHelmet && this.shipWreck && this.groundActor) {
+            outlineEffect.addSelectedActor(this.gltfMesh);
+            outlineEffect.addSelectedActor(this.primitiveMesh);
+            outlineEffect.addSelectedActor(this.billboardActor);
+            outlineEffect.addSelectedActor(this.damagedHelmet);
+            outlineEffect.addSelectedActor(this.shipWreck);
+            outlineEffect.addSelectedActor(this.groundActor);
+          }
+          console.log('🔲 Initial PostProcess Outline enabled with all objects.');
+        } else if (outlineSettings.outlineType === 'Edge Outline') {
+          postProcessManager.configureEffect(ENGINE.PostProcessPass.EdgeOutline, {
+            enabled: true,
+            thickness: outlineSettings.edgeThickness,
+            color: (outlineSettings.edgeColor[0] << 16) | (outlineSettings.edgeColor[1] << 8) | outlineSettings.edgeColor[2],
+            alpha: outlineSettings.edgeAlpha
+          });
+          // Add all objects to Edge Outline
+          const actors = [this.gltfMesh, this.primitiveMesh, this.billboardActor, this.damagedHelmet, this.shipWreck, this.groundActor].filter((a): a is ENGINE.Actor => a !== null);
+          if (actors.length > 0) {
+            postProcessManager.getEdgeOutlineEffect()?.addSelectedActors(actors);
+          }
+          console.log('🔲 Initial Edge Outline enabled with all objects.');
+        }
+      }
+    }, 1000); // Small delay to ensure PostProcessManager is fully initialized
+  }
+
+  private setupPostprocessControls(): void {
+    const postProcessManager = this.world.postProcessManager;
+
+    // Get current configurations
+    const bloomConfig = postProcessManager.getEffectConfig(ENGINE.PostProcessPass.Bloom) as ENGINE.BloomEffectConfig;
+    const smaaConfig = postProcessManager.getEffectConfig(ENGINE.PostProcessPass.SMAA) as ENGINE.SMAAEffectConfig;
+    const toneMappingConfig = postProcessManager.getEffectConfig(ENGINE.PostProcessPass.ToneMapping) as ENGINE.ToneMappingEffectConfig;
+
+    const postProcessSettings = {
+      // Master toggle
+      enablePostProcessing: postProcessManager.getPostProcessingEnabled(),
+
+      // Bloom settings
+      enableBloom: bloomConfig?.enabled ?? false,
+      bloomIntensity: bloomConfig?.intensity ?? 2.0,
+      bloomThreshold: bloomConfig?.luminanceThreshold ?? 1.0,
+      bloomSmoothing: bloomConfig?.luminanceSmoothing ?? 0.2,
+      bloomRadius: bloomConfig?.radius ?? 0.85,
+      bloomLevels: bloomConfig?.levels ?? 8,
+
+      // Anti-aliasing settings
+      enableSMAA: smaaConfig?.enabled ?? false,
+
+      // Tone mapping settings
+      enableToneMapping: toneMappingConfig?.enabled ?? true,
+      toneMappingExposure: toneMappingConfig?.exposure ?? 0.25
+    };
+
+    const postProcessFolder = this.gui.addFolder('✨ Post-Processing Effects');
+    postProcessFolder.open();
+
+    // Master toggle for all post-processing
+    postProcessFolder.add(postProcessSettings, 'enablePostProcessing').name('🎛️ Enable Post-Processing').onChange((value: boolean) => {
+      postProcessManager.setPostProcessingEnabled(value);
+      console.log('🎛️ Post-processing enabled:', value);
+    });
+
+    // Bloom controls
+    const bloomFolder = postProcessFolder.addFolder('🌟 Bloom Effect');
+    bloomFolder.open();
+
+    bloomFolder.add(postProcessSettings, 'enableBloom').name('Enable Bloom').onChange((value: boolean) => {
+      postProcessManager.configureEffect(ENGINE.PostProcessPass.Bloom, { enabled: value });
+      console.log('🌟 Bloom enabled:', value);
+    });
+
+    bloomFolder.add(postProcessSettings, 'bloomIntensity', 0.0, 10.0, 0.1).name('Intensity').onChange((value: number) => {
+      postProcessManager.configureEffect(ENGINE.PostProcessPass.Bloom, { intensity: value });
+    });
+
+    bloomFolder.add(postProcessSettings, 'bloomThreshold', 0.0, 2.0, 0.01).name('Threshold').onChange((value: number) => {
+      postProcessManager.configureEffect(ENGINE.PostProcessPass.Bloom, { luminanceThreshold: value });
+    });
+
+    bloomFolder.add(postProcessSettings, 'bloomSmoothing', 0.0, 1.0, 0.01).name('Smoothing').onChange((value: number) => {
+      postProcessManager.configureEffect(ENGINE.PostProcessPass.Bloom, { luminanceSmoothing: value });
+    });
+
+    bloomFolder.add(postProcessSettings, 'bloomRadius', 0.0, 1.0, 0.01).name('Radius').onChange((value: number) => {
+      postProcessManager.configureEffect(ENGINE.PostProcessPass.Bloom, { radius: value });
+    });
+
+    bloomFolder.add(postProcessSettings, 'bloomLevels', 1, 9, 1).name('Levels').onChange((value: number) => {
+      postProcessManager.configureEffect(ENGINE.PostProcessPass.Bloom, { levels: value });
+    });
+
+    // Anti-aliasing controls
+    postProcessFolder.add(postProcessSettings, 'enableSMAA').name('🔧 Enable SMAA Anti-aliasing').onChange((value: boolean) => {
+      postProcessManager.configureEffect(ENGINE.PostProcessPass.SMAA, { enabled: value });
+      console.log('🔧 SMAA enabled:', value);
+    });
+
+    // Tone mapping controls
+    const toneMappingFolder = postProcessFolder.addFolder('🎞️ Tone Mapping');
+    toneMappingFolder.open();
+
+    toneMappingFolder.add(postProcessSettings, 'enableToneMapping').name('Enable Tone Mapping').onChange((value: boolean) => {
+      postProcessManager.configureEffect(ENGINE.PostProcessPass.ToneMapping, { enabled: value });
+      console.log('🎞️ Tone mapping enabled:', value);
+    });
+
+    const toneMappingModes = {
+      'Linear': ENGINE.ToneMappingMode.LINEAR,
+      'Reinhard': ENGINE.ToneMappingMode.REINHARD,
+      'Reinhard2': ENGINE.ToneMappingMode.REINHARD2,
+      'Reinhard2 Adaptive': ENGINE.ToneMappingMode.REINHARD2_ADAPTIVE,
+      'Uncharted2': ENGINE.ToneMappingMode.UNCHARTED2,
+      'Cineon': ENGINE.ToneMappingMode.CINEON,
+      'ACES Filmic': ENGINE.ToneMappingMode.ACES_FILMIC,
+      'AGX': ENGINE.ToneMappingMode.AGX,
+      'Neutral': ENGINE.ToneMappingMode.NEUTRAL,
+    };
+
+    const toneMappingModeSettings = { mode: 'Linear' };
+    toneMappingFolder.add(toneMappingModeSettings, 'mode', Object.keys(toneMappingModes)).name('Mode').onChange((value: string) => {
+      const mode = toneMappingModes[value as keyof typeof toneMappingModes];
+      postProcessManager.configureEffect(ENGINE.PostProcessPass.ToneMapping, { mode });
+      console.log('🎞️ Tone mapping mode:', value, mode);
+    });
+
+    toneMappingFolder.add(postProcessSettings, 'toneMappingExposure', 0.1, 3.0, 0.05).name('Exposure').onChange((value: number) => {
+      postProcessManager.configureEffect(ENGINE.PostProcessPass.ToneMapping, { exposure: value });
+    });
+
+    // Environment controls
+    const envSettings = {
+      envMapIntensity: 1,
+      backgroundBlurriness: 0.0
+    };
+
+    const envFolder = this.gui.addFolder('🌍 Environment');
+    envFolder.open();
+
+    envFolder.add(envSettings, 'envMapIntensity', 0.0, 3.0, 0.1).name('Environment Intensity').onChange((value: number) => {
+      if (this.skyboxComponent) {
+        // Update skybox environment intensity by recreating the skybox with new intensity
+        const currentOptions = this.skyboxComponent.options;
+        if ('textureUrl' in currentOptions) {
+          this.skyboxComponent.createTextureSkybox({
+            ...currentOptions,
+            envMapIntensity: value
+          });
+        } else {
+          this.skyboxComponent.createProceduralSkybox({
+            ...currentOptions,
+            envMapIntensity: value
+          });
+        }
+      }
+    });
+
+    envFolder.add(envSettings, 'backgroundBlurriness', 0.0, 1.0, 0.01).name('Background Blur').onChange((value: number) => {
+      this.world.scene.backgroundBlurriness = value;
+    });
+
+    console.log('✨ Post-processing controls initialized!');
+  }
+
+  private async updateMaterialFile(materialFileName: string): Promise<void> {
+    console.log('🎨 Updating material file to:', materialFileName);
+
+    if (this.gltfMesh) {
+      const gltfComponent = this.gltfMesh.rootComponent as ENGINE.GLTFMeshComponent;
+
+      try {
+        // Handle "None" option to use original GLB materials
+        if (materialFileName === 'None (Original GLB Material)') {
+          // Reset to original GLB materials by setting material to empty string
+          gltfComponent.setMaterial('');
+          this.currentMaterialFile = '';
+          console.log('✅ Reset to original GLB materials');
+          return;
+        }
+
+        // Build the full material path
+        const materialPath = `/assets/${materialFileName}`;
+        this.currentMaterialFile = materialPath;
+
+        // Load the new material via ResourceManager
+        const newMaterial = await ENGINE.resourceManager.loadGenericMaterial(materialPath);
+
+        if (newMaterial) {
+          // Apply the material to the GLTF component
+          gltfComponent.setMaterial(newMaterial);
+          console.log('✅ Material file updated successfully:', materialFileName);
+        } else {
+          console.error('❌ Failed to load material file:', materialFileName);
+        }
+      } catch (error) {
+        console.error('❌ Error loading material file:', error);
+      }
+    }
+  }
+
+  private async updateBillboardTexture(textureFileName: string): Promise<void> {
+    console.log('🖼️ Updating billboard texture to:', textureFileName);
+
+    if (this.billboardActor) {
+      const billboardComponent = this.billboardActor.rootComponent as ENGINE.BillboardComponent;
+
+      try {
+        // Handle "Empty" option to remove texture
+        if (textureFileName === 'Empty (No Texture)') {
+          await billboardComponent.loadSprite('');
+          console.log('✅ Billboard texture cleared');
+          return;
+        }
+
+        // Build the full texture path
+        const texturePath = `/assets/${textureFileName}`;
+
+        // Load the new texture
+        await billboardComponent.loadSprite(texturePath);
+        console.log('✅ Billboard texture updated successfully:', textureFileName);
+      } catch (error) {
+        console.error('❌ Error loading billboard texture:', error);
+      }
+    }
+  }
+
+  private setupVerticalMovement(): void {
+    if (!this.pawn) return;
+
+    // Intercept E/Q keys before PlayerController handles them
+    this.pawn.onKeyDown.add((e: KeyboardEvent) => {
+      const key = e.key.toLowerCase();
+      if (key === 'e') {
+        this.verticalMovement = 1; // Move up
+        return true; // Handled
+      } else if (key === 'q') {
+        this.verticalMovement = -1; // Move down
+        return true; // Handled
+      }
+      return false;
+    });
+
+    this.pawn.onKeyUp.add((e: KeyboardEvent) => {
+      const key = e.key.toLowerCase();
+      if (key === 'e' || key === 'q') {
+        this.verticalMovement = 0;
+        return true; // Handled
+      }
+      return false;
+    });
+  }
+
+  protected override tick(tickTime: ENGINE.TickTime): void {
+    // Apply vertical movement
+    if (this.pawn && this.verticalMovement !== 0) {
+      const deltaTime = tickTime.deltaTimeMS / 1000;
+      const verticalDelta = new THREE.Vector3(0, this.verticalMovement * this.verticalSpeed * deltaTime, 0);
+      this.pawn.rootComponent.addWorldPosition(verticalDelta);
+    }
+
+    // Tick the world first
+    this.world.tick(tickTime.deltaTimeMS / 1000);
+
+    // Render the world (PostProcessManager handles all effects including EdgeOutline)
+    this.renderer.render(this.world);
+  }
+
+  public override destroy(): void {
+    this.gui.destroy();
+    super.destroy();
+  }
+}