단일 HTML 파일로 만든 걸어 다니는 ASCII 사이버펑크 도시 [비디오]

1 hour ago 1
  • ASCII 기호로 살아 있는 듯한 도시를 구현해, 평면 이미지를 넘어 데이터 세계를 직접 걷는 경험을 제공하는 프로토타입임
  • 별도 게임 엔진 없이 JavaScript와 Canvas로 만든 소형 커스텀 엔진 전체가 단일 HTML 파일에서 실행됨
  • 도로·건물·나무·자동차·사람의 위치와 건물 높이를 격자 기반 3D 공간에 저장하고, 카메라에서 광선을 쏴 처음 닿는 물체를 찾음
  • 물체까지의 거리로 원근감·크기·깊이·가림을 계산하며, 충돌과 자동차·보행자의 움직임, 물체의 앞뒤 관계도 처리함
  • 일반 그래픽 대신 문자·숫자·기호로 장면을 표현해, 가까운 물체는 크고 밝게 보이고 먼 물체는 작아지며 어둠 속으로 희미해짐

단일 파일에 담은 ASCII 도시

  • 살아 움직이는 듯한 도시 전체를 ASCII 기호로 구성한 소형 프로토타입임
  • 블록으로 만든 작은 3D 도시를 ASCII 문자 화면으로 바라보며 직접 걸어 다닐 수 있음
  • Unity·Unreal을 사용하지 않고 3D 모델, 텍스처, 셰이더도 쓰지 않음
  • JavaScript와 Canvas 기반 커스텀 엔진이 하나의 HTML 파일에 모두 들어 있음

격자 기반 렌더링과 시뮬레이션

  • 도로·건물·나무·자동차·사람의 위치와 건물 높이를 격자 기반 3D 공간에 저장함
  • 렌더러는 매 프레임 카메라에서 격자 방향으로 광선을 투사해 각 광선이 처음 만나는 대상을 찾음
    • 거리로 원근감·크기·깊이를 계산함
    • 다른 물체 뒤에 가려져야 할 대상도 판정함
  • 충돌과 자동차·보행자를 처리하며, 물체가 올바른 앞뒤 순서로 나타나도록 구성됨
  • 계산된 장면은 일반 그래픽 대신 문자·숫자·기호의 조합으로 Canvas에 출력됨
    • 가까운 물체는 더 크고 밝은 문자 군집으로 나타남
    • 먼 물체는 작아지면서 어둠 속으로 희미해짐
  • 제작자는 이 프로토타입을 계속 실험할 계획임
Read Entire Article