GLSLシェーダーで遊ぶ「Glsl Viewer」
【更新履歴】
・2026/2/28 バージョン1.0公開。
（中略）
・2026/2/28 バージョン2.1公開。
・ダウンロードされる方はこちら。↓
https://drive.google.com/drive/folders/1I79w7SBhawE2Rq0m2po8RxdOkHeLu4aR?ths=true
《操作説明書》
・本ツールは、直感的な操作で、
複雑なゲーム用エフェクトや弾幕を
プログラミング不要で作成できるツールです。
ツールの概要
・本ツールは、器となる「ベース」に、
様々な効果を持った「パラメータ」を組み合わせていくことで、
リアルタイムにエフェクトを構築・確認できるエディターです。
・作成したエフェクトは、
ゲーム開発用のスプライトシート（連番画像）や
GLSLシェーダーコードとして出力できます。
画面の構成
（1） メニューバー（画面上部）：
ファイルの保存・読み込み、エフェクトの画像出力、
操作の取り消し・やり直し、
レイアウトやタイムラインの設定を行います。
（2） 大元リスト（画面左側）：
キャンバスに作成したベース（大元）が一覧表示されます。
ここからキャンバスへドラッグすると、
同じ動きをする「分身（インスタンス）」を複数配置できます。
（3） ツールバー（画面中央上）：
新しいベースや、追加したいパラメータ（効果）を選択して
キャンバスに出現させます。
（4） キャンバス（画面中央）：
ベースやパラメータを配置し、
つなぎ合わせてエフェクトを組み立てる作業エリアです。
（5） プレビュー（画面右側）：
作成中のエフェクトがリアルタイムに表示されます。
（6） タイムライン（画面下部）：
エフェクトの再生・一時停止、時間の確認や
シーク（巻き戻し・早送り）が行えます。
基本操作
（1） ベースの配置：
ツールバーの「🎇新規ベース」をクリックすると、
キャンバスにベースが出現します。
（2） 開閉操作：
キャンバス上のベースを「ダブルクリック」すると、
展開（円が大きくなる）と収納を切り替えることができます。
（3） パラメータの追加と設定：
ツールバーから「🎨色」や「➡️直線移動」などのパラメータを出し、
展開しているベースの円の中にドラッグ＆ドロップすると、
カチッとはまり込んで効果が適用されます。
（4） パラメータの調整：
はめ込んだパラメータ、または
独立しているパラメータを「ダブルクリック」すると、
詳細な数値を調整するスライダーが表示されます。
スライダーを動かすとプレビューに即座に反映されます。
（5） ベースの階層化（親子関係）：
展開しているベースの中に、
別のベースをドラッグ＆ドロップで入れることができます。
中に入った「子」のベースは、
「親」の動きや色、形をそのまま受け継ぎ、
さらに自分自身の動きを重ね合わせることができます。
（例：親が回転し、子がその周囲を回りながら直進する、など）
（6） コピーと削除：
オブジェクトを右クリックするとメニューが開き、
コピーや削除ができます。
DeleteキーやBackspaceキーでの削除も可能です。
パラメータの種類
【見た目】
（1） 📐形：
円や多角形を作り、大きさを決めます。
（2） 🎨色：
色相・彩度・明度を調整して色をつけます。
（3） 🖼️画像：
PC内の画像ファイルを読み込んで表示します。
（4） 🎞️アニメ：
横に繋がったスプライトシート画像を読み込み、
パラパラアニメとして再生します。
【特殊】
（1） ⏳時間制御：
発生を遅らせたり、
一定時間で消滅（フェードアウト）させたり、
ループする寿命を決めます。
（2） 💫残像：
動いた軌跡に光の帯や残像を残します。
（3） 🌊空間の歪み：
背景を波打つように歪ませ、
衝撃波や陽炎を表現します。
（4） 🌟フィルター：
ドット絵風にモザイク化したり、
発光（グロー）させたりします。
（5） ✨パーティクル：
指定した形や画像を、火花のように複数に分裂させて
弾け飛ばします。
【動き】
（1） ➡️直線移動：
上下左右に移動し続けます。
（2） ↔️反復移動：
指定した角度に向かって、行ったり来たりします。
（3） 🪀バウンド：
地面で跳ねるような動きをします。
（4） ⤴️放物線：
重力に従って放物線を描いて飛びます。
（5） 🌀渦巻き：
回転しながら徐々に広がっていきます。
（6） 🔄空間回転：
空間そのものを回します。
（親に付けると、子が衛星のように公転します）
（7） 🎯ターゲット追尾：
指定した座標に向かって徐々に曲がりながら進みます。
（8） 🧲イージング：
動きの始まりや終わりを滑らかに加減速させます。
（9） 🫨揺らぎ：
炎の揺れのような、ランダムで不規則な動きを加えます。
（10） 🪨落下と弾み：
重力で落下しながら回転します。
便利機能
（1） テンプレート登録：
お気に入りのエフェクトができた際、
ベースを選択してツールバーの「➕登録」を押すと、
ボタンとして保存されます。
次回以降、ワンクリックで同じものを呼び出せます。
（2） キャンバスの移動とズーム：
キャンバスの何もない場所をドラッグすると、
画面をスクロールできます。
キーボードの「PageUp」「PageDown」キーで
ズームイン・ズームアウトが可能です。
（3） グリッドスナップ：
画面右上の「📏グリッドスナップ」にチェックを入れると、
マス目に沿って綺麗にオブジェクトを配置できます。
（4） スプライトシート出力：
メニューバーの「ファイル」から
「🎬スプライトシート出力」を選ぶと、
設定した秒数とコマ数でエフェクトを自動録画し、
ゲーム開発ですぐに使える1枚の連番画像（PNG）として
保存します。
・ソースコードはこちら。↓
// --- 3D レイマーチング炎 ---
vec3 org = vec3(0.0, -2.0, 4.0);
vec3 dir = normalize(vec3(p.x * 2.0, -p.y * 2.0, -1.5));
float d_ray = 0.0, glow = 0.0, eps = 0.02;
vec3 rp = org;
bool glowed = false;
for(int i = 0; i < 64; i++) {
float f_dist = flame3D(rp, t_tr);
d_ray = min(100.0 - length(rp), abs(f_dist)) + eps;
rp += d_ray * dir;
if( d_ray > eps ) {
if(f_dist < 0.0) glowed = true;
if(glowed) glow = float(i) / 64.0;
}
}
vec3 col_base = mix(vec3(1.0, 0.5, 0.1), vec3(0.1, 0.5, 1.0), rp.y * 0.02 + 0.4);
vec3 final_rgb = mix(vec3(0.0), col_base, pow(glow * 2.0, 4.0));
local_col = final_rgb;
local_d = -1.0;
・カスタムのサンプル。（炎）↓
vec3 org = vec3(0.0, -2.0, 4.0);
vec3 dir = normalize(vec3(p.x * 2.0, -p.y * 2.0, -1.5));
float d_ray = 0.0, glow = 0.0, eps = 0.02;
vec3 rp = org;
bool glowed = false;
for(int i = 0; i < 64; i++) {
float f_dist = flame3D(rp, t_tr);
d_ray = min(100.0 - length(rp), abs(f_dist)) + eps;
rp += d_ray * dir;
if( d_ray > eps ) {
if(f_dist < 0.0) glowed = true;
if(glowed) glow = float(i) / 64.0;
}
}
vec3 col_base = mix(vec3(1.0, 0.5, 0.1), vec3(0.1, 0.5, 1.0), rp.y * 0.02 + 0.4);
vec3 final_rgb = mix(vec3(0.0), col_base, pow(glow * 2.0, 4.0));
local_col = final_rgb;
local_d = -1.0;
コメント