📖

Unity ShaderGraph メモ

2024/07/19に公開

ノード

主な参照サイト

参照サイト参照サイト

Channel Mixer

各RGBごとに色を調整できる。

Contrast

コントラストを調整できる。

下の動画では、コントラストのアニメーションとsRGBのガンマ補正を考慮している。
https://youtu.be/zPCNWYvMGi8

Hue

色相を変更できる。

下の動画は色相相関のアニメーションをおこなっている。
https://youtu.be/s7OCVxRhxJs

Invert Colors

各RGBAを反転できる。

Replace Color

色を指定して変更できる。

Saturation

彩度を調整できる。

White Balance

色温度を調整できる。
Temperature は値を黄色あるいは青寄りに変化させる効果があり、Tint はピンクあるいは緑寄りに変化させる効果があります。

https://youtu.be/iWXISftucSM

Blend

Photoshopなどにある描画モードを使用して、色を合成できる。
https://youtu.be/3yxcrlNrnK4
https://youtu.be/qWDED7OOrX4
参照サイト参照サイト参照サイト参照サイト

Dither

ディザリングを適用できる。

下の動画はディザ表現をアニメーションさせている。
https://youtu.be/ZmPMUrSCr9U
参照サイト

Fade Transition

ノイズをインプットとして、FadeValueいじってアルファ抜きを行う。
公式ドキュメント見ると、LODの切り替わりの際のモデルの消失の時によく使われるみたい。
https://youtu.be/TQDkl2iUBuM
下の動画はディゾルブアニメーションを表現している。
Fade Transitionを使用すれば手軽にディゾルブ表現が可能である。
https://youtu.be/wrGeXbl08nk

Channel Mask

入力値を、各RGBAのチャネルごとにマスクできる。

Color Mask

Mask Colorで色指定して、その色をマスクできる。

Fuzzinessできっぱりしたマスクじゃないようにできる。

動画は以下である。
https://youtu.be/c_t0y3cd8e8

Normal Blend

Normalを合成できる。

Normal Blendを使用すると一から実装するより簡単である。
https://youtu.be/brTzzo-6p_w

Normal From Height

ハイトマップをノーマルマップに変換する。

Normal From HeightとNormal From Textureを比較すると、
Normal From Textureは品質が高く、負荷がかかる。
Normal From Heightは品質が低く、負荷がかからない。
なので、カメラからオブジェクトが近くない場合Normal From Heightを使用するのが良い。
https://youtu.be/FCEU-WaWRgg

Normal From Texture

通常のbaseマップからノーマルマップに変換する。

Normal From Texture(Bump Maps)とSample Texture2D(Normal Maps)の違いは、
Sample Texture2D(Normal Maps)の方が、品質も負荷もかからない。
ただ、Normal From Texture(Bump Maps)はテクスチャの一つのチャネルのみでいいのでメモリの使用量が少なくなるので場合によっては負荷に関してはNormal From Texture(Bump Maps)の方がよくなるかもしれない。
https://youtu.be/7CvaqKZvhgE

Normal Reconstruct Z

RGチャネルに法線情報を格納して、BAチャネルに他の情報を入れることで凸凹表現ができる。
これによりシェーダーが使用するテクスチャ サンプルの数を減らしてシェーダーのパフォーマンスを向上させることができる。
https://youtu.be/p_kB5A2yfsU

Normal Strength

ノーマルマップの強さを調整できる。
Strengthが0.5

Strengthが5

Normal Unpack

Texture TypeがNormalMapで、Sample Texture 2DのTypeがDefaultでノーマルマップ表現しようとすると不自然になる。
なので、Normal Unpackをはさむことでこの不自然さを改善できる。
ただ、Sample Texture 2DのTypeをNormalにすればこの不自然さを解決できるので特に使用しなくてもよいノード。
Normal Unpackなし

Normal Unpackあり

Colorspace Conversion

色空間から別の色空間へ変換した結果を返す。
RGB、Linear、HSVへ変換できる。

下の動画では色相を変えている。
https://youtu.be/lNzcBzmhpVI

Combine

入力値をもとに新しい各RGBAを作成する。
https://youtu.be/BJBjZSUw-6o

Flip

入力値をもとにチェックしたチャンネルを反転させる。

下の例はGチャネルを反転させ法線マップの凹凸を反転させている。

Split

入力値から一つのチャネルを出力する。

Swizzle

Maskに値を指定してMaskできるチャンネルを指定できる。
x→R
y→G
z→B
w→A

Self

公式ドキュメントにのっていない

Size

公式ドキュメントにのっていない

Slice Index/CubeMap Face

公式ドキュメントにのっていない

Light Texture

公式ドキュメントにのっていない

Boolean

有効なら1
無効なら0

Color

色を指定できる。

Constant

数学で用いられる定数を使用できる。
PI→円周率を表すπ
TAU→円周率を表すτ
PHI→黄金比(golden ratio)表すφ(ファイ)
E→自然対数の底であるネピア数
SQRT2→2の平方根

Float

Float型で値を調整できる。

Integer

Integer型で値を調整できる。

Slider

MinとMaxの値で調整できる。

Time

Timeを使用するとアニメーションできる。
Time→ひたすら加算される
Sine Time→Sin波
Cosine Time→Cos波
Delta Time→前フレームの経過時間
Smooth Delta→平滑化された前フレームの経過時間。Delta Time に似ていますが、フレーム レートが急速に変化してもギザギザにならないように滑らかになっています。

実験してみたがDelta TimeとSmooth Delta以外は自分の想定している結果となった。
Delta TimeとSmooth Deltaは前フレームの経過時間なのでUVスクロールすると思ったが何故かしなかった。
https://youtu.be/Jam_3rH1iWY
UVスクロール以外に、色変えたり、フレネルのエフェクトを調整できる。
https://www.youtube.com/watch?v=p6hYVJqr5sQ
以下は色々なパターンの動画。
https://youtu.be/KWXPLt7Uafc
参照サイト

Vector 2/Vector 3/Vector 4

Vector型で値を調整できる。

Bitangent Vector

ノーマルマップで使用する従接線(従法線)の値を取得できる。
従接線(従法線)を求めるときは、通常は法線と接線の外積で求めるがそれをしなくても取得できるノード。
公式ドキュメントで従接線のこと従法線とも言うらしい。


参照サイト

Instance ID

GPUインスタンシングで使用するインスタンスIDを取得できる。

Normal Vector

法線を取得できる。
https://youtu.be/lh1C2O4gy1U

Position

座標を取得できる。
下の動画では、
キャラクターの足元部分が暗く、頭に向かって明るくなるように、キャラクターにグラデーションを適用するアーティストもいます。オブジェクト空間の Position ノードを使用してこれを実現する 1 つの方法を次に示します。
ワールド空間の位置を使用してテクスチャ座標を作成できます。投影されたテクスチャは、オブジェクトが移動したり回転したりしてもワールド内に留まるため、非常に興味深い効果を生み出すことができます。
https://youtu.be/X0YzZHMbvcw

Screen Position

スクリーン座標を取得できる。
https://youtu.be/SKRlp_VfiKo

Tangent Vector

接線を取得できる

UV

UVを取得できる。
https://youtu.be/mMZsnEm2cqw

Vertex Color

頂点カラーを取得できる。
頂点カラーは様々な用途で使用される。

  • 表面が濡れている場所を強調する
  • 表面が摩耗または損傷している場所を強調する
  • 2 つの異なる表面タイプをブレンドする
  • フェイク ライティングまたはアンビエント オクルージョンをベイクする
    頂点カラー データが存在しない場合は、4 つの頂点カラー データ チャネルすべてがデフォルトで値 1 に設定されます。

Vertex ID

頂点IDを取得できる。

参照サイト

View Direction

正規化された視線ベクトルを取得できる。
下の例はではフレネスエフェクトを作成している。

