etkr4k/bedolaga-cabinet
1
0
Fork 0
mirror of https://github.com/chillpadclub/bedolaga-cabinet.git synced 2026-07-29 18:13:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: stretch low-res Aurora canvas to fill viewport

Browse Source 
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.
This commit is contained in:
Fringg
2026-02-08 17:46:23 +03:00
parent 56788b12e7
commit 23f56afaf7
1 changed files with 15 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/components/layout/AppShell/Aurora.tsx
View File

@@ -210,17 +210,25 @@ export function Aurora() {
const mesh = new Mesh(gl, { geometry, program }); const mesh = new Mesh(gl, { geometry, program });
// Рендерим на 10% разрешения — шейдер обрабатывает в 100 раз меньше пикселей, // Рендерим на 10% разрешения — шейдер обрабатывает в ~100 раз меньше пикселей.
// CSS масштабирует канвас обратно, а filter: blur() сглаживает результат. // renderer.setSize задаёт и буфер, и CSS-размер канваса, поэтому после него
// Визуально идентично оригиналу (80px blur всё равно уничтожал детали). // принудительно возвращаем CSS на 100% — канвас растягивается браузером,
// а filter: blur() сглаживает артефакты масштабирования.
const RESOLUTION_SCALE = 0.1; const RESOLUTION_SCALE = 0.1;
function resize() { function resize() {
if (!containerRef.current || !rendererRef.current || !programRef.current) return; if (!containerRef.current || !rendererRef.current || !programRef.current) return;
const w = Math.max(Math.ceil(containerRef.current.offsetWidth * RESOLUTION_SCALE), 1); const fullW = containerRef.current.offsetWidth;
const h = Math.max(Math.ceil(containerRef.current.offsetHeight * RESOLUTION_SCALE), 1); const fullH = containerRef.current.offsetHeight;
rendererRef.current.setSize(w, h); const bufW = Math.max(Math.ceil(fullW * RESOLUTION_SCALE), 1);
programRef.current.uniforms.uResolution.value = [w, h]; 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); window.addEventListener('resize', resize);