[Unity] Shader Graph でノイズ関数を改造してタイリングに対応するカスタムノードを作る（改）

#はじめに

一昨日の記事Shader Graph でノイズ関数を改造してタイリングに対応するカスタムノードを作るにて、ノイズ関数のタイリング対応というのを紹介したのですが、実はいろいろと欠点があって気になっていました。今回はそれに対する改良版です。

なお今回はコードの修正編です。カスタムノードを作る手順は前回の記事を参照してください。カスタムノードさえ作れれば、下のコードを貼り付けるだけで利用できるはずです。

#問題
##問題その１ SimpleNoise のタイリングの結果が、いまいちクオリティが高くない

こちらがオリジナルの SimpleNoise で、

こちらがタイリング対応の TiledSimpleNoise です。

たしかに境界は消えていますが、ノイズの周期にそこはかとなく繰り返しが見えますよね。ノイズとしては品質が低いなあと。

##問題その２ 設定値によっては境界が現れる

Scale値をPOT（2のべき乗）にしていれば、たしかに境界は現れないのですが。例えば31を指定してみるとこうなってしまいます。

やだー境界が出てるー詐欺じゃないですかー。実は前回の記事は、値を32とか16とかにしてくださいよ、という話だったのです。それでも十分に役にはたつとは思いますけど不親切ではありますね。

TiledGradientNoiseにも同様の問題が起きていました。Scaleを9.5にしたものが以下です。

まあ端数は入れないで欲しくはありますが。

##問題その３ Voronoi もあったのを忘れてた

これは前回触れていないので問題ではないですが、Voronoi も対応しておいたほうがいいよねと。

オリジナルはこうなってしまうので、これも境界を消したタイリング対応しておきましょう。

TiledSimpleNoiseの改良

品質の問題は、Scaleを4で割って周期にあてていた点で、これのせいでノイズの周期が短くなっていました。SimpleNoiseは複数のノイズを合成しており、そのひとつが引数の周期を４倍するアルゴリズムだったため４で割らざるを得ませんでした。
また、2のべき乗でないと対応できなかった問題については、整数演算を意識して組み立てる必要があります。

元のコードをベースにしてアルゴリズムの修正で済ますのは限界があるので、諦めてタイリング前提で作り直します。

格子点を整数として扱う

剰余については深く考えず以下のような対応をしていましたが、

inline float2 modulo(float2 value, float2 scale)
{
    return frac(value/scale)*scale;
}

実際に結果に期待しているのは整数だったのでfloorを使用し、また剰余についてよく使用されている（おそらく精度上の問題で有利な）アルゴリズムを利用してこうします：

inline float2 modulo(float2 value, float2 scale)
{
	return floor((value%scale+scale)%scale);
}

周期を短くする方向に合成する

周期を長くして合成するのではなく、短くして合成します。これでタイリングのための境界を整数で扱えるようになります。詳細はコードを参照ください。

TiledSimpleNoise.hlsl 最終コード　

TiledSimpleNoise.hlsl

inline float2 modulo(float2 value, float2 scale)
{
	return floor((value%scale+scale)%scale);
}

inline float Unity_SimpleNoise_RandomValue_float (float2 uv)
{
    return frac(sin(dot(uv, float2(12.9898, 78.233)))*43758.5453);
}

inline float Unity_SimpleNnoise_Interpolate_float (float a, float b, float t)
{
    return (1.0-t)*a + (t*b);
}

inline float Unity_SimpleNoise_ValueNoise_float (float2 uv, float Period)
{
    float2 i = floor(uv);
    float2 f = frac(uv);
    f = f * f * (3.0 - 2.0 * f);
    // uv = abs(frac(uv) - 0.5);
    float2 c0 = i + float2(0, 0);
    float2 c1 = i + float2(1, 0);
    float2 c2 = i + float2(0, 1);
    float2 c3 = i + float2(1, 1);
    c0 = modulo(c0, Period);
    c1 = modulo(c1, Period);
    c2 = modulo(c2, Period);
    c3 = modulo(c3, Period);
    float r0 = Unity_SimpleNoise_RandomValue_float(c0);
    float r1 = Unity_SimpleNoise_RandomValue_float(c1);
    float r2 = Unity_SimpleNoise_RandomValue_float(c2);
    float r3 = Unity_SimpleNoise_RandomValue_float(c3);
    float bottomOfGrid = Unity_SimpleNnoise_Interpolate_float(r0, r1, f.x);
    float topOfGrid = Unity_SimpleNnoise_Interpolate_float(r2, r3, f.x);
    float t = Unity_SimpleNnoise_Interpolate_float(bottomOfGrid, topOfGrid, f.y);
    return t;
}

inline float2 moduloTypeA(float2 value, float2 scale)
{
    return frac(value/scale)*scale;
}
inline float2 moduloTypeB(float2 value, float2 scale)
{
	return (value % scale + scale) % scale;
}