View VectorとView Directionの違い:
View Vectorは、現在のフラグメントまたは頂点からカメラまで伸びる線です。したがって、カメラまでの距離を取得するために使用できます。
View Directionは正規化されたベクトルです (したがって、長さは 1 単位のみです)。カメラの角度やその他のベクトルを見つけるのに最適です。
両方のベクトルは同じ方向を指します。

View Vector

正規化されていない視線ベクトルを取得できる。
下の例では、カメラからの距離に基づいて色が変化している。
https://youtu.be/rTFE53mgATk
View VectorとView Directionの違い:
View Vectorは、現在のフラグメントまたは頂点からカメラまで伸びる線です。したがって、カメラまでの距離を取得するために使用できます。
View Directionは正規化されたベクトルです (したがって、長さは 1 単位のみです)。カメラの角度やその他のベクトルを見つけるのに最適です。
両方のベクトルは同じ方向を指します。

Blackbody

黒体放射の効果をシュミレーションする色を指定できる。

Gradient

グラデーションの色を指定できる。

Sample Gradient

Timeの値に従ってGradientの色の指定できる。
範囲は0-1の間。
https://youtu.be/a8ZvynPGY3s
https://youtu.be/6MoTWI3lXrs
https://youtu.be/Yi1eRVXvVyg

Ambient

環境光を取得できる。
https://youtu.be/mZK08E4K0ts

Baked GI

ベイクしたライトマップを取得できる。

Main Light Direction

メインの指向性ライトのベクトルを取得できる。
メインの指向性ライトは、影を落とすライトのこと。 (影がある場合)。
影を落とさない場合は、影を落とさない最初の指向性ライトのベクトルを取得できる。

Reflection Probe

環境光のリフレクションを取得できる。

Matrix 2x2/Matrix 3x3/Matrix 4x4

指定した行列を設定できる。

Transformation Matrix

ビルトインのシェーダー変数を取得できる。
参照サイト参照サイト
Model→UNITY_MATRIX_M
InverseModel→UNITY_MATRIX_I_M
View→UNITY_MATRIX_V
InverseView→UNITY_MATRIX_I_V
Projection→UNITY_MATRIX_P
InverseProjection→UNITY_MATRIX_I_P
ViewProjection→UNITY_MATRIX_VP
InverseViewProjection→UNITY_MATRIX_I_VP

Compute Deformation

Dotsで使用する。
よくDots詳しくないのでよくわからない。

Linear Blend Skinning

Dotsで使用する。
よくDots詳しくないのでよくわからない。

Dielectric Specular

物質ごとのF0(フレネスゼロ)の値を取得できる。
PBRの時などに使用する。

Metal Reflectance

選択した金属の種類に対して物理的に正確な金属反射率の値を出力します。
すべての金属には物理的に正確な反射率の値があります。このノードを使用すると、最も一般的な金属の種類にアクセスできます。
これらの値はコンテキスト メニューのベース カラー入力に渡され、メタリック ワークフローを使用する場合はメタリック値を 1 に設定する必要があります。
スペキュラ ワークフローを使用している場合は、ベース カラーを黒に設定して、メタル反射率値をスペキュラ カラー入力に接続する必要があります。
これらの値は、金属の最も純粋な形態での反射率の値を表すことに注意してください。錆、酸化、コーティング、汚れなどの他の要因も金属の色に影響を与える可能性があります。
PBRの時などに使用する。

Camera

Camera (カメラ) の各種パラメーターを取得できる。

以下がパラメータの内容である。

Eye Index

VRやXRでのステレオレンダリングで使用するEye Indexを取得できる。

Fog

Fogの色を取得できる。

Object

ワールド空間のオブジェクトの座標とスケールとバウンディングボックスのサイズと最大値・最小値を取得できる。
このサンプルでは、​​オブジェクトがシーン内に配置されている場所に基づいて、オブジェクトのインスタンスごとに異なるマスク値を作成します。これを使用して、すべての木の葉の色をわずかに変えたり、インスタンスごとにテクスチャをわずかに異なる場所に並べたりすることができます。
https://youtu.be/Hex3k2sQnH0

Scene Color

不透明オブジェクトまで描画した結果をテクスチャとして使用できる。

ただ、URPアセットのOpaqueTextureを有効にし、ShaderGraph側のSurfaceTypeをTransparentにしないと上手く描画されない。
以下がノードである


この例では、不透明ジオメトリと透明ジオメトリ間の深度差 (透明マテリアル内) を計算する方法を示します。これを使用して、水と岩/海岸の交差点に泡効果を作成できます。ここでは One Minus ノードを使用しているため、2 つのジオメトリの最も近い部分は 1 になります。

Scene Depth

現在のカメラの深度バッファを取得できる。
DepthTextureを有効にしないと取得できない。

色々な用途で使用するが下の例だとソフトパーティクルなどに使用できる。

Liner01
Near~Farが、0~1

Raw
Near~Farが、1~0

Eye
正規化されていない値

参照動画参照動画参照動画

Scene Depth Difference

シーン深度差ノードは、現在レンダリングされている透明オブジェクトとその背後にある最も近い不透明オブジェクト間の深度の差を計算します。

Screen

現在レンダリングされている画面の幅と高さをピクセル単位で取り込みます。
以下の動画では、画面の幅を高さで割ると画面のアスペクト比が得られます。それにScreen Positionを掛けると、必要な正方形の座標が得られ、画像が引き延ばしが解消される。
https://youtu.be/aBKrYk6qg4M

Calculate Level Of Detail Texture 2D

このノードは、シェーダーでサンプリングする前にミップ レベルを変更する場合など、テクスチャのミップ レベルを知る必要がある状況で役立つ。

Gather Texture 2D

Gather Texture 2D ノードは、サンプル ポイントから 4 つの隣接するピクセルの赤チャンネルをサンプリングします。RRRR の値を返し、各 R 値を異なる隣接ピクセルから取得します。(標準テクスチャ サンプリングでは、テクスチャの 4 つのチャンネル (RGBA) すべてを読み取ります。)
このノードは、カスタム フィルタリングを作成する場合など、ピクセル間のバイリニア補間を変更する場合に便利です。

Sample Cubemap

Sample Cubemapは、キューブマップをサンプリングし、シェーダーで使用するためのベクター 4 色値を返します。キューブマップをサンプリングするには、方向 (Dir) ベクター入力が必要です。
LOD 入力を使用して異なる詳細レベルでサンプリングすることで、ぼかし効果を実現できます。また、サンプラー入力を使用してカスタム サンプラー状態を定義することもできます。




なおCubemap Assetで指定できる。

Sample Reflected Cubemap

Sample Reflected Cubemap ノードは、反射ベクトルを使用してキューブマップ テクスチャ アセットをサンプリングします。反射ベクトルは、入力法線とビュー方向を使用して作成されます。
このノードの最も一般的な用途は、キューブマップをサンプリングして表面に反射を追加することです。Unity では、Lit Master Stack を使用すると既に反射が行われていますが、反射の動作をカスタマイズしたい場合は、このノードを使用して行うことができます。

https://youtu.be/PDFzRtUiqFk
なおCubemap Assetで指定できる。

Sample Texture 2D

テクスチャを指定する。

なおTexture 2D Assetで指定もできる。

Sample Texture 2D Array

2D Arrayのテクスチャをindexを指定して取得できる。
https://youtu.be/PR87aL16560
マスクテクスチャの値によって色を制御できたりできる。
https://youtu.be/DmJRdfyhMaU
なおTexture 2D Array Assetでも指定できる。

Sample Texture 2D LOD

LODに応じてテクスチャの解像度を変えることができる。
なおこのノードは頂点シェーダーでも使用可能である。
Sample Texture 2Dは頂点シェーダーでは使用できない。

Sample Texture 3D

3Dテクスチャを指定する。
https://youtu.be/wR1wuK5VE0U
なおTexture 3D Assetで指定もできる。

Sample Virtual Texture

ストリーミング仮想テクスチャリング (SVT) のテクスチャを指定する。

