Seedshade

ブラウザだけで動く、音に反応するフルスクリーン・ビジュアルツールです。マイク / ライン入力 / ループバック（デスクトップ音声）を解析し、なめらかで音楽に反応するビジュアルを描画します。OBS のブラウザソースや、プロジェクター用のフルスクリーンブラウザに常駐させて使う前提で設計しています。

• Semantic Synth 専用。seed から GLSL シェーダそのものを合成して描画します（後述）
• WebGL2 必須。three.js / p5 などの外部描画ライブラリは不使用
• 透過背景に対応。OBS のオーバーレイとしてそのまま重ねられます
• シード（look gacha） によって見た目が劇的に変化します（後述）
• 設定は localStorage に保存され、URL パラメータで上書き可能

技術スタック

• Vite + React 18 + TypeScript (strict)
• 描画・音声解析は素の TypeScript クラス（React は UI / 設定のみ）
• ランタイム依存は React のみ

クイックスタート

pnpm install
pnpm dev

ブラウザで表示された URL（通常 http://localhost:5173）を開きます。初回はマイク（音声入力）の許可を求められます。許可するとビジュアルが音に反応し始めます。

• ブラウザの自動再生制限により、起動直後は音声が止まったままのことがあります。その場合はパネルの 「▶ Click to start audio」 ボタンを一度クリックしてください。
• 入力デバイスはパネルの Input device から選べます（許可後にデバイス名が表示されます）。

キーボードショートカット

入力欄にフォーカスがあるときは無効になります。

キー	動作
H	コントロールパネルの表示 / 非表示
F	フルスクリーン切り替え
B	背景（黒 / 透過）の切り替え
R	シード（look gacha）を引き直す（ガチャ）
D	Semantic Synth の Generator 構成はそのまま、細部だけ引き直す（reroll details）
S	Scene Deck 窓を開く（?deck=1。BroadcastChannel、bridge 不要）
T	タップテンポ（手動 BPM 入力）

パネルはマウスを止めると約 3 秒で自動的にフェードアウトし、カーソルも隠れます。マウスを動かすと再表示されます。

シード（look gacha）

パネル上部の Look にシード文字列を入力すると、その文字列から決定論的にビジュアル全体の「個性」が生成されます。色だけでなく、配色モード・要素数・サイズ・モーション速度・対称数・回転方向・ゆらぎ、そして Generator の組み合わせまで一括で変化するので、シードを引き直すたびにガチャを引くように見た目が大きく変わります。

• パネルの 🎲 ボタン（またはキーボードの R）を押すと、neon-tiger-042 のような読みやすいランダムシードが生成され、即座に反映されます。
• 同じシード文字列からは必ず同じ見た目が再現されます（フレームをまたいでも安定）。気に入った見た目はシード文字列を控えておけば再現できます。
• シード入力欄は Enter キー または**フォーカスを外した（blur）**タイミングで適用されます（1 文字ごとには反映されません）。

パフォーマンスと対応環境

• ノートPC の内蔵 GPU（iGPU）での 1080p 常用を想定しています。
• GL キャンバスの DPR（デバイスピクセル比）は最大 1.5 に制限しています（高解像度ディスプレイでの過負荷を回避）。
• WebGL2 が必須です。非対応の環境では「WebGL2 が必要です」と表示され、何も描画されません。コンテキストロスト時は自動復帰します。
• 背景を透過にしたときは描画も透過のまま出力されるので、OBS の透過オーバーレイにそのまま使えます。

Semantic Synth

本ツールが描画するのは、seed から GLSL シェーダそのものを合成する「Semantic Synth」です。

• Source / Field / Modifier / Material の 4 カテゴリ・計 127 種類の Generator の中から、seed に基づいて決定的に組み合わせを選び、GLSL を組み立てて描画します。固定の描画ロジックではなく、都度合成される「実験的な」映像です。
• 選ばれる組み合わせは look gacha の シードがそのまま効きます。同じシードなら同じ Generator 構成・パラメータ・Look が常に再現されます。
• シードを引き直す（🎲 / R）と、ハード切替ではなくクロスフェードで新しい Look へ滑らかに遷移します。
• Generator の構成（どの operator を使うか）は変えずに、パラメータ・変調・配色・composition だけ変えたいこともあります。その場合は 🎲 の隣の 🧬 ボタン（またはキーボードの D）を使ってください。同じ Generator 構成のまま細部だけ新しいシードで引き直されます（vj-tweak.mjs --reroll でも同じことができます）。構成そのものは変わらないので、後述のオーディオ・リアクション（拍で起きるグリッチの種類）も変わりません。
• bass / mid / treble / level などの音声解析結果が Patch 内のパラメータを変調し、音楽にゆったり反応します。

旧シーンの見た目も Generator として残っています（オーディオ・テクスチャ）

旧シーン（Bars / Radial / Waveform / Lissajous / Rings / Particles / Fluid / Smoke / Aurora）の見た目は、Semantic Synth の Generator としてガチャの候補に残っています: spectrumBars（スペクトラム・バー、ピークホールド付き）、spectrumRadial（円形スペクトラム）、oscilloscope（オシロスコープ）、lissajousScope（X-Y リサージュ）、beatRings（拍で広がる多角形リング）、particleField（上昇 / 軌道 / 雨 / 星空のパーティクル）、inkMarble（墨流しマーブル）、smokeFog（煙）、auroraCurtain（オーロラ）。Lava は既存の lavaBlobs がそのまま担当します。

