WebGL과 WebGPU로 그래픽, 스프라이트, 텍스트를 그리는 빠른 웹용 2D 렌더링 라이브러리입니다.
jberg/butterchurn
브라우저에서 Web Audio API로 Milkdrop 프리셋을 렌더링하는 클래식 Milkdrop 음악 비주얼라이저의 WebGL 재구현체입니다.
대체할 수 있는 제품:Winamp
- 스타
- 1,972
- 포크
- 171
- 열린 이슈
- 24
- 마지막 커밋
- 6개월 전
어떤 프로젝트인가요?
Butterchurn은 Milkdrop 음악 비주얼라이저를 WebGL 기반으로 재구현한 JavaScript 라이브러리로, 최신 웹 브라우저에서 Milkdrop 스타일의 비주얼을 실행할 수 있습니다. Web Audio API에서 오디오를 입력받아 HTML canvas에 애니메이션 프레임을 렌더링합니다.
개발자는 canvas와 오디오 컨텍스트를 사용해 비주얼라이저를 만들고, 소스나 마이크의 오디오 노드를 연결한 뒤 프리셋을 불러옵니다. 프리셋은 지정한 시간에 걸쳐 서로 전환할 수 있으며, 실행 중에도 렌더러 크기를 변경할 수 있습니다. 함께 제공되는 패키지 butterchurn-presets에는 바로 사용할 수 있는 프리셋 모음이 포함되어 있습니다.
WebGL 2가 필요하므로 현재 브라우저의 지원 여부를 확인하는 간단한 헬퍼도 포함되어 있습니다. Webamp를 비롯한 여러 음악 플레이어와 앱에서 이 라이브러리를 통합해 사용합니다.
핵심 기능
- 01브라우저에서 WebGL로 Milkdrop 프리셋을 렌더링합니다.
- 02Web Audio API를 통해 오디오 입력을 받습니다.
- 03설정한 시간에 걸쳐 프리셋을 전환합니다.
- 04실행 중에 렌더러 크기를 변경합니다.
- 05프리셋 모음이 포함된 별도 패키지를 제공합니다.
- 06WebGL 2 지원 여부를 확인하는 헬퍼를 포함합니다.
활용 사례
- 웹 음악 플레이어에 음악 비주얼라이저를 추가합니다.
- 웹 페이지나 브라우저 확장 프로그램의 오디오를 시각화합니다.
- 브라우저에서 실시간 음악 또는 노래방 디스플레이를 만듭니다.
- 웹 앱에서 Milkdrop 프리셋을 시험해 봅니다.
빠른 시작
- 1
npm으로 패키지를 설치합니다
npm install butterchurn butterchurn-presets - 2
AudioContext에 연결된 canvas에 시각화 도구를 만듭니다
- 3
프리셋을 불러와 프레임을 렌더링합니다
사용 전 알아둘 점
- WebGL 2를 지원하는 브라우저가 필요합니다.
토픽
자주 묻는 질문
- butterchurn은(는) 무엇인가요?
- 브라우저에서 Web Audio API로 Milkdrop 프리셋을 렌더링하는 클래식 Milkdrop 음악 비주얼라이저의 WebGL 재구현체입니다. Butterchurn은 Milkdrop 음악 비주얼라이저를 WebGL 기반으로 재구현한 JavaScript 라이브러리로, 최신 웹 브라우저에서 Milkdrop 스타일의 비주얼을 실행할 수 있습니다. Web Audio API에서 오디오를 입력받아 HTML canvas에 애니메이션 프레임을 렌더링합니다.
- butterchurn은(는) 무료로 사용할 수 있나요? 라이선스는 무엇인가요?
- butterchurn은(는) MIT 라이선스의 오픈소스입니다. 상업용 제품에 사용하기 전에 라이선스 조건을 확인하세요.
- butterchurn은(는) 아직 유지보수되고 있나요?
- 6개월 이상 커밋 없음. butterchurn의 마지막 커밋은 2026년 4월 20일입니다.
- butterchurn은(는) 어디에 사용할 수 있나요?
- 웹 음악 플레이어에 음악 비주얼라이저를 추가합니다. 웹 페이지나 브라우저 확장 프로그램의 오디오를 시각화합니다. 브라우저에서 실시간 음악 또는 노래방 디스플레이를 만듭니다. 웹 앱에서 Milkdrop 프리셋을 시험해 봅니다.
- butterchurn는 어떻게 설치하나요?
- npm으로 패키지를 설치합니다: npm install butterchurn butterchurn-presets AudioContext에 연결된 canvas에 시각화 도구를 만듭니다 프리셋을 불러와 프레임을 렌더링합니다
- butterchurn은(는) 어디서 받을 수 있나요?
- 소스 코드와 설치 방법은 GitHub에 있습니다: https://github.com/jberg/butterchurn
요약은 프로젝트 README를 바탕으로 AI가 작성했습니다. GitHub 통계는 매일 갱신됩니다.
관련 프로젝트
기술 개념을 설명하는 실물 시스템의 인터랙티브 등각 SVG 일러스트를 만드는 Claude 에이전트 스킬입니다.
GPU.js는 간단한 JavaScript 함수를 GPU 셰이더 코드로 변환해 브라우저와 Node.js에서 GPU로 실행하고, GPU가 없으면 일반 JavaScript로 대체 실행합니다.
JS 코드를 추상화 수준·코드 블록 수정자·테마를 지원하는 SVG 순서도로 변환하는 JavaScript 라이브러리 및 CLI
런타임 의존성 없이 Mermaid 다이어그램 텍스트를 SVG로 변환하는 경량 동기식 렌더러입니다.
가구 배치와 벽 편집, 2D 방 치수 측정부터 Three.js 3D 장면 확인까지 지원하는 프런트엔드 전용 평면도 도구입니다.