Procedural Tokyo란?
Procedural Tokyo는 브라우저에서 실행되는 도쿄의 실시간 3D 모델입니다. 실제 건물, 도로, 지형, 철도, 지리적 특징에 파사드, 창문, 거리 시설물, 교통, 조명, 물, 날씨, 새와 같은 절차적 세부 요소를 결합합니다.
이 프로젝트는 Project PLATEAU, OpenStreetMap, 일본 국토지리원의 공개 데이터를 사용합니다. 오프라인 컴파일러가 원본 레코드를 압축된 바이너리 타일로 변환하고, 브라우저는 카메라 주변의 타일을 스트리밍하여 메시로 구성합니다.
jeantimex.github.io/tokyo에서 호스팅 버전을 체험할 수 있습니다. 이 환경은 데스크톱 브라우저에 맞게 설계되었으며 모바일 브라우저에는 권장되지 않습니다.
사용 가능한 장면 탐색
각 장면은 약 3.4×2.8킬로미터 영역을 포함합니다. 포함된 지역은 다음과 같습니다.
- 도쿄: 도쿄역, 마루노우치, 황궁 해자.
- 시바: 도쿄 타워, 조조지, 시바 공원.
- 시부야: 스크램블 교차로, 시부야역, 고속도로.
- 신주쿠: 신주쿠역, 고층 빌딩 지구, 가부키초, 신주쿠교엔.
- 지요다: 아키하바라, 간다, 오차노미즈.
- 주오: 쓰키지, 가치도키, 쓰키시마, 하루미, 해안 지역, 운하.
- 후지노미야: 60킬로미터 거리의 지형 배경이 있는 후지산 인근 마을.
PLATEAU는 수백 개의 일본 도시를 다루지만, 제공되는 세부 수준은 지역마다 다릅니다. 도심에는 정교한 지붕 형태와 항공 사진 텍스처가 포함될 수 있으며, 소규모 마을에는 더 단순한 건물 블록이 사용될 수 있습니다.
주요 기능
사실적인 건물과 지표면
건물에는 실제 건물 외곽선, 높이, 층수, 용도 정보가 반영됩니다. PLATEAU에서 상세한 건물 외피와 지붕 사진을 제공하는 경우 해당 에셋을 직접 사용합니다. 생성된 파사드, 창문, 발코니, 파라펫, 옥상 설비, 상점 간판 띠가 가까운 거리에서 세부 묘사를 더합니다.
지표면에는 5미터 고도 모델, 항공 사진, 도로 표면, 연석, 공원, 숲, 수역이 사용됩니다. 도로 표시에는 차선, 횡단보도, 정지선, 화살표, 일본어 止まれ 표시, 도색된 제한 속도가 포함됩니다.
움직이는 도시의 모습
교통은 실제 도로 그래프를 따라 좌측 통행을 유지하고, 일방통행 도로와 신호를 준수하며, 교차로에서 대기하고, 고속도로와 램프를 이용합니다. 열차는 실제 철도 노선을 따라 운행합니다. 장면에는 전봇대, 전선, 가로등, 교통 신호기, 자판기, 도리이, 역 승강장, 육교, 나무, 주차 차량도 포함됩니다.
시간, 날씨, 반사
시간 슬라이더 또는 실시간 도쿄 시계가 태양, 달, 하늘, 그림자, 노출을 제어합니다. 저녁이 되면 어둠이 황혼을 거쳐 내려오기 전에 도시의 조명이 먼저 켜집니다. 렌더러는 체적 구름, 대기 원근, 잔물결이 이는 수면, 창문 반사, 빛나는 간판, 헤드라이트, 도쿄 타워 조명도 지원합니다.
새 떼는 나무에 내려앉았다가 다시 날아갈 수 있습니다. 후지노미야 장면에서는 선택적으로 거친 지형 배경을 추가해 마을 뒤에 후지산을 배치하며, 항공 이미지와 눈 덮인 정상도 포함합니다.
프로젝트 설치 및 실행
저장소를 복제하고 npm으로 의존성을 설치합니다.
npm install프로젝트에서 사용하는 CC0 텍스처를 다운로드합니다. 이 단계는 한 번만 수행하면 되며 public/textures/에 약 14 MB를 저장합니다.
node tools/assets/fetch_textures.mjs다음으로 지역의 원시 데이터를 가져옵니다. 다음 예시는 도쿄 원본 데이터를 다운로드합니다.
npm run fetch -- --area=tokyo다운로드한 레코드를 브라우저용 타일로 컴파일합니다.
npm run compile -- --area=tokyo마지막으로 개발 서버를 시작합니다.
npm run dev데스크톱 브라우저에서 http://localhost:5280을 엽니다. 컴파일된 도시 파일은 저장소에 커밋되지 않으므로 각 지역을 원본 데이터에서 다시 빌드해야 합니다.
데이터 파이프라인 이해
파이프라인은 두 가지 주요 단계로 구성됩니다. fetch 명령은 원본 파일을 data/raw/<area>/에, 항공 이미지를 public/ortho/<area>/에 다운로드합니다. compile 명령은 해당 레코드를 public/tiles/<area>/ 아래의 스트리밍 타일로 변환합니다.
선택한 지역의 전체 파이프라인을 다음과 같이 실행합니다.
npm run fetch -- --area=shibuya
npm run compile -- --area=shibuyaPLATEAU 건물 사진이 포함되므로 원본 다운로드 용량이 클 수 있습니다. README에는 도쿄 약 3.6 GB, 시바 3.0 GB, 시부야 1.3 GB, 후지노미야 0.2 GB로 기재되어 있습니다. 컴파일에는 지역에 따라 수 초에서 수 분이 걸립니다.
컴파일된 데이터 검사 및 테스트
다음 명령으로 지역의 위에서 내려다본 미리보기를 생성합니다.
npm run preview -- --area=tokyo타일 왕복 변환과 도로 표시 간격을 확인하려면 프로젝트 테스트를 실행합니다.
npm test이 검사는 지형 정렬을 확인하는 데 특히 유용합니다. 도로 표면, 차선 표시, 기호는 지형 메시 삼각형을 따라 분할되므로 경사진 지면 위에 유지되며 타일 경계를 뚫고 가라앉지 않습니다.
브라우저 컨트롤 사용
- 드래그하여 이동합니다.
- 마우스 오른쪽 버튼을 드래그하여 회전합니다.
- 마우스 휠을 사용하여 확대/축소합니다.
WASD키를 사용하여 이동합니다.- 이동하는 동안
Shift키를 누르고 있으면 더 빠르게 이동합니다. N키를 눌러 낮과 밤을 전환합니다.- 건물을 클릭하여 살펴봅니다.
오른쪽 상단의 설정 패널에서 영역을 전환하고 시간, 교통량, 구름, 조명 및 렌더링 품질을 조정할 수 있습니다. 설정은 브라우저에 저장됩니다.
URL 매개변수로 장면 열기
URL 매개변수는 특정 뷰를 공유하거나 렌더링 구성을 테스트할 때 유용합니다. 예:
https://jeantimex.github.io/tokyo/?area=shibuya&time=18.5&traffic=0지원되는 매개변수는 다음과 같습니다.
area=tokyo|shiba|shibuya|shinjuku|chiyoda|chuo|fujinomiya는 영역을 선택합니다.time=18.5는 도쿄 현지 시각을 설정합니다.night=1은 야간 모드로 전환합니다.cam=x,z,distance,azimuth,elevation은 카메라를 설정합니다.radius=900은 활성 뷰 반경을 조정합니다.traffic=0은 교통량을 비활성화합니다.cars=600은 자동차 수를 변경합니다.birds=150은 새 수를 변경합니다.clouds=0.25는 구름 범위를 조정합니다.ortho=0은 직교 모드를 비활성화합니다.
URL 매개변수로 연 페이지는 저장된 브라우저 설정을 덮어쓰지 않습니다.
컴파일된 타일의 작동 방식
클라이언트는 영역의 중심을 원점으로 하는 로컬 미터 좌표계를 사용합니다. x축은 동쪽, y축은 위쪽, z축은 남쪽을 가리킵니다. 타일은 256미터 정사각형이며, 사이트는 현재 뷰 주변의 타일을 스트리밍하는 동안 Web Worker에서 타일 메시를 생성합니다.
컴파일된 영역에는 다음 파일이 포함됩니다.
manifest.json에는 원점, 경계, 타일 목록, 지형 그리드, 교량 상판 및 저작자 표시 정보가 저장됩니다.t_<x>_<z>.bin에는 건물, 지표면, 도로 노면 표시, 소품, 전선 및 표지판으로 구성된 타일 하나가 저장됩니다.terrain.bin에는 5미터 간격의 Float32 지형 높이 그리드가 저장됩니다.roads.json에는 도로 그래프, 지점별 높이, 신호가 있는 교차로가 저장됩니다.rails.json및structures.json에는 철도 노선, 승강장, 캐노피 및 육교가 저장됩니다.backdrop.bin에는 영역 주변의 선택적 개략 지형이 저장됩니다.
영역 추가 또는 구성
PLATEAU가 지원하는 다른 도시를 추가하려면 tools/pipeline/config.mjs에 항목을 정의합니다. 영역에는 중심점과 처리할 PLATEAU 격자 사각형을 지정합니다. 선택적으로 배경 크기와 시작 카메라 뷰도 정의할 수 있습니다.
모든 파이프라인 스크립트는 동일한 영역 옵션을 사용합니다.
npm run fetch -- --area=my-area
npm run compile -- --area=my-area
npm run preview -- --area=my-areaPLATEAU 파일은 PLATEAU 데이터 카탈로그 API를 통해 가져옵니다. 파이프라인은 gml:id를 기준으로 레코드의 중복을 제거하며, 이는 도쿄 데이터셋의 한 격자 사각형이 둘 이상의 구 아래에 나타날 때 중요합니다. 도시마다 지원 범위가 다르므로, 상세 셸, 사진 텍스처 또는 가로 시설물을 사용할 수 없으면 클라이언트는 생성된 세부 정보로 대체합니다.
고급 기술 세부 정보
지형, 도로 및 교량
PLATEAU, OpenStreetMap 및 GSI 데이터는 하나의 로컬 미터 그리드로 투영됩니다. 공통 5미터 고도 그리드를 사용하므로 인접한 타일의 경계에서 높이가 동일합니다. 컴파일 중에 건물 바닥을 지형과 대조하고 그 차이를 기록합니다.
세부 정보가 부족한 도로 윤곽은 OpenStreetMap 중심선을 사용하여 차도와 보도로 나눕니다. 교량과 고가도로에는 별도의 프로필이 적용됩니다. 도로 교량은 양쪽 제방 사이의 높이를 맞추고, 고속도로는 레이어에 따라 들어 올리며, 램프는 올바르게 연결되도록 경사를 조정합니다.
조명 및 반사
모든 램프마다 별도의 동적 조명을 만드는 대신 가로등과 전조등을 라이트 맵에 그립니다. 겹치는 광원에서는 더 밝은 값이 유지되며, 램프 높이 데이터를 사용하여 고가도로 아래의 조명이 그 상판을 비추지 않도록 합니다.
물 반사는 수면 아래에 도시를 한 번 더 그려 생성합니다. 물결이 결과를 왜곡하고, 구름 반사는 날씨 맵을 샘플링합니다. 창유리는 색상 버퍼의 알파 채널에 표시하고 화면 공간 반사 패스에서 처리합니다.
렌더링 및 성능
렌더러는 pmndrs의 postprocessing 컴포저와 함께 three.js를 사용합니다. 효과에는 n8ao 앰비언트 오클루전, 반사, 대기, 구름, 블룸 및 톤 매핑이 포함됩니다. 새는 버텍스 셰이더에서 배치하므로 대규모 무리도 CPU 시간을 거의 사용하지 않습니다.
성능을 높이려면 활성 반경을 적당히 유지하고, 자동차와 새의 수를 줄이거나, 구름을 비활성화하거나, 설정 패널에서 렌더링 품질을 낮추세요. 기본 스트리밍 모드는 주변 타일을 로드합니다. whole city 옵션은 사용 가능한 모든 타일을 로드하므로 메모리가 상당히 더 필요할 수 있습니다.
컴파일된 사이트 배포
게시할 영역을 컴파일한 후 다음을 실행합니다.
npm run deploy이 명령은 배포 파일을 빌드하고 dist/를 저장소의 origin에 있는 gh-pages 브랜치에 단일 커밋으로 강제 푸시합니다. 배포에는 해당 컴퓨터에서 컴파일된 도시가 포함됩니다. README에서는 포함된 7개 영역에 약 650MB가 필요할 것으로 예상합니다.
데이터 저작자 표시 및 라이선스
코드는 MIT 라이선스에 따라 공개되지만, 도시 데이터에는 원본 출처의 이용 약관이 계속 적용됩니다. Project PLATEAU는 3D 도시 모델, 지붕 사진, 교량 및 거리 시설물을 제공합니다. GSI는 고도 데이터와 항공 사진을 제공합니다. OpenStreetMap 기여자들은 ODbL에 따라 도로, 철도 및 장소 데이터를 제공합니다. Poly Haven 텍스처는 CC0이며, 나무에는 MIT 라이선스의 ez-tree를 사용하고, 대기 및 구름 구성 요소는 MIT 라이선스의 three-geospatial에서 가져옵니다.
결론
Procedural Tokyo는 공공 지리 공간 데이터셋을 풍부하게 애니메이션화된 브라우저 경험으로 구현하는 방법을 보여줍니다. 이를 사용하려면 종속성을 설치하고, 텍스처와 영역 데이터를 다운로드하고, 데이터를 타일로 컴파일한 다음 개발 서버를 실행하세요. 이후 URL 매개변수, 파이프라인 구성, 테스트 및 배포 명령을 활용해 프로젝트를 실제로 탐색하고 확장할 수 있습니다.