void TiledSimpleNoise_float(float2 UV, float Scale, out float Out)
{
	Scale = floor(Scale/4);
    float t = 0.0;
	{
		float freq = 1;
		float2 offset = float2(0.75, 0.3);
		float2 uv = frac(UV+offset)*(Scale*freq);
		float period = Scale*freq;
		float amp = 0.5;
		t += Unity_SimpleNoise_ValueNoise_float(uv, period)*amp;
	}
	{
		float freq = 2;
		float2 offset = float2(0.5, 0.8);
		float2 uv = frac(UV+offset)*(Scale*freq);
		float period = Scale*freq;
		float amp = 0.25;
		t += Unity_SimpleNoise_ValueNoise_float(uv, period)*amp;
	}
	{
		float freq = 4;
		float2 offset = float2(0.2, 0.9);
		float2 uv = frac(UV+offset)*(Scale*freq);
		float period = Scale*freq;
		float amp = 0.125;
		t += Unity_SimpleNoise_ValueNoise_float(uv, period)*amp;
	}
    Out = t;
}

TiledSimpleNoise 結果

今度こそ完成。

Scaleに31を入れたものです。任意の値でタイリングに対応できました。オリジナルと比較しても、ノイズの周期が近い状態になっており、品質の向上が見られます。

なお、内部で周期を短くするアルゴリズムを利用し、なおかつ格子点を整数にする必要があったため、指定するScaleの分解能が1/4になっています。引数の意味を変えたほうがよかったのかもしれませんが、オリジナルのScale値と結果が近いほうが良かろうと思いそうしています。

TiledGradientNoise.hlsl 最終コード

次はGradientNoiseの改良です。コードだけ書きます。

TiledGradientNoise.hlsl

inline float2 modulo(float2 value, float2 scale)
{
	return floor((value%scale+scale)%scale);
}

float2 Unity_GradientNoise_Dir_float(float2 p, float Period)
{
    p = modulo(p, Period);
    // Permutation and hashing used in webgl-nosie goo.gl/pX7HtC
    p = p % 289;
    float x = (34 * p.x + 1) * p.x % 289 + p.y;
    x = (34 * x + 1) * x % 289;
    x = frac(x / 41) * 2 - 1;
    return normalize(float2(x - floor(x + 0.5), abs(x) - 0.5));
}

void TiledGradientNoise_float(float2 UV, float Scale, out float Out)
{ 
	float Period = floor(Scale);
    float2 p = UV * Period;
    float2 ip = floor(p);
    float2 fp = frac(p);
    float d00 = dot(Unity_GradientNoise_Dir_float(ip, Period), fp);
    float d01 = dot(Unity_GradientNoise_Dir_float(ip + float2(0, 1), Period), fp - float2(0, 1));
    float d10 = dot(Unity_GradientNoise_Dir_float(ip + float2(1, 0), Period), fp - float2(1, 0));
    float d11 = dot(Unity_GradientNoise_Dir_float(ip + float2(1, 1), Period), fp - float2(1, 1));
    fp = fp * fp * fp * (fp * (fp * 6 - 15) + 10);
    Out = lerp(lerp(d00, d01, fp.y), lerp(d10, d11, fp.y), fp.x) + 0.5;
}

TiledGradientNoise 結果

よしよし。

TiledVoronoi.hlsl 最終コード

これもコードだけ書きます。

TiledVoronoi.hlsl

inline float2 modulo(float2 value, float2 scale)
{
	return floor((value%scale+scale)%scale);
}

inline float2 Unity_Voronoi_RandomVector_float (float2 UV, float offset)
{
    float2x2 m = float2x2(15.27, 47.63, 99.41, 89.98);
    UV = frac(sin(mul(UV, m)) * 46839.32);
    return float2(sin(UV.y*+offset)*0.5+0.5, cos(UV.x*offset)*0.5+0.5);
}

void TiledVoronoi_float(float2 UV, float AngleOffset, float CellDensity, out float Out, out float Cells)
{
	CellDensity = floor(CellDensity);
    float2 g = floor(UV * CellDensity);
    float2 f = frac(UV * CellDensity);
    float t = 8.0;
    float3 res = float3(8.0, 0.0, 0.0);

    for(int y=-1; y<=1; y++)
    {
        for(int x=-1; x<=1; x++)
        {
            float2 lattice = float2(x,y);
            float2 offset = Unity_Voronoi_RandomVector_float(modulo(lattice + g, CellDensity), AngleOffset);
            float d = distance(lattice + offset, f);

            if(d < res.x)
            {
                res = float3(d, offset.x, offset.y);
                Out = res.x;
                Cells = res.y;
            }
        }
    }
}

VoronoiもSimpleNoiseと同様に格子点を整数にする必要があったので、引数のCellDensityを整数に丸める処理を入れています（つまり小数点以下は無視される）。

TiledVoronoi 結果

よしと。

#まとめ
SimpleNoiseはもともとタイリング対応する気のない実装だったので、ちょっと修正して対応するのは無理がありました。まあ手を出してしまったのでなるべくちゃんと対応してみましたが、そもそもタイリング対応するなら別のアルゴリズムを使ったほうがよさそうです。まあ SimpleNoise で頑張った知見が他のアルゴリズムのタイリング実装に役立ったのでよしとしましょう。ボロノイの対応もできてよかったよかった。