브라우저에서 레이캐스팅으로 달 표면을 탐험하는 게임, Mooncraft 2000

브라우저만 열면 달 위를 걸을 수 있다

별도의 설치 없이 웹 브라우저에서 달 표면을 돌아다닐 수 있는 게임이 공개됐어요. 이름은 Mooncraft 2000인데요, 단순한 3D 데모가 아니라 실제로 플레이할 수 있는 시뮬레이션 게임이에요. 특히 흥미로운 점은 이 게임이 최신 3D 엔진이나 WebGL 셰이더를 잔뜩 쓴 게 아니라, 레이캐스팅(ray-casting)이라는 클래식한 렌더링 기법으로 만들어졌다는 거예요.

레이캐스팅이라고 하면 감이 안 올 수도 있는데, 1992년에 나온 게임 Wolfenstein 3D를 떠올리면 돼요. 요즘 게임처럼 진짜 3D 공간을 계산하는 게 아니라, 화면의 각 세로 줄마다 "광선(ray)"을 하나씩 쏘아서 벽까지의 거리를 계산하고, 그 거리에 따라 벽의 높이를 결정하는 방식이에요. 일종의 "가짜 3D"라고 할 수 있는데, 진짜 3D보다 계산량이 훨씬 적으면서도 꽤 그럴듯한 1인칭 시점을 만들어낼 수 있어요.

레이캐스팅, 어떻게 동작하는 걸까

좀 더 기술적으로 파고들어볼게요. 전통적인 레이캐스팅은 2D 격자 맵 위에서 동작해요. 플레이어의 위치와 바라보는 방향이 주어지면, 시야각(보통 60~90도) 안에서 화면 너비만큼의 광선을 균등하게 발사해요. 각 광선은 격자를 따라 전진하면서 벽 타일을 만나면 멈추고, 그때의 거리값을 기록하죠.

이 거리값으로 할 수 있는 게 많아요. 거리가 가까우면 벽을 크게 그리고, 멀면 작게 그리면 원근감이 생기잖아요. 여기에 텍스처 매핑까지 입히면 꽤 현실적인 느낌이 나요. Wolfenstein 3D가 바로 이 방식이었고, 이후 Doom도 레이캐스팅의 변형을 사용했어요 (Doom은 엄밀히 말하면 BSP 트리 기반이지만, 개념적 뿌리는 같아요).

Mooncraft 2000이 흥미로운 건 이 기법을 달 표면이라는 야외 환경에 적용했다는 점이에요. 보통 레이캐스팅은 실내 미로 같은 환경에 최적화되어 있거든요. 벽으로 둘러싸인 복도와 방 구조 말이에요. 야외 지형은 높낮이가 연속적으로 변하기 때문에 단순한 격자 벽 방식으로는 표현하기 어려워요. 이런 지형을 레이캐스팅으로 표현하려면 높이맵(heightmap) 기반 레이캐스팅 또는 복셀 스페이스(Voxel Space) 같은 변형 기법이 필요해요.

이게 뭐냐면, 2D 격자의 각 칸에 "벽이 있다/없다" 대신 높이 값을 저장하는 거예요. 광선을 쏠 때 각 칸의 높이를 확인해서 지형의 윤곽을 그려나가는 방식이죠. 1992년 노바로직(NovaLogic)의 Comanche 시리즈가 이 기법으로 유명했어요. 헬리콥터를 타고 산악 지형 위를 날아다니는 게임이었는데, 당시 기술로는 놀라운 그래픽이었거든요.

웹 기술로 구현한다는 것의 의미

Mooncraft 2000은 브라우저에서 돌아가요. 이 말은 JavaScript(또는 TypeScript)와 Canvas API, 혹은 WebGL을 사용했을 가능성이 높다는 뜻이에요. 레이캐스팅의 핵심 루프는 사실 구조가 단순해서 Canvas 2D API의 putImageData로 픽셀을 직접 찍는 방식으로도 충분히 구현할 수 있어요.

웹에서 이런 그래픽 프로그래밍을 해본 분이라면 아시겠지만, 매 프레임마다 수십만 픽셀을 계산해야 하기 때문에 성능 최적화가 중요해요. 자주 쓰이는 최적화 기법으로는 TypedArray(Uint8ClampedArray 등)를 사용한 직접 픽셀 조작, 광선 진행 시 DDA(Digital Differential Analyzer) 알고리즘으로 효율적인 격자 순회, 그리고 시야 밖 영역의 조기 종료(early termination) 같은 것들이 있어요.

최근에는 WebGPU가 등장하면서 브라우저에서의 그래픽 프로그래밍 가능성이 크게 넓어졌는데요, 레이캐스팅 같은 클래식 기법은 오히려 WebGPU 없이도 잘 돌아간다는 점이 매력이에요. 저사양 기기나 오래된 브라우저에서도 부드럽게 실행될 수 있다는 뜻이니까요.

비슷한 프로젝트들과 비교

브라우저 기반 레이캐스팅 프로젝트는 꾸준히 나오고 있어요. 대표적으로 로엔 세이지(Lode Vandevenne)의 레이캐스팅 튜토리얼은 C++로 작성되었지만, 이걸 JavaScript로 포팅한 프로젝트가 수십 개는 돼요. 또 Raycasting Game Maker 같은 도구를 쓰면 코드를 많이 작성하지 않고도 레이캐스팅 게임을 만들 수 있어요.

하지만 Mooncraft 2000처럼 야외 지형과 게임플레이를 결합한 경우는 상대적으로 드물어요. 대부분의 브라우저 레이캐스팅 데모는 실내 미로 탐험에 그치거든요. 달 표면이라는 설정도 재미있는 선택인데, 달은 대기가 없어서 안개(fog) 효과나 대기 산란 같은 복잡한 처리를 생략할 수 있고, 단색에 가까운 지형 텍스처가 성능에도 유리하거든요.

게임 엔진 관점에서 보면, Three.js나 Babylon.js 같은 WebGL 기반 엔진이 훨씬 강력하고 범용적이에요. 하지만 레이캐스팅은 "동작 원리를 완전히 이해하면서 밑바닥부터 만드는" 경험을 제공한다는 점에서 교육적 가치가 커요. 3D 렌더링의 핵심 원리인 투영(projection), 원근(perspective), 텍스처 매핑을 직접 구현해볼 수 있으니까요.

한국 개발자에게 주는 시사점

게임 개발에 관심 있는 분이라면, 레이캐스팅은 3D 그래픽 프로그래밍의 훌륭한 입문 코스예요. Unity나 Unreal 같은 엔진은 너무 많은 것을 추상화해서, 실제로 화면에 픽셀이 어떻게 그려지는지 이해하기 어렵거든요. 레이캐스팅을 직접 구현해보면 3D 렌더링의 기본 원리가 몸에 익어요.

또 웹 프론트엔드 개발자인데 Canvas나 WebGL을 제대로 다뤄본 적 없다면, 이런 프로젝트를 따라 만들어보는 게 좋은 연습이에요. 레이캐스팅 엔진은 보통 500줄 이내의 코드로 기본 동작을 구현할 수 있어서, 주말 프로젝트로 적당해요.

포트폴리오 측면에서도, 이런 "기술적으로 인상적하면서 눈에 보이는" 프로젝트는 면접관의 시선을 끌기 좋아요. 특히 주니어 개발자가 그래픽 프로그래밍이나 최적화에 대한 이해를 보여주기에 딱이에요.