WebGL 2.0과 Three.js 기반 3D 공간 음향·안개 셰이더 아키텍처: 브라우저에서 구현하는 다크 헤리티지 디지털 트윈

1. 왜 다크 헤리티지 아카이브에 'WebGL 2.0 3D 디지털 트윈'이 필요한가?

역사적 폐건축물이나 출입이 통제된 미스터리 유적을 보존하고 연구하는 데 있어 가장 큰 딜레마는 '접근성과 안전의 충돌'입니다. 텍스트와 사진만으로는 그 공간이 지닌 복도 길이, 조도, 시야각, 음향 공명의 공간감을 온전히 전달하기 어렵고, 반대로 실제 현장에 방문하는 것은 붕괴 위험이나 법적 무단 침입 문제를 야기합니다.

GHOSTWORLD 엔지니어링 팀은 모든 현대 웹 브라우저에 내장된 하드웨어 가속 그래픽 표준인 WebGL 2.0(Three.js r128 엔진)과 Web Audio API를 결합하여, 별도의 프로그램 설치 없이 클릭 한 번으로 진입할 수 있는 경량 3D 공간 시뮬레이터를 설계했습니다.

2. 구면 삼각법을 이용한 3D 지구본 30개 스팟 GPS 좌표 매핑

홈페이지 메인 스테이지의 3D 지구본(Globe Mode)은 각 스팟의 실제 위도(Latitude, lat)와 경도(Longitude, lng)를 구면 좌표계 공식으로 변환하여 반지름 R = 4.28인 3차원 구체 표면에 오차 없이 마운트합니다.

극각 φ = (90 - lat) × (π / 180) 및 방위각 θ = (lng + 180) × (π / 180)를 산출한 뒤, 이를 3차원 데카르트 좌표계 X = -R·sin(φ)·cos(θ), Y = R·cos(φ), Z = R·sin(φ)·sin(θ)로 매핑합니다. 사용자가 마우스나 터치로 핀을 클릭하면 Three.js의 광선 투사(Raycaster) 알고리즘이 카메라 뷰포트에서 3차원 반직선을 쏘아 교차된 스팟의 메타데이터를 즉시 브리핑 카드로 호출합니다.

3. 비어-람베르트 광감쇠 법칙과 지수 안개(FogExp2) · 다중 스펙트럼 조명

1인칭 탐사 모드(1st-Person Simulator Mode)에서 몰입감과 공간 깊이감을 결정짓는 핵심 요소는 대기의 산란(Atmospheric Scattering)과 손전등의 거리별 감쇠입니다. GHOSTWORLD는 거리에 따라 기하급수적으로 시계가 감쇠하는 비어-람베르트 법칙(F = exp(-(d·density)²))을 구현한 지수 제곱 안개(FogExp2)를 지형별로 차등 적용합니다.

또한 조사관이 [N] 키를 눌러 850nm 적외선 나이트비전을 켜면 스포트라이트 광원의 16진수 컬러 벡터가 즉시 에메랄드 그린(0x10b981)으로 전환되며, [6] 키로 365nm UV 자외선 랜턴을 켜면 보라색 형광 스펙트럼(0xa855f7)으로 동적 셰이딩이 이루어져 각 광학 장비의 시각적 특성을 물리적으로 모사합니다.

4. 무손실 절차적 오디오 합성(Procedural Web Audio Synthesis)

네트워크 로딩 지연을 제로(0ms)로 줄이기 위해 GHOSTWORLD의 모든 계측기 사운드는 외부 오디오 파일에 의존하지 않고 브라우저 내 Web Audio API가 실시간으로 파형을 수학적으로 합성합니다.

예를 들어 EMF 측정기는 파원과의 유클리드 거리(Euclidean Distance)에 반비례하여 Level 1(440Hz)부터 Level 5(920Hz)까지의 사인파(Sine Oscillator) 주파수와 비프 주기를 실시간 변조하며, 스피릿 박스는 AudioBuffer에 [-1.0, +1.0] 구간의 균일 난수(Uniform White Noise)를 실시간 생성하여 라디오 스위핑 음향을 완벽하게 재현합니다.

📊 GHOSTWORLD 3D 엔진의 5대 절차적 지형 아키텍처 및 렌더링 파라미터

🌍 본 칼럼의 물리·역사 이론이 적용된 대표 다크 헤리티지 스팟

위에서 다룬 이론적 메커니즘을 실제 건축 도감 데이터 및 WebGL 3D 시뮬레이터 현장에서 직접 확인해 보십시오.