rn.log

備忘録など

【シェーダーグラフメモ その44】六角形タイルを利用した画像切り替え4種類

はじめに

六角形タイルを利用した画像切り替え4種の作り方を解説します。

f:id:r-ngtm:20190118225926g:plain

 

準備

今回のシェーダーグラフでは、六角形タイルカスタムノードを使用します。

下記URLのカスタムノードをUnityプロジェクトに入れてください。

六角形タイルを作るShaderGraphカスタムノード · GitHub

 

Hexagonカスタムノードは以下のような値を出力してくれます。

f:id:r-ngtm:20190119184828p:plain

 

シェーダーグラフ1 : 横方向に切り替える

テクスチャを横方向に切り替えるシェーダーグラフの作り方を解説します。

f:id:r-ngtm:20190119091426g:plain

 

ノード全体

f:id:r-ngtm:20190119090929p:plain

 

STEP1 : Hexagonノードから六角形タイルを作る

f:id:r-ngtm:20190119162222p:plain

STEP2 :  右方向に向かって小さくする

StepのEdgeに定数を指定していましたが、代わりに六角形のx座標を利用して、

右側に行くほど

f:id:r-ngtm:20190119163350p:plain

 

STEP3 : 六角形を動かす

六角形のx座標から数値を減算して、六角形を動かせるようにします。

f:id:r-ngtm:20190119163825p:plain

f:id:r-ngtm:20190119164133g:plain

 

Sliderをプロパティ化

マテリアルのインスペクタ上から値を変化させられるように、Sliderはプロパティ化しておきます。

f:id:r-ngtm:20190119175814p:plain

 

f:id:r-ngtm:20190119184241p:plain

STEP4 : 六角形の大きさの変化を左右反転させる

x座標にOneMinusノードを適用すると、x座標の左右が逆転し、六角形の大きさの変化も逆転します。

f:id:r-ngtm:20190119164705p:plain

 

STEP5 : 六角形タイルを利用してテクスチャを混ぜる

六角形タイルとSampleTexture2DをLerpノードに入力し、テクスチャを混ぜて完成です。

f:id:r-ngtm:20190119165312p:plain

 

結果

最終的に以下のような絵が出力されます。

f:id:r-ngtm:20190119180607p:plain 

f:id:r-ngtm:20190119091426g:plain

 

シェーダーグラフ2 : 縦方向の変化にする 

f:id:r-ngtm:20190119182652g:plain

 

シェーダーグラフ1では、X座標を六角形のStep値として使用していたため、横方向に六角形の大きさが変化していました。

X座標の代わりにY座標を使用した場合、縦方向の変化になります。

f:id:r-ngtm:20190119180442p:plain

 

シェーダーグラフ3 : 広がるような変化にする

f:id:r-ngtm:20190119182204g:plain

 

y座標の代わりに中央からの距離を利用すると、広がるような変化を作ることができます。

f:id:r-ngtm:20190119181842p:plain

 

六角形を大きくする

HexagonノードのScaleの値を小さくすると、六角形が大きくなります。

f:id:r-ngtm:20190119185250p:plain

f:id:r-ngtm:20190119185446p:plain

 

シェーダーグラフ4: ランダムに混ざるような変化にする

f:id:r-ngtm:20190119183216g:plain

 

Stepの入力値としてSimpleNoiseを利用するとランダムに混ざるような変化になります。

f:id:r-ngtm:20190119183526p:plain

 

【シェーダーグラフメモ その43】テクスチャを引き延ばすようなエフェクト

はじめに

テクスチャを横に引き延ばすようなエフェクトをかけるシェーダーグラフの作り方を解説します。

f:id:r-ngtm:20190115232324g:plain

 

凱風快晴はパブリックドメイン美術館にあるものを使用させていただきました。

www.bestweb-link.net

 

ノード全体

f:id:r-ngtm:20190115234108p:plain

 

サンプル

github.com

作り方解説

STEP1 :  テクスチャ表示

SampleTexure2DノードとUnlit Masterノードを接続し、テクスチャを描画します。

f:id:r-ngtm:20190115225624p:plain

f:id:r-ngtm:20190115231137p:plain

STEP2 : テクスチャを右に引き延ばす

UVのx成分Minimumを適用したものをテクスチャのUVとして使うと、

しきい値より右側の部分が引き延ばされたような見た目になります。

ここではしきい値として0.5(ちょうど真ん中)を設定しています。

f:id:r-ngtm:20190115231016p:plain

右側へ伸びたような見た目になりました。

