以下のような回転リングを作るシェーダーグラフです。
上記の回転リングですが、立方体の周りに２枚の板を配置しています。
これら２枚の板にシェーダーグラフを適用することで、立方体の周りを回転するようなリングを作ることができます。
極座標を利用して円弧を作り、距離に応じたランダムな速さで円弧を回転させています。
極座標から距離と角度を取り出しています。
距離を利用して、波紋のような模様を作っています。
時間と距離を掛け合わせたもの角度に足して、外側ほど速く回転する円弧を作っています。
また、距離に応じたノイズを角度に足すことで円弧をランダムにズラしています。
円弧と波紋を乗算して、円弧の間にすき間が空いたような見た目にしています。
マインクラフトの土ブロックっぽいものをシェーダーグラフで作ってみました。
草ドットと土ドットを作り、これをLerpで混ぜることでマインクラフトの土ブロックのような絵を作っています。
以下のようなきらきらした模様をつくるシェーダーグラフの作り方を解説します。
まずは以下のような円を作ってみます。
x2 + y2 < A を満たす領域が1.0になります(白くなります)
Powerノードの2.0の部分を0.75にすると、4角星っぽくなります。
UVノードにMultiplyノードとFractionノードを繋げると、UV座標の0~1の繰り返しを複数個つくることができます。
4角星も複数並ぶようになります。
Powerノードの0.75(下図の赤く囲った部分)に変更を加え、時間を乗算します。
具体的には、0.75の部分を以下のようにつなぎ変えます。
4角星が動いてキラキラする感じになります。
Posterizeノードで解像度を下げたUVを用いてノイズを作り、これを時間に足します。
ここではPosterizeのStepに4を指定しました。
動きにバラつきが生まれました。
レイマーチング(ray marching)と呼ばれる手法を用いて以下のような絵を作ってみました。
カメラ位置、カメラ向き、UV座標からレイを求め、レイがオブジェクトとぶつかるかどうかを判定します。
オブジェクトにレイがぶつかった場合は色を付ける、そうでない場合は色をつけないという描画を行います。
※ここでいうカメラはレイマーチング計算に利用する視点のことを指しており、Unityのシーンカメラとは別のものです
シェーダーグラフには、シェーダーコードをノード化してシェーダーグラフ上で使えるようにするカスタムノードという機能が用意されています。
blogs.unity3d.com
レイマーチングはforループを使った複雑な処理を必要とするため、カスタムノードを利用したシェーダーコードで実装します。
今回はレイマーチングで球をたくさん描画するカスタムノードを作成してみました。
以下のC#スクリプトをUnityプロジェクトに入れることで、上記のカスタムノードが使えるようになります。
using System.Reflection; using UnityEditor.ShaderGraph; using UnityEngine; /// <summary> /// レイマーチングで球をたくさん表示するカスタムノード /// </summary> [Title ("Raymarching", "Raymarch Sphere")] public class RaymarchingSphereNode : CodeFunctionNode { public RaymarchingSphereNode () { name = "Raymarching(Sphere)"; } protected override MethodInfo GetFunctionToConvert () { return GetType ().GetMethod ("RaymarchingNode_Function", BindingFlags.Static | BindingFlags.NonPublic); } public override void GenerateNodeFunction (FunctionRegistry registry, GraphContext graphContext, GenerationMode generationMode) { registry.ProvideFunction ("distance_func", s => s.Append (@" // 距離関数: 点pから球オブジェクトまでの距離を求める #define INTERVAL interval float distance_func(float3 p, float size, float interval) { p = frac(p / INTERVAL) * INTERVAL - INTERVAL / 2.0; // -INTERVAL/2.0 ~ +INTERVAL/2.0 の繰り返しを作る return length(p) - size; } ")); registry.ProvideFunction ("getNormal", s => s.Append (@" // 法線の計算 float3 getNormal(float3 p, float size, float interval) { float2 e = float2(0.0001, 0.0); return normalize(float3( distance_func(p + e.xyy, size, interval) - distance_func(p - e.xyy, size, interval), distance_func(p + e.yxy, size, interval) - distance_func(p - e.yxy, size, interval), distance_func(p + e.yyx, size, interval) - distance_func(p - e.yyx, size, interval) )); } ")); base.GenerateNodeFunction (registry, graphContext, generationMode); } static string RaymarchingNode_Function ( [Slot (0, Binding.MeshUV0)] Vector2 UV, [Slot (1, Binding.None, 0f, 0f, 4f, 0f)] Vector3 CameraPos, // カメラ位置 [Slot (2, Binding.None, 0f, 0f, -1f, 0f)] Vector3 CameraDir, // カメラの向きベクトル [Slot (3, Binding.None, 0f, 1f, 0f, 0f)] Vector3 CameraUp, // カメラの上方向ベクトル [Slot (4, Binding.None, 1f, 0f, 0f, 0f)] Vector1 ObjectSize, // 球のサイズ [Slot (5, Binding.None, 2f, 0f, 0f, 0f)] Vector1 ObjectInterval, // 球の配置間隔 [Slot (6, Binding.None, 32f, 0f, 0f, 0f)] Vector1 RaymarchLoop, // レイマーチングのループ回数(この数を大きくすると遠くまで描画されるようになりますが重くなります) [Slot (10, Binding.None)] out Vector1 Hit, // レイがオブジェクトにぶつかったら1.0, ぶつからなかったら0.0 [Slot (11, Binding.None)] out Vector1 Distance, // レイマーチングでレイが進んだ距離 [Slot (12, Binding.None)] out Vector3 Normal // オブジェクト上の法線 ) { Normal = Vector3.zero; return @"{ #define MAX_REPEAT 100 float2 p = UV - 0.5; // カメラに関する情報(Position, Direction, Up) #define cPos CameraPos #define cDir normalize(CameraDir) #define cUp normalize(CameraUp) #define cSide normalize(cross(cUp, cDir)) // レイマーチング float3 ray = normalize(p.x * cSide + p.y * cUp + 1.0 * cDir); // レイの向きベクトル float3 rPos = cPos; // レイ位置 float rLength = 0.0;// レイが進む長さ float dist = 0.0; // レイとオブジェクト間の距離 for (int i = 0; i < min(RaymarchLoop, MAX_REPEAT); i++) { dist = distance_func(rPos, ObjectSize, ObjectInterval); // レイ位置からオブジェクトまでの距離を求める rLength += dist; // 距離を足す(レイを進める) rPos = cPos + ray * rLength; // レイ位置の更新 } Hit = step(dist, 0.01); // レイがオブジェクトにある程度近かったら1.0を出力、それ以外は0.0を出力 Distance = rLength; // レイが進んだ距離を出力 Normal = saturate(getNormal(rPos, ObjectSize, ObjectInterval)); // レイの交点におけるオブジェクト上の法線を出力 }"; } }
カスタムノードを一部修正しました。
修正前 : #define cSide normalize(cross(cDir, cUp))
修正後 : #define cSide normalize(cross(cUp, cDir))
このカスタムノードを利用することで、以下の数値が利用できるようになります。
・レイがオブジェクトに当たったかどうか(当たった場合は1.0、それ以外は0.0を出力)
・レイがオブジェクトに当たるまでに進んだ距離
・オブジェクト上の法線情報(影の計算などに利用できます)
カスタムノードは「Raymarching/Raymarchi Sphere」にいます。
ノードを以下のようにつないでみます。
以下のような絵が出力されました。
zのマイナス方向(画面の奥側)を向いたカメラがzのプラスの方向(画面の手前側)へ移動しているため、
球オブジェクトが画面の奥へ移動しているような動きをします。
カメラ向き用のVector3を作成して、カスタムノードのカメラ向きとして入力します。
マテリアル上からカメラ向きを変えられるようになりました。なかなか楽しいです。
今回、このレイマーチングノードを使って以下のようなシェーダーグラフを作ってみました。
レイマーチングのパラメータの指定をしています。
レイがオブジェクトへぶつかるまでに進んだ距離を補正し、最後にSampleGradientで色を付けて画面出力しています。
法線情報と光の内積をとることで、影を付けることができます。
DotProductノードを使うと内積を計算できます。
Unityのシーンにあるカメラとレイマーチングのカメラを同期させる方法を解説します。
カメラの位置、向き、上方向の計３つのプロパティを追加し、レイマーチングノードへ入力します。
Referenceの部分は以下のように設定します。
このReferenceはMaterialのSetVector(name, value)メソッドのnameに指定する名前となります。
int _cameraUp = Shader.PropertyToID("_CameraUp"); int _cameraDir = Shader.PropertyToID("_CameraDir"); int _cameraPos = Shader.PropertyToID("_CameraPos"); _material.SetVector(_cameraUp, transform.up); _material.SetVector(_cameraDir, transform.forward); _material.SetVector(_cameraPos, transform.position);
以下のスクリプトCameraShaderSync.csをUnityプロジェクトへ追加します。
using UnityEngine; public class CameraShaderSync : MonoBehaviour { [SerializeField] Material _material; // カメラと同期させる対象のマテリアル int _cameraUp; int _cameraDir; int _cameraPos; void Start() { _cameraUp = Shader.PropertyToID("_CameraUp"); _cameraDir = Shader.PropertyToID("_CameraDir"); _cameraPos = Shader.PropertyToID("_CameraPos"); } void Update() { // 位置と向きをシェーダーに渡す _material.SetVector(_cameraUp, transform.up); _material.SetVector(_cameraDir, transform.forward); _material.SetVector(_cameraPos, transform.position); } }
CameraShaderSyncコンポーネントをシーンカメラにアタッチし、Inspectorタブからレイマーチングのマテリアルを登録します。
Unityの再生ボタンを押すと、シーンの位置と向きがレイマーチングのカメラ情報へ反映されるようになります。
using UnityEngine; [RequireComponent(typeof(Rigidbody))] public class SetVelocity : MonoBehaviour { [SerializeField] float m_AngularSpeed = -1f; // 角速度の係数 [SerializeField] Vector3 m_AngularSpeeds = new Vector3(-0.3f, 0.4f, -0.3f); // 角速度 [SerializeField] float m_PositionSpeed = -1f; // 移動速度の係数 [SerializeField] Vector3 m_PositionSpeeds = new Vector3(-7f, -7.5f, -0.2f); // 移動速度 void Start() { var rigidbody = GetComponent<Rigidbody>(); rigidbody.angularVelocity = m_AngularSpeed * m_AngularSpeeds; rigidbody.velocity = m_PositionSpeed * m_PositionSpeeds; Debug.Log(rigidbody.velocity); } }
3Dオブジェクトを液体が入った感じにするシェーダーグラフです。
ワールド座標ベースのサイン波で塗りつぶしており、オブジェクトを回転させても波の位置は固定されたままです。
ShaderGraphExample/Assets/ShaderGraphExample/17_Liquid at master · rngtm/ShaderGraphExample · GitHub
今回のシェーダーグラフではUnlitマスターノードを以下のように設定しています。
マグマが広がるような表現を作る方法を解説します。
座標(X, Y, Z)のXZ成分を取り出し、座標(0, 0)からの距離をとります。
この距離を使って波を作っています。
Unity標準のPlaneオブジェクトを作り、これにUnlitシェーダーグラフから作ったマテリアルを適用しておきます。
以下のようにノードをつなぎます。
原点(0,0)からの距離が板の色に反映されるようになりました。
距離をSineノードにつなぎます。
波紋っぽい色になりました。
Sineノードの出力は(-1,1)の範囲になっているため、Remapノードを使って範囲(-1, 1)を(0, 1)へ変換します。
後に頂点座標へ加算する時、負の値が含まれていると板が下へ凹んでしまうためこのような補正を入れています。
SubtractノードとTimeノードを使い、距離から時間を減算して波紋が広がるようにします。
波紋を頂点座標のY成分へ加算して頂点を動かします。
板がY方向に動くようになりました。
smoothstepノードを使って波紋をとがらせます。
smoothstepノードは以下のような値を返します。
グラフの描画にはiq氏のGraphToyを使わせていただきました。(http://www.iquilezles.org/apps/graphtoy/)
smoothstepをsin(x)に対して使用することで、sinカーブをとがらせることができます。
今回はsin(x)が(0,1)の範囲に収まるように補正しているため、実際は以下のようなグラフを描きます。
Multiplyノードを使って波の高さを1.4倍にします。
なんだか良い感じの形の波になってきました。
波紋(Vector1型の数値)をSampleGradientでカラーグラデーションに変換して色を付けます。
マグマっぽくなりました。
波が立っていないところにも色がついてしまっていて残念な印象なので、SmoothStepノードでくっきりとさせたいと思います。
以下のようにSmoothstepノードをつなぎます。
色がくっきりとしました。
変化が分かりにくいので、変更前と変更後を並べてみました。
原点(0,0)からの距離を利用して波紋を作っていましたが、この距離にノイズを加えてみます。
今回はNoiseScaleに45.0を指定してみました。
25x25の頂点からなるサイズ10の板オブジェクトに差し替えると以下のような見た目になります。
using UnityEngine;
/// <summary>
/// 板状のメッシュを作成C#スクリプト
/// </summary>
[RequireComponent(typeof(MeshFilter))]
[RequireComponent(typeof(MeshRenderer))]
public class GeneratePlane : MonoBehaviour
{
[SerializeField] bool generateMeshOnUpdate = false; // 毎フレームメッシュ更新
[SerializeField] int xCount = 25; // x方向の頂点数
[SerializeField] int zCount = 25; // y方向の頂点数
[SerializeField] float planeSize = 10f; // 板のサイズ
Mesh mesh;
void Start()
{
mesh = new Mesh();
GetComponent<MeshFilter>().mesh = mesh;
Create();
}
private void Update()
{
if (generateMeshOnUpdate)
{
Create();
}
}
private void Create()
{
if (xCount < 2) xCount = 2;
if (zCount < 2) zCount = 2;
// 頂点座標(vertices)と法線(normals)作成
Vector3[] vertices = new Vector3[xCount * zCount];
Vector3[] normals = new Vector3[vertices.Length];
int vi = 0;
for (int z = 0; z < zCount; z++)
{
for (int x = 0; x < xCount; x++)
{
vertices[vi++] = new Vector3(
(float)x / (xCount - 1) - 0.5f,
0f,
(float)z / (zCount - 1) - 0.5f
) * planeSize;
}
}
for (int i = 0; i < vertices.Length; i++)
{
normals[i] = new Vector3(0f, 1f, 0f);
}
// 頂点インデックス(triangles)作成
int[] triangles = new int[(xCount - 1) * (zCount - 1) * 6];
int ti = 0;
int triangleOffset = 0;
for (int z = 0; z < zCount - 1; z++)
{
for (int x = 0; x < xCount - 1; x++)
{
triangles[ti++] = triangleOffset + xCount; // 2
triangles[ti++] = triangleOffset + 1; // 1
triangles[ti++] = triangleOffset + 0; // 0
triangles[ti++] = triangleOffset + xCount + 1; // 3
triangles[ti++] = triangleOffset + 1; // 1
triangles[ti++] = triangleOffset + xCount; // 2
triangleOffset++;
}
triangleOffset++;
}
// メッシュ更新
mesh.triangles = null;
mesh.vertices = vertices;
mesh.normals = normals;
mesh.triangles = triangles;
}
}
ドット絵風の海を作るシェーダーグラフです。
UV座標をPosterizeノードで解像度を落とし、Voronoiノードを使って模様を作っています。
VoronoiノードのAngleOffsetに時間を入力することで動きを作り出しています。
