hae02y / lab

EXP-003 · 2026.04 · Interactive

Void Glass

어둠 속 유리 파티클 3000개가 떠다니는 인터랙티브 아트. 마우스, 스크롤, 오디오, 웹캠 반응

Open demo Source
void-glass.vercel.appCheck
Void Glass 화면
Fig. 1 — Void Glass, 배포된 화면

01Question

스크롤과 소리에 반응하는 유리 입자 3000개를 브라우저에서 부드럽게 돌릴 수 있을까?

02Approach

  1. 01

    InstancedMesh 하나로 유리 입자 3000개를 그려 드로우 콜을 1번으로 줄인다.

  2. 02

    스크롤 진행도에 따라 은하 → 구 → 토러스 → 물결 → 흩어짐 5개 장면 사이를 보간한다.

  3. 03

    마이크 입력을 Web Audio AnalyserNode(FFT 256)로 분석해 입자마다 주파수 대역을 나눠 맡긴다.

  4. 04

    Bloom, 색수차, 비네트 후처리로 유리의 빛 번짐을 만든다.

03Findings

Note A

장면은 위치가 아니라 목표 형태로 정의한다

장면마다 입자 좌표를 저장하지 않고, 인덱스를 받아 형태 위의 목표점을 계산하는 함수로 만들었다. 두 형태 사이 보간이 자연스럽게 됐다.

04Log

  1. 유리 입자 인터랙티브 아트 첫 버전