Fix VinylPanel: add padding and aggressive parallax
- Add padding around vinyl (scale UV by 1.15x) - Discard pixels outside bounds to avoid edge artifacts - Much more aggressive parallax: cover 80/50px, vinyl 50/35px - Shader parallax offset increased to 0.08 - Vinyl size reduced to 85% for more breathing room
This commit is contained in:
1 parent
6265e685ea
commit
fc85d66f5c
1 file changed
+18
-9
@@ -50,9 +50,9 @@
|
|||||||
mouseY = 0.5;
|
mouseY = 0.5;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Parallax calculations (more sensitive)
|
// Parallax calculations (aggressive)
|
||||||
const coverOffsetX = $derived((mouseX - 0.5) * 40);
|
const coverOffsetX = $derived((mouseX - 0.5) * 80);
|
||||||
const coverOffsetY = $derived((mouseY - 0.5) * 25);
|
const coverOffsetY = $derived((mouseY - 0.5) * 50);
|
||||||
const revealOffset = $derived(isPlaying ? -12 : 0);
|
const revealOffset = $derived(isPlaying ? -12 : 0);
|
||||||
|
|
||||||
// Vertex shader
|
// Vertex shader
|
||||||
@@ -93,11 +93,20 @@
|
|||||||
float s = sin(u_rotation);
|
float s = sin(u_rotation);
|
||||||
uv = vec2(uv.x * c - uv.y * s, uv.x * s + uv.y * c);
|
uv = vec2(uv.x * c - uv.y * s, uv.x * s + uv.y * c);
|
||||||
|
|
||||||
// Apply subtle parallax offset
|
// Apply aggressive parallax offset
|
||||||
uv += u_parallax * 0.02;
|
uv += u_parallax * 0.08;
|
||||||
|
|
||||||
uv += center;
|
uv += center;
|
||||||
|
|
||||||
|
// Add padding - scale down UV to add margin around vinyl
|
||||||
|
uv = (uv - 0.5) * 1.15 + 0.5;
|
||||||
|
|
||||||
|
// Discard pixels outside texture bounds (creates padding)
|
||||||
|
if (uv.x < 0.0 || uv.x > 1.0 || uv.y < 0.0 || uv.y > 1.0) {
|
||||||
|
fragColor = vec4(0.0);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
// Sample texture
|
// Sample texture
|
||||||
vec4 color = texture(u_texture, uv);
|
vec4 color = texture(u_texture, uv);
|
||||||
|
|
||||||
@@ -223,10 +232,10 @@
|
|||||||
|
|
||||||
gl.useProgram(program);
|
gl.useProgram(program);
|
||||||
|
|
||||||
// Calculate vinyl size and position (centered)
|
// Calculate vinyl size and position (centered, with padding)
|
||||||
const size = Math.min(rect.width, rect.height) * 0.95;
|
const size = Math.min(rect.width, rect.height) * 0.85;
|
||||||
const offsetX = (rect.width - size) / 2 + (mouseX - 0.5) * -25;
|
const offsetX = (rect.width - size) / 2 + (mouseX - 0.5) * -50;
|
||||||
const offsetY = (rect.height - size) / 2 + (mouseY - 0.5) * -15;
|
const offsetY = (rect.height - size) / 2 + (mouseY - 0.5) * -35;
|
||||||
|
|
||||||
// Set uniforms
|
// Set uniforms
|
||||||
gl.uniform2f(gl.getUniformLocation(program, 'u_resolution'), rect.width, rect.height);
|
gl.uniform2f(gl.getUniformLocation(program, 'u_resolution'), rect.width, rect.height);
|
||||||
|
|||||||
Reference in new issue
Block a user