perf: reduce Aurora animated background GPU load by ~95%

- 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.
This commit is contained in:
Fringg
2026-02-08 17:40:35 +03:00
parent de09ea039b
commit 56788b12e7

View File

@@ -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',
}}
/>
</>