피드로 돌아가기
GeekNewsFrontend
원문 읽기
PolyCSS 기반 렌더링과 TypeScript 로직 결합을 통한 Browser Quake 구현
CSSQuake
AI 요약
Context
전통적인 웹 게임 렌더링은 Canvas API나 WebGL에 의존하는 구조임. 본 프로젝트는 표준 그래픽 라이브러리 없이 CSS만을 활용한 렌더링 가능 여부를 검증하려는 기술적 시도에서 시작됨.
Technical Solution
- PolyCSS renderer v0.2.6 기반의 CSS 전용 렌더링 파이프라인 설계
- QuakeC 및 progs.dat 파일을 분석하는 JS 추출기를 통한 게임 원천 데이터의 JSON 변환
- 변환된 JSON 데이터를 기반으로 TypeScript 기반의 게임 런타임 로직 재구현
- manifest, progs, definitions 등 원본 자산 로드 프로세스를 통한 정적 리소스 관리
- CSS 스타일링을 통한 3D 공간의 2D 투영 및 렌더링 구현
- 브라우저 엔진별 렌더링 성능 편차를 고려한 WebKit 및 Gecko 최적화 검토
실천 포인트
- 선언적 UI 언어인 CSS를 활용한 비정형 렌더링 가능성 검토 - 레거시 바이너리 데이터의 JSON 추상화를 통한 모던 언어 이식 전략 수립 - 브라우저 렌더링 엔진(WebKit, Gecko 등) 간의 성능 격차를 고려한 크로스 브라우징 테스트 필수 수행