단일 HTML 파일로 만든 걸어 다니는 ASCII 사이버펑크 도시 [비디오]
1 hour ago
1
- ASCII 기호로 살아 있는 듯한 도시를 구현해, 평면 이미지를 넘어 데이터 세계를 직접 걷는 경험을 제공하는 프로토타입임
- 별도 게임 엔진 없이 JavaScript와 Canvas로 만든 소형 커스텀 엔진 전체가 단일 HTML 파일에서 실행됨
- 도로·건물·나무·자동차·사람의 위치와 건물 높이를 격자 기반 3D 공간에 저장하고, 카메라에서 광선을 쏴 처음 닿는 물체를 찾음
- 물체까지의 거리로 원근감·크기·깊이·가림을 계산하며, 충돌과 자동차·보행자의 움직임, 물체의 앞뒤 관계도 처리함
- 일반 그래픽 대신 문자·숫자·기호로 장면을 표현해, 가까운 물체는 크고 밝게 보이고 먼 물체는 작아지며 어둠 속으로 희미해짐
단일 파일에 담은 ASCII 도시
- 살아 움직이는 듯한 도시 전체를 ASCII 기호로 구성한 소형 프로토타입임
- 블록으로 만든 작은 3D 도시를 ASCII 문자 화면으로 바라보며 직접 걸어 다닐 수 있음
- Unity·Unreal을 사용하지 않고 3D 모델, 텍스처, 셰이더도 쓰지 않음
- JavaScript와 Canvas 기반 커스텀 엔진이 하나의 HTML 파일에 모두 들어 있음
격자 기반 렌더링과 시뮬레이션
- 도로·건물·나무·자동차·사람의 위치와 건물 높이를 격자 기반 3D 공간에 저장함
- 렌더러는 매 프레임 카메라에서 격자 방향으로 광선을 투사해 각 광선이 처음 만나는 대상을 찾음
- 거리로 원근감·크기·깊이를 계산함
- 다른 물체 뒤에 가려져야 할 대상도 판정함
- 충돌과 자동차·보행자를 처리하며, 물체가 올바른 앞뒤 순서로 나타나도록 구성됨
- 계산된 장면은 일반 그래픽 대신 문자·숫자·기호의 조합으로 Canvas에 출력됨
- 가까운 물체는 더 크고 밝은 문자 군집으로 나타남
- 먼 물체는 작아지면서 어둠 속으로 희미해짐
- 제작자는 이 프로토타입을 계속 실험할 계획임
-
Homepage
-
개발자
- 단일 HTML 파일로 만든 걸어 다니는 ASCII 사이버펑크 도시 [비디오]