Feature: add postprocessing and tune it

party-cathedral/src/core/animate.js

@@ -1,5 +1,6 @@
 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';
 
@@ -53,7 +54,11 @@ export function animate() {
     updateScreenEffect();
 
     // RENDER!
-    state.renderer.render(state.scene, state.camera);
+    if (state.composer) {
+        state.composer.render();
+    } else {
+        state.renderer.render(state.scene, state.camera);
+    }
 }
 
 // --- Window Resize Handler ---
@@ -61,4 +66,5 @@ 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() {
@@ -36,7 +36,9 @@ 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);
+    }
+}