cssQuake: PolyCSS를 이용해 브라우저에서 Quake 플레이하기

cssQuake는 CSS를 사용해 Quake를 렌더링합니다

cssQuake는 사용자가 Quake (v1.06) 공유웨어 버전을 웹 브라우저에서 직접 플레이할 수 있게 하는 기술 실험입니다. 이 프로젝트는 전통적인 GPU 가속 렌더링 방식인 WebGL이나 HTML5 Canvas를 CSS 기반 렌더링 기술로 대체하는 PolyCSS 렌더러(v0.2.6)로 구동됩니다.

기술 구현 및 기능

cssQuake v0.223은 원본 게임 로직을 맞춤형 렌더링 파이프라인과 통합합니다. 시스템은 원본 id1/pak0.pak 에셋과 매니페스트를 로드하여 1996년 id Software의 경험을 재현합니다.

핵심 게임플레이 메커니즘

  • Controls: 표준 WASD 이동, 마우스로 시점 조정, 스페이스로 점프. Shift는 달리기, Ctrl은 웅크리기에 사용됩니다.
  • Level Support: 게임에는 E1M1 (The Slipgate Complex), E1M2 (Castle of the Damned) 등 여러 클래식 맵이 포함되어 있으며 E1M8 (Ziggurat)까지 지원합니다.
  • Multiplayer: 인터페이스에는 멀티플레이 세션을 생성하고 참여할 수 있는 옵션이 포함되어 있으며, 킬 제한, 시간 제한, 최대 플레이어 수 설정을 할 수 있습니다.

디버깅 및 커스터마이징

사용자는 옵션 메뉴를 통해 여러 기술 오버레이와 게임플레이 수정자를 토글할 수 있습니다:

  • Visual Debugging: 외곽선 표시, 통계 패널, FPS 패널 옵션.
  • Gameplay Modifiers: 동적 조명, 파티클 효과, 적 가시성, 데미지/이동/공격 비활성화 토글.
  • Input: 마우스 반전 지원.

커뮤니티 피드백 및 성능

커뮤니티는 cssQuake를 CSS 기능의 인상적인 시연으로 평가하지만, 사용자들은 성능 및 안정성에 대해 다양한 결과를 보고했습니다.

성능 관찰

성능은 하드웨어에 따라 크게 차이납니다. 일부 M1 MacBook Air 사용자는 부드러운 60 FPS를 경험했으며, 다른 M1 Pro Mac 사용자는 1990년대 Pentium-133 하드웨어보다 덜 부드럽게 느꼈다고 보고했습니다.

기술적 제한 및 버그

사용자들은 여러 "거친" 동작 및 엔진 차이를 확인했습니다:

  • Collision and Movement: 코너에 끼어 멈추거나, 경사면을 이동하기 어려우며, 움직임 중 가끔 "러버 밴딩" 현상이 발생한다는 보고가 있습니다.
  • Rendering Glitches: 일부 사용자는 카메라가 맵 앞쪽으로 갑자기 이동하고 무기를 발사할 때만 리셋되는 뷰 클리핑 현상을 경험했습니다.
  • Logic Discrepancies: 특정 게임 오브젝트(버튼이나 비밀문 등)가 원본과 다르게 동작하여, 터치 대신 사격이 필요하거나 그 반대인 경우가 있다는 보고가 있습니다.
  • Visual Artifacts: 개와 같은 엔티티가 공중에 떠 있는 시각적 결함이 보고되었습니다.

JavaScript의 역할

렌더링에 CSS에 초점을 맞추었음에도 불구하고, 프로젝트는 JavaScript가 필요합니다. CSS는 세계의 시각적 표현을 담당하지만, JavaScript는 게임 엔진 로직을 구동하고 CSS 속성을 실시간으로 업데이트하는 데 필수적입니다.

개발자 리소스

Sources