프로젝트: NEON DISTRICT - 인터랙티브 절차적 사이버펑크 메가시티 제작 프롬프트
요약
이 프롬프트는 Three.js와 WebGL을 활용하여 인터랙티브한 사이버펑크 메가시티를 구축하는 상세 가이드입니다. 네온 조명, 젖은 아스팔트 등 영화적인 밤 분위기를 연출하며, 절차적 도시 생성과 살아있는 교통 시뮬레이션을 포함합니다. 사용자는 WASD 기반의 1인칭 탐험을 통해 몰입감 높은 오픈월드를 경험하게 됩니다.
핵심 포인트
- Three.js와 WebGL을 이용한 인터랙티브 오픈월드 구현이 목표입니다.
- 네온 청록색, 마젠타 등 영화적 분위기의 밤 시간대 조명 연출이 핵심입니다.
- 건축적 다양성을 갖춘 절차적 도시 생성 시스템 구축이 요구됩니다.
- GLSL 셰이더를 활용한 반사 및 볼류메트릭 조명 효과가 필수적입니다.
- 자율 보행자와 비행 차량 등 살아있는 도시 시뮬레이션 기능을 구현해야 합니다.
Initial Prompt:
PROJECT: NEON DISTRICT
TYPE: 인터랙티브 절차적 사이버펑크 메가시티 (Interactive Procedural Cyberpunk Megacity)
STACK: Three.js + TypeScript + WebGL + GLSL
시각적으로 장관을 이루고, 완전히 인터랙티브하며 탐험 가능한 사이버펑크 메가시티를 구축하세요.
이 경험은 Cyberpunk 2077, Blade Runner, 그리고 미래적인 도쿄에서 영감을 받은 미니어처 오픈월드 미래 운전 및 탐험 게임처럼 느껴져야 합니다.
이것은 정적인 3D 시각화가 아닙니다. 사용자가 거리를 걸어 다니고, 미래형 차량에 탑승하고, 도시를 운전하며, 환경을 탐험할 수 있는 살아있는, 탐험 가능한 세계를 구축하세요.
아트 디렉션 및 시각적 정체성 (ART DIRECTION & VISUAL IDENTITY)
밤 시간대의 밀집된 미래 메가시티를 만드세요.
시각적 특징:
- 깊은 밤의 분위기.
- 네온 청록색(cyan), 마젠타, 보라색, 주황색 조명.
- 거대한 미래형 고층 빌딩.
- 밀집된 도시 건축물.
- 비에 젖은 거리.
- 반사되는 젖은 아스팔트.
- 분위기 있는 안개(Atmospheric fog).
- 빛나는 상점 간판.
- 고가도로.
- 미래형 교통 시스템.
환경은 영화적이고, 몰입감이 있으며, 시각적으로 풍부해야 합니다.
일반적인 로우 폴리곤(low-poly) 건물이나 반복적인 상자 모양의 건축물은 피하세요.
- 절차적 도시 생성 (PROCEDURAL CITY GENERATION)
절차적 도시 생성 시스템을 구축하세요.
요구 사항:
- 100~300개의 건물 생성.
- 다양한 건물의 높이, 너비, 모양 및 건축 양식.
- 무작위 조명이 적용된 절차적 창문.
- 상세한 건물 파사드(facades).
- 옥상 안테나, 물탱크, 환기 시스템 및 통신 타워.
도로, 교차로, 보도, 골목길.
고가도로와 다리.
가로등 및 신호등.
지상층의 상점 및 소규모 상업 건물.
건물은 건축적 다양성과 믿을 만한 비율을 가져야 합니다.
건물을 무작위로 흩뿌리기보다는 일관성 있는 거리 배치를 생성하세요.
다른 절차적 시드(seed)를 가진 도시 재생 버튼을 추가하세요.
- 조명 및 분위기 (LIGHTING & ATMOSPHERE)
영화적인 밤 시간대 렌더링 환경을 만드세요.
구현할 사항:
적절한 경우 커스텀 GLSL 셰이더(shaders)를 사용할 것.
동적인 네온 발광 재질(emissive materials).
블룸 및 시네마틱 후처리(post-processing).
대기 안개(atmospheric fog)와 거리 페이딩(distance fading).
빗방울 파티클 시스템(rain particle systems).
반사 효과가 있는 젖은 도로 표면.
애니메이션 네온 간판.
절차적 하늘(procedural sky).
방향성 달빛(directional moonlight).
미묘한 볼류메트릭 스타일 조명 효과.
환경 전반에 걸쳐 비가 보여야 함.
도로 표면은 주변 네온 간판과 헤드라이트를 반사해야 함.
- 살아있는 도시 시뮬레이션(LIVING CITY SIMULATION)
도시가 살아있는 것처럼 느껴지게 만듦.
다음 요소를 구현할 것:
-
절차적 경로를 따르는 비행 차량.
-
지상 교통.
-
보도를 따라 걷는 자율 보행자.
-
무작위로 깜빡이는 건물 창문.
-
애니메이션 신호등.
-
움직이는 열차 또는 고가 교통 시스템.
-
주변 환경 파티클.
보행자는 실질적으로 가능한 범위 내에서 기본적인 장애물을 피해야 함.
비행 차량은 다양한 속도와 고도로 움직여야 함.
교통은 도로 경로를 따르고 교차로 규칙을 준수해야 함.
- 1인칭 탐험(FIRST-PERSON EXPLORATION)
완전히 기능하는 1인칭 탐험 시스템을 구현할 것.
조작(CONTROLS):
-
WASD: 이동.
-
마우스: 카메라 시점 조절(Camera look).
-
Shift: 질주(Sprint).
-
Space: 점프.
-
E: 상호작용(Interact).
-
ESC: 마우스 포인터 해제.
요구 사항: -
PointerLockControls 또는 이와 동등한 구현을 사용할 것.
-
현실적인 인간 카메라 높이.
-
속도 기반 이동(Velocity-based movement).
-
가속 및 감속.
중력과 점프 기능. -
건물 및 환경 객체에 대한 충돌 감지(Collision detection).
- 건물을 통과하는 것을 방지할 것.
- 플레이어는 도로와 보도에 발을 디디고 있도록 유지할 것.
-
부드러운 카메라 움직임.
-
이동 댐핑(Movement damping).
플레이어는 거리, 골목길, 교차로, 보도를 탐험할 수 있어야 함.
추가할 요소: -
발소리 효과음(Footstep sounds).
-
주변 도시 소음(Ambient city sounds).
-
먼 곳의 교통 오디오.
-
비 오는 분위기 사운드(Rain ambience).
-
상호작용 가능한 지상 레벨 객체.
- 미래형 차량 모델링(FUTURISTIC VEHICLE MODELING)
독창적이고 매우 상세한 미래 사이버펑크 스포츠카를 제작할 것.
최종 차량으로 기본적인 프리미티브(primitive) 형태를 사용하지 말 것.
차량 디자인:
공격적인 공기역학적 바디.
미래지향적인 비율.
금속성 반사 재료.
네온 시안 및 마젠타 발광 악센트.
상세한 전면 및 후면 지오메트리(geometry).
애니메이션 휠.
기능형 헤드라이트.
브레이크 라이트.
방향지시등(Turn indicators).
투명한 앞유리(windshield).
상세한 조종석(cockpit).
스티어링 휠.
대시보드.
빛나는 언더바디 라이팅.
배기구 및 엔진 디테일.
차량은 프리미엄 미래형 슈퍼카처럼 보여야 합니다.
절차적 지오메트리(procedural geometry) 또는 커스텀 제작된 지오메트리를 사용하세요.
차량은 도시 환경에 자연스럽게 통합되어야 합니다.
- 차량 주행 물리(VEHICLE DRIVING PHYSICS)
진정으로 제어 가능한 차량을 구현합니다.
컨트롤:
W: 가속.
S: 후진/브레이크.
A: 좌회전.
D: 우회전.
Space: 핸드브레이크.
Shift: 나이트로 부스트(Nitro boost).
C: 카메라 전환.
E: 탑승/하차.
물리 엔진:
가속 및 감속.
차량 관성(Vehicle inertia).
속도 의존 스티어링.
타이어 마찰(Tire friction).
드리프트 메커니즘(Drifting mechanics).
서스펜션 시뮬레이션(Suspension simulation).
지면 충돌(Ground collision).
환경 객체와의 충돌 감지(Collision detection with environmental objects).
제동 동작(Braking behavior).
현실적인 회전 반경.
속도계와 기어 표시기를 추가합니다.
차량 움직임은 반응성이 뛰어나고 부드럽게 느껴져야 합니다.
키보드 입력만으로 단순히 차를 앞으로 이동시키는 방식이 아니라, 속도(velocity)와 조향을 고려해야 합니다.
- 차량 카메라 시스템(VEHICLE CAMERA SYSTEM)
네 가지 카메라 시점을 지원합니다:
FIRST-PERSON COCKPIT (1인칭 조종석):
차량 내부에 위치한 카메라.
보이는 대시보드.
스티어링 휠 애니메이션.
속도계.
앞유리에 맺힌 빗방울.
헤드라이트 가시성.
THIRD-PERSON CHASE CAMERA (3인칭 추격 카메라):
차량 뒤를 따라가는 카메라.
부드러운 카메라 감쇠(damping).
속도에 반응하는 카메라 거리.
역동적인 시야각(Dynamic field of view).
CINEMATIC EXTERIOR CAMERA (시네마틱 외부 카메라):
움직이는 차량 주변을 공전하는 카메라.
극적인 카메라 각도.
TOP-DOWN CAMERA (탑다운 카메라):
위에서 내려다보는 차량 뷰.
카메라 모드 간의 부드러운 전환을 허용합니다.
- 탑승/하차 시스템(ENTER / EXIT VEHICLE SYSTEM)
플레이어와 차량 간의 끊김 없는 상호작용을 구현합니다.
요구 사항:
도시 내에 주차된 미래형 차량을 스폰(Spawn)합니다.
플레이어가 해당 차량에 접근할 수 있도록 합니다.
근처에 있을 때 상호작용 프롬프트가 표시되도록 합니다.
E를 누르면 진입합니다.
조종석 또는 선택된 주행 카메라로 전환합니다.
주행 중에는 걷기 조작을 비활성화합니다.
차량 제어 기능을 활성화합니다.
E를 누르면 나갑니다.
플레이어를 차량 옆에 배치합니다.
차량의 위치와 방향을 유지합니다.
플레이어가 건물이나 다른 장애물 안으로 빠지는 것을 방지합니다.
전환은 매끄럽게 느껴져야 합니다.
- 선택적 호버 모드 (OPTIONAL HOVER MODE)
미래적인 호버 모드를 구현합니다.
특징:
차량 고도 제어.
도로 주행과 호버링 간의 부드러운 전환.
빛나는 호버 스러스터(hover thrusters).
애니메이션 에너지 효과.
호버 안정화.
수직 이동.
선택적 공중 항법.
Shift 키 또는 전용 컨트롤을 사용하여 호버 모드를 활성화합니다.
- 차량 효과 (VEHICLE EFFECTS)
몰입도를 높이기 위해 시각 효과를 추가합니다.
니트로 부스트 중 네온 타이어 트레일(Neon tire trails).
배기 입자(Exhaust particles).
브레이크등 애니메이션.
앞유리창의 빗방울.
속도에 반응하는 카메라 효과.
가속에 반응하는 엔진 오디오.
타이어 스키드 효과.
웅덩이를 지나갈 때 물 튀김 입자(Water splash particles).
헤드라이트 조명.
니트로 활성화 효과.
- 인터랙티브 제어 대시보드 (INTERACTIVE CONTROL DASHBOARD)
프리미엄 미래형 제어 인터페이스를 만듭니다.
도시 제어 (CITY CONTROLS):
도시 재생성(Regenerate city).
건물 밀도(Building density).
건물 높이 변화(Building height variation).
네온 강도(Neon intensity).
비 강도(Rain intensity).
안개 밀도(Fog density).
교통 밀도(Traffic density).
보행자 밀도(Pedestrian density).
주야간 모드(Day/night mode).
시뮬레이션 제어 (SIMULATION CONTROLS):
비행 차량 토글(Toggle flying vehicles).
지상 교통 토글(Toggle ground traffic).
보행자 토글(Toggle pedestrians).
비 토글(Toggle rain).
앰비언트 오디오 토글(Toggle ambient audio).
카메라 제어 (CAMERA CONTROLS):
항공 뷰(Aerial view).
1인칭 탐험(First-person exploration).
3인칭 탐험(Third-person exploration).
시네마틱 카메라(Cinematic camera).
차량 제어 (VEHICLE CONTROLS):
차량 스폰(Spawn vehicle).
차량 초기화(Reset vehicle).
호버 모드 토글(Toggle hover mode).
차량 카메라 변경(Change vehicle camera).
차량 색상 커스터마이징.
모든 컨트롤은 작동해야 하며 시뮬레이션을 실시간으로 업데이트해야 합니다.
- 사용자 인터페이스 및 경험 (USER INTERFACE & EXPERIENCE)
세련된 미래형 사용자 인터페이스를 만듭니다.
디자인 방향:
어둡고 반투명한 패널.
미니멀한 타이포그래피.
네온 강조 색상.
은은한 애니메이션.
깔끔한 아이콘.
부드러운 전환 효과.
반응형 레이아웃.
포함할 요소:
메인 메뉴.
로딩 화면.
도시 초기화 진행률.
키보드 조작 가이드.
상호 작용 프롬프트.
차량 HUD(Head-Up Display).
속도계.
미니맵 또는 내비게이션 인디케이터.
FPS 카운터.
설정 패널.
인터페이스는 탐험을 방해하지 않으면서 3D 환경을 보완해야 한다.
14. 기술 아키텍처 (TECHNICAL ARCHITECTURE)
사용:
Three.js,
TypeScript,
WebGL.
이점을 얻을 수 있는 곳에 커스텀 GLSL 셰이더(shader)를 사용한다.
반복되는 지오메트리에는 InstancedMesh를 사용한다.
절차적 지오메트리 생성(Procedural geometry generation).
효율적인 파티클 시스템(particle systems).
최적화된 애니메이션 루프(animation loops).
모듈식 컴포넌트 아키텍처(Modular component architecture).
성능 요구 사항:
드로우 콜(draw calls)을 최적화한다.
지오메트리와 재질을 재사용한다.
애니메이션 루프 내에서 불필요한 할당(allocations)을 피한다.
창문과 반복되는 객체에는 인스턴싱(instancing)을 사용한다.
효율적인 충돌 감지(collision detection)를 구현한다.
적절한 경우 공간 분할(spatial partitioning)을 사용한다.
도시 재생성 시 GPU 리소스를 해제(dispose)한다.
과도한 실시간 동적 조명(dynamic lights)은 피한다.
유용한 곳에 레벨-오브-디테일(Level-of-detail, LOD) 전략을 구현한다.
최신 데스크톱 하드웨어에서 안정적인 60 FPS를 목표로 한다.
시각 효과를 위해 모든 성능을 희생하지 않는다.
15. 개발 및 품질 요구 사항 (DEVELOPMENT & QUALITY REQUIREMENTS)
단순한 시각적 프로토타입이 아닌 완전한 애플리케이션을 구축한다.
요구 사항:
완전히 실행 가능한 프로젝트(Fully runnable project).
깔끔한 프로젝트 구조.
재사용 가능한 컴포넌트.
적절한 TypeScript 타입.
플레이스홀더 버튼 없음.
가짜 상호 작용 없음.
작동하지 않는 키보드 조작 없음.
누락된 에셋 없음.
콘솔 오류 없음.
적절한 리소스 관리.
기능이 계산적으로 너무 비싸다면, 미완성으로 남기기보다 최적화된 근사치(approximation)를 구현한다.
보조 기능을 추가하기 전에 핵심 경험을 완성하는 것을 우선시한다.
16. 최종 경험 (FINAL EXPERIENCE)
최종 경험은 사용자가 다음을 할 수 있도록 해야 한다:
비가 내리고 네온 불빛이 가득한 사이버펑크 메가시티에 진입하는 것.
1인칭 모드로 거리를 탐험합니다.
미래적인 골목과 교차로를 걸어 다닙니다.
보행자와 비행 차량을 관찰합니다.
주차된 미래형 스포츠카를 찾습니다.
차량에 접근합니다.
'E' 키를 눌러 조종석으로 들어갑니다.
도시를 운전하며 이동을 시작합니다.
조종석 시점과 3인칭 카메라 사이를 전환합니다.
니트로(nitro)를 활성화하고 네온 불빛이 비추는 코너에서 드리프트(drift) 합니다.
반사광, 빗방울, 그리고 교통 상황을 관찰합니다.
호버 모드(hover mode)를 활성화하여 거리 위를 탐험합니다.
차량에서 나와 계속 탐험합니다.
최종 품질 기준:
작지만 설득력 있는 오픈월드 사이버펑크 경험처럼 느껴져야 합니다.
구현 품질을 위해 기능 개수를 우선시하지 마십시오.
가장 중요한 우선순위는 다음과 같습니다:
- 시각적으로 인상적인 도시 건축물.
- 설득력 있는 야간 조명과 비.
- 부드러운 1인칭 탐험.
- 상세한 미래형 차량 모델링.
반응성이 뛰어나고 믿을 만한 운전 물리(driving physics).
끊김 없는 걷기에서 운전으로의 전환.
안정적인 성능.
사람들이 스크린샷이나 비디오를 봤을 때 스크롤을 멈추게 만드는 무언가를 만드십시오.
결과물은 진정한 3D 엔지니어링, 시각적 창의성, 그리고 인터랙티브 시뮬레이션 능력을 보여주어야 합니다.
AI 자동 생성 콘텐츠
본 콘텐츠는 X Unity/게임개발의 원문을 AI가 자동으로 요약·번역·분석한 것입니다. 원 저작권은 원저작자에게 있으며, 정확한 내용은 반드시 원문을 확인해 주세요.
원문 바로가기