Sampler State

FilterとWrapを指定できる。




Split Texture Transform

指定テクスチャのoffset、tillingを取得できる。
https://youtu.be/vF1h3Hsi7sU
参照サイト
下の例では、アルベド テクスチャのタイリングとオフセット値をアルベド、法線マップ、高さマップに使用しています。設定でアルベドのタイリングとオフセットを変更するだけで、3 つすべてに適用されます。

Texture Size

テクスチャのサイズと、テクセルのサイズを取得できる。
この情報は、使用しているテクスチャの解像度に応じてシェーダーで操作を行う場合に役立ちます。

URP Sample Buffer

画面の色、ワールド空間法線、モーションベクターを取得できる。

参照サイト参照サイト

Absolute

絶対値の返す。

https://youtu.be/G6a7fpP6N-w

Exponential

eのx乗または2のx乗を返す。

Length

ベクトルの大きさを返す。


カメラの距離に合わせて色々処理を分けることができる。
パーティクルのアルファや色を変えたり、ディザ透過、ソフトパーティクルをなどもできる。
https://zenn.dev/r_ngtm/books/shadergraph-cookbook/viewer/tips-particle-camera-distance
下の例は正規化されていないカメラからの深度値を求めている。

下の例は正規化されているカメラからの深度値を求めている。

LengthとDistanceの違いは、以下である。

Log

対数を返す。

Modulo

入力 A を入力 B で割った剰余を返す。

Negate

入力値の符号を反対にする。

Normalize

大きさ1の正規化したベクトルを返す。
なお、方向は同じ。

Normalize は、元の入力を入力コンポーネントの二乗和の平方根で割ったものです。
なので、長さがゼロのベクトルを正規化しようとすると、結果は NaN になることに注意してください。したがって、Normalize に 0,0,0 の値を指定しないでください。

Posterize

ポスタライズ化できる。

Reciprocal

1を入力値で割った値を返す。

Reciprocal Square Root

1を入力値の平方根で割った値を返す。

Add

2つの入力値を足す。

Divide

AをBで割った値を返す。
0で割る場合、パフォーマンス的に良くないので気を付けること。

Multiply

AとBを乗算する。

Power

AをB乗した結果を返す。

コントラストの調整やアニメーションなどさせている。
なおPowerノードは曲線なのでコントラストの調整の際よく使われる。
https://youtu.be/0MByFIrgkMs
なお、Powerノードは負の値を入力した場合に、エラー(ピンク色)になる。

Square Root

入力値の平方根を返す。

Subtract

AからBを引く。

UVスクロールを逆にできる。

グラデーションの強いところから弱いところに向かってアニメーションもできる。
https://youtu.be/5Qbi0JexggE

DDX/DDY

DDXはX座標のピクセル間の差をベクトル型で取得する。
DDYはY座標のピクセル間の差をベクトル型で取得する。
これを利用して接線と従法線を求め、外積して法線を求めフラットシェーディングを表現できる。

参照サイト
Polar Coordinatesを使用すると、UV が折り返されて接合する部分に醜い継ぎ目が生じます。

DDXY

スクリーンスペースのXY座標のピクセル間の差をベクトル型で取得する。
下記サイト見る限り、アウトラインとアンチエイリアスを作成できるっぽい。

https://youtu.be/_M-4s4nbBWg?feature=shared
https://aitarai.hateblo.jp/entry/2021/04/30/175628

Lerp

AとBは線形補間する。
(1-T)A+TB


https://youtu.be/pGoBK-t4hhk

Inverse Lerp

Inverse Lerpは、Lerpの逆演算。
(T - A)/(B - A)
いまいち使いづらい

Smoothstep

Inの値によって、違う結果を返す。
Stepと違って二値化にはならない。
・In≦Edge1
→0
・In≧Edge1
→1
・Edge1<In<Edge2
→3In^2-2In^3

アニメーションを加えた例
https://youtu.be/dn3y5KVxylQ?feature=shared&t=500
下の動画では、ディゾルブやワールド座標によってマスクの掛け方変えている。
https://youtu.be/h4ylLq_mKLI

Matrix Construction

M0、M1、M2、M3 の 4 つの入力ベクトルから正方行列を作成できる。
下の例は、接線空間法線マップを接線空間からワールド空間に変換している。

Matrix Determinant

入力 In で定義される行列の行列式を返します。

Matrix Split

入力 In で定義される正方行列をベクトルに分割する。
下の例は、この例では、Transformation Matrix ノードを使用してマトリックスを取り込み、Matrix Split ノードを使用してそのマトリックスの最初の行のみにアクセスします。

Matrix Transpose

入力 In で定義される行列を転置した値を返す。
下の例は、この例では、Transformation Matrix ノードを使用して行列を取り込み、Matrix Transpose ノードを使用して行列を転置します。

Clamp

Min、Maxを指定して入力値の制限を行う。
・In≦Min
→Min
・Min<In<Max
→In
・In≧Max
​→Max
Powerの入力値はマイナスだとピンク色になるのでエラーを解消している。

この例では、テクスチャの出力は 0.4 (最小) から 0.6 (最大) の範囲に制限されています。その範囲外の値は Clamp ノードから出力されません。

Fraction

少数部分を返す。
グラデーションを連続して作成できる。

スキャンラインなどの表現もできる。
https://youtu.be/H7EXq7erFUw
下の例は自前で実装した例。

Maximum/Minimum

AとBのうち最大・最小値を返す。
https://youtu.be/rLJTaBGpu6I

One Minus

1から入力値を引いた値を返す。

Random Range

入力 Min で定義される最小値と入力 Max で定義される最大値の間の範囲にある入力 Seed に基づいた、疑似乱数値を返します。
入力 Seed の値が同じ場合は出力値も必ず同じになりますが、出力値自体はランダムであるように見えます。
https://youtu.be/aKDfeBUZfjY
SeedにUVを渡すとノイズができる。

Remap

入力値のIn Min MaxをOut Min Maxに変換する。

Saturate

入力値を0-1の範囲で制限する。
・In≦0
→0
・0<In<1
→In
・In≧1
​→1
Powerの入力値はマイナスだとピンク色になるのでエラーを解消している。

拡散反射光を求める際、法線と光線ベクトルを内積して求めるがその際cosΘが-1~1の値をとるので、Saturateを使用して0-1にする。アルファなどの0~1以外の値が入って欲しくない場合に使用したりする。

下の例では、Normal Vectorのy軸を描画した際に発生したアーティファクトを解消している。

Ceiling

入力 In の値以上で最小の整数値を返す。(切り上げ)
下の例では、0 から 1 までの値はすべて 1 に切り上げられます。

下の例では、Ceilingを使用してポスタリゼーションを作成している。

下の動画では、画像の色を調整している。
https://youtu.be/vuZkU02SJUk

Floor

入力 In の値以下で最大の整数値を返す。(切り捨て)
コマ送りアニメーションなどで使える。
https://youtu.be/3oRLnzmGYMQ
以下例はPosterizationを実装している

以下例はToon Shadingを実装している

参照サイト

Round

入力値に対して四捨五入する。


以下は、2D Array画像の用意し、マスクテクスチャで色分けしている。

Sign

Inの値によって、違う結果を返す。
・In<0
→-1
・In=0
→0
・In>1
​→1
Normal Vectorノードと一緒にSignノードを使用すると、サーフェスが左または右、上または下、前または後ろを向いているかどうかを示すマスクを生成できます。
これは、モデルの片側ともう片側で異なる操作を実行したい場合に便利です。
https://youtu.be/ry2Vcf5idMQ

Step

二値化を行う。
・In≧Edge
→1
・In<Edge
→0
https://youtu.be/0Nvrm0USw6M

Truncate

入力 In の値の整数部分を返す。

Arccosine

アークコサインを利用できる。
下の例では、Latitude-LongitudeのCubeMapを実装している。

Arcsine

