シェーダー on Godot 4 レシピ

シェーダー入門編

Mon, 01 Jan 0001 00:00:00 +0000

ℹ️ 留意事項

この記事は Godot 3から Godot 4 へ内容の書き換え中です。 Godot4では存在しない変数、関数が含まれている場合があります。もしその場合はリポジトリのIssuesまでご報告ください。

課題

シェーダーのコーディングをやってみたい。

解決策

シェーダーとは、コンピュータのGPU（グラフィックスカード）上で動作する専用プログラムのことです。GPUは特定種類の演算処理を極めて効率的に実行できるよう最適化されています。このシェーダーコードをオブジェクトに適用することで、画面上でのレンダリング方法に影響を与えることができます。

シェーダープログラムの出力結果は、オブジェクトを構成するピクセル群の色情報です。シェーダーは2D環境（canvas_item 用シェーダー）および3D環境（spatial シェーダー）で利用できます。

シェーダーに関して初心者が特に理解しにくいのは、これが並列処理で行われるという点です。シェーダーは画面全体のすべてのピクセルに対して同時に実行されます。この仕組みにより処理速度が大幅に向上しますが、一方でシェーダー内でアクセス可能な情報にも制限が生じます。

オブジェクトにシェーダーを追加するには、まず対象のオブジェクトの［マテリアル］プロパティを見つけ、「新規シェーダーマテリアル」を選択します。新しく作成したマテリアルをクリックして開くと、「新規シェーダー」を選択する画面が表示されます。さらにクリックすると、画面下部にシェーダー編集画面が開きます。

シェーダーの最初の行にはそのタイプを指定が必要です。接続されているノードが2Dノードの場合は。

shader_type canvas_item;

もしくは3Dノードの場合：

shader_type spatial;

これらの初期例では2Dに限定して進めてください。まずSpriteノードを追加し、上記の手順に従ってシェーダーを適用してください。テクスチャにはGodotのデフォルトアイコンを使用することもできます。

ここで解説するシェーダーには主に2種類あります。 頂点シェーダー と フラグメントシェーダー です。

フラグメントシェーダー

フラグメントシェーダーはピクセルの色を計算します。具体例を見てみてください。

void fragment() {
 COLOR = vec4(1.0, 0.0, 0.0, 1.0);
}

全てのピクセルが赤色になります。COLORはフラグメントシェーダーの出力値であり、これをすべてのピクセルに同時に適用します。しかし、何らかのバリエーションを持たせたい場合はどうしますか？

UV座標

シェーダーでは、ピクセル座標は UV 表記で指定されます。これらは正規化された値で、範囲は (0, 0)（左上）から (1, 1)（右下）までです。

メモ

シェーダーではベクトル型 (vec4) を使用してRGBAカラーを表現します。個々の成分には color.r のようにアクセスできます。色をベクトルとして扱うことで、ベクトル演算に基づく様々な興味深いエフェクトを実現できます。

void fragment() {
 COLOR = vec4(UV.x, 0.0, 0.0, 1.0);
}

シェーダーとの連携

Mon, 01 Jan 0001 00:00:00 +0000

ℹ️ 留意事項

課題

GDScriptからGodotシェーダーと連携したい。

解決策

GDScriptから uniform の値にアクセスするには、オブジェクトのmaterialプロパティに対してset_shader_param()メソッドを使用できます。もしアタッチされているマテリアルが ShaderMaterial の場合、以下のようにアクセス可能です。

node.material.set_shader_param("param_name", value)

以下の方法で値を取得することもできます。get_shader_param()。

例については、ブラーシェーダーのレシピを参照してください。

グレースケール（モノクロ）シェーダー

Mon, 01 Jan 0001 00:00:00 +0000

ℹ️ 留意事項

課題

画像のグレースケール変換に使用するシェーダーが必要です。

解決策

まずは canvas_item（2D）用シェーダーから始めてください。グレースケールに変換しつつピクセルのコントラストを維持するには、画素値を平均化が必要です。カラーチャンネルをすべて加算し、3で割ることで実現できます。

shader_type canvas_item;

void fragment() {
 COLOR = texture(TEXTURE, UV);
 float avg = (COLOR.r + COLOR.g + COLOR.b) / 3.0;
 COLOR.rgb = vec3(avg);
}

この機能を画面全体に適用するには、ColorRect コンポーネント（カメラの動きを無視するため CanvasLayer 内に配置）を追加し、画面全体を覆うようにスケールを調整してください。

texture() 関数を修正し、オブジェクトのピクセルではなく画面を直接サンプリングするようにしてください。

COLOR = texture(SCREEN_TEXTURE, SCREEN_UV);

ブラーシェーダー

Mon, 01 Jan 0001 00:00:00 +0000

ℹ️ 留意事項

課題

オブジェクトや画面をぼかすシェーダーが欲しい。

解決策

shader_type canvas_item;

uniform float blur_amount : hint_range(0, 5);

void fragment() {
 COLOR = textureLod(SCREEN_TEXTURE, SCREEN_UV, blur_amount);
}

例えば、シーン切り替え効果のために画面全体を徐々にぼかすには。

ぼかし効果もアニメーション化できます。

extends Node

# Add a ColorRect or other Control set to fill the screen
# Place it lower in the tree and/or place in CanvasLayer
# so it's on top of the rest of the scene.
@onready var blur = $Blur
var blur_amount = 0

func _process(delta):
 blur_amount = wrapf(blur_amount + 0.05, 0.0, 5.0)
 blur.material.set_shader_param("blur_amount", blur_amount)

シェーダー on Godot 4 レシピ

シェーダー入門編

課題

解決策

フラグメントシェーダー

UV座標

シェーダーとの連携

課題

解決策

関連するレシピ

グレースケール（モノクロ）シェーダー

課題

解決策

関連するレシピ

ブラーシェーダー

課題

解決策