From 23f56afaf7182de6e8164fdc0075d4b4b02780d8 Mon Sep 17 00:00:00 2001 From: Fringg Date: Sun, 8 Feb 2026 17:46:23 +0300 Subject: [PATCH] fix: stretch low-res Aurora canvas to fill viewport OGL renderer.setSize() sets both the internal buffer and CSS dimensions, so the 10% resolution canvas was only covering 10% of the screen. Now explicitly reset canvas.style.width/height to 100% after setSize() so the small buffer is upscaled by the browser to full viewport. --- src/components/layout/AppShell/Aurora.tsx | 22 +++++++++++++++------- 1 file changed, 15 insertions(+), 7 deletions(-) diff --git a/src/components/layout/AppShell/Aurora.tsx b/src/components/layout/AppShell/Aurora.tsx index 9d88a2e..7cbd365 100644 --- a/src/components/layout/AppShell/Aurora.tsx +++ b/src/components/layout/AppShell/Aurora.tsx @@ -210,17 +210,25 @@ export function Aurora() { const mesh = new Mesh(gl, { geometry, program }); - // Рендерим на 10% разрешения — шейдер обрабатывает в 100 раз меньше пикселей, - // CSS масштабирует канвас обратно, а filter: blur() сглаживает результат. - // Визуально идентично оригиналу (80px blur всё равно уничтожал детали). + // Рендерим на 10% разрешения — шейдер обрабатывает в ~100 раз меньше пикселей. + // renderer.setSize задаёт и буфер, и CSS-размер канваса, поэтому после него + // принудительно возвращаем CSS на 100% — канвас растягивается браузером, + // а filter: blur() сглаживает артефакты масштабирования. const RESOLUTION_SCALE = 0.1; function resize() { if (!containerRef.current || !rendererRef.current || !programRef.current) return; - 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]; + const fullW = containerRef.current.offsetWidth; + const fullH = containerRef.current.offsetHeight; + const bufW = Math.max(Math.ceil(fullW * RESOLUTION_SCALE), 1); + const bufH = Math.max(Math.ceil(fullH * RESOLUTION_SCALE), 1); + rendererRef.current.setSize(bufW, bufH); + // OGL setSize ставит canvas.style.width/height = bufW/bufH px, + // перезаписываем на 100% чтобы CSS растянул маленький буфер на весь экран + const canvas = rendererRef.current.gl.canvas as HTMLCanvasElement; + canvas.style.width = '100%'; + canvas.style.height = '100%'; + programRef.current.uniforms.uResolution.value = [bufW, bufH]; } window.addEventListener('resize', resize);