アークサインを利用できる。

Arctangent

アークタンジェントを利用できる。

Arctangent2

アークタンジェント2を利用できる。
下の例では、Latitude-LongitudeのCubeMapを実装している。

下の例では、Polar Coordinatesを自前で実装している。

Cosine

コサインを利用できる。
色を明滅させたり、座標を動かしたり、waveっぽい表現などができる。
https://youtu.be/IFyZNSyjyFA?feature=shared&t=235
下の例では、Rotateを自前で実装している。
https://youtu.be/z72gZYhDqVk

Degrees To Radians

度数からラジアンに変換する。
下の例では、90度をラジアンに変換して、画像を90度回転させている。

下の例では自前でDegrees To Radiansを実装している。

Hyperbolic Cosine

ハイパボリックコサインを返す。

Hyperbolic Sine

ハイパボリックコサインを返す。

Hyperbolic Tangent

ハイパボリックタンジェントを返す。

Radians To Degrees

ラジアンから度数に変換する。

下の例は自前で実装したもの。

Sine

サインを利用できる。
Sinxのxの値が大きいほどグラフの周期が大きくなるのでこれを利用して縞々みたいな表現などができる。


また色を明滅させたり、座標を動かしたり、waveっぽい表現などができる。
https://youtu.be/IFyZNSyjyFA?feature=shared&t=235
https://zenn.dev/r_ngtm/books/shadergraph-cookbook/viewer/tips-vertex-shader

Tangent

タンジェントを利用できる。

Cross Product

外積を利用できる。
https://zenn.dev/r_ngtm/books/shadergraph-cookbook/viewer/node-cross-product
下の例では、自前でNormal Vectorで実装している。

Distance

AとBの距離を返す。
https://youtu.be/vFqfJk_0Y9Q
下の例では、深度値を算出している。

Dot Product

AとBの内積を返す。
Lambert反射の拡散反射光を実装してみる。
まず、メインライトのカラーと光線ベクトルをhlslに定義し、それをCustom Functionで使用する。
(メインライトのカラーはノードでは存在しないため。光線ベクトルは存在する。)

#ifndef CUSTOM_LIGHTING_INCLUDED
#define CUSTOM_LIGHTING_INCLUDED

#ifndef SHADERGRAPH_PREVIEW
#include "Packages/com.unity.render-pipelines.universal/ShaderLibrary/Lighting.hlsl"
#endif

void MainLight_float(out float3 Direction, out float3 Color)
{
    #ifdef SHADERGRAPH_PREVIEW
    Direction = float3(0.5, 0.5, 0);
    Color = 1;
    #else
    Light mainLight = GetMainLight();
    Direction = mainLight.direction;
    Color = mainLight.color;
    #endif
}

#endif

ノードである。

実際の結果である。

また、内積を使用するとNTSC加重平均法でグレースケールにできる。

また、以下のようなノードも作成できる。

また下の例では、反射ベクトルを作成している

RGBAの各チャネルをグレースケール化できる。
https://youtu.be/040R_wnMgig
参照サイト参照サイト

Fresnel Effect

フレネルエフェクトを実装できる。

以下は自前で実装したもの。

下の例はマスク処理を実装したもの。

Projection

入力Aの値を入力Bの値に平行な直線上に投影した結果を返す。

イメージは以下である。

参照サイト

Reflection

反射ベクトルを求めることができる。

キューブマップから環境光を反映。

他にも鏡面反射光でもこの反射ベクトルが必要である。
下の例は自前でしたもの。

参照サイト

Refract

入力ベクトル、法線、およびソース マテリアルとターゲット マテリアルの屈折率から屈折ベクトルを作成します。
IORSource は、ベクトルが通過するマテリアルの屈折率です。最も一般的なソースは空気です。
IORMedium は、ベクトルが通過するマテリアルの屈折率です。最も一般的なのは水またはガラスです。
一般的な物質の屈折率:
空気: 1.000293
氷: 1.31
水: 1.333
ガラス: 1.52
ダイヤモンド: 2.42

Rejection

入力Aの値を入力Bの値に直交する平面に投影した結果を返す。

イメージは以下である。

参照サイト

Rotate About Axis

入力ベクトルIn を軸Axisを中心にRotationの値だけ回転する。
https://youtu.be/nHZeRNfS23s
https://youtu.be/Nb5i4YBL5L4

Sphere Mask

球のマスクを指定できる。
下記動画のように球上のオブジェクトにマスクをかけることができる。
詳しいノードは参照サイトを参照。
https://youtu.be/hTJqo1HeEOs?feature=shared&t=513
下の動画では水の波紋を作成している。
https://youtu.be/C7Q0B-YcNDo

Transform

座標、方向、法線をオブジェクト空間、ビュー空間、ワールド空間、接線、絶対ワールド、スクリーン空間に変換できる。
下の動画ではMatCapなどを作成している。
https://youtu.be/BkrvUZO-dPk
なお以下のサイトからMatCapを使用
https://booth.pm/ja/items/4481767

Noise Sine Wave/Sawtooth Wave/Square Wave/Triangle Wave

Timeの拡張版のノード。
ノードのグラフイメージは以下。

挙動は動画を参照。
https://youtu.be/yTo5sKwVu6k
参照サイト参照サイト

Bacteria~Zig Zagノードはサンプルをダウンロードする

Bacteria, Brick, Dots, Grid, Herringbone, Hex Lattice, Houndstooth, Smooth Wave, Spiral, Stripes, Truchet, Whirl, Zig ZagはPackManegerからダウンロードする。

Bacteria

以下のようなノードである。

https://youtu.be/AwncFJnsUNc

Herringbone

以下のようなノードである。
https://youtu.be/2KZ6du8BJNU

Hex Lattice

以下のようなノードである。
https://youtu.be/R5Xnu8A582k

Houndstooth

以下のようなノードである。
https://youtu.be/m54yJMvlLgU

Spiral

以下のようなノードである。
https://youtu.be/87QYYR9TZlE

Truchet

以下のようなノードである。
https://youtu.be/N2CVPVqbp28

Whirl

以下のようなノードである。
https://youtu.be/Fha5Jk9EKTQ

Zig Zag

以下のようなノードである。
https://youtu.be/sx1a3QhFqZ4

Brick

以下のようなノードである。
https://youtu.be/m0Pq_mbZse8

Dots

以下のようなノードである。
https://youtu.be/sUc4wSTruLc

Grid

以下のようなノードである。
https://youtu.be/HGlBHK0JtA0

Stripes

https://youtu.be/8HmaPzkcPcY

Checkerboard

市松模様を利用できる。

Gradient Noise

Gradient Noiseを利用できる。


Node ReferenceではGradient Noiseの特徴として以下のような記載があった。

グラデーション ノイズは繰り返されないため、タイリング テクスチャで通常発生する繰り返しパターン アーティファクトを作成せずに、広い領域に詳細を追加するために使用できます。
ほとんどのプラットフォームでは、グラデーション ノイズ パターンの生成には、テクスチャ マップのサンプリングとほぼ同じか、わずかに高いコストがかかります。
パフォーマンスの点では、シンプル ノイズ ノードよりも高価ですが、より滑らかで興味深い結果も生成します。
決定論的ハッシュ タイプは、すべてのプラットフォームでより安価で安定しているため、常に使用することをお勧めします。LegacyMod ハッシュ タイプは分解して、高い値の繰り返しパターンを表示し、グラフィックス ハードウェアに応じて異なる結果を生成する可能性があります。古いファイルとの互換性を維持するためだけに保持されています。
このノイズ タイプは、パーリンノイズと呼ばれることもあります

Simple Noise

Simple Noiseを利用できる


Node ReferenceではSimple Noiseの特徴として以下のような記載があった。

