fix(immersive): increase animation visibility + more blur + debug logs
- Animation params increased: 8% UV drift, 5% zoom, 12% brightness - Canvas reduced to 8x8 for maximum blur effect - Added debug logs to verify animation is running
This commit is contained in:
1 parent
606fb43853
commit
7795fa159e
3 files changed
+19
-12
No files matched your search
@@ -253,8 +253,9 @@
|
|||||||
if (isAnimating || !isInitialized) return;
|
if (isAnimating || !isInitialized) return;
|
||||||
isAnimating = true;
|
isAnimating = true;
|
||||||
lastFrameTime = performance.now();
|
lastFrameTime = performance.now();
|
||||||
|
startTime = performance.now(); // Reset time for animation
|
||||||
animationFrameId = requestAnimationFrame(animationLoop);
|
animationFrameId = requestAnimationFrame(animationLoop);
|
||||||
console.log('[ImmersiveCanvas] Animation started');
|
console.log('[ImmersiveCanvas] Animation started, intensity:', intensity ?? getConfig().ambientIntensity);
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@@ -312,6 +313,11 @@
|
|||||||
? (intensity ?? getConfig().ambientIntensity)
|
? (intensity ?? getConfig().ambientIntensity)
|
||||||
: 0;
|
: 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_time, currentTime);
|
||||||
gl.uniform1f(u_intensity, motionIntensity);
|
gl.uniform1f(u_intensity, motionIntensity);
|
||||||
|
|
||||||
|
|||||||
@@ -24,16 +24,16 @@ uniform sampler2D u_texture;
|
|||||||
uniform float u_time; // Time in seconds
|
uniform float u_time; // Time in seconds
|
||||||
uniform float u_intensity; // Motion intensity (0.0 - 1.0)
|
uniform float u_intensity; // Motion intensity (0.0 - 1.0)
|
||||||
|
|
||||||
// Constants for motion parameters
|
// Constants for motion parameters - made MORE visible
|
||||||
const float DRIFT_SPEED_X = 0.08;
|
const float DRIFT_SPEED_X = 0.15;
|
||||||
const float DRIFT_SPEED_Y = 0.06;
|
const float DRIFT_SPEED_Y = 0.12;
|
||||||
const float DRIFT_AMOUNT = 0.03;
|
const float DRIFT_AMOUNT = 0.08; // 8% UV drift
|
||||||
|
|
||||||
const float ZOOM_SPEED = 0.05;
|
const float ZOOM_SPEED = 0.1;
|
||||||
const float ZOOM_AMOUNT = 0.02;
|
const float ZOOM_AMOUNT = 0.05; // 5% zoom oscillation
|
||||||
|
|
||||||
const float BREATH_SPEED = 0.12;
|
const float BREATH_SPEED = 0.2;
|
||||||
const float BREATH_AMOUNT = 0.06;
|
const float BREATH_AMOUNT = 0.12; // 12% brightness pulse
|
||||||
|
|
||||||
void main() {
|
void main() {
|
||||||
vec2 uv = v_texCoord;
|
vec2 uv = v_texCoord;
|
||||||
|
|||||||
@@ -203,11 +203,12 @@ export async function loadBlurredTexture(
|
|||||||
|
|
||||||
try {
|
try {
|
||||||
// Generate blurred image
|
// 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(
|
const blurredDataUrl = await generateBlurredImage(
|
||||||
artworkUrl,
|
artworkUrl,
|
||||||
16, // Tiny canvas - each pixel becomes ~120px when scaled to 1920
|
8, // 8x8 canvas - maximum blur through scaling
|
||||||
8, // Blur radius (applied twice)
|
4, // Small blur radius (image is already tiny)
|
||||||
controller.signal
|
controller.signal
|
||||||
);
|
);
|
||||||
|
|
||||||
|
|||||||
Reference in new issue
Block a user