개발자가 CSS의 hypot()·atan2() 함수와 3D transform을 조합해 DOOM을 완전히 CSS 렌더링으로 구현

Context

브라우저의 CSS 렌더링 능력의 한계를 검증하고자 했으며, DOOM 게임의 1993년 WAD 파일 데이터(vertices, linedefs, sidedefs, sectors)를 CSS로 3D 투영하려는 문제에 직면했다. 초기 시도에서 CSS만으로 게임 상태, 로직, 계산을 모두 처리하려 했으나 게임 로직은 JavaScript 없이 실행 불가능함을 확인했다.

Technical Solution

• 게임 로직과 렌더링 분리: JavaScript에서 게임 루프만 실행하고, 좌표 데이터를 CSS custom properties로 전달한 후 렌더링은 전적으로 CSS가 담당
• 수학 계산을 CSS 함수로 처리: 벽의 너비 계산에 hypot(Δx, Δy) 사용, 회전각 계산에 atan2(Δy, Δx) 사용
• DOOM 좌표계를 CSS 3D 좌표로 변환: translate3d(x, -z, -y)와 rotateY(atan2(...))를 조합해 DOOM의 2D 좌표계를 CSS의 3D 공간에 매핑
• 수천 개의 div 요소 생성 및 제어: 각 벽(wall)에 --start-x, --start-y, --end-x, --end-y, --floor-z, --ceiling-z custom properties 할당
• 렌더러를 얇은 래퍼 계층으로 구현: JavaScript에서 custom properties, CSS classes, HTML elements만 조작하고 실제 시각 업데이트는 CSS engine이 수행

Key Takeaway

CSS의 trigonometric 함수와 3D transform을 활용하면 게임 엔진 수준의 기하 계산을 브라우저에서 수행할 수 있으며, 게임 로직(CPU 집약적)과 렌더링(GPU 최적화)을 명확히 분리하는 설계가 수천 개 요소의 3D 장면을 실시간으로 갱신할 수 있게 한다.