피드로 돌아가기
Dev.toFrontend
원문 읽기
Canvas 2D와 Astro 기반의 초경량 스택으로 60fps 3D 웹 게임 구현
I Shipped Two Web Games This Weekend — Here's the Stack
AI 요약
Context
복잡한 게임 엔진이나 상태 관리 라이브러리 없이 주말 내에 두 개의 웹 게임을 배포해야 하는 제약 상황. 고성능 렌더링과 빠른 배포 사이의 Trade-off를 해결하기 위한 최소 단위의 기술 스택 선정이 핵심 과제.
Technical Solution
- Astro 6 정적 출력과 Cloudflare Workers 기반의 Serverless 아키텍처를 통한 배포 파이프라인 최적화
- WebGL 대신 Canvas 2D Pinhole Projection 공식을 적용한 3D 렌더링 엔진으로 수학적 복잡도 제거
- Painter's Algorithm을 이용한 프레임별 객체 정렬로 깊이 버퍼 없이 3D 공간감 구현
- performance.now()의 sub-millisecond 정밀도를 활용한 실시간 타이밍 측정 로직 설계
- Offscreen Canvas를 통한 스타 스프라이트 사전 렌더링으로 매 프레임 발생하는 Radial Gradient 연산 부하 제거
- @resvg/resvg-js 기반의 빌드 타임 SVG-to-PNG 변환을 통한 정적 OG 이미지 생성 전략 채택
실천 포인트
1. 단순 3D 시각화 필요 시 WebGL 도입 전 Canvas 2D의 투영 행렬 적용 가능성 검토
2. 잦은 반복 렌더링 요소는 Offscreen Canvas에 캐싱하여 GPU/CPU 부하 감소
3. 정밀한 시간 측정 필요 시 Date.now() 대신 performance.now() 사용
4. 엣지 함수 기반의 동적 OG 생성 대신 빌드 타임 정적 생성으로 인프라 복잡도 최소화