2000s-visualization-expert

2000年代の音楽ビジュアライゼーションエキスパート

WebGLとWeb Audio APIを使い、Milkdrop、AVS、Geissといった伝説的な2000年代の音楽ビジュアライゼーションの時代を現代に再現するエキスパートです。

使用する場面

✅ 以下に使用します：

• Milkdrop風のサイケデリックなビジュアライゼーションの実装
• Butterchurnライブラリの統合（WebGL版Milkdrop）
• Web Audio APIのAnalyserNodeによるFFT／波形の抽出
• オーディオリアクティブエフェクト用のGLSLフラグメントシェーダー
• 全画面の没入型音楽体験
• リアルタイムのビート検出とオーディオ解析
• プリセットシステムとビジュアライゼーションのトランジション

❌ 以下には使用しません：

• シンプルなスペクトラム棒グラフ（Canvas 2Dを使用してください）
• 静的なオーディオ波形の表示
• 動画の編集や処理
• オーディオ以外のジェネレーティブアート
• オーディオの再生／ストリーミングに関する問題（audio-engineerスキルを使用してください）

黄金時代（概要）

時代	主なソフトウェア	革新
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);  // 2s blend

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を使用します。

uniform float u_bass;
float glow = smoothstep(0.5 - u_bass * 0.3, 0.0, dist);

→ 完全なパターンについては、references/glsl-shaders.mdを参照してください。

避けるべきアンチパターン

1. AudioContextの状態を無視する

症状：ビジュアライゼーションが何も表示せずに失敗する 問題点：AudioContextはsuspended状態で開始するため、ユーザーの操作が必要です 解決策：クリック時に再開します：await audioContext.resume()

2. 周波数を線形表示する

症状：低音が支配的になり、高音が見えなくなる 問題点：FFTのビンは線形です。最初の100ビンが0～2kHzの場合があります 解決策：対数ビンマッピングを使用します（コードはreferencesを参照）

3. スムージングをしない

症状：ちらつき、発作を誘発するようなビジュアルになる 問題点：生のFFTデータはフレームごとにノイズが含まれます 解決策：analyserNode.smoothingTimeConstant = 0.7

4. クリーンアップせずにrequestAnimationFrameを使う

症状：メモリーリーク、複数のレンダーループが発生する 解決策：アニメーションIDを保存し、アンマウント時にcancelAnimationFrameを呼び出します

5. Canvasサイズをハードコードする

症状：Retinaディスプレイでぼやける、アスペクト比が合わない 解決策：devicePixelRatioを乗算し、リサイズイベントを処理します

6. メインスレッドをブロックする

症状：音声が途切れ、フレームがドロップする 問題点：UIスレッドで重いシェーダーコンパイルを行っています 解決策：再生中ではなく、読み込み中にシェーダーをコンパイルします

おすすめのプリセット

サイケデリック／トリップ感：

• Flexi, martin + geiss - dedicated to the sherwin maxawow
• Rovastar - Fractopia

スムーズ／チル：

• Flexi - predator-prey-spirals
• Geiss - Cosmic Strings 2

ハイエナジー：

• Flexi + Martin - disconnected
• shifter - tumbling cubes

統合チェックリスト

• AudioContextを作成し、ユーザー操作時に再開する
• AnalyserNodeをオーディオソースに接続する
• Canvasサイズを正しく設定する（devicePixelRatioを考慮）
• requestAnimationFrameでレンダーループを実行する
• アンマウント時にクリーンアップする（cancelAnimationFrameを呼び出す）
• ブレンド時間を指定してプリセットを読み込む
• リサイズを処理する
• ESCキーで終了できる全画面表示に対応する
• トラック情報をオーバーレイ表示する（z-indexをCanvasより上に設定）
• 操作がない状態が続いたらカーソルを非表示にする

パフォーマンスのヒント

1. 古い GPU ではテクスチャ比を下げます：textureRatio: 0.5
2. 必要がなければfftSize を小さくします：2048 ではなく 512 または 1024
3. キャンバスに**will-change: transform を使用します**
4. レンダリングループ中のDOM の更新を避けます
5. Chrome DevTools の GPU タイムラインでプロファイリングします

参考資料

→ references/butterchurn-guide.md - Butterchurn の完全な統合ガイド → references/web-audio-fft.md - FFT の抽出と周波数分析 → references/glsl-shaders.md - オーディオ反応型シェーダーのパターン

---

このスキルの対象：Butterchurn/Milkdrop | Web Audio FFT | GLSL シェーダー | 全画面ビジュアライゼーション | オーディオ反応型アート