dejvino/music-video-gen
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix: Improved mirror shader fade effect animation

Browse Source
This commit is contained in:
Dejvino 2025-11-20 12:25:47 +01:00
parent c48581379c
commit dceb37a8dd
3 changed files with 7 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
magic-mirror/src/core/animate.js
View File

@ -8,10 +8,10 @@ import { updateFire } from '../scene/fireplace.js';
function updateCamera() { function updateCamera() {
const globalTime = Date.now() * 0.00003; const globalTime = Date.now() * 0.00003;
const lookAtTime = Date.now() * 0.0002; const lookAtTime = Date.now() * 0.00005;
const camAmplitude = 0.2; const camAmplitude = 0.2;
const lookAmplitude = 0.1; const lookAmplitude = 0.4;
// Base Camera Position in front of the TV // Base Camera Position in front of the TV
const baseX = -0.5; const baseX = -0.5;
@ -19,7 +19,7 @@ function updateCamera() {
const baseZ = 2.2; const baseZ = 2.2;
// Base LookAt target (Center of the screen) // Base LookAt target (Center of the screen)
const baseTargetX = -0.7; const baseTargetX = -0.2;
const baseTargetY = 1.7; const baseTargetY = 1.7;
const baseTargetZ = -0.3; const baseTargetZ = -0.3;
@ -33,7 +33,7 @@ function updateCamera() {
state.camera.position.z = baseZ + camOffsetZ; state.camera.position.z = baseZ + camOffsetZ;
// LookAt Target Offsets (Subtle Gaze Shift) // LookAt Target Offsets (Subtle Gaze Shift)
const lookOffsetX = Math.sin(lookAtTime * 1.5) * lookAmplitude * 3; const lookOffsetX = Math.sin(lookAtTime * 1.5) * lookAmplitude * 4;
const lookOffsetY = Math.cos(lookAtTime * 1.2) * lookAmplitude; const lookOffsetY = Math.cos(lookAtTime * 1.2) * lookAmplitude;
// Apply lookAt to the subtly shifted target // Apply lookAt to the subtly shifted target
@ -70,10 +70,8 @@ function updateScreenLight() {
function updateShaderTime() { function updateShaderTime() {
if (state.tvScreen && state.tvScreen.material.uniforms && state.tvScreen.material.uniforms.u_time) { if (state.tvScreen && state.tvScreen.material.uniforms && state.tvScreen.material.uniforms.u_time) {
if (state.tvScreenPowered) {
state.tvScreen.material.uniforms.u_time.value = state.clock.getElapsedTime(); state.tvScreen.material.uniforms.u_time.value = state.clock.getElapsedTime();
} }
}
} }
function updateVideo() { function updateVideo() {

18
magic-mirror/src/scene/screen-shaders.js
View File

@ -1,18 +0,0 @@
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;
void main() {
// Sample the video texture
gl_FragColor = texture2D(videoTexture, vUv);
}
`;

4
magic-mirror/src/shaders/screen-shaders.js
View File

@ -57,7 +57,7 @@ void main() {
finalColor = baseColor; finalColor = baseColor;
} else if (u_effect_type < 1.9) { // "Summon Vision" (Warm-up) effect } else if (u_effect_type < 1.9) { // "Summon Vision" (Warm-up) effect
// This is now a multi-stage effect controlled by u_effect_strength (0.0 -> 1.0) // This is now a multi-stage effect controlled by u_effect_strength (0.0 -> 1.0)
float noiseVal = noise(vUv * 10.0); float noiseVal = noise(vUv * 50.0 + vec2(0.0, u_time * -125.0));
vec3 mistColor = vec3(0.8, 0.7, 1.0) * noiseVal; vec3 mistColor = vec3(0.8, 0.7, 1.0) * noiseVal;
vec4 videoColor = texture2D(videoTexture, vUv); vec4 videoColor = texture2D(videoTexture, vUv);
@ -75,7 +75,7 @@ void main() {
} else { // "Vision Fades" (Power-down) effect } else { // "Vision Fades" (Power-down) effect
// Multi-stage effect: Last frame -> fade to mist -> fade to transparent // Multi-stage effect: Last frame -> fade to mist -> fade to transparent
float noiseVal = noise(vUv * 10.0); float noiseVal = noise(vUv * 50.0 + vec2(0.0, u_time * 123.0));
vec3 mistColor = vec3(0.8, 0.7, 1.0) * noiseVal; vec3 mistColor = vec3(0.8, 0.7, 1.0) * noiseVal;
vec4 videoColor = texture2D(videoTexture, vUv); vec4 videoColor = texture2D(videoTexture, vUv);