diff --git a/src/lib/immersive/ImmersiveAmbientCanvas.svelte b/src/lib/immersive/ImmersiveAmbientCanvas.svelte index 99f20588d..e0e553ee6 100644 --- a/src/lib/immersive/ImmersiveAmbientCanvas.svelte +++ b/src/lib/immersive/ImmersiveAmbientCanvas.svelte @@ -253,8 +253,9 @@ if (isAnimating || !isInitialized) return; isAnimating = true; lastFrameTime = performance.now(); + startTime = performance.now(); // Reset time for animation animationFrameId = requestAnimationFrame(animationLoop); - console.log('[ImmersiveCanvas] Animation started'); + console.log('[ImmersiveCanvas] Animation started, intensity:', intensity ?? getConfig().ambientIntensity); } /** @@ -312,6 +313,11 @@ ? (intensity ?? getConfig().ambientIntensity) : 0; + // Debug: log every 60 frames (~4 sec at 15fps) + if (Math.floor(currentTime) % 4 === 0 && Math.floor(currentTime * 15) % 15 === 0) { + console.log(`[ImmersiveCanvas] time=${currentTime.toFixed(1)}s, intensity=${motionIntensity}`); + } + gl.uniform1f(u_time, currentTime); gl.uniform1f(u_intensity, motionIntensity); diff --git a/src/lib/immersive/shaders/ambient.frag b/src/lib/immersive/shaders/ambient.frag index 0e0931d47..5d25bd436 100644 --- a/src/lib/immersive/shaders/ambient.frag +++ b/src/lib/immersive/shaders/ambient.frag @@ -24,16 +24,16 @@ uniform sampler2D u_texture; uniform float u_time; // Time in seconds uniform float u_intensity; // Motion intensity (0.0 - 1.0) -// Constants for motion parameters -const float DRIFT_SPEED_X = 0.08; -const float DRIFT_SPEED_Y = 0.06; -const float DRIFT_AMOUNT = 0.03; +// Constants for motion parameters - made MORE visible +const float DRIFT_SPEED_X = 0.15; +const float DRIFT_SPEED_Y = 0.12; +const float DRIFT_AMOUNT = 0.08; // 8% UV drift -const float ZOOM_SPEED = 0.05; -const float ZOOM_AMOUNT = 0.02; +const float ZOOM_SPEED = 0.1; +const float ZOOM_AMOUNT = 0.05; // 5% zoom oscillation -const float BREATH_SPEED = 0.12; -const float BREATH_AMOUNT = 0.06; +const float BREATH_SPEED = 0.2; +const float BREATH_AMOUNT = 0.12; // 12% brightness pulse void main() { vec2 uv = v_texCoord; diff --git a/src/lib/immersive/utils/texture-loader.ts b/src/lib/immersive/utils/texture-loader.ts index 1ab1e1b8a..c3f108bc4 100644 --- a/src/lib/immersive/utils/texture-loader.ts +++ b/src/lib/immersive/utils/texture-loader.ts @@ -203,11 +203,12 @@ export async function loadBlurredTexture( try { // Generate blurred image - // Very small canvas (16x16) + heavy blur = smooth gradients when scaled + // Extremely small canvas (8x8) = each pixel becomes ~240px when scaled + // This creates very smooth color gradients const blurredDataUrl = await generateBlurredImage( artworkUrl, - 16, // Tiny canvas - each pixel becomes ~120px when scaled to 1920 - 8, // Blur radius (applied twice) + 8, // 8x8 canvas - maximum blur through scaling + 4, // Small blur radius (image is already tiny) controller.signal );