2000년대 음악 시각화 전문가은(는) 무엇을 하나요?
2000년대 전설적인 음악 시각화 시대(Milkdrop, AVS, Geiss)를 최신 WebGL 및 Web Audio API로 재현하는 전문가입니다.
사용해야 할 때
✅ 다음과 같은 경우 사용하세요:
- Milkdrop 스타일의 사이키델릭 시각화 구현
- Butterchurn 라이브러리 통합 (WebGL Milkdrop)
- Web Audio API AnalyserNode FFT/파형 추출
- 오디오 반응형 효과를 위한 GLSL 프래그먼트 셰이더
- 전체 화면 몰입형 음악 경험
- 실시간 비트 감지 및 오디오 분석
- 프리셋 시스템 및 시각화 전환
❌ 다음과 같은 경우에는 사용하지 마세요:
- 간단한 스펙트럼 막대 차트 (Canvas 2D 사용)
- 정적 오디오 파형 표시
- 비디오 편집 또는 처리
- 비오디오 제너레이티브 아트
- 오디오 재생/스트리밍 문제 (오디오 엔지니어 스킬 사용)
황금기 (요약)
| 시대 | 주요 소프트웨어 | 혁신 |
|---|---|---|
| 1998-2000 | Geiss | 단순 플라즈마 효과, DirectX |
| 2001-2007 | Milkdrop 1 & 2 | 픽셀 단위 방정식, 프리셋 시스템 |
| 2007-2015 | 쇠퇴기 | 스트리밍 서비스 부상 |
| 2018-현재 | Butterchurn | WebGL 르네상스 |
Milkdrop의 마법: 블러, 확대/축소, 회전, 색상 이동과 같은 단순한 효과를 오디오 반응형 매개변수와 함께 레이어링합니다.
→ 전체 역사와 통합에 대해서는 references/butterchurn-guide.md를 참조하세요.
핵심 기술
Butterchurn (WebGL Milkdrop)
- GitHub 별 1.7k, MIT 라이선스
- 원본 Milkdrop과의 완전한 프리셋 호환성
- npm:
butterchurn,butterchurn-presets
import butterchurn from 'butterchurn';
const visualizer = butterchurn.createVisualizer(audioContext, canvas, {
width: window.innerWidth,
height: window.innerHeight,
pixelRatio: window.devicePixelRatio || 1,
});
visualizer.connectAudio(audioNode);
visualizer.loadPreset(preset, 2.0); // 2초 블렌드
Web Audio API FFT
const analyser = audioContext.createAnalyser();
analyser.fftSize = 2048;
analyser.smoothingTimeConstant = 0.8;
const frequencyData = new Uint8Array(analyser.frequencyBinCount);
analyser.getByteFrequencyData(frequencyData);
중요: FFT 빈은 선형이지만 청각은 로그 스케일입니다! 로그 매핑을 사용하세요.
→ 주파수 대역 추출에 대해서는 references/web-audio-fft.md를 참조하세요.
GLSL 셰이더
오디오 데이터를 1D 텍스처로 전달하고, 저음/중음/고음에 유니폼을 사용합니다:
uniform float u_bass;
float glow = smoothstep(0.5 - u_bass * 0.3, 0.0, dist);
→ 완전한 패턴에 대해서는 references/glsl-shaders.md를 참조하세요.
피해야 할 안티패턴
1. AudioContext 상태 무시
문제 상황: 시각화가 자동으로 실패함
잘못된 이유: AudioContext는 일시 중단된 상태로 시작되며 사용자 상호작용이 필요함
해결 방법: 클릭 시 재개: await audioContext.resume()
2. 선형 주파수 표시
문제 상황: 저음이 지배적이고 고음이 보이지 않음 잘못된 이유: FFT 빈은 선형이며, 처음 100개의 빈이 0-2kHz일 수 있음 해결 방법: 로그 빈 매핑 사용 (코드는 참조 문서에 있음)
3. 스무딩 없음
문제 상황: 떨리고 발작을 유발하는 시각 효과
잘못된 이유: 원시 FFT 데이터는 프레임 간 노이즈가 심함
해결 방법: analyserNode.smoothingTimeConstant = 0.7
4. requestAnimationFrame 정리 없음
문제 상황: 메모리 누수, 여러 렌더 루프 발생
해결 방법: 애니메이션 ID 저장, 언마운트 시 cancelAnimationFrame 호출
5. 캔버스 크기 하드코딩
문제 상황: 레티나에서 흐릿하고 종횡비가 잘못됨
해결 방법: devicePixelRatio 곱하기, 리사이즈 이벤트 처리
6. 메인 스레드 차단
문제 상황: 오디오 끊김, 프레임 드롭 잘못된 이유: UI 스레드에서 무거운 셰이더 컴파일 수행 해결 방법: 재생 중이 아닌 로딩 중에 셰이더 컴파일
프리셋 추천
사이키델릭/트립:
Flexi, martin + geiss - dedicated to the sherwin maxawowRovastar - Fractopia
부드러움/차분함:
Flexi - predator-prey-spiralsGeiss - Cosmic Strings 2
고에너지:
Flexi + Martin - disconnectedshifter - tumbling cubes
통합 체크리스트
- AudioContext 생성 및 사용자 상호작용 시 재개
- AnalyserNode가 오디오 소스에 연결됨
- 캔버스 크기 올바르게 설정 (devicePixelRatio 고려)
- requestAnimationFrame을 사용한 렌더 루프
- 언마운트 시 정리 (cancelAnimationFrame)
- 블렌드 시간이 포함된 프리셋 로딩
- 리사이즈 처리
- ESC 키로 종료 가능한 전체 화면 지원
- 트랙 정보 오버레이 (z-index가 캔버스 위)
- 비활성 후 커서 숨기기
성능 팁
- 오래된 GPU의 경우 텍스처 비율 낮추기:
textureRatio: 0.5 - 필요하지 않으면 fftSize 줄이기: 2048 대신 512 또는 1024
- 캔버스에
will-change: transform사용 - 렌더 루프 중 DOM 업데이트 피하기
- Chrome DevTools GPU 타임라인으로 프로파일링
참조
→ references/butterchurn-guide.md - 완전한 Butterchurn 통합 가이드
→ references/web-audio-fft.md - FFT 추출 및 주파수 분석
→ references/glsl-shaders.md - 오디오 반응형 셰이더 패턴
이 스킬이 다루는 내용: Butterchurn/Milkdrop | Web Audio FFT | GLSL 셰이더 | 전체 화면 시각화 | 오디오 반응형 아트