シンプル ノイズは繰り返しが発生しないため、タイリング テクスチャで通常発生する繰り返しパターン アーティファクトを作成せずに、広い領域に詳細を追加するために使用できます。ほとんどのプラットフォームでは、シンプル ノイズ パターンを生成するコストは、テクスチャ マップをサンプリングするコストよりも低くなります。パフォーマンスの点では、グラデーション ノイズ ノードよりも安価ですが、よりブロック状の結果も生成されます。決定論的ハッシュ タイプは、すべてのプラットフォームでより安価で安定しているため、常に使用することをお勧めします。LegacyMod ハッシュ タイプは分解して、高い値の繰り返しパターンを表示し、グラフィックス ハードウェアに応じて異なる結果を生成する可能性があります。古いファイルとの互換性を維持するためだけに保持されています。
このノイズ タイプは、ValueNoiseと呼ばれることもあります。

Voronoi

Voronoi を利用できる


Node ReferenceではVoronoiの特徴として以下のような記載があった。

ボロノイ ノイズは繰り返しが発生しないため、タイリング テクスチャで通常発生する繰り返しパターン アーティファクトを作成せずに、広い領域に詳細を追加するために使用できます。ほとんどのプラットフォームでは、ボロノイ ノイズ パターンの生成には、テクスチャ マップのサンプリングよりもコストがかかります。パフォーマンスの点では、Gradient Noise ノードよりも高価です。Deterministic Hash タイプは、すべてのプラットフォームでより安価で安定しているため、常に使用することをお勧めします。LegacySine ハッシュ タイプは分解され、高い値の繰り返しパターンを示し、グラフィックス ハードウェアに応じて異なる結果を生成する可能性があります。これは、古いファイルとの互換性を維持するためにのみ保持されます。このノイズ タイプは、Worley ノイズと呼ばれることもあります。

Ellipse

円のシェイプを作成できる。

Polygon

多角形のシェイプを作成できる。

Rectangle

四角形のシェイプを作成できる。

Rounded Polygon

角がまるまった多角形のシェイプを作成できる。

Rounded Rectangle

角がまるまった四角形のシェイプを作成できる。

SpeedTree8Billboard

SpeedTreeはあまり使用しないで一旦はパス

SpeedTree8ColorAlpha

SpeedTreeはあまり使用しないで一旦はパス

SpeedTree8InterpolatedNormals

SpeedTreeはあまり使用しないで一旦はパス

SpeedTree8Wind

SpeedTreeはあまり使用しないで一旦はパス

Custom Function

Custom Functionはシェーダーコードを実際に書いて自前のノードとして使用できる機能である。

#ifndef CUSTOM_LIGHTING_INCLUDED
#define CUSTOM_LIGHTING_INCLUDED

#ifndef SHADERGRAPH_PREVIEW
#include "Packages/com.unity.render-pipelines.universal/ShaderLibrary/Lighting.hlsl"
#endif

void MainLight_float(out float3 Direction, out float3 Color)
{
    #ifdef SHADERGRAPH_PREVIEW
    Direction = float3(0.5, 0.5, 0);
    Color = 1;
    #else
    Light mainLight = GetMainLight();
    Direction = mainLight.direction;
    Color = mainLight.color;
    #endif
}

#endif

ノードである。

実際の結果である。

以下はすりガラスを実装したものである。

ソースコードである

float2 NextUV = ScreenPosition;
float StepSize = Blurriness / (int) Cycles;
float CurDistance=0;
float2 CurOffset;

float Substep;
float Noise = SAMPLE_TEXTURE2D(Tex.tex,Tex.samplerstate,ScenePixels).w *2-1;

//it's a little bit faster using this procedural hash instead of the noise texture
//but the results aren't as nice
uint2 v = (uint2) (int2) round(ScreenPosition*SceneSize*2);
v.y ^= 1103515245U;
v.x += v.y;
v.x *= v.y;
v.x ^= v.x >> 5u;
v.x *= 0x27d4eb2du;
//float Noise = (v.x * (1.0 / float(0xffffffff)))*2-1 ;


if (Cycles<1)
{
	Out = SHADERGRAPH_SAMPLE_SCENE_COLOR(NextUV).xyz;
}
else
{
	for (int i = 0; i < (int) Cycles; i++)
	{
		for (int j = 0; j < (int) SamplesPerCycle; j++)
		{
			sincos(6.283185*((Noise+Substep) / SamplesPerCycle), CurOffset.y, CurOffset.x);
			CurOffset *=BlurMultiplier;
                              NextUV = ScreenPosition + (CurOffset * (CurDistance+(Noise*StepSize))* WidthHeightRatio);

			Out += SHADERGRAPH_SAMPLE_SCENE_COLOR(NextUV).xyz;
			Substep++;
		}
		CurDistance+=StepSize;
		Substep+=RadialOffset;

	}
	Out = Out / ((int)Cycles*(int)SamplesPerCycle);
}

参照サイト参照サイト

Preview

入力のノードの確認をできる。

All Compa

一つでも0があればfalse(0)。
0がなければtrue(1)。

And

AとBが0以外であればtrue(1)。
それ以外はfalse(0)。
https://youtu.be/b6pJcddBwvo

Any

どれか一つでも0以外がある場合true(1)。
全て0の場合false(0)。

Branch

PredicateがTure(1)の場合、True(1)
PredicateがFalse(0)の場合、False(0)

Comparison

条件式を指定して、true(1)とfalse(0)を決める。

Is Front Face

前面レンダリングしている場合はTrue。
背面レンダリングしている場合はFalse。
https://youtu.be/lvZIwlrX1tA

Is Infinite

無限(Inf)の場合true(1)。
それ以外はfalse(0)。

なお、無限になる場合は公式ドキュメントだと以下のように記載されている。

いずれかの数字を 0 で割ると Inf が発生します (あるベクトルを長さ 0 で正規化するなど)。
シェーダー操作とは別に、初期化されていないメモリーも NaN または Inf が含まれたり生成されたりします。プラットフォームの中には、新たに作成された レンダーテクスチャ 状のピクセル値が、0 の値では初期化されないものがあります。つまり、書き込んだり消去する前に新しい Render Textures にアクセスすると、NaN/Inf が生成される場合があるということになります。一般的なルールとして、 Render Textures を常に消去してから使うか、読みたいすべての値に書き込みを行ってから読むようにしてください。

Is NaN

NaNの場合true(1)。
それ以外はfalse(0)。

なお、NaNになる場合は公式ドキュメントだと以下のように記載されている。

平方根 (sqrt) または対数 (log/log2) をマイナス値で実行すると NaN が発生します。
A が無限または B が 0 のモジュロ演算、A % B を実行すると NaN が発生します。
シェーダー操作とは別に、初期化されていないメモリーも NaN または Inf が含まれたり生成されたりします。プラットフォームの中には、新たに作成された レンダーテクスチャ 状のピクセル値が、0 の値では初期化されないものがあります。つまり、書き込んだり消去する前に新しい Render Textures にアクセスすると、NaN/Inf が生成される場合があるということになります。一般的なルールとして、 Render Textures を常に消去してから使うか、読みたいすべての値に書き込みを行ってから読むようにしてください。

Nand

どれか一つでも0がある場合true(1)。
それ以外はfalse(0)。

Not

true(1)とfalse(0)を逆にする。

Flipbook

連番アニメーションを行える。
https://youtu.be/MHLQCKIm3QY
参照サイト

Polar Coordinates

極座標に変換できる。





参照サイト

Radial Shear

トルネードっぽい表現ができる。
https://youtu.be/_8awz18pE5o
参照サイト

Rotate

UVを回転させることができる。
https://youtu.be/attNJAjhjX8

Spherize

魚眼レンズっぽい表現ができる。

Tiling And Offset

タイリングとオフセットができる。

Triplanar

Triplanar Mappingをできる。
Node

実際の結果
左がTriplanar Mapping、右が普通のテクスチャマッピング
Triplanar MappingはUVに依存していないのでモデルに貼られたテクスチャのサイズが均一であることが分かる。
一方で、普通のテクスチャマッピングはUVに依存しているのでモデルによってテクスチャのサイズ感がばらばらであることが分かる。

