GLSLシェーダーで遊ぶ「Glsl Viewer」

《このツールの概要》

・本ツールは、器となる「ベース」に、　

　様々な効果を持った「要素」を組み合わせていくことで、　

　リアルタイムにエフェクトを構築・確認できる

　GLSLシェーダーエディタです。

・作成したエフェクトは、

　ゲーム開発用のスプライトシート（連番画像）や

　GLSLシェーダーコードとして出力できます。

《操作説明書》

(1) 画面構成

メニューバー：（画面上）

・ファイル操作、AI生成、設定などを行います。

ツールバー：（画面上）

・ベース、見た目、動き、特殊効果などのノードを

　追加するためのボタンが並んでいます。

左パネル（OBJECTS）：（画面左）

・作成した大元ベースのリストが表示されます。

・キャンバスへドラッグ＆ドロップして、複製を配置できます。

編集エリア：（画面中央）

・ベースやパラメータを配置して、

　エフェクトを組み立てていくレイアウト領域です。

・F1キーを押すと、ツリービュー表示に切り替えられます。

　（再びF1キーを押すと、元のレイアウト表示に戻ります。）

プレビュー：（画面右）

画面右下にあり、作成したエフェクトの実際の見え方と、

生成されたGLSLコードを確認できます。

タイムライン：（画面下）

・アニメーションの時間軸と、キーフレームを管理します。

(2) 基本的な使い方

・ツールバー上にある「新規ベース」ボタンを押すと、

　レイアウト上にベース（ミシン線の円）が配置されます。

・ツールバー上にある要素（色、形、動きなど）ボタンを押すと、

　レイアウト上に要素（絵文字）が追加されます。

・追加した要素をドラッグして、

　ベースの中に入れてドロップすると、

　要素がベースの中に配置されます。

・要素をダブルクリックすると、調整パネルが開くので、

　ここで色とか速度といったパラメータを調節できます。

・このパネルは、パネルの上か、または、

　別の要素をダブルクリックすると閉じます。

⋯大元リスト上にあるベース名を

　レイアウト上にドラッグ＆ドロップすると、

　その大元ベースの分身（参照インスタンス）を配置できます。

　（分身のパラメータは、大元と常に同じになります。）

(3) 編集エリアの操作（キャンバスとツリービュー）

・F1キー、または、ステータスバーの

　「ツリービュー切替」ボタンを押すと、

　要素が線でつながった「レイアウト表示」と、

　階層構造が分かりやすい「ツリービュー表示」が切り替わります。

・ツリービューモードで表示中に、

　ベース名の行をダブルクリックすると、

　そのベースの内容を展開、または、折りたたむことができます。

・ツリービューモードで表示中に、

　項目（子ベース、または要素）をドラッグ＆ドロップすることで、

　別のベースの中に入れたり、外に出したりして親子関係を変更できます。

・背景の何もない領域をダブルクリックすると、

　ツリービューを閉じて、レイアウト表示に戻ります。

⋯ベース、または、要素を右クリックすると、

　ポップアップメニューが開き、

　カット、コピー、ペースト、削除を行うことができます。

(4) タイムラインとキーフレーム

・タイムライン上の何もない場所で右クリックし、

　「キーフレームを追加」を選ぶと、

　その時点での配置状態が記録されます。

・追加されたキーフレームは

　マーカー（小さな丸い点）として表示されます。

・マーカーをダブルクリックすると、

　そのキーフレームの時点のデータがレイアウト上に表示され、

　位置などを編集することができます。

・キーフレームごとにベースの配置位置を変更すると、

　再生時に、その間が自動的に補間され、滑らかに移動します。

⋯マーカー上で右クリックすると、

　キーフレーム単位でのコピーや削除が可能です。

⋯左パネルのリストでベースを選択すると、

　そのベースが最初に登場するキーフレームへ

　自動的にジャンプします。

(5) AI生成機能

・メニューの「AI生成」から、AIに言葉で指示を出して

　カスタムGLSLコードを自動生成させることができます。

APIモード：

・GeminiのAPIキーを入力して直接生成します。