f:id:r-ngtm:20190115231112p:plain

 

 軽い補足

しきい値Aより右側の部分ではx座標としてAが使用されるため、右側に引き延ばされたような見た目になります。

f:id:r-ngtm:20190115234329p:plain





STEP3 : しきい値をプロパティ化(完成)

Vector1型のプロパティを作成、Minimumノードに接続します。

f:id:r-ngtm:20190115231653p:plain

 

インスペクタ上からしきい値を変更できるようになりました。

f:id:r-ngtm:20190115232324g:plain

 

左に引き延ばす

Minimumの代わりにMaximumノードを使うと、テクスチャが左に引き延ばされるようになります。

f:id:r-ngtm:20190115232548p:plain

 

f:id:r-ngtm:20190115232631p:plain

 

軽い補足

しきい値Aより左側の部分ではx座標としてAが使用されるため、左に引き延ばされたような見た目になります。

f:id:r-ngtm:20190115233636p:plain




【シェーダーグラフメモ その42】テレビの砂嵐のようなノイズ

 

はじめに

 テレビの砂嵐っぽいシェーダーグラフの作り方を解説します。

f:id:r-ngtm:20190114234323g:plain

 

ノード全体

f:id:r-ngtm:20190115001134p:plain

 

サンプル

github.com

作り方解説

STEP1. ノイズを作る

Simple NoiseをUnlit Masterノードにつないでノイズを出します。

f:id:r-ngtm:20190114234608p:plain

 

以下のようなノイズが出力されます。

f:id:r-ngtm:20190114234515p:plain

STEP2. ノイズを動かす

ノイズに時間を足してFractionを適用して、ノイズを動かします。

f:id:r-ngtm:20190114234915p:plain

f:id:r-ngtm:20190114235101g:plain

 

STEP3 . ノイズをバラつかせる(完成)

ノイズの動きに偏りがありますが、

これはSimpleNoiseの値が0.0 ~ 0.7あたりの範囲に集まっているために、動きの偏りが生まれています。

ノイズをバラつかせるために巨大な数値を乗算し、Fractionをかけて整数部分を取り除きます。

f:id:r-ngtm:20190114235638p:plain

 

ノイズがバラついた動きになりました。

f:id:r-ngtm:20190115000014g:plain

微調整

時間を4倍速、ノイズの係数を34にすると以下のような砂嵐になります。

f:id:r-ngtm:20190114234323g:plain

 

f:id:r-ngtm:20190115000937p:plain

 

 

【シェーダーグラフメモ その41】流れるLEDライトのような表現を作る

はじめに

シェーダーグラフを利用して、流れるLEDライトのようなものを作る方法を解説します。

f:id:r-ngtm:20190113134141g:plain


サンプル

github.com

 

解説

今回の表現ですが、3枚の板を組み合わせて作っています。

f:id:r-ngtm:20190113134744g:plain

ノード全体

f:id:r-ngtm:20190113155354p:plain

作り方解説

準備: 板を作る

以下のような板を作り、 

f:id:r-ngtm:20190113142016p:plain

 

シェーダーグラフから作成したマテリアルを板に登録しておきます

f:id:r-ngtm:20190113142220p:plain

シェーダーグラフから作成したマテリアルを登録しておく

 

STEP1: 円を並べる

f:id:r-ngtm:20190113135455p:plain

 

UVに8を乗算します。

これにFractionを適用してEllipseノードのUVとして使用します。

f:id:r-ngtm:20190113135839p:plain

 

STEP2 : 円とグラデーションを乗算する

f:id:r-ngtm:20190113140639p:plain

 

UVにPosterizeノード(Steps = 8) を適用し、x成分を取り出してSTEP1の円と乗算します。

f:id:r-ngtm:20190113140714p:plain

 

STEP3 : グラデーションを動かす

f:id:r-ngtm:20190113141324g:plain

 

X座標から時間を減算し、Fractionをかけるとグラデーションがスクロールするようになります。

f:id:r-ngtm:20190113141500p:plain

 

STEP4 : 板を3倍に引き延ばす

板のx方向のスケールを3に設定します。

f:id:r-ngtm:20190113142557p:plain

当然ですが、円も引き延ばされてしまいました。

 

STEP5 : 模様を1/3倍に縮小する

x方向に3倍に引き延ばされた円を1/3倍に縮小するため、UVのx座標を3倍します。

f:id:r-ngtm:20190113142838p:plain

f:id:r-ngtm:20190113144232p:plain

STEP6 : 色を付ける(シェーダーグラフ完成)

模様に色を付けます。

