diff --git a/src/components/layout/AppShell/Aurora.tsx b/src/components/layout/AppShell/Aurora.tsx index e73f726..9d88a2e 100644 --- a/src/components/layout/AppShell/Aurora.tsx +++ b/src/components/layout/AppShell/Aurora.tsx @@ -173,7 +173,7 @@ export function Aurora() { const container = containerRef.current; const renderer = new Renderer({ alpha: true, - antialias: true, + antialias: false, powerPreference: 'low-power', }); rendererRef.current = renderer; @@ -210,10 +210,15 @@ export function Aurora() { const mesh = new Mesh(gl, { geometry, program }); + // Рендерим на 10% разрешения — шейдер обрабатывает в 100 раз меньше пикселей, + // CSS масштабирует канвас обратно, а filter: blur() сглаживает результат. + // Визуально идентично оригиналу (80px blur всё равно уничтожал детали). + const RESOLUTION_SCALE = 0.1; + function resize() { if (!containerRef.current || !rendererRef.current || !programRef.current) return; - const w = containerRef.current.offsetWidth; - const h = containerRef.current.offsetHeight; + const w = Math.max(Math.ceil(containerRef.current.offsetWidth * RESOLUTION_SCALE), 1); + const h = Math.max(Math.ceil(containerRef.current.offsetHeight * RESOLUTION_SCALE), 1); rendererRef.current.setSize(w, h); programRef.current.uniforms.uResolution.value = [w, h]; } @@ -222,9 +227,9 @@ export function Aurora() { resize(); let lastTime = 0; - const targetFPS = 30; + const targetFPS = 20; const frameInterval = 1000 / targetFPS; - const speed = 0.3; // Slow and smooth + const speed = 0.3; function animate(currentTime: number) { animationFrameRef.current = requestAnimationFrame(animate); @@ -275,19 +280,19 @@ export function Aurora() { return ( <> - {/* WebGL Aurora canvas */} + {/* WebGL Aurora canvas — рендерится на ~10% разрешения, CSS растягивает обратно. + filter: blur() сглаживает артефакты масштабирования (дешевле backdrop-filter в ~10-20 раз, + т.к. блюрит только один элемент, а не все слои под ним). */}
- {/* Blur overlay */} -