使用動画👉YouTube
試してみる👉https://somahc.github.io/glsl-livecoding-editor-web/
※Google Chromeでのみ動作確認しています。他ブラウザでは正常に動作しない可能性があります。
Web上で動くシェーダーエディタ兼実行環境です。 シェーダーを使ったライブコーディングVJパフォーマンスをおこなうことになったため、私のニーズにあったMacで動くシェーダーエディタ＆実行環境がほしいと思い、作成したものなります。 シェーダー（フラグメントシェーダー）を記述すると、その結果がリアルタイムにレンダリングされます。
Bonsomaticという名前はGargaj氏によるシェーダーエディタBonzomaticのオマージュです。
- シェーダーエラーの表示
- シェーダーのホットスワップ
- シェーダー内での経過時間の表示
- シンタックスハイライト
- 拍のビジュアライズ
- エディタUIからBPM情報の編集
以下がUniform変数として与えられます。
uniform vec2 resolution; // 実行環境の解像度
uniform float time; // シェーダー経過時間（秒）
uniform float bpm; // UIで設定したBPM出力は変数oに渡します。
o = vec4(1, 0, 0, 1); // 赤色を出力以下のキーボードショートカットがサポートされています。
※他にも使用ライブラリであるCodeMirrorでサポートされているショートカットは使用可能なはずです。
※Windowsの場合はCmdをCtrlに適宜置き換えてください。
| Keyboard | Description |
|---|---|
| Cmd + S | コードのコンパイル・適用 |
| Cmd + Z | アンドゥ |
| Cmd + Shift + Z / Ctrl + Y (Win) | リドゥ |
| Cmd + F | コード内検索 |
コンパイルエラーはShader Compile Statusに表示されます。エラー発生時は最後に成功したコンパイル結果が継続して使用され、映像が途切れないようにしてあります。
General Shader StatusからBPMの変更、BPMを2倍/0.5倍、シェーダー経過時間のリセットができます。
ローカル環境で動かしたい場合、本リポジトリをクローンしたのち、以下の手順でセットアップが可能です。
※事前にNode.jsのインストールが必要です。
$ npm install
$ npm run dev