개발자가 CSS와 HTML만으로 Doom을 재구현해 div로 완전한 3D 게임 엔진을 구현하다

Niels Leenheer가 모든 벽, 바닥, 배럴, 임프를 3D 공간에서 변형된 div 요소로 재구성해 Doom 시각을 재현했다.

재생 가능한 버전은 HTML 요소와 CSS 스타일 규칙만으로 렌더링되며, JavaScript가 게임 루프를 실행하고 CSS에 좌표와 상태를 제공한다.

CSS 변형과 hypot(), atan2() 같은 수학 함수로 벽 너비와 회전 등을 계산해 3D로 배치된 객체를 렌더링한다.

Doom 맵 데이터는 원시 좌표로 주석된 수천 개의 div로 정적 장면으로 컴파일되었고, 바닥은 X축으로 90도 회전시키고 clip-path로 폴리곤 섹터로 잘라 모델링된다.

텍스처 타일링은 월드 좌표에 배경 위치를 고정해 이음새 없이 유지되며, 이동은 카메라가 아닌 월드를 이동시키는 방식으로 구현된다.