NEON SPRAWL

One seed. One city. Sixteen thousand flying cars. 숫자 하나를 넣으면 타워 2천여 개와 비행차 1만 6천 대가 사는 사이버펑크 도시가 펼쳐집니다. 브라우저에서 바로 날아다닐 수 있습니다.

---

한눈에 보기

Night, Director 카메라 — 차 아래에서 올려다보는 컷	Dusk, Chase 카메라 — 노을 속 협곡 비행
Day — 유리 외벽, 안개, 낮은 구름	Night — 전조등 빔과 네온

특징

• 🌱 시드 하나로 생성 — 30 × 30 격자의 필지마다 노이즈 필드와 도심 거리로 높이·셋백·첨탑·외벽 스타일을 정합니다. 같은 시드는 언제나 같은 도시입니다.
• 🚗 GPU가 모는 교통 — 16,000대 전부를 차선·속도·위상만으로 정점 셰이더가 매 프레임 배치합니다. 차체와 전조등 빔을 합쳐 드로우 콜 2번입니다.
• 🪟 텍스처 없는 창문 ~140만 개 — 프래그먼트 셰이더가 창문 격자를 그리고, 방 단위 해시로 불을 켭니다. 멀리 있는 격자는 평균색으로 섞여 모아레가 생기지 않습니다.
• 🎥 카메라 4종 + 자유 시점 — Chase · Seat · Drone · Director. 추적·운전석 시점에서도 드래그로 둘러보고 휠로 당기고 밀 수 있습니다.
• 🌇 하늘 3종 — Day · Dusk · Night. 해, 안개, 불 켜진 방 비율, 블룸 세기가 부드럽게 전환됩니다.
• ⚙️ 그래픽 품질 — Auto · Fast · High · Ultra. Auto는 프레임레이트를 보고 렌더 해상도를 스스로 조절합니다.
• 🎬 필름 모드와 일시정지 — UI를 걷어 내고 레터박스로 감상하거나, 도시 전체를 멈춘 채 카메라만 돌려 볼 수 있습니다.
• 🔗 URL이 곧 저장 파일 — 시드·하늘·카메라·위치·방향·품질이 주소창에 기록되어 링크만 보내면 같은 장면이 열립니다.

조작

입력	동작
W S	상승 / 하강
A D	도로 폭 안에서 좌우로 기울여 이동
Q E	차 주위로 카메라 궤도 회전
⇧ T	터보 토글
⇧ H	호버(정지) 토글
⇧ V	운전석 시점 토글
C	필름 모드 (Esc로 해제)
R	시점 초기화
Space	일시정지
드래그	둘러보기 (Drone에서는 궤도 회전, 우클릭 드래그는 이동)
휠	확대 / 축소
차 클릭 / 탭	그 차로 갈아타 추적

오른쪽 위 Controls 패널은 처음에만 열려 있다가, 비행을 시작하면(캔버스 클릭·드래그·휠, 조종 키) 저절로 접힙니다. 버튼을 누르면 다시 열립니다.

내 차는 손을 떼도 협곡을 따라 스스로 날고 교차로에서 방향을 틉니다. 도시 끝에 닿기 전에는 반드시 돌아섭니다.

URL 파라미터

app/#seed=4417&sky=night&view=chase&at=825.3,145.3,849.0&look=119,-5&traffic=70&gfx=high

키	값	설명
seed	0–99999	도시 시드. 없으면 무작위
sky	day · dusk · night	하늘
view	chase · seat · drone · director	카메라
at	x,y,z	위치 (drone은 카메라, 그 외는 내 차)
look	yaw,pitch	바라보는 방향(도)
traffic	0–100	교통량 %. 기본 70이면 생략
gfx	auto · fast · high · ultra	그래픽 품질. 기본 auto면 생략

로컬 실행

빌드 과정이 없는 정적 사이트입니다. ES 모듈을 쓰므로 file:// 대신 정적 서버로 띄우세요.

git clone https://github.com/jeiel85/neon-sprawl.git
cd neon-sprawl
python -m http.server 5180 --bind 127.0.0.1

http://127.0.0.1:5180/ 이 랜딩 페이지, http://127.0.0.1:5180/app/ 이 도시입니다. three.js와 폰트는 CDN에서 받으므로 인터넷 연결이 필요합니다.

구조

neon-sprawl/
├── index.html          랜딩 페이지 (GitHub Pages 루트)
├── assets/             스크린샷
└── app/
    ├── index.html      도시 앱 + HUD/패널
    ├── style.css
    └── src/
        ├── rng.js      시드 RNG(mulberry32), value noise
        ├── city.js     격자·필지·타워/네온/경고등/지면
        ├── traffic.js  차선·차량 생성, 인스턴싱, CPU 위치 계산
        ├── shaders.js  모든 GLSL (창문, 안개, 차량 배치)
        ├── sky.js      하늘 프리셋, 별·구름, 전환 보간
        ├── hero.js     내 차 자동 비행과 키 조작
        ├── cameras.js  카메라 4종, 드래그·궤도·줌
        └── main.js     렌더러·블룸·품질·UI·입력·URL 해시

고칠 때 주의할 점

• 차량 위치는 셰이더(CAR_PLACE)가 계산하고, 클릭 선택과 Director 카메라는 traffic.carPos()가 같은 식을 CPU에서 재현합니다. 두 식은 항상 같이 고쳐야 합니다.
• 창문 셀 크기는 city.js의 CELLS(창 개수 통계)와 shaders.js의 cellFor()(렌더링)에 중복되어 있습니다.
• 브라우저 콘솔의 window.neonSprawl로 실행 중인 상태(hero, world, camera 등)를 볼 수 있습니다.

크레딧

sael.net/gigacity에서 영감을 받아 처음부터 새로 구현했습니다. 렌더링은 three.js를 씁니다.

라이선스

MIT © 2026 박용은 (jeiel85)