スペクトラム系とオシロ系は新しい「オーディオ・テクスチャ」を読みます。Generator が audio: ['spectrum' | 'wave'] を宣言すると、その Patch にだけ uSpectrum（128 バンドの対数スペクトラム。アタック / リリースの平滑化とピークホールド付き）と uWave（256 サンプルの波形 + リサージュ用の X/Y ペア）が毎フレーム GPU に送られます。宣言しない Patch のシェーダは従来と 1 バイトも変わりません。無音時はスペクトラムが 0、波形はフラットになります。テストやカバレッジ計測、Deck のサムネイルでは、時間に依存しない固定の合成信号を使います。

vj:gen では「スペクトラム」「オシロ」「リサージュ」「オーロラ」「煙」「パーティクル」「リング」「マーブル」で呼び出せます。

拍で起きることは Patch ごとに違います（オーディオ・リアクション）

Generator の大半は音の uniform を読まないので、画面全体に効く音の反応は Patch 共通の層が担っています。以前はここが「軽いズームイン＋明るさの持ち上げ」の 1 種類しか無く、どのシードを引いても拍で起きることは同じでした。今はこの層がカタログになっていて、Patch ごとに座標系の反応 1〜2 種類＋色の反応 1 種類が決定的に選ばれます。

座標に効く	色に効く
punchZoom 拍の頭で画面が寄る	rgbSplit 拍で R/B が横にずれる（色収差グリッチ）
sliceShift 横帯ごとに水平にずれる（テープが飛ぶようなグリッチ）	echoGhost 拍で少し縮んだ残像が背後に重なる
blockCrush 拍でマクロブロックに潰れる	hueSlam 拍で色相が飛ぶ
jitter 拍で画が飛び、高域で細かく震える	posterCrush 拍で階調が段々に潰れる（ビットクラッシュ）
spinKick 拍で回転が蹴られる	invertFlash 強い拍だけ一瞬ネガになる
waveTear 走査線が横に裂けて流れる	scanGlow 走査バンドが流れ、拍で光る
mirrorSnap 拍で鏡像に畳まれる	channelRoll 強い拍で RGB が入れ替わる

• どれが載るかは Operator の構成（トポロジ）から決まります。シードを引き直して構成が変われば、拍で起きることも変わります。
• 乱数のパターン（どの帯がずれるか等）はシードで変わるので、同じリアクションでも Patch ごとに違う崩れ方をします。
• rgbSplit / echoGhost は拍の瞬間だけシェーダを追加で評価します。重い Patch（heavy な Generator 入り、または厚いスタック）には載りません。
• 無音では完全に無効です。リアクション層は音が止まると恒等変換に落ち、Patch 素の見た目に戻ります。
• 変調ルート（Patch 内パラメータへの結線）側も、「大きさ」に偏らないよう効き方ごとに重みを付けて選んでいます。歪み・輝き・動きにも同じくらい票が回ります。

動きは音で駆動されます

Semantic Synth の時間は、音が無くても一定の速さで進み続けるのではなく、音の大きさで進む速さが変わります。

• 無音のときはほぼ止まります（通常速度の 5% 程度）。引きによって「音と関係なくギュインギュイン動く」Patch が出てしまうのを、Generator 側ではなく時間軸の側で止めています。
• 音が入ると素早く等速まで立ち上がり、止まったあとは 1 秒弱かけてゆっくり減速します（急停止するとカクついて見えるため）。
• BPM がロックしていれば全体の速さがテンポに追従し（0.7〜1.25 倍）、拍の頭で少しだけ前に押されます。ブレイク中はグリッドが自走していても無音なら動きは増えません。
• Patch ごとの動きの速さ（composition.speed）も効きます。上限は 1 倍なので、引きによって従来より速くなる Patch はありません。

音で画が消えることはありません

大音量が続く環境（クラブなど）で画面が真っ暗になり続ける、という事故を構造的に防いでいます。

• 自動生成される変調ルートは必ず unipolar かつ正の量なので、音は常に「足す」方向にしか効きません。無音時の見た目が下限で、音が入るほど増えます。
• 変調先は「増える = 見える / 動く」パラメータの許可リストに限定しています。threshold / gate / dropout のような、上げると絵が消えるパラメータは自動では選ばれません（手で組んだ Patch には制限はかかりません）。
• 全 Patch 共通で、拍に合わせた軽いズームイン（5%）と明るさの持ち上げ（15%）、音量に応じたズーム（6%）が main() に入ります。Generator 側が音の uniform を読まなくても最低限は音に反応します。
• その上に載るオーディオ・リアクションも、暗くする方向の効果は拍のエンベロープにだけ乗せています（音量では暗くしません）。走査線のような表現も明るくする側だけで作ってあるので、大音量が続いても減光は持続しません。
• 負荷が高い環境ではフレーム時間を監視し、内部レンダリング解像度を自動的に段階的に下げてフレームレートを維持します（余裕が戻れば解像度も自動的に戻ります）。

Timeline パネル

画面右側の Timeline パネルでは、数秒〜数小節先の演出イベント（シード変更やトランジションなど）をあらかじめ予約でき、演出の流れを JSON として記録・再生できます。詳細は Issue #3 の RFC を参照してください。

Scene Deck（別窓ポン出し）

Resolume のシーン一覧のように、別窓で 8 スロットのバリエーションをポン出しできます。メイン窓（semantic-synth）のいまの Patch をベースに、同じ Generator 構成のままパラメータ違いを 8 面自動生成し、キーボードで即遷移させます。通信は同一オリジンの BroadcastChannel（seedshade-deck-v1）だけで、pnpm bridge も ?bridge=1 も不要です。

デッキ窓では AudioEngine / Renderer は起動しません（マイク許可プロンプトも、常時の GPU 負荷も無し）。メイン窓をプロジェクター出力、Deck を手元の操作卓にする運用を想定しています。

This is the beginning of the README. Read the rest at the original. Read the full README ↗