下の動画でもオブジェクトが拡大拡縮してもテクスチャのサイズが変わっていないことがわかる。
https://youtu.be/AwMr92Bz6h0
参照サイト参照サイト参照サイト

Twirl

ツイストしている表現ができる。

参照サイト

Parallax Mapping

視差マッピングを実装できる。
視差マッピングは、テクスチャをサンプリングするために使用される UV 座標を作成します。UV はピクセルごとに変更されており、サンプリングされたテクスチャが単に平坦であるのではなく、厚みや奥行きがあるという錯覚を生み出します。
この錯覚は、カメラを移動するときに最も顕著になります。
https://youtu.be/SvRf2459z1M

Parallax Occlusion Mapping

視差遮蔽マッピングを実装できる。
視差遮蔽マッピングは、マテリアルの UV と深度をずらして深度を錯覚させる視差効果を作成します。
この効果では、高さマップ テクスチャを何度もサンプリングする必要があり (ステップ入力によって制御)、そのため標準の法線マッピングや視差マッピングよりも大幅にコストがかかります。
https://youtu.be/4eW0ZSKlVbI

画像の一部分の色を変える

PhotoShopでマスクの画像を作成する。
作成方法は下記動画を参照。
https://youtu.be/QpgUq4Vujss
ShaderGraphで以下のノードを作成すると画像の一部分の色を変えることができる。

ただ、上の画像だとマスクした箇所の色が少し残っている状態なので丸々指定した色にしたい場合は以下のノードを組む。

参照サイト

バウンディングボックスの影響でテクスチャを上手くデフォームできないとき

UVをいじるのではなく、頂点シェーダーで頂点を動かす。
https://www.youtube.com/live/3TXHMS8xFJ0?feature=shared&t=1856

画像の一部にモザイクをかける


参照サイト

画像全体に指定した色を反映させる

画像全体に指定した色を反映させるには、一度画像をグレースケールにするとよい。
画像をグレースケールにした場合

画像をグレースケールにしない場合

参照サイト

帯電を浴びたエフェクト

以下の動画の解説。
https://www.youtube.com/live/eJqFLsjPWcY?feature=shared

DotProductする理由


赤枠のDotProductする理由は、グレースケールにするためである。
ntsc加重平均法というもので、グレースケールにしたい画像と、指定した値(RGBにそれぞれに0.29、0.58、0.11)を内積をするとグレースケールになる。

Remapする理由


赤枠のDotProductする理由は、頂点アニメーションの不自然さをなくすためである。
以下の動画みると、Remapしていないと頂点アニメーションが不自然であることが分かる。
https://youtu.be/STXIXkrmI4k

プリミティブのQuadではなく、頂点数の多いQuadを作成した理由

プリミティブのQuadだと頂点数が4つしかないので、頂点アニメーションしてもあまり頂点アニメーションしないため。
https://youtu.be/Ec4lm9ny5Vw

Absoluteすると縁が黒くなる理由


Remapで-50にしてところがAbsoluteにすると50になるので、黒い箇所は0であるため。

Saturateする理由


赤枠のSaturateする理由は、Addした際に値が1~-49の取りその結果Addで合成した際に黒くなるため。
Saturateしない場合、以下のように黒くなる。

逆方向のUVスクロールを追加する理由(Remapを2にする理由)


逆方向のUVスクロールを追加する理由は、帯電っぽい表現をしたいためである。
一つの方向だと下記動画のようにただのUVスクロールしているだけで帯電っぽくないが逆方向のUVスクロール入れてやることで帯電っぽい表現になる。
Remapを2にする理由は、逆方向のUVスクロールを追加するとMaxが2になるため。
https://youtu.be/p23_MhP3Dms

UVではなくPostion(World)を使用する理由

UVだと回転によって向きが変わるのでスキャンラインも傾きにそってアニメーションされる。
Postion(World)だとワールドだとオブジェクトを回転させてもスキャンラインの向きはワールドに従ってアニメーションされる。(なおPositionがObjectだとオブジェクトの向きに沿ってアニメーションされる。)
https://youtu.be/nqcCGETNwwc

スキャンラインをSquareWaveではなくFranction使用する理由


SquareWaveを使用すると、ボーダーが1:1になるため

Divideする理由


画像の大きさが30Unitなのでそれを30で割ってStepで調整すれば消失エフェクトができる。
https://youtu.be/XfPUYLnkAuI

消失エフェクトの端の作り方

Custom Interpolatorでフラグメントシェーダでやっていた処理を頂点シェーダーで行い、処理負荷を削減する。

フラグメントシェーダだとピクセル単体で処理が行われるので重い処理だとその分負荷が増してしまう。
なので、Custom Interpolatorを使用すると頂点単位で処理が行われるのでその分負荷がかからない。

参照サイト参照サイト

SubGraphで同じようなノードをまとめて共通ノードとすることで、エディタを見やすくしたり保守性を高める。

SubGraph使用することで、エディタを見やすくしたり保守性を高めることができる。
https://youtu.be/_AnFB7OMPp0

Branch On Input Connection Nodeでデフォルトのノード設定する。

以下のようなBranch On Input Connectionを組む。
その際、Use Custom BindingをチェックしないとInputに差し込めない。

inputにノードが刺さってないと、NotConnectedのノードが適用される。

逆にinputにノードが刺さっていると、そのノードが適用される。

参照サイト

Allow Material Overrideを有効にすると、マテリアルごとにSurfaceOptionsの値を変更できる。


参照サイト

Multplyを使用した累乗と、Powerを使用した累乗は、Multplyの方が速度が速い。


参照サイト

0から1にする場合、SaturateとClampはSaturateの方が一部のGPUでは何かの処理についでにやっており早いため、なるべくSaturateを使用する方が良い。


参照サイト

Swizzleを使用すると簡素的にノードを書ける

以下の結果は同じで、Swizzleの方が簡単にノードを書ける

参照サイト

ノードの値を数値化して確認する

まずこちらのGithubをダウンロードをする。
Float to Labelというノードを検索する。Valueに確認したいノードを入力すると数値を確認できる。

参照サイト

ShaderGraphでキャラクターシェーダを作成する

BaseMap、拡散反射光(ノーマルマップと頂点の法線をブレンドした結果と光線ベクトルの内積)、落ち影のカラー、ライトのカラー、環境光の反映。
https://youtu.be/H3msD0eiQ_4?feature=shared&t=582
SmoothStepを使用した簡易的なトゥーン表現。
https://youtu.be/H3msD0eiQ_4?feature=shared&t=994
Saturateではなく、Remapを使用して陰影をソフトにする。
(Saturateだと0より小さい値は0になるが、Remapだと-0.5でも0にはならないので陰影がソフトになる)
https://youtu.be/H3msD0eiQ_4?feature=shared&t=1042
陰影をつけずに、周りのライティングに浮かないようにする方法。
https://youtu.be/H3msD0eiQ_4?feature=shared&t=1113
落ち影の不自然さとライトの強度が高いことによる白飛びを防ぐ。
https://youtu.be/H3msD0eiQ_4?feature=shared&t=1170

RedenrFutureとSahderGraphを使用してCustom Post Effectを作成する

ポストエフェクトのシェーダー作成する際、動画だとUnliShaderで作成しているが、2022.3.19だと上手く反映できていなかった。
FullScreenShaderGraphで試したところ上手くできた。

Custom Post Effect作成

https://youtu.be/H3msD0eiQ_4?feature=shared&t=1371
_CameraColorTextureでポストエフェクトがかかる前のカメラに写っているテクスチャを取得し、ポスタライザ化しているポストエフェクト

スクリーンスペース座標の1テクセルずらしたものと、もとの距離を求めてそれをOneMinusを使用してアウトラインを作成している。

画用紙に書いたハッチングテクスチャをUnityArtEngineでシームレステクスチャにする

