【Godot】ノイズテクスチャから毒の沼を作る

やること

こちらの動画のテクニックをGodotで実装したいと思います。

Illegal Noise Texture Hacks #gamedev #shader #VFX pic.twitter.com/398aioENGr

— Sam @13 (@Sam_Makes_Games) 2020年9月26日

手順

ノイズテクスチャを用意

動画ではPhotoshopの雲模様フィルタでノイズテクスチャを作成するとありますが、Godotにはノイズテクスチャを生成する機能があります。超便利！

ファイルシステム → フォルダ → 新規リソース から

ノイズテクスチャ作成

インスペクターからノイズテクスチャにOpenSimplexNoiseをセットします。 Seamlessにもチェックを入れておきます。

スプライトにノイズテクスチャを設定してみました。

シェーダを書く

shader_type canvas_item;
render_mode unshaded;

uniform sampler2D gradient;
uniform vec2 size = vec2(512, 512);

void fragment() {
    vec2 uv = UV * size / vec2(512, 512);
    float t0 = texture(TEXTURE, uv).r;
    float t1 = texture(TEXTURE, uv - vec2(TIME * 0.025)).r;
    float t2 = texture(TEXTURE, uv + vec2(TIME * 0.025)).r;
    float t12 = (t1 + t2);
    float offset = (t0 + t12) * 0.5;
    float t3 = texture(TEXTURE, vec2(offset)).r;
    float contrast = t3 * t12;

    vec3 color = texture(gradient, vec2(contrast, 0.0)).rgb;
    COLOR = vec4(color, 1.0);
}

スプライトにマテリアルをセットする

SpriteのMaterialにShaderMaterialをセットし、作成したシェーダをセットします。 これだけでは真っ暗なのでShader Paramを開き、GradientにGradientTextureをセット、さらに内部のGradientにグラデーションパラメータをセットします。

結果

こんな感じになりました。毒々しい！

3D対応

3Dもいけます。

シェーダ

Spatialシェーダ版です。 ライティングをONにしています。

shader_type spatial;

uniform sampler2D noise;
uniform sampler2D gradient;
uniform vec2 size = vec2(512, 512);

void fragment() {
    vec2 uv = UV * size / vec2(512, 512);
    float t0 = texture(noise, uv).r;
    float t1 = texture(noise, uv - vec2(TIME * 0.025)).r;
    float t2 = texture(noise, uv + vec2(TIME * 0.025)).r;
    float t12 = (t1 + t2);
    float offset = (t0 + t12) * 0.5;
    float t3 = texture(noise, vec2(offset)).r;
    float contrast = t3 * t12;

    ALBEDO = texture(gradient, vec2(contrast, 0.0)).rgb;
}

まとめ

シェーダ楽しい✌('ω'✌ )三✌('ω')✌三( ✌'ω')✌