New project: Magic mirror

magic-mirror/src/shaders/screen-shaders.js

@@ -0,0 +1,76 @@
+export const screenVertexShader = `
+varying vec2 vUv;
+
+void main() {
+    vUv = uv;
+    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+}
+`;
+
+export const screenFragmentShader = `
+varying vec2 vUv;
+uniform sampler2D videoTexture;
+uniform float u_effect_type;     // 0: none, 1: warmup, 2: powerdown
+uniform float u_effect_strength; // 0.0 to 1.0
+uniform float u_time;
+
+// 2D Random function
+float random (vec2 st) {
+    return fract(sin(dot(st.xy,
+                         vec2(12.9898,78.233)))*
+        43758.5453123);
+}
+
+// 2D Noise function
+float noise (vec2 st) {
+    vec2 i = floor(st);
+    vec2 f = fract(st);
+
+    float a = random(i);
+    float b = random(i + vec2(1.0, 0.0));
+    float c = random(i + vec2(0.0, 1.0));
+    float d = random(i + vec2(1.0, 1.0));
+
+    vec2 u = f*f*(3.0-2.0*f);
+    return mix(a, b, u.x) +
+            (c - a)* u.y * (1.0 - u.x) +
+            (d - b) * u.x * u.y;
+}
+
+void main() {
+    vec4 finalColor;
+
+    if (u_effect_type < 0.5) { // No effect
+        vec4 videoColor = texture2D(videoTexture, vUv);
+
+        // Shimmering edge effect
+        float dist = distance(vUv, vec2(0.5));
+        float shimmer = noise(vUv * 20.0 + vec2(u_time * 2.0, 0.0));
+        float edgeFactor = smoothstep(0.3, 0.5, dist);
+        
+        vec3 shimmerColor = vec3(0.7, 0.8, 1.0) * shimmer * edgeFactor * 0.5;
+
+        finalColor = vec4(videoColor.rgb + shimmerColor, videoColor.a);
+
+    } else if (u_effect_type < 1.5) { // "Summon Vision" (Warm-up) effect
+        // Swirling mist clears to reveal the video
+        float noiseVal = noise(vUv * 10.0);
+        float revealFactor = smoothstep(0.0, 0.7, u_effect_strength);
+        float mist = smoothstep(revealFactor - 0.2, revealFactor, noiseVal);
+
+        vec4 videoColor = texture2D(videoTexture, vUv);
+        finalColor = mix(vec4(0.8, 0.7, 1.0, 1.0) * noiseVal, videoColor, mist);
+
+    } else { // "Vision Fades" (Power-down) effect
+        // Video dissolves into a magical fog
+        float noiseVal = noise(vUv * 10.0);
+        float dissolveFactor = smoothstep(0.3, 1.0, u_effect_strength);
+        float mist = smoothstep(dissolveFactor - 0.2, dissolveFactor, noiseVal);
+
+        vec4 videoColor = texture2D(videoTexture, vUv);
+        finalColor = mix(videoColor, vec4(0.8, 0.7, 1.0, 1.0) * noiseVal, mist);
+    }
+
+    gl_FragColor = finalColor;
+}
+`;