Feature: vibrant dancers

party-cathedral/src/core/animate.js

@@ -1,42 +1,9 @@
 import * as THREE from 'three';
 import { state } from '../state.js';
+import { onResizePostprocessing } from './postprocessing.js';
 import { updateScreenEffect } from '../scene/magic-mirror.js'
 import sceneFeatureManager from '../scene/SceneFeatureManager.js';
 
-function updateCamera() {
-    const globalTime = Date.now() * 0.0001;
-    const lookAtTime = Date.now() * 0.0002;
-
-    // Base Camera Position in front of the TV
-    const baseX = 0;
-    const baseY = 3.6;
-    const baseZ = -5.0;
-    const camAmplitude = new THREE.Vector3(1.0, 1.0, 6.0);
-
-    // Base LookAt target (Center of the screen)
-    const baseTargetX = 0;
-    const baseTargetY = 1.6;
-    const baseTargetZ = -30.0;
-    const lookAmplitude = 8.0;
-
-    // Camera Position Offsets (Drift)
-    const camOffsetX = Math.sin(globalTime * 3.1) * camAmplitude.x;
-    const camOffsetY = Math.cos(globalTime * 2.5) * camAmplitude.y;
-    const camOffsetZ = Math.cos(globalTime * 3.2) * camAmplitude.z;
-
-    state.camera.position.x = baseX + camOffsetX;
-    state.camera.position.y = baseY + camOffsetY;
-    state.camera.position.z = baseZ + camOffsetZ;
-
-    // LookAt Target Offsets (Subtle Gaze Shift)
-    const lookOffsetX = Math.sin(lookAtTime * 1.5) * lookAmplitude;
-    const lookOffsetZ = Math.cos(lookAtTime * 2.5) * lookAmplitude;
-    const lookOffsetY = Math.cos(lookAtTime * 1.2) * lookAmplitude * 0.5;
-
-    // Apply lookAt to the subtly shifted target
-    state.camera.lookAt(baseTargetX + lookOffsetX, baseTargetY + lookOffsetY, baseTargetZ + lookOffsetZ);
-}
-
 function updateScreenLight() {
     if (state.isVideoLoaded && state.screenLight.intensity > 0) {
         const pulseTarget = state.originalScreenIntensity + (Math.random() - 0.5) * state.screenIntensityPulse;
@@ -81,19 +48,23 @@ export function animate() {
 
     sceneFeatureManager.update(deltaTime);
     state.effectsManager.update();
-    updateCamera();
     updateScreenLight();
     updateVideo();
     updateShaderTime();
     updateScreenEffect();
 
     // RENDER!
+    if (state.composer) {
+        state.composer.render();
+    } else {
         state.renderer.render(state.scene, state.camera);
     }
+}
 
 // --- Window Resize Handler ---
 export function onWindowResize() {
     state.camera.aspect = window.innerWidth / window.innerHeight;
     state.camera.updateProjectionMatrix();
     state.renderer.setSize(window.innerWidth, window.innerHeight);
+    onResizePostprocessing();
 }

party-cathedral/src/core/init.js

@@ -3,7 +3,7 @@ import { state, initState } from '../state.js';
 import { EffectsManager } from '../effects/EffectsManager.js';
 import { createSceneObjects } from '../scene/root.js';
 import { animate, onWindowResize } from './animate.js';
-import { loadVideoFile, playNextVideo } from './video-player.js';
+import { initPostprocessing } from './postprocessing.js';
 
 // --- Initialization ---
 export function init() {
@@ -37,6 +37,8 @@ export function init() {
     // 9. Event Listeners
     window.addEventListener('resize', onWindowResize, false);
 
+    initPostprocessing();
+
     // Start the animation loop
     animate();
 }

party-cathedral/src/core/postprocessing.js

@@ -0,0 +1,34 @@
+import * as THREE from 'three';
+import { state } from '../state.js';
+import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer.js';
+import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass.js';
+import { OutputPass } from 'three/examples/jsm/postprocessing/OutputPass.js';
+import { UnrealBloomPass } from 'three/addons/postprocessing/UnrealBloomPass.js';
+
+export function initPostprocessing() {
+    const composer = new EffectComposer(state.renderer);
+
+    // 1. The first pass is always to render the scene itself.
+    const renderPass = new RenderPass(state.scene, state.camera);
+    composer.addPass(renderPass);
+
+    const resolution = new THREE.Vector2( window.innerWidth, window.innerHeight );
+    const bloomPass = new UnrealBloomPass( resolution, 0.9, 0.1, 0.6 );
+    composer.addPass( bloomPass );
+
+    // 3. Add an output pass to render the final result to the screen.
+    const outputPass = new OutputPass();
+    composer.addPass(outputPass);
+
+    // Store the composer and passes in the global state
+    state.composer = composer;
+}
+
+export function onResizePostprocessing() {
+    if (state.composer) {
+        state.composer.setSize(window.innerWidth, window.innerHeight);
+    }
+    if (state.ssaoPass) {
+        state.ssaoPass.setSize(window.innerWidth, window.innerHeight);
+    }
+}

party-cathedral/src/main.js

@@ -1,6 +1,5 @@
 import * as THREE from 'three';
 import { init } from './core/init.js';
-import { StainedGlass } from './scene/stained-glass-window.js';
 
 // Start everything
 init();

party-cathedral/src/scene/camera-manager.js

@@ -0,0 +1,142 @@
+import * as THREE from 'three';
+import { state } from '../state.js';
+import { SceneFeature } from './SceneFeature.js';
+import sceneFeatureManager from './SceneFeatureManager.js';
+
+const minSwitchInterval = 2;
+const maxSwitchInterval = 10;
+
+export class CameraManager extends SceneFeature {
+    constructor() {
+        super();
+        this.cameras = [];
+        this.activeCameraIndex = 0;
+        this.switchInterval = 10; // seconds
+        this.lastSwitchTime = 0;
+        sceneFeatureManager.register(this);
+    }
+
+    init() {
+        // The main camera from init.js is our first camera
+        const mainCamera = state.camera;
+        this.cameras.push({
+            camera: mainCamera,
+            type: 'dynamic',
+            name: 'MainDynamicCamera',
+            update: this.updateDynamicCamera, // Assign its update function
+        });
+
+        // --- Static Camera 1: Left Aisle View ---
+        const staticCam1 = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 100);
+        staticCam1.position.set(-5, 3, -13);
+        staticCam1.lookAt(0, 2, -18); // Look at the stage
+        this.cameras.push({
+            camera: staticCam1,
+            type: 'static',
+            name: 'LeftAisleCam'
+        });
+
+        // --- Static Camera 2: Right Aisle View ---
+        const staticCam2 = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 100);
+        staticCam2.position.set(5, 4, -12);
+        staticCam2.lookAt(0, 1.5, -18); // Look at the stage
+        this.cameras.push({
+            camera: staticCam2,
+            type: 'static',
+            name: 'RightAisleCam'
+        });
+
+        // --- Static Camera 3: Far-Back view ---
+        const staticCam3 = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 100);
+        staticCam3.position.set(0, 3, 12);
+        staticCam3.lookAt(0, 1.5, -20); // Look at the stage
+        this.cameras.push({
+            camera: staticCam3,
+            type: 'static',
+            name: 'BackCam'
+        });
+
+        // --- Static Camera 3: Back view ---
+        const staticCam4 = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 100);
+        staticCam4.position.set(0, 4, 0);
+        staticCam4.lookAt(0, 1.5, -20); // Look at the stage
+        this.cameras.push({
+            camera: staticCam4,
+            type: 'static',
+            name: 'BackCam'
+        });
+
+        // --- Add Debug Helpers ---
+        if (state.debugCamera) {
+            this.cameras.forEach(camData => {
+                const helper = new THREE.CameraHelper(camData.camera);
+                state.scene.add(helper);
+            });
+        }
+
+        this.lastSwitchTime = state.clock.getElapsedTime();
+        this.switchCamera(4);
+    }
+
+    // This is the logic moved from animate.js
+    updateDynamicCamera() {
+        const globalTime = Date.now() * 0.0001;
+        const lookAtTime = Date.now() * 0.0002;
+
+        const baseX = 0, baseY = 3.6, baseZ = -5.0;
+        const camAmplitude = new THREE.Vector3(1.0, 1.0, 6.0);
+
+        const baseTargetX = 0, baseTargetY = 1.6, baseTargetZ = -30.0;
+        const lookAmplitude = 8.0;
+
+        const camOffsetX = Math.sin(globalTime * 3.1) * camAmplitude.x;
+        const camOffsetY = Math.cos(globalTime * 2.5) * camAmplitude.y;
+        const camOffsetZ = Math.cos(globalTime * 3.2) * camAmplitude.z;
+
+        state.camera.position.x = baseX + camOffsetX;
+        state.camera.position.y = baseY + camOffsetY;
+        state.camera.position.z = baseZ + camOffsetZ;
+
+        const lookOffsetX = Math.sin(lookAtTime * 1.5) * lookAmplitude;
+        const lookOffsetZ = Math.cos(lookAtTime * 2.5) * lookAmplitude;
+        const lookOffsetY = Math.cos(lookAtTime * 1.2) * lookAmplitude * 0.5;
+
+        state.camera.lookAt(baseTargetX + lookOffsetX, baseTargetY + lookOffsetY, baseTargetZ + lookOffsetZ);
+    }
+
+    switchCamera(index) {
+        if (index >= this.cameras.length || index < 0) return;
+
+        this.activeCameraIndex = index;
+        const newCam = this.cameras[this.activeCameraIndex].camera;
+
+        // Copy properties from the new camera to the main state camera
+        state.camera.position.copy(newCam.position);
+        state.camera.rotation.copy(newCam.rotation);
+        state.camera.fov = newCam.fov;
+        state.camera.aspect = newCam.aspect;
+        state.camera.near = newCam.near;
+        state.camera.far = newCam.far;
+        state.camera.updateProjectionMatrix();
+    }
+
+    update(deltaTime) {
+        const time = state.clock.getElapsedTime();
+
+        // Handle camera switching
+        if (time > this.lastSwitchTime + this.switchInterval) {
+            const newIndex = Math.floor(Math.random() * this.cameras.length);
+            this.switchCamera(newIndex);
+            this.lastSwitchTime = time;
+            this.switchInterval = minSwitchInterval + Math.random() * (maxSwitchInterval - minSwitchInterval);
+        }
+
+        // Update the currently active camera if it has an update function
+        const activeCamData = this.cameras[this.activeCameraIndex];
+        if (activeCamData.update) {
+            activeCamData.update();
+        }
+    }
+}
+
+new CameraManager();

