요약
- 게임 엔진 없이 자바스크립트·캔버스 단일 HTML 파일로 만든 ASCII 3D 도시 영상이 해커뉴스에서 화제예요.
- 격자 기반 월드에 레이캐스팅을 적용해 문자와 기호만으로 원근감과 깊이, 가려짐을 표현해요.
- 교통·실내·고층건물을 추가한 후속 영상 두 편이 이어지며 프로토타입이 계속 발전하고 있어요.
- 제작 방식
- 자바스크립트와 캔버스만으로 만든 단일 HTML 파일, 게임 엔진·3D 모델·텍스처·셰이더 미사용
- 렌더링 기법
- 격자 기반 3D 월드에 레이캐스팅을 적용해 원근감·깊이·가려짐 계산
- 표현 방식
- 가까운 물체는 크고 밝은 문자 클러스터, 먼 물체는 작아지며 어둠 속으로 흐려짐
- 처리 요소
- 도로·건물·나무·차량·사람 위치와 건물 높이, 충돌 처리, 앞뒤 정렬까지 엔진이 담당
- 연관 영상
- 'ASCII City: Traffic and Detail Update', 'ASCII City Update: Interiors, Elevation and Skyscrapers' 두 편 추가 공개
화면 안에서 걸어 다니는 문자 도시
한 개발자가 만든 'ASCII 도시' 영상이 해커뉴스에서 200표 넘는 추천을 받으며 화제가 됐어요. 3D 모델도, 텍스처도, 셰이더도 쓰지 않았고요. 화면을 채우는 건 오직 문자와 숫자, 기호뿐인데도 건물과 도로, 오가는 차량과 행인의 위치가 실시간으로 움직여요. 제작자는 영상에서 “살아있는 것처럼 느껴지는 도시를 만들 수 있을지 보고 싶었다”고 설명했어요.
레이캐스팅, 오래된 기술의 재등장
이 프로토타입의 핵심은 레이캐스팅이에요. 레이캐스팅은 카메라에서 광선을 격자 위로 쏘아, 각 광선이 처음 부딪히는 물체를 찾아내고 그 거리로 원근감과 크기, 가려짐을 계산하는 3D 렌더링 방식이에요. GPU 기반 3D 엔진이 널리 쓰이기 전, 초창기 3D 게임들이 즐겨 쓰던 기법이기도 하고요. 이 프로젝트는 그 오래된 방식을 다시 꺼내, 폴리곤 대신 문자로 결과를 그려내는 쪽으로 바꿔놓았어요.
같은 3D 월드를 만드는 작업이라도 접근 방식은 저마다 다른데요. 텐센트, 텍스트로 3D 오픈월드 만드는 'Hy3D WorldClaw' 공개 기사에서 다룬 것처럼, 최근 3D 월드 생성은 텍스트 프롬프트를 넣으면 에이전틱 워크플로가 게임용 에셋을 뽑아주는 방향으로 가고 있어요. 이번 ASCII 도시는 정반대편 사례예요. AI 모델도, 프롬프트도 없이 개발자 한 명이 손으로 짠 렌더링 로직만으로 걸어 다닐 수 있는 세계를 완성했으니까요.
엔진 안에서 벌어지는 일
영상 속 설명에 따르면 이 엔진은 격자 기반 3D 월드를 데이터로 저장해요. 도로와 건물, 나무, 자동차, 사람의 위치는 물론 건물 높이 같은 정보까지 격자 안에 들어가 있고요. 매 프레임마다 렌더러는 카메라 위치에서 광선을 여러 방향으로 쏘아 각 광선이 처음 부딪히는 대상을 찾아내고, 그 거리를 이용해 원근감과 크기, 깊이, 가려짐 여부를 계산해요. 엔진은 자동차와 보행자의 충돌 처리, 그리고 물체가 서로 앞뒤 어디에 놓이는지 정렬하는 작업까지 함께 처리하고요.
이렇게 계산된 결과는 일반적인 그래픽 대신 캔버스 위의 문자와 숫자, 기호로 그려져요. 가까운 물체는 크고 밝은 문자 덩어리로 표현되고, 멀리 있는 물체는 작아지면서 어둠 속으로 흐려지는 방식이에요.
세 편으로 이어진 업데이트
이번에 화제가 된 영상 외에도 같은 프로젝트를 다룬 영상이 두 편 더 있어요. 하나는 교통 흐름과 세부 묘사를 다듬은 'ASCII City: Traffic and Detail Update'이고, 다른 하나는 실내 공간과 고도, 고층 건물을 추가한 'ASCII City Update: Interiors, Elevation and Skyscrapers'예요. 처음엔 걸어 다닐 수 있는 거리 정도였던 프로토타입이, 업데이트를 거치며 차량 흐름과 건물 내부, 수직 구조까지 채워 넣는 방향으로 발전해온 셈이에요. 제작자는 영상 말미에 이 프로토타입을 계속 가지고 놀아볼 생각이라고 밝혔어요.
에디터의 시선
요즘 3D 월드를 만드는 소식은 대부분 AI 쪽에서 나와요. 텍스트 몇 줄로 게임용 에셋을 뽑아내는 에이전틱 워크플로가 속속 등장하고, 그 결과물의 규모와 완성도가 기사의 핵심이 되곤 하죠. 그런데 이번 ASCII 도시는 정반대 방향에서 눈길을 끌어요. AI 모델 하나 없이, 심지어 게임 엔진조차 없이, 오직 자바스크립트 캔버스와 레이캐스팅이라는 오래된 수학만으로 걸어 다닐 수 있는 세계를 만들어냈으니까요.
예전엔 3D 월드를 하나 띄우려면 엔진 설치부터 에셋 라이브러리 세팅까지 준비 과정이 길었어요. 지금은 그 반대편 극단도 존재한다는 걸 이 프로토타입이 보여줘요. HTML 파일 하나만 열면 실행되는 방식은 배포와 공유가 그만큼 단순하다는 뜻이고, 브라우저 기반 프로토타입이나 게임잼, 실험적인 웹아트를 만드는 개발자에게는 무거운 엔진 없이도 몰입감 있는 공간을 구현할 수 있다는 실무적인 힌트가 돼요. 국내 개발자나 소규모 팀이 아이디어를 빠르게 검증하고 싶을 때, 이런 저의존 렌더링 방식은 여전히 쓸모가 있어요.
제작자가 이미 두 차례 업데이트를 내놓으며 교통, 실내, 고층 건물까지 채워 넣은 걸 보면, 다음 단계로 소리나 NPC 행동 같은 요소가 추가될 가능성이 커 보여요. AI가 3D 월드 생성의 속도를 끌어올리는 동안, 이런 손으로 짠 프로젝트가 나란히 화제를 모은다는 사실 자체가 지금 창작 도구 지형의 폭이 얼마나 넓어졌는지를 보여주는 장면이에요.
댓글