　（※APIキーを取得するには、課金サービスへの加入が必要です。）

ローカルLLMモード：

・ご自身のPCで動くllama.cppサーバーに接続して生成します。

・起動コマンドのコピーや、接続テストを行うボタンが付いています。

手動モード：

・ウィザードに従ってプロンプトをコピーし、

　ブラウザ上のAIに生成させたコードを手動で貼り付けて

　カスタム要素のソースコードを作成し、適用させます。

・生成されたコード内に

　名前が「param_」で始まる変数が定義されていると、

　調整パネルに自動的に専用のスライダーが追加されます。

(6) 保存と出力機能

・ファイルメニューの「上書き保存」や「別名で保存」から、

　作成したプロジェクト全体をパソコンに保存できます。

⋯ツールバー右側の「Template ➕ 登録」ボタンを使うと、

　選択中のノード構成をテンプレートとして登録し、

　ライブラリファイルとして個別に保存できます。

・ファイルメニューの「画像出力」を選ぶと、

　作成したアニメーションをゲーム開発などで

　使いやすいスプライトシート（連番画像）として

　書き出すことができます。

（7）要素の種類

【見た目】

（1） 📐形：　　　　

　　　　・円や多角形を作り、大きさを決めます。

（2） 🎨色：　　　　

　　　　・色相・彩度・明度を調整して色をつけます。

（3） 🖼️画像：　　　　

　　　　・PC内の画像ファイルを読み込んで表示します。

（4） 🎞️アニメ：　　　　

　　　　・横に繋がったスプライトシート画像を読み込み、　　　　

　　　　　パラパラアニメとして再生します。

【特殊】

（1） ⏳時間制御：　　　　

　　　　・発生を遅らせたり、

　　　　　一定時間で消滅（フェードアウト）させたり、　　　　

　　　　　ループする寿命を決めます。

（2） 💫残像：　　　　

　　　　・動いた軌跡に光の帯や残像を残します。

（3） 🌊空間の歪み：　　　　

　　　　・背景を波打つように歪ませ、　　　　

　　　　　衝撃波や陽炎を表現します。

（4） 🌟フィルター：　　　　

　　　　・ドット絵風にモザイク化したり、　　　　

　　　　　発光（グロー）させたりします。

（5） ✨パーティクル：　　　　

　　　　・指定した形や画像を、火花のように複数に分裂させて

　　　　　弾け飛ばします。

【動き】

（1） ➡️直線移動：　　　　

　　　・上下左右に移動し続けます。

（2） ↔️反復移動：　　　　

　　　・指定した角度に向かって、行ったり来たりします。

（3） 🪀バウンド：　　　　

　　　・地面で跳ねるような動きをします。

（4） ⤴️放物線：　　　　

　　　・重力に従って放物線を描いて飛びます。

（5） 🌀渦巻き：　　　　

　　　・回転しながら徐々に広がっていきます。

（6） 🔄空間回転：

　　　・空間そのものを回します。　　　

　　　（親に付けると、子が衛星のように公転します）

（7） 🎯ターゲット追尾：　　　　

　　　・指定した座標に向かって徐々に曲がりながら進みます。

（8） 🧲イージング：　　　　

　　　・動きの始まりや終わりを滑らかに加減速させます。

（9） 🫨揺らぎ：

　　　・炎の揺れのような、ランダムで不規則な動きを加えます。

（10） 🪨落下と弾み：

　　　・重力で落下しながら回転します。

（8）便利機能

（1） テンプレート登録：　　　

　・お気に入りのエフェクトができた際、　　　

　　ベースを選択してツールバーの「➕登録」を押すと、　　　

　　ボタンとして保存されます。

　　次回以降、ワンクリックで同じものを呼び出せます。

（2） レイアウトの移動とズーム：　　　

　・レイアウト上の何もない場所をドラッグすると、　　　

　　画面をスクロールできます。

　・キーボードの「PageUp」「PageDown」キーで

　　ズームイン・ズームアウトが可能です。

※ローカルLLMによるAI生成モードを使用する際には、

　「Local Test Browser」を使用してください。