Feature: vibrant dancers

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 = () => {

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',
@@ -72,24 +73,7 @@ export class MedievalMusicians extends SceneFeature {
                 metalness: 0.1,
             });
 
-            // Inject custom shader code to boost vibrancy
+            applyVibrancyToMaterial(material, processedTexture);
-            material.onBeforeCompile = (shader) => {
-                // Pass the texture map to the fragment shader
-                shader.uniforms.vibrancyMap = { value: processedTexture };
-
-                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;
-                    `
-                );
-            };
             return material;
         }));
 

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;
+            `
+        );
+    };
+}