https://youtu.be/H3msD0eiQ_4?feature=shared&t=1983

エナジーボールとトルネードを作成する

ソフトパーティクルの接触判定 エナジーボール

https://youtu.be/7ToExWKVZW0?feature=shared&t=384
EyeのScene Depthは正規化されていない深度バッファ。
RawのScreen Postionのw成分は、マテリアルをアタッチしているオブジェクトまでの距離。
Scene DepthからScreen Postion引けばオブジェクト同士が接触しているところは黒くなる。

黒くなる

グレー



このあたりの考え方は、水のシェーダを作成するときにも使用する。
https://zenn.dev/clay_andromeda/articles/clay-water-shader-series-01

Fresnel Effectノードを使用せずにフレネス表現を実装 エナジーボール

https://youtu.be/7ToExWKVZW0?feature=shared&t=753
まず法線と視線ベクトルの内積を求める

その際注意することは、絶対値(Absolute)にしてからOneMinusで行わないと両面描画しているのでうまくフレネス表現できない。
絶対値処理なし

絶対値処理あり

Fresnel Effectノードは両面描画を考慮されていないので、以下のようになるため今回は使用していない。

模様をつける エナジーボール

https://youtu.be/7ToExWKVZW0?feature=shared&t=1053

歪みをつける エナジーボール

https://youtu.be/7ToExWKVZW0?feature=shared&t=1200
OpaqueTextureを有効にして、不透明オブジェクトの描画結果のテクスチャ取得し、これを歪ませる。

ShaderGraphでOpaqueTexture使用する際は、Refrenceに_CameraOpaqueTextureを入力すると取得できる。

ScreenPositionとTwirlとSample Texture 2Dを使用することである程度歪みの表現はできる。

実際のエフェクトでは、GradientNoiseをとTimeとTilling And Offsetを利用して歪みを与えている。
https://youtu.be/N2uT7eFdS2k
なお、ShaderGraphは2パス以上かけないので、Materailを複数アタッチして歪みを表現する。

歪みの表現は、
すりがらすや、クリスタル、水流
蜃気楼やポータル
武器をスイングしたときの空間の歪み
などいろいろな表現方法で使用できる
また、ノーマルマップと組み合わせることも可能。

UVスクロール トルネード

https://youtu.be/7ToExWKVZW0?feature=shared&t=1706
CheckerboardでUVの状態を確認できる。

Alpha Clip Threshoudを調整してUVスクロールを行う。
https://youtu.be/H0JigIb6-ww
ただ、上だけUVスクロールさせたいので以下のノードを追加
https://youtu.be/YzXYkFM-Ygo

Vertex Colorのアルファを取得して、Color over LifeTimeに沿って描画のタイミング調整 トルネード

https://youtu.be/7ToExWKVZW0?feature=shared&t=1948
Partclesystemで設定したColorは、Vertex Colorノードで取得できるので、これを利用してColor over LifeTimeに沿って描画のタイミング調整する。
https://youtu.be/nSzkXZqGaRc

ノイズを与える トルネード

https://youtu.be/7ToExWKVZW0?feature=shared&t=2021

Gradient NoiseとSimple NoiseとVoronoiはシームレステクスチャでない トルネード

https://youtu.be/7ToExWKVZW0?feature=shared&t=2103
シームレステクスチャにするには以下の記事を参考にするとよい。
https://qiita.com/yuji_yasuhara/items/c593d402b88f9ffa14a7

頂点アニメーションで動きを加える トルネード

https://youtu.be/7ToExWKVZW0?feature=shared&t=2263
アニメーションパターン1
SineとCosineを合成するパターンとしないパターンを比較してみた。
合成した方がたつまきっぽさがあるように思える。
https://youtu.be/L_HRu8s1BOg
赤枠のY軸のワールド座標にしている理由について述べる。

以下の動画みると、Y軸のワールド座標は常に一定なのでどの頂点も同じ動きする。
もし、X軸のワールド座標にすると座標がばらばらなのでばらばらな動きになる。
https://youtu.be/YbXkE6290m4
赤枠のUVとワールド空間のPositionの挙動の違い

UVの場合オブジェクトの角度が変わっても同じ動きをするが、ワールド空間のPositionだと角度が変わるとアニメーション挙動が変わっていることが分かる。
ワールド空間のPositionだと角度が変わるとPositionが変わるためである。
UVだと角度変わってもUVの値を参照するためアニメーション変わらない。
https://youtu.be/pHUTCTfKGqA
アニメーションパターン2
NormalVectorの値を使用して頂点アニメーションしているのがみそ。
https://youtu.be/9Y1pzRBN9Ig

カスタムエフェクトを作成する

https://www.youtube.com/watch?v=AQGgwgo51lo&t=0s
https://www.youtube.com/watch?v=Ylq2y6Qez3s&t=0s
https://www.youtube.com/watch?v=E_oDKQU3e94&t=0s
https://www.youtube.com/watch?v=7x-NM_QIoeY&t=0s

ScriptableRenderPassとScriptableRendererFeatureのコードを書く

using UnityEngine;
using UnityEngine.Rendering;
using UnityEngine.Rendering.Universal;

namespace UrpTestbed
{

    sealed class PostEffectPass : ScriptableRenderPass
    {
        public Material material;

        //実際に処理を実行。
        //具体的には、すべてレンダリングした後に、マテリアル(シェーダ)の処理を行った後、その結果をRTに描きこみ画面に表示する
        public override void Execute
          (ScriptableRenderContext context, ref RenderingData data)
        {
            if (material == null) return;
            // コマンドバッファの生成(Frame DebuggerでPostEffectのパスが表示される)
            var cmd = CommandBufferPool.Get("PostEffect");
            /*URP12から追加されたSwapBuffer機能で、
            以前は一時的なレンダーテクスチャなどが必要であったがこれのおかげで簡単にBlitの処理ができるようになった。
            */
            Blit(cmd, ref data, material, 0);
            // コマンドバッファを実行
            context.ExecuteCommandBuffer(cmd);
            // コマンドバッファを解放
            CommandBufferPool.Release(cmd);
        }
    }

    public sealed class PostEffectFeature : ScriptableRendererFeature
    {
        public Material material;

        PostEffectPass _pass;

        // パスを生成する
        public override void Create()
        {
            // すべてレンダリングした後に指定したマテリアルを適用
            _pass = new PostEffectPass
            {
                material = material,
                renderPassEvent = RenderPassEvent.AfterRendering
            };
        }

        // パスをレンダリングパイプラインに追加
        public override void AddRenderPasses(ScriptableRenderer renderer, ref RenderingData data)
        {   
            renderer.EnqueuePass(_pass);
        }

    }
}

参照サイト

上のRendererFeatureを追加し、カスタムエフェクトのマテリアルをアタッチする

ネガのポストエフェクト

実際の結果

全体のノード

ポストエフェクトをかける前の画面に描画されているレンダーテクスチャは、Referenceで_MainTexと記載することで取得できる。

なお、Colorspace Conversionで色空間の処理がないと以下のように白飛びしたようになる。

この処理についてあまり自信がないが、
Linear→RGBの処理は、RTは画面に描画されるものなので人間の目で見たものなのでリニアではなく、sRGBにする必要がある。(Color SpaceがLiner)
RGB→Linearの処理は、逆ガンマ補正かけないと明るくのでこの処理を入れていると思われる。

モノクロのポストエフェクト

実際の結果
https://youtu.be/zfS0-umOtPg

VHSノイズのポストエフェクト

実際の結果
https://youtu.be/e_5Crepovqo
RTのUVをずらしてあげればVHSのエフェクトが作成できる。

Gradient NoiseにUVのG成分をUVとして接続すれば横の縞々ができるので、これをTime使用してAddしていくことで横にノイズっぽい表現できる。
https://youtu.be/jFJsz3GA8oo
ただ、これだとノイズが強すぎるので、Gradient Noiseを使用してノイズの強度を調整していく。
その際、累乗を行うことでたまにノイズが入るようになり緩急が出てVHSっぽさを出すことができる。
https://youtu.be/pWuT5ezgk1c