f:id:r-ngtm:20190113145211g:plain

 

f:id:r-ngtm:20190113144822p:plain

 

板を正三角形のように並べれば今回の表現の基礎の完成となります。

f:id:r-ngtm:20190113150447g:plain 

 

微調整

調整1 : グラデーションを2値化する

f:id:r-ngtm:20190113150251g:plain

 

グラデーションにStepをかけると、グラデーションがくっきりとした感じになります。

f:id:r-ngtm:20190113145536p:plain

 

調整2: 円の数を変更する

PosterizeノードとMultiplyノードの数値を変更することで、円の数を変更することができます。

先ほどは8を設定していましたが、24に設定すると以下のようになります。

f:id:r-ngtm:20190113150959g:plain

f:id:r-ngtm:20190113150809p:plain

 

 

Vector1などの定数はプロパティ化すると便利

Vector1ノードをプロパティ化すると、マテリアルのInspector上から変更できるようになるので便利です。

f:id:r-ngtm:20190113151937g:plain

 

f:id:r-ngtm:20190113151911g:plain



調整3 : LEDをランダムにずらす

f:id:r-ngtm:20190113152938g:plain

 

Y座標でノイズを生成し、X座標に足すことでグラデーションがランダムにズレます。

f:id:r-ngtm:20190113152744p:plain


調整4: ランダム値を調整

バラつきが大きすぎてうるさいので、

SimpleNoiseに数値を乗算して、スクロールのバラつきを調整します。

 

0.3を乗算した場合は以下のようになります。

f:id:r-ngtm:20190113153626p:plain

 

ノードは以下のように組んでいます。

f:id:r-ngtm:20190113153434p:plain

調整5 : 円の大きさを調整(調整終わり)

円の大きさが0.5だったものを、0.4に設定すると以下のようになります。

f:id:r-ngtm:20190113154904p:plain

 

ノードは以下のように組んでいます。

f:id:r-ngtm:20190113154801p:plain

 

【シェーダーグラフメモ その40】テクスチャを水玉パターンに加工する

 

はじめに

テクスチャを水玉パターンのような見た目に加工するシェーダーグラフの作り方を解説します。f:id:r-ngtm:20190111211722p:plain 

作り方解説

 STEP1 : モザイクをかける

Posterizeノードを利用して、テクスチャにモザイクをかけます。

今回はStepの部分に64を設定しました。

f:id:r-ngtm:20190111212405p:plain

 

64x64のドット絵のような見た目の絵が描画されます。

f:id:r-ngtm:20190111212533p:plain

 

STEP2 : 円を並べる

64倍したUVにFractionをかけ、0~1のUVを縦横64個並べます。

このUVを利用して円を描画すると縦横64個の円が並びます。

f:id:r-ngtm:20190111213353p:plain

 

STEP3 : テクスチャの色を円のサイズに利用する(完成)

テクスチャのRGBの平均値を円の大きさに利用します。

f:id:r-ngtm:20190111214104p:plain

 

 

以下のような水玉模様なテクスチャが描画されます。

f:id:r-ngtm:20190111214125p:plain

UnityのShaderGraphで音を作る

はじめに

ShaderGraphを利用して、サウンド合成をやってみました。

以下の動画は、ShaderGraphを使って実際に音を作っているところをキャプチャしたものです。

www.youtube.com

www.youtube.com

サンプル

github.com

サウンド合成までの流れ

f:id:r-ngtm:20190110220303p:plain

まずはテクスチャを用意し、これをShaderGraphで加工します。
そして、加工したテクスチャをOnAudioFIlterReadメソッド経由でオーディオデータに書き込み、音としてスピーカーから再生します。

OnAudioFilterReadについて

Unityのサウンド再生では、ゲームシーン内のAudioSourceが再生した音をAudioListenerが拾いスピーカーへ流します。
f:id:r-ngtm:20190111002131p:plain

OnAudioFilterReadメソッドを利用することで、AudioSourceからAudioListenerへのデータの流れに独自の処理を挟み、音を加工することができます。
例えば、自分でディレイエフェクトを実装して音に反響を付けたり、ローパスフィルターを実装して音の高周波成分を削ったり・・・

Unity公式リファレンス

Unity公式リファレンスにも解説やサンプルが載っています。
docs.unity3d.com

OnAudioFilterReadの利用例 : ディレイエフェクト

ディレイエフェクトの実装例が載っている記事
qiita.com

実装

STEP1. ソースコード

実装自体は以下のソースコードで完結します。

using UnityEngine;
using Random = System.Random;

