2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

【Godot】ガウスブラーの実装方法

Last updated at Posted at 2021-02-17

概要

この記事ではGodot Engineでのガウスブラーの実装方法について紹介します。

ブラーを適用するプロジェクトの作成

画像の設定

今回のブラーは画面全体に適用するため、シーン内のノードの並び順に依存する方法です。
Godot_Engine_-TestBlur-Main_tscn___.png
そのルールを理解するため、2つの画像を用意します。

まずは背景画像。(→ "bg.jpeg" として保存)
bg.jpeg
次にスクリプトで動かすオブジェクト画像 (→ "tako.png" として保存)
tako.png
この2つの画像をプロジェクトに登録しておきます。

ウィンドウサイズの変更

今回は画像サイズに合わせて 480x320 の解像度にするため、プロジェクト > プロジェクト設定 を開き、Display > Window で 480 x 320 に変更しておきます。
Godot_Engine_-TestBlur-_Main_tscn.png

画像の配置

2Dシーン(Node2D)として、Mainノードを作成し、"bg.jpeg" と "ch.png" をドラッグ&ドロップで配置します。
Godot_Engine_-TestBlur-Main_tscn___.png
Godot_Engine_-TestBlur-Main_tscn___.png

オブジェクトを動かす

chにスクリプトをアタッチして、以下のように記述します。

ch.gd
extends Node2D

var velocity = Vector2(200, 100)

func _ready():
	pass

func _process(delta):
	position += velocity * delta
	if position.x < 0:
		position.x = 0
		velocity.x *= -1
	if position.y < 0:
		position.y = 0
		velocity.y *= -1
	if position.x > 480:
		position.x = 480
		velocity.x *= -1
	if position.y > 320:
		position.y = 320
		velocity.y *= -1

実行するとたこ焼きが画面内をバウンドして動き回ります。
shot.gif

ブラーシェーダーの追加

"bg.jpeg" をドラッグ&ドロップして、シーンノードの最後に追加します。
Godot_Engine_-TestBlur-_Main_tscn.png
ノードの名前を "blur" に変更しておきます。
なお、ここでは背景画像を登録しましたが、画面サイズのテクスチャが必要なだけなので、適用したい範囲に合わせて好きな画像を使うことができます。

"blur"ノードを選択して、インスペクタから CanvasItem > Material > Material > [空] をクリックして、「新規ShaderMaterial」を選択します。
Godot_Engine_-TestBlur-Main_tscn_____と_イラスト2___512_x_512px_72dpi_100_0_.png
少し下にスクロールして、Shader > [空] をクリックして「新規 Shader」を選択します。
Godot_Engine_-TestBlur-Main_tscn___.png
すると、エディタの中央下にシェーダーコードエディタが表示されます。
Godot_Engine_-TestBlur-Main_tscn___.png

シェーダーコードの追加

シェーダーには以下のように記述します。

shader_type canvas_item;

// ブラーの強さ.
uniform float blur_amount = 3.0;

void fragment() {
	// スクリーンテクスチャにガウスぼかしをかける
	COLOR = textureLod(SCREEN_TEXTURE, SCREEN_UV, blur_amount);
}

すると "blur" スプライトの範囲にブラーが適用されます。
Godot_Engine_-TestBlur-_Main_tscn.png

実行してブラーが適用されていることを確認します。
shot.gif

なお、このブラーは画面全体に適用しているので、ノードの順番を入れ替えることで適用されるノードを変えることができます。
shot.gif

エディタからブラーの強さを変えられるようにする

"blur" ノードにスクリプトをアタッチして、ブラーの値をエディタから変更できるようにします。

blur.gd
tool
extends Sprite

export(float, 0.0, 5.0) var blur_amount

func _process(delta: float) -> void:
	material.set_shader_param("blur_amount", blur_amount)

tool 宣言は シーンの読み直しが必要なので、Mainシーンを保存後いったん閉じて、開き直します。
そして "blur" ノードを選択すると、インスペクタからブラーの強さをリアルタイムで設定できます。

shot.gif

追記 (2021.2.20):WorldEnvironmentでブラーをかける

シェーダーを書かなくても WorldEnvironment を使うことで画面全体にぼかしを書けることができるようです。
まずは WorldEnvironmentを作成して……
Godot_Engine_-TestHDR-Main_tscn___.png
インスペクタから「新規 Environment」を追加します。
Godot_Engine_-TestHDR-Main_tscn___.png
作成した Environmentの Background > Mode を「Canvas」に変更
Godot_Engine_-TestHDR-Main_tscn___.png
Dof Near Blur > Enableを有効にするとブラーが画面全体にかかります。
shot.gif
ブラーの強さは「Amount」の値で調整できます。

ちなみに「Dof」というのは「Depth of Field(被写界深度)」のことで、例えば背景画像にはぼかしをかけることで前面にいるキャラクターに注目させる手法となります。

参考

2
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?