シェーダーは映像の質を一気に上げてくれる強力な道具ですが、コードで書くシェーダー は数式やGLSLが並び、「難しそう」と感じて手が止まりがちです。そんなときの入口になるのが VisualShader（ビジュアルシェーダー） 。 コードを書かず、ノードをつなぐだけ でシェーダーを組める仕組みです。
この記事では、VisualShaderとは何かから、主要なノードと Output（出力）への接続 、コード版シェーダーとの 対応 、そして 使い分け までを図で解説します。数式が苦手でも、配線でシェーダーの世界に入っていけます。
この記事でわかること
- VisualShader とは（ノードをつないで作るシェーダー）
- 主要ノードと Output への接続の流れ
- コード版シェーダー との対応関係
- VisualShaderとコード、どちらを使うかの 使い分け
VisualShaderとは：ノードでシェーダーを組む
シェーダーの作り方には、 コードで書く 方法と、 ノードをつなぐ 方法（VisualShader）の2つがあります。どちらも最終的には同じシェーダーになりますが、作る体験が大きく違います。
- コード版 ：GLSLに近い文法で数式を書きます。自由度が高く複雑なこともできますが、初心者には敷居が高めです。
- VisualShader（ノード版） ：処理を表す ノード を配置し、 ワイヤーでつなぐ だけ。数式を打たなくても、視覚的に組み立てられます。
作り方はかんたんです。オブジェクトのマテリアルに ShaderMaterial を割り当て、その Shader 欄で「新規VisualShader」を作ると、ノードを並べてつなぐ編集画面が開きます。
ノードをOutputにつなぐ
VisualShaderは、 「入力ノード → 加工ノード → Outputノード」 という流れでできています。左から右へ、データを配線していくイメージです。
- 入力ノード ：素材になる値。
UV（テクスチャ座標）、Time（時間）、Texture（画像を読む）など - 加工ノード ：値を計算する。
Mix（2つを混ぜる＝lerp）、ベクトル演算、ColorRamp（色のグラデーション）など - Outputノード ：計算結果の行き先。ここにつないだ値が画面に反映されます
例えば「テクスチャをそのまま表示する」なら、Texture ノードの色を Output の色につなぐだけ。「時間で色を変える」なら、Time を計算に混ぜてから Output へ、という具合です。 数式を打つ代わりに、ノードを線でつなぐ ——これがVisualShaderの基本操作です。
Outputノード：2Dと3Dで違う出力先
Outputノードの中身は、2D（canvas_item）と3D（spatial）で変わります。作りたいものに合わせて、正しい出力先へつなぎます。
canvas_item（2D） ：Color（色）、Alpha（透明度）などが主な出力先です。スプライトやUIのシェーダーはこちら。spatial（3D） ：Albedo（基本色）、Emission（発光）、Normal（凹凸）、Alphaなど、3Dマテリアルらしい豊富な出力先があります。
どのモードで作るかは、シェーダーを付ける相手（2Dスプライトか3Dメッシュか）で決まります。まずは2Dの Color へ色を出すところから始めると、結果が分かりやすいです。
実践：ノードでヒットフラッシュを作る
アクションの被弾、シューティングの敵ヒット、RPGのダメージ演出——「攻撃が当たった瞬間、キャラが白く光る」ヒットフラッシュは定番のエフェクトです。これをVisualShaderのノードで組んでみましょう。
仕組みはシンプルです。 元のテクスチャの色 と 白 を、Mix ノードで混ぜ、その 混ぜ具合を uniform（外から変えられる値） で制御します。
Textureノードで元の絵の色を取るVector（白 =(1, 1, 1)）を用意するMixノードで「元の色」と「白」を混ぜる。混ぜ具合はflash_amount（uniform）- 結果を
OutputのColorにつなぐ
あとはスクリプトから flash_amount を上げ下げするだけ。被弾した瞬間に1へ、すぐ0へ戻せば、パッと白く光ってすぐ戻ります（値をなめらかに戻すなら Tween が便利です）。
ポイントは2つです。
Mixは「混ぜる」の万能ノード ：2つの色（や値）を割合で混ぜるMix（lerp）は、フラッシュ・フェード・色変化など、あらゆる演出の土台になります。まずこれを覚えると応用が利きます。- uniformで「外から動かせる穴」を作る ：
flash_amountのようなuniformを1つ用意すれば、同じシェーダーをスクリプトから自在に制御できます。これは コード版シェーダー のuniformと同じ考え方です。
同じ処理を色を掛けるだけで済ませたいなら modulateによるホワイトフラッシュ の方が手軽です。シェーダーは「もっと凝った加工」がしたくなったときの選択肢、と捉えてください。
コード版との使い分け
VisualShaderとコード版は、どちらが上ということはなく、 場面で使い分け ます。
| VisualShader（ノード） | コード版 | |
|---|---|---|
| 向いている場面 | 試作・数式が苦手・視覚的に組みたい | 処理が複雑・量産・細かく最適化したい |
| 強み | 直感的・つなぐだけ・結果が見やすい | 自由度が高い・使い回し・差分管理しやすい |
おすすめは、 VisualShaderで感覚を掴み、慣れたらコードへ という流れです。ノードで「テクスチャを混ぜる」「時間で動かす」を体験しておくと、コード版の mix() や TIME を見たときに「あのノードのことか」とすっと理解できます。逆に、ノードが増えて配線がスパゲッティになってきたら、コード版へ移すサインです。
おまけ：先に知っておくと良いこと
- プレビューで結果を確認 ：多くのノードは、その場で結果の色を小さくプレビューできます。配線しながら「今どうなっているか」を目で確かめられるのが、VisualShaderの大きな利点です。
- 困ったら公式のノード一覧 ：ノードの種類は豊富です。やりたいことに合うノードは、公式ドキュメントのノード一覧から探すのが早道です。
- 画面全体のエフェクトは別テクニック ：画面全体にかけるアウトラインや色収差などは、
hint_screen_textureを使ったポストプロセスの領域です（コード版が中心ですが、考え方はVisualShaderにも通じます）。
まとめ
- VisualShader は、コードを書かず ノードをつないで シェーダーを作る仕組み
ShaderMaterialのShader欄で「新規VisualShader」を作り、 入力→加工→Output の順に配線する- Outputは 2D（
canvas_item）ならColor/Alpha、3D（spatial）ならAlbedo/Emission など Mixと uniform を使えば、ヒットフラッシュのような演出がノードだけで作れる- 試作・数式が苦手ならVisualShader、複雑・量産ならコード版 と使い分ける
まずは2Dスプライトに Texture → Output.Color をつなぐだけの最小シェーダーから始めてみてください。「線をつなぐと絵が変わる」感覚が掴めれば、シェーダーはもう怖くありません。
さらに学ぶために
- Fragment Shaderの基礎 ——コードで書くシェーダー（VisualShaderの対になる記事）
- modulateによるホワイトフラッシュ ——シェーダーを使わない手軽な被弾演出
- Tweenで実現する滑らかなアニメーション ——uniformをなめらかに動かす
- Godot公式ドキュメント：Using VisualShaders ——VisualShaderの一次情報