From 56788b12e78ea2f45571b0a0f3a8c2e3b667355c Mon Sep 17 00:00:00 2001
From: Fringg <egor.andrianovv@gmail.com>
Date: Sun, 8 Feb 2026 17:40:35 +0300
Subject: [PATCH] perf: reduce Aurora animated background GPU load by ~95%
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Render WebGL canvas at 10% viewport resolution (~20K px vs 2M px)
- Replace backdrop-filter: blur(80px) with filter: blur(20px) on canvas
  (backdrop-filter composites ALL layers underneath — 10-20x more expensive)
- Disable antialiasing (useless when output is blurred)
- Lower target FPS from 30 to 20 (imperceptible for ambient background)
- Add CSS contain: strict to isolate layout/paint recalculations
- Remove separate blur overlay div (one element instead of two)

Reported: GTX 1660S showed 30-55% GPU load with cabinet open.
Expected: ~1-5% GPU after this change.
---
 src/components/layout/AppShell/Aurora.tsx | 31 +++++++++++++----------
 1 file changed, 18 insertions(+), 13 deletions(-)

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 раз,
+          т.к. блюрит только один элемент, а не все слои под ним). */}
       <div
         ref={containerRef}
-        className="pointer-events-none fixed inset-0 z-0"
-        style={{ width: '100%', height: '100%' }}
-      />
-      {/* Blur overlay */}
-      <div
         className="pointer-events-none fixed inset-0 z-0"
         style={{
-          backdropFilter: 'blur(80px)',
-          WebkitBackdropFilter: 'blur(80px)',
+          width: '100%',
+          height: '100%',
+          filter: 'blur(20px)',
+          WebkitFilter: 'blur(20px)',
           backgroundColor: blurColor,
+          contain: 'strict',
         }}
       />
     </>