기술 아키텍처
완성된 시스템의 구조
완성된 애플리케이션의 단면입니다. 각 다이어그램은 시스템의 한 층을 나타냅니다. 인터랙티브 다이어그램을 통해 상태, 파이프라인, 분기를 직접 탐색할 수 있습니다.
애플리케이션 상태 머신
다섯 개의 공식 상태가 방문자의 경로를 이끕니다. 상태를 클릭하면 그 안에서 어떤 시스템이 작동하며 이웃 상태와 어떻게 전이하는지 볼 수 있습니다.
유체 시뮬레이션 파이프라인 (11단계)
프레임마다 PIC/FLIP 솔버가 파티클 이동 · 격자 전송 · 압력 해석 · 역전송까지 12개의 컴퓨트 단계를 실행합니다. 특정 단계에서 마우스·오디오 구동력을 받아들입니다.
PIC/FLIP twelve-step pipeline
Twelve compute steps per frame, from grid clear through particle advection. Audio input drives the transfer step; mouse input drives the force step.
- 01 Clear Reset velocity and mass grids to zero.
- 02 Transfer → Particles deposit velocity/mass onto the grid (P2G).
- 03 Normalize Divide accumulated velocity by mass per cell.
- 04 Mark cells Flag fluid, boundary, and air cells for the pressure solve.
- 05 Copy vel Snapshot the pre-forces velocity for the PIC/FLIP blend.
- 06 Add forces Apply gravity plus mouse / audio-driven forces.
- 07 Enforce bnd Zero the normal component on boundary cells.
- 08 Divergence Compute ∇·u per cell for the pressure projection.
- 09 Jacobi ×50 Fifty iterations of Jacobi to solve ∇²p = ∇·u.
- 10 Subtract u -= ∇p to obtain the divergence-free velocity field.
- 11 Transfer ← Grid velocity is blended back into particles (G2P).
- 12 Advect Advance particle positions with the corrected velocity.
5패스 디퍼드 렌더링
지오메트리 · 가림 · 그림자 · 컴포짓 · 안티에일리어싱이 각각 독립된 패스로 작동합니다. 컴포짓 단계에서 표면 정보와 오디오 기반 색을 장면 재래스터화 없이 결합합니다.
Five-pass deferred renderer
Rendering flows left to right across five passes: geometry, occlusion, shadow, composite, and post-processing.
- Pass 1 G-Buffer
- normal
- speed
- viewZ
- Pass 2 Sphere AO
- additive
- occlusion
- Pass 3 Shadow Depth
- ortho depth
- PCF
- Pass 4 Composite
- HSV + audio
- Pass 5 FXAA
- post
13트랙 오디오 존 시스템
필드 레코딩은 카테고리로 묶여 장면 내부 공간 존으로 라우팅됩니다. 소리와 공간이 서로를 따라 움직입니다.
Thirteen-track audio zone system
Thirteen field-recording tracks are grouped into five categories, each of which maps onto a set of spatial zones in the scene.
Tracks
- market crowd
- taxi ambience
- driving man
Zones
- bugis street
- bugis mosque court
- bugis hawker
Tracks
- mosque prayer
- fountain
Zones
- inner courtyard
- dome echo
Tracks
- wave near
- wave far
- wind
Zones
- tide line
- wind channel
Tracks
- bird canopy
- leaves
Zones
- palm canopy
- path edge
Tracks
- low drone
Zones
- global ambient
프래그먼트 셰이더의 세 갈래 분기
컴포짓 프래그먼트 셰이더는 지역에서 설정한 유니폼에 따라 세 가지 출력 경로(생체발광, 크리스털, 기본 HSV) 중 하나를 선택합니다.
composite.frag three-way branch
The fragment shader selects one of three paths based on two uniforms: the bioluminescent ECP branch, the Bugis crystal branch, and the default HSV fallback.
FRAGMENT SHADER
composite.frag u_bioluminescent > 0.5 u_bugisCrystal > 0.5 else