[RequireComponent(typeof(AudioSource))]
public class SoundShader : MonoBehaviour
{
    const int Width = 128; // texture width
    const int Height = 64; // texture height

    [SerializeField, Range(0f, 1f)] private float soundVolume = 0.05f;
    [SerializeField] private Material soundMaterial; // Material for audio synthesis
    RenderTexture soundRT; // シェーダーで加工した結果を保持するためのRenderTexture
    Texture2D soundTexture; 
    float[] textureBuffer; // オーディオに渡すためのデータ
    int bufferReadPos = 0; // データの読み取り位置

    void Start()
    {
        soundRT = new RenderTexture(Width, Height, 0);
        soundRT.Create();
        textureBuffer = new float[soundRT.width * soundRT.height];
        soundTexture = new Texture2D(soundRT.width, soundRT.height);
    }

    void Update()
    {
        UpdateBuffer();
    }
    
    private void UpdateBuffer()
    {
        // シェーダーでテクスチャを加工し、結果をsoundRTに保存
        Graphics.Blit(soundRT, soundRT, soundMaterial, 0);

        // RenderTextureはそのままではピクセルにアクセスできないのでTexture2Dに変換
        RenderTexture.active = soundRT;
        soundTexture.ReadPixels(new Rect(0, 0, Width, Height), 0, 0); // RenderTexture -> Texture2D

        // Texture2D -> float[]
        // Texture2D.GetPixel()をOnAudioFilterRead()の中で使うと怒られるので注意
        int dst = 0;
        for (int y = 0; y < soundRT.height; y++)
        {
            for (int x = 0; x < soundRT.width; x++)
            {
                // とりあえず、テクスチャのrチャンネルをオーディオに渡す
                textureBuffer[dst++] = soundTexture.GetPixel(x, y).r * 2f - 1f; // [0:1] -> [-1:1]
            }
        }
    }

    void OnDestroy()
    {
        soundRT.Release();
        DestroyImmediate(soundTexture);
    }
    
    void OnAudioFilterRead(float[] data, int channels)
    {
        int dst = 0;
        while (dst < data.Length)
        {
            float value = textureBuffer[bufferReadPos] * soundVolume;
            for (int i = 0; i < channels; i++)
            {
                data[dst + i] = value; // write
            }

            dst += channels;
            bufferReadPos ++;
            if (bufferReadPos == textureBuffer.Length)
            {
                bufferReadPos = 0;
            }
        }
    }
}


STEP2. シェーダーグラフを作る

今回は以下のようなノイズを出力するシェーダーグラフを作ってみます。
f:id:r-ngtm:20190111002723p:plain

STEP3. マテリアル作成

シェーダーグラフを右クリックしてマテリアル作成します f:id:r-ngtm:20190111002952p:plain

STEP4. マテリアル登録

適当なオブジェクトにSTEP1.のコンポーネント(SoundShader)をアタッチし、STEP3のマテリアルを登録します
f:id:r-ngtm:20190111003218p:plain

STEP5 ゲーム再生(完成)

ゲームを再生すると、ノイズのような音が再生されます。

Ryoji.Ikeda 風のノイズを作って遊んでみた

ノイズを作って遊んでみました。
www.youtube.com

ノード全体

f:id:r-ngtm:20190111004840p:plain

【シェーダーグラフメモ その39】ランダムな斜線パターン

 

 はじめに

以下のような模様を出力するシェーダーグラフの作り方を解説します。

f:id:r-ngtm:20190109000045p:plain

 

サンプル

github.com

 

シェーダーグラフ全体

f:id:r-ngtm:20190109000632p:plain

作り方解説

STEP1 : ランダムな白黒ドットを作る

UVPosterizeをかけて解像度を下げます。

これにSimpleNoiseを適用してモザイク模様を作り、Stepをかけて2値化します。

f:id:r-ngtm:20190108235040p:plain

f:id:r-ngtm:20190109000243p:plain


 

 

STEP2 : 2種類の斜線パターンを作る

f:id:r-ngtm:20190108234629p:plain

 

STEP3 : 白黒ドットを使って斜線パターンを混ぜる

STEP1で作成した白黒ドットを使い、STEP2で作った斜線パターンを混ぜます。

f:id:r-ngtm:20190108235616p:plain

f:id:r-ngtm:20190108235712p:plain

 

STEP4 : マス目の数を12に設定(完成)

マス目の数を12に設定して完成です。

f:id:r-ngtm:20190108235854p:plain

f:id:r-ngtm:20190109000045p:plain