창의개인연구 ③ 2D 캔버스로 가지치기와 거리 모델 비교
창의개인연구 시리즈. 데모를 한 번 단순화하고, 거리·필터·노이즈 같은 디테일을 다듬는 단계.
왜 일부러 2D로 후퇴했는가
② 글에서 만든 Three.js + Web Audio 데모는 청감 검증에는 성공했지만, 빌드·번들 환경에 따라 Three.js 모듈 임포트가 자주 깨졌다. 원인을 찾는 데 들이는 시간이 빠르게 늘어났고, 정작 검증하고 싶은 것은 "공간 음향이 잘 들리느냐"이지 "3D 렌더링이 잘 되느냐"가 아니었다.
그래서 한 번 가지치기를 했다. 3D 렌더링을 떼고, 2D 캔버스 위에서 같은 청감 실험을 이어가기로 했다. AudioContext + PannerNode(HRTF) + OscillatorNode + 2D 캔버스 조합으로 외부 라이브러리 없이 최소 기능만 남겼다.
| 요소 | 표시 |
|---|---|
| 청자 | 중앙 고정, 초록 원 |
| 음원 | 빨간 점, 드래그·클릭·화살표키로 이동 |
| 좌표계 | 캔버스 픽셀 좌표를 그대로 panner.positionX/Y에 매핑 |
3D를 잃은 대신, 컨트롤 UI에 손을 댈 수 있는 여유가 생겼다.
거리 모델 세 종류 비교
PannerNode.distanceModel은 세 가지 옵션을 지원한다.
inverse— 1 / (1 + rolloff × (d − refDist)/refDist)linear— 거리에 비례해 선형 감쇠.maxDistance에서 0이 된다.exponential— refDist를 기준으로 지수적으로 감쇠.
각 모델로 데모를 켜고 음원을 천천히 멀리 끌어보면서 느낌을 비교했다.
- inverse: 가까울 때 큰 폭으로 감쇠하다가 멀어질수록 천천히 줄어든다. "근처는 또렷, 멀리는 잔향"의 자연스러운 인상.
- linear: 일정 거리부터 완전히 안 들린다. 끝이 분명해 실험적으로 쓰기엔 좋지만, 실제 공간을 흉내내기엔 어색하다.
- exponential: 멀어질수록 빠르게 사라진다. "조용한 동굴에서의 발자국" 같은 극적인 감쇠.
장치의 목적이 "거리감을 청감으로 안전하게 전달하는 것"이기 때문에, 기본값은 자연스럽고 멀리도 들리는 inverse로 두기로 했다. 추후 위험 단계 알람용 효과음에는 exponential을 별도로 적용할 여지를 남겨 두었다.
팝 노이즈를 페이드로 잡기
OscillatorNode를 start() / stop() 하면 시작과 종료 순간에 "뚝" 하는 짧은 잡음(팝 노이즈)이 들린다. 파형이 0이 아닌 지점에서 갑자기 켜지거나 꺼지면서 생기는 불연속 때문이다.
해결은 단순했다. Oscillator와 Panner 사이에 게인 노드를 끼우고, 시작·종료 시 게인을 setTargetAtTime으로 짧게 페이드 인·아웃 시켰다.
const gain = ctx.createGain();
gain.gain.value = 0;
osc.connect(gain).connect(panner);
osc.start();
gain.gain.setTargetAtTime(1, ctx.currentTime, 0.01); // 페이드 인
// ...
gain.gain.setTargetAtTime(0, ctx.currentTime, 0.03); // 페이드 아웃
setTimeout(() => osc.stop(), 100);10~30ms의 짧은 페이드만으로 팝이 거의 사라졌다. 데모를 반복적으로 켜고 끄는 동안의 청취 피로감이 확연히 줄었다.
컨트롤 UI
검증 도구로서의 가치를 높이기 위해, 다음을 슬라이더·셀렉트로 노출했다.
- 파형: sine / square / triangle / sawtooth
- 주파수: 100Hz~2kHz
- 볼륨: 0~1
- 거리 모델: inverse / linear / exponential
- 리버브 on/off:
ConvolverNode에 간단한 합성 임펄스 응답을 통과시켜 잔향 부여
리버브를 켜면 좌우 구분과 별개로 "공간이 넓어진" 인상이 명확하게 생겼다. 이 인상은 "공간 인지 능력"을 보조하는 단서로 충분히 활용 가치가 있을 것 같았다.
청감으로 얻은 인상
- 좌우 구분은 매우 명확. 사인파보다 톱니파/사각파에서 더 또렷이 들렸다. 고주파 성분이 ILD를 더 잘 만드는 듯하다.
- 앞뒤 구분은 여전히 어려움. 같은 캔버스 평면 위에서는 거리감만 차이가 나고, 정면/배면의 미세한 차이는 거의 들리지 않는다.
- 리버브가 공간감을 크게 늘린다. 마른 사인파보다 잔향이 살짝 묻은 쪽이 "공간"이라는 인상을 빠르게 준다.
한계와 다음 단계
2D로 단순화한 이상, 음원이 청자 머리 위/아래에 있는 상황을 표현할 길이 없다. 또한 음원을 두 개 이상 동시에 띄우는 것도 이 단계에선 무리였다.