party-cathedral/src/scene/dancers.js

@@ -2,6 +2,7 @@ import * as THREE from 'three';
 import { state } from '../state.js';
 import { SceneFeature } from './SceneFeature.js';
 import sceneFeatureManager from './SceneFeatureManager.js';
+import { applyVibrancyToMaterial } from '../shaders/vibrant-billboard-shader.js';
 const dancerTextureUrls = [
     '/textures/dancer1.png',
 ];
@@ -51,13 +52,15 @@ export class Dancers extends SceneFeature {
             // Configure texture for a 2x2 sprite sheet
             processedTexture.repeat.set(0.5, 0.5);
 
-            return new THREE.MeshStandardMaterial({
+            const material = new THREE.MeshStandardMaterial({
                 map: processedTexture,
                 side: THREE.DoubleSide,
                 alphaTest: 0.5,
                 roughness: 0.7,
                 metalness: 0.1,
             });
+            applyVibrancyToMaterial(material, processedTexture);
+            return material;
         }));
 
         const createDancers = () => {
@@ -169,7 +172,8 @@ export class Dancers extends SceneFeature {
                     mesh.position.y = dancerObj.baseY;
                 }
             } else {
-                if (state.music && state.music.beatIntensity > 0.8 && Math.random() < 0.2) {
+                const musicTime = state.clock.getElapsedTime();
+                if (state.music && state.music.beatIntensity > 0.8 && Math.random() < 0.2 && musicTime > 10) {
                     dancerObj.isJumping = true;
                     dancerObj.jumpStartTime = time;
                 }

party-cathedral/src/scene/light-ball.js

@@ -17,14 +17,14 @@ export class LightBall extends SceneFeature {
 
     init() {
         // --- Ball Properties ---
-        const ballRadius = 0.4;
+        const ballRadius = 0.2;
         const lightIntensity = 5.0;
-        const lightColors = [0xff0000, 0x00ff00, 0x0000ff, 0xffff00, 0x00ffff, 0xff00ff]; // Red, Green, Blue, Yellow
+        const lightColors = [0xff2222, 0x11ff11, 0x2222ff, 0xffff11, 0x00ffff, 0xff00ff]; // Red, Green, Blue, Yellow
 
         lightColors.forEach(color => {
             // --- Create the Ball ---
             const ballGeometry = new THREE.SphereGeometry(ballRadius, 32, 32);
-            const ballMaterial = new THREE.MeshBasicMaterial({ color: color, emissive: color, emissiveIntensity: 1.0 });
+            const ballMaterial = new THREE.MeshBasicMaterial({ color: color, emissive: color, emissiveIntensity: 1.2 });
             const ball = new THREE.Mesh(ballGeometry, ballMaterial);
             ball.castShadow = false;
             ball.receiveShadow = false;
@@ -40,7 +40,7 @@ export class LightBall extends SceneFeature {
             );
             light.position.copy(ball.position);
 
-            state.scene.add(ball);
+            //state.scene.add(ball);
             state.scene.add(light);
 
             this.lightBalls.push({

party-cathedral/src/scene/medieval-musicians.js

@@ -2,6 +2,7 @@ import * as THREE from 'three';
 import { state } from '../state.js';
 import { SceneFeature } from './SceneFeature.js';
 import sceneFeatureManager from './SceneFeatureManager.js';
+import { applyVibrancyToMaterial } from '../shaders/vibrant-billboard-shader.js';
 const musicianTextureUrls = [
     '/textures/musician1.png',
     '/textures/musician2.png',
@@ -42,7 +43,7 @@ export class MedievalMusicians extends SceneFeature {
             // 3. Process the entire canvas to make background transparent
             const imageData = context.getImageData(0, 0, canvas.width, canvas.height);
             const data = imageData.data;
-            const threshold = 20; // Adjust this for more/less color tolerance
+            const threshold = 25; // Adjust this for more/less color tolerance
 
             for (let i = 0; i < data.length; i += 4) {
                 const r = data[i];
@@ -64,13 +65,16 @@ export class MedievalMusicians extends SceneFeature {
         const materials = await Promise.all(musicianTextureUrls.map(async (url) => {
             const texture = await state.loader.loadAsync(url);
             const processedTexture = processTexture(texture);
-            return new THREE.MeshStandardMaterial({
+            const material = new THREE.MeshStandardMaterial({
                 map: processedTexture,
                 side: THREE.DoubleSide,
                 alphaTest: 0.5, // Treat pixels with alpha < 0.5 as fully transparent
                 roughness: 0.7,
                 metalness: 0.1,
             });
+
+            applyVibrancyToMaterial(material, processedTexture);
+            return material;
         }));
 
         const createMusicians = () => {
@@ -239,7 +243,8 @@ export class MedievalMusicians extends SceneFeature {
                     }
                 } else {
                     let currentJumpChance = jumpChance * deltaTime; // Base chance over time
-                    if (state.music && state.music.beatIntensity > 0.8) {
+                    const musicTime = state.clock.getElapsedTime();
+                    if (state.music && state.music.beatIntensity > 0.8 && musicTime > 15) {
                         currentJumpChance = 0.1; // High, fixed chance on the beat
                     }
 

party-cathedral/src/scene/party-guests.js

@@ -69,7 +69,7 @@ export class PartyGuests extends SceneFeature {
                 const pos = new THREE.Vector3(
                     (Math.random() - 0.5) * 10,
                     guestHeight / 2,
-                    (Math.random() * 20) - 6 // Position them in the main hall
+                    (Math.random() * 20) - 2 // Position them in the main hall
                 );
                 guest.position.copy(pos);
                 state.scene.add(guest);
@@ -99,7 +99,7 @@ export class PartyGuests extends SceneFeature {
 
         const time = state.clock.getElapsedTime();
         const moveSpeed = 1.0; // Move slower
-        const movementArea = { x: 10, z: 30, y: 0, centerZ: 5 };
+        const movementArea = { x: 10, z: 30, y: 0, centerZ: 2 };
         const jumpChance = 0.05; // Jump way more
         const jumpDuration = 0.5;
         const jumpHeight = 0.1;

party-cathedral/src/scene/pews.js

@@ -59,6 +59,18 @@ export class Pews extends SceneFeature {
             rightSupport.position.set(pewLength / 2, supportHeight / 2, -supportDepth / 2 + 0.1);
             pewGroup.add(leftSupport, rightSupport);
 
+            // Add a simple "baked" shadow plane underneath
+            const shadowGeo = new THREE.PlaneGeometry(pewLength, supportDepth);
+            const shadowMaterial = new THREE.MeshBasicMaterial({
+                color: 0x000000,
+                transparent: true,
+                opacity: 0.3
+            });
+            const shadowMesh = new THREE.Mesh(shadowGeo, shadowMaterial);
+            shadowMesh.rotation.x = -Math.PI / 2;
+            shadowMesh.position.y = 0.01; // Place it just above the floor to prevent z-fighting
+            pewGroup.add(shadowMesh);
+
             pewGroup.traverse(child => {
                 if (child.isMesh) {
                     child.castShadow = true;

party-cathedral/src/scene/root.js

@@ -3,6 +3,7 @@ import { state } from '../state.js';
 import floorTextureUrl from '/textures/stone_floor.png';
 import sceneFeatureManager from './SceneFeatureManager.js';
 // Scene Features registered here:
+import { CameraManager } from './camera-manager.js';
 import { RoomWalls } from './room-walls.js';
 import { LightBall } from './light-ball.js';
 import { Pews } from './pews.js';
@@ -14,7 +15,7 @@ import { Dancers } from './dancers.js';
 import { MusicVisualizer } from './music-visualizer.js';
 import { RoseWindowLight } from './rose-window-light.js';
 import { RoseWindowLightshafts } from './rose-window-lightshafts.js';
-
+import { StainedGlass } from './stained-glass-window.js';
 // Scene Features ^^^
 
 // --- Scene Modeling Function ---

party-cathedral/src/shaders/vibrant-billboard-shader.js

@@ -0,0 +1,22 @@
+import * as THREE from 'three';
+
+export function applyVibrancyToMaterial(material, texture) {
+    // Inject custom shader code to boost vibrancy
+    material.onBeforeCompile = (shader) => {
+        // Pass the texture map to the fragment shader
+        shader.uniforms.vibrancyMap = { value: texture };
+
+        shader.fragmentShader = 'uniform sampler2D vibrancyMap;\n' + shader.fragmentShader;
+        shader.fragmentShader = shader.fragmentShader.replace(
+            '#include <dithering_fragment>',
+            `
+            #include <dithering_fragment>
+            // Get the pure texture color
+            vec4 texColor = texture2D(vibrancyMap, vMapUv);
+            // Mix the final lit color with the pure texture color to keep it vibrant
+            float vibrancy = 0.3; // 0.0 = full lighting, 1.0 = full texture color
+            gl_FragColor.rgb = mix(gl_FragColor.rgb, texColor.rgb, vibrancy) + texColor.rgb * 0.2;
+            `
+        );
+    };
+}

party-cathedral/src/state.js

@@ -9,6 +9,8 @@ export function initState() {
     camera: null,
     renderer: null,
     clock: new THREE.Clock(),
+    composer: null,
+    ssaoPass: null,
     tvScreen: null,
     tvScreenPowered: false,
     videoTexture: null,
@@ -36,7 +38,8 @@ export function initState() {
     screenIntensityPulse: 0.2,
     roomSize: 5,
     roomHeight: 3,
-    debugLight: false,
+    debugLight: false, // Turn on light helpers
+    debugCamera: false, // Turn on camera helpers
 
     // DOM Elements
     container: document.body,