Feature: more vibrant musicians colors thanks to mixing in the original image

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

@@ -64,13 +64,33 @@ 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,
             });
+
+            // Inject custom shader code to boost vibrancy
+            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.6; // 0.0 = full lighting, 1.0 = full texture color
+                    gl_FragColor.rgb = mix(gl_FragColor.rgb, texColor.rgb, vibrancy);
+                    `
+                );
+            };
+            return material;
         }));
 
         const createMusicians = () => {