場面転換のポストエフェクト

実際の結果
https://youtu.be/gmLQC8PaSxs

フルスクリーンエフェクト

ポストエフェクトなどか作成するときは、上の例ようにScriptableRenderPassとScriptableRendererFeatureのコードを書く必要があったが、フルスクリーンエフェクトはその必要がなくなった。
https://www.youtube.com/watch?v=7Cd7kQl6N50

FullScreenのShaderGraphを用意する


URPSampleBufferでRTのテクスチャを取得できる

Renderer FutureにFull Screen Pass Renderer Featureを追加する

実際の結果

UIシェーダを作成

https://www.youtube.com/watch?v=PV195gBqxKA

Canvas Shader Graphを作成

注意点

・頂点シェーダーを使用できない
・ライティングができない
・UIアニメーションする際は、スクリプトを使用するかサードパーティー製を使用する。
スクリプトの場合は、IMaterialModifierを継承してGetModifiedMaterialメソッドでプロパティのReferenceを変更する。
サードパーティー製は以下を使用するのがおすすめ。
https://assetstore.unity.com/packages/2d/gui/animate-ui-materials-253197

パワーゲージUI作成

https://youtu.be/9OP6s5RFNkQ?feature=shared&t=1642

PhotoShopなどでグラデーションの画像作成する

ShaderGraphでゲージ処理を実装

現在の状態だと、Floatの値が大きくなるにつれてゲージがなくなっていくのでそれを逆にする。

Remapで1-0にすれば解決する。

ただ、Stepだと下記のようにジャギるのでSmoothStepを使用する。

SmoothStepを使用した結果。ジャギがなくなっている。

PhotoShopなどでカラーグラデーションの画像作成する

PhotoShopでゲージにカラーつけるテクスチャを作成する。

ShaderGraphでゲージのカラーをつける

https://youtu.be/8Uf46IDXhS4

PhotoShopなどでブラーやアウトラインのある画像を作成する

ShaderGraphでブラーやアウトライン画像を合成する

Addで合成を行う。

プロパティにカテゴリーをつける

ShaderGraph

マテリアル

Use Tilling and offsetでTillingとOffset機能を追加する

ShaderGraph

マテリアル

ディストーションのしくみ

何も手を加えていないチェッカーテクスチャ

ディストーションの効果あり

グラデーションマップが中央にいくにつれて、値が大きくなり、その分UVが多く足されていくので

実際の見た目も真ん中がよく歪んでいることが分かる。

sRGBオンオフによるディストーションマップなどの違い

リニア空間(Color SpaceがLiner)の時は、ディストーションマップなどデータとしてエフェクトの挙動変える場合、sRGBを無効にした方が正しい挙動になる。
sRGB無効

sRGB有効

上の例は、グラデーションのテクスチャを使用してuvを変化させディストーションの効果を出している。sRGB有効の場合は、ガンマ補正がかかるため正しい見た目になっていない。
なので、エフェクトで使用するテクスチャはsRGBを無効にしたほうが正しい挙動になる。
ただ、ガンマ空間(Color SpaceがGanma)の場合は、sRGB有効無効でもシェーダ計算後にガンマ補正がかかるのでどちらの設定でも変わらない。
sRGB無効

sRGB有効

Absoluteを使用して、テクスチャのマイナスの箇所を特定する

ノーマルマップは-1~1の範囲を取る。
Absoluteの黒から白くなった部分はもともとマイナスだった部分である。

画面のオブジェクトを歪ませる


事前準備として
・Opaque Textureを有効
・SurfaceTypeをTransparentにする
Scene Colorで不透明のオブジェクトが描画された後のテクスチャを取得して、法線マップによって歪ませている。

テクスチャのパーツごとに色を分ける

以下のように、シェーダのプロパティでテクスチャのパーツごとに色を分ける。
https://youtu.be/A_Orfihc9Ok
まず、PhotoShopやAEなどで、テクスチャのパーツごとにRGBに分ける。

シェーダー側で、RGBごとに取得して合成する。

モデルの境界値を境に頂点アニメーションを行う

参照サイトのp497
モデルの原点から0.75まので距離を境に頂点アニメーションしている。
https://youtu.be/jgHWeuX6DGw

テクスチャのWrap ModeのよるRepeatとClampの違い

https://youtu.be/xgG61ti4W58

Vector3でパターンを切り替える

https://youtu.be/NynRAsimu98
なお、以下のようにSplitすり理由は

Patternを(0,1,0)にすると、値がキャストされxのみが値がに反映されて意図しない結果になる。
なので、Splitで分けてそれをAddすることでVector3でパターンを切り替えることができる。

Tilling And Offsetでノイズテクスチャを引き延ばす

ノイズテクスチャ

Tilling And Offsetでノイズテクスチャを引き延ばす

UVごとのUVアニメーションの違い

https://youtu.be/vE-3ihhCNZk

頂点アルファを適用させる

頂点アルファをいじったモデル

Shader側の対応

Node接続あり

Node接続なし

Node接続ありだと、モデルの端が頂点アルファの影響で薄くなっていることがわかる。

Unity Grenobleでタイリング可能なシームレステクスチャ作成可能

参照サイト参照サイト

LerpやElipseやNormal from Heightなどを駆使して目玉作成する

https://youtu.be/wxmmfyiK46c

頂点カラーで頂点アニメーションを制御する

https://youtu.be/0Lt0LkuhZXs

頂点カラーで色を制御する

https://youtu.be/-hrhnljPNDE

スクリーンスペースディザパターンと壁があった場合に描画を切り替える

https://youtu.be/iFtjYODSIgE
スクリーンスペースのディザパターンであるためオブジェクトの角度が変わっても見た目が変わらない。
また、
EyeのScene Depthは正規化されていない深度バッファ。
RawのScreen Postionのw成分は、マテリアルをアタッチしているオブジェクトまでの距離。
であるので、壁などの奥にオブジェクトがある場合Stepの値は
In<Edge
→0
になるので、LerpのAの入力になり色が青くなる。

Feature Examplesを見ていく

カメラの距離によってノーマルマップを適用させる

CameraノードのPositionとPositionノードのワールド座標の距離を求めて、プロパティの入力値で制御する。
https://youtu.be/B0yko0vV3ck

ワールド座標のY軸によってノーマルマップのブレンド率を変える

Positionノードのワールド座標を入力にSmoothStepノードのEdgeを調整する。
https://youtu.be/6ZzWqGg-h0Q

各ビルトインごとにBlinn-Phong モデルの実装(頂点シェーダとフラグメントシェーダーの見た目の違い)

頂点シェーダでBlinn-Phongを実装すると負荷はかからないがアーティファクト(拡散光と反射光)が発生する。
フラグメントシェーダーは負荷はかかるが、アーティファクト(拡散光と反射光)は発生しない。
https://youtu.be/XW30v-cGjCo

頂点シェーダとフラグメントシェーダーによるUVスクロールの違い

頂点シェーダとフラグメントシェーダーでUVスクロールした場合、どちらも見た目は変わらないので負荷がかからない頂点シェーダーでUVスクロールを実装するのが良い。
https://youtu.be/s7QLF2uc_bw

Detail Mappingを実装する

Detail Mappingとは、複数のテクスチャを一枚に合成する技術のことである。
https://youtu.be/-eb3M1OaTsA

その他(量多いのでどういうものがあるかで紹介)

フローマッピング、インテリアマッピング、Mat Cap、Triplanar Mapping、頂点アニメーション、ビルボード、Bend Deformer、Uberパーティクル、レンダリングパイプラインごとの見た目の調整、品質設定ごとの見た目の調整、PBR、セルシェーディング。

テクスチャのサイズを変える

https://bravememo.hatenablog.com/entry/2022/05/11/163121

Discussion