【UnityShader】雪を降らせる【2】#39
前回の成果
雪を降らせるソースコードのStartまで理解できた。
今回やること
前回の続きからやっていきます。
参考サイト様
ソースコード
void LateUpdate() { var targetPosition = Camera.main.transform.TransformPoint(Vector3.forward * _range); var renderer = GetComponent<Renderer>(); renderer.material.SetFloat("_Range", _range); renderer.material.SetFloat("_RangeR", _rangeR); renderer.material.SetFloat("_Size", 0.1f); renderer.material.SetVector("_MoveTotal", _move); renderer.material.SetVector("_CamUp", Camera.main.transform.up); renderer.material.SetVector("_TargetPosition", targetPosition); float x = (Mathf.PerlinNoise(0f, Time.time * 0.1f) - 0.5f) * 10f; float y = -2f; float z = (Mathf.PerlinNoise(Time.time*0.1f, 0f)-0.5f) * 10f; _move += new Vector3(x, y, z) * Time.deltaTime; _move.x = Mathf.Repeat(_move.x, _range * 2.0f); _move.y = Mathf.Repeat(_move.y, _range * 2.0f); _move.z = Mathf.Repeat(_move.z, _range * 2.0f); }
Startは前回で理解できたので、LateUpdate関数の中身について学んでいきます。
LateUpdate()
これはUnityで定義している関数で、Update()の後に呼ばれるメソッドとなっています。
よく使用する例としては、Updateでキャラクターの移動を行い、LateUpdateでカメラの移動を行うなどです。
TransformPoint
ローカル座標からワールド座標へと変換する関数になります。
Mathf.PerlinNoise
2Dのパーリンノイズを生成する関数です。
// x : x座標 // y : y座標 PerlinNoise (float x, float y);
パーリンノイズとは
パーリンノイズとはノイズの一種です。
パーリンノイズ(英: Perlin noise)とは、コンピュータグラフィックスのリアリティを増すために使われるテクスチャ作成技法。擬似乱数的な見た目であるが、同時に細部のスケール感が一定である。このため制御が容易であり、各種スケールのパーリンノイズを数式に入力することで多彩なテクスチャを表現できる。
パーリンノイズとは - Weblio辞書:より引用
普通の乱数を使用してTextureに描画
パーリンノイズを使用してTextureに描画
パーリンノイズを使用すると、滑らかになるのがわかります。
今回はこれを使用することにより、風を表現しています。
Mathf.Repeat
0から特定の値をループする関数になります。
// t : 移動させる値 // length : 指定の値 Repeat(float t, float length);
これを使用することにより_moveの値が無限に増えることを防いでいます。
これでソースコード側の解説が終わったので、次にShader側の解説を行います。
ソースコードの全容は前回の記事にあるので、今回は解説する部分だけ乗せます。
ソースコード
v2f vert(appdata_custom v) { float3 target = _TargetPosition; float3 trip; float3 mv = v.vertex.xyz; mv += _MoveTotal; trip = floor(((target - mv) * _RangeR + 1) * 0.5f); trip *= (_Range * 2); mv += trip; float3 diff = _CamUp * _Size; float3 finalPosition; float3 tv0 = mv; tv0.x += sin(mv.x*0.2) * sin(mv.y*0.3) * sin(mv.x*0.9) * sin(mv.y*0.8); tv0.z += sin(mv.x*0.1) * sin(mv.y*0.2) * sin(mv.x*0.8) * sin(mv.y*1.2); float3 eyeVector = ObjSpaceViewDir(float4(tv0, 0)); float3 sideVector = normalize(cross(eyeVector, diff)); tv0 += (v.texcoord.x - 0.5f) * sideVector * _Size; tv0 += (v.texcoord.y - 0.5f) * diff; finalPosition = tv0; v2f o; o.pos = UnityObjectToClipPos(finalPosition); o.uv = MultiplyUV(UNITY_MATRIX_TEXTURE0, v.texcoord); return o; }
結構複雑な処理をしているように見えます。
頂点をリピートさせる
頂点を足し続けていると、カメラの描画範囲から外れてしまうので、カメラの範囲内に収まるようにリピートさせます。
これで何回リピートさせればいいかを求めます。
リピートさせる処理
下記のソースコードで行っています。
この部分が、このShaderでのキモと言えます。
float3 target = _TargetPosition; float3 trip; float3 mv = v.vertex.xyz; mv += _MoveTotal; trip = floor(((target - mv) * _RangeR + 1) * 0.5f); trip *= (_Range * 2); mv += trip;
下記でリピートの計算をしています。
trip = floor(((target - mv) * _RangeR + 1) * 0.5f);
図解をしていくので、図で使用している値を説明します。
値 | 意味 | ソースでの変数名 |
---|---|---|
0 | 原点 | 特になし |
v | ランダムな点 | mv |
v' | ランダムな点のリピート結果 | 特になし |
n | リピート回数 | trip |
R | カメラの範囲 | _range |
2R | カメラの範囲の2倍 | 特になし |
p | カメラの位置 | targetPosition |
xyz軸で独立しているので、一次元の数直線で考えます。
まずは、
- ランダムな点
- 原点
- カメラの範囲の2倍
- カメラの位置
を図に落とし込みます。 カメラの範囲を2倍している理由は、カメラの範囲を
Random.Range(-_range, _range)
で定義しているからです。
図に落とし込む
次にランダムな点を2Rでリピートします。
これをpの付近になるまで行います。
リピート
これにより、pの付近に2つのv'を出せました。
pから±Rの範囲に入っているものが求める値となります。
p±Rの範囲
図から数式にする
これで何回リピートさせるかが図によって理解できました。
ソースにするために数式にします。
求めるべきv'は2Rをn回リピートさせたものなので、
となります。
そして、p+Rはv'より大きいので、
上の二つの数式より、
となります。
今回求めたいものは、nなので、
となり、これを満たす最大の整数が求めるべきnとなります。
これをソースコードで表すと、
trip = floor(((target - mv) * _RangeR + 1) * 0.5f);
となり、nを求めることができます。
求めるものは整数なのでfloorを、除算は重いので乗算で計算しています。
雪をビルボードさせる
ビルボードとは、2DのTextureが3D空間で常にカメラの方向を向くようにすることです。
これをすることにより、カメラの座標がどこでも雪のTextureを正しく描画することができます。
ビルボードの処理
float3 diff = _CamUp * _Size; float3 finalPosition; float3 tv0 = mv; // ここは雪を揺らす処理なので、一旦無視 // tv0.x += sin(mv.x*0.2) * sin(mv.y*0.3) * sin(mv.x*0.9) * sin(mv.y*0.8); // tv0.z += sin(mv.x*0.1) * sin(mv.y*0.2) * sin(mv.x*0.8) * sin(mv.y*1.2); float3 eyeVector = ObjSpaceViewDir(float4(tv0, 0)); float3 sideVector = normalize(cross(eyeVector, diff)); tv0 += (v.texcoord.x - 0.5f) * sideVector * _Size; tv0 += (v.texcoord.y - 0.5f) * diff; finalPosition = tv0;
ObjSpaceViewDir
指定されたローカル座標の頂点から、カメラへの正規化されていないベクトルを返す関数です。
以下定義となります。
inline float3 ObjSpaceViewDir( in float4 v ) { float3 objSpaceCameraPos = mul(unity_WorldToObject, float4(_WorldSpaceCameraPos.xyz, 1)).xyz; return objSpaceCameraPos - v.xyz; }
これを使用することによって、視線ベクトルを取得することができます。
雪のTextureの四隅を判断する
カメラのx軸とy軸を取得
ビルボードをするために、カメラのx軸とy軸を取得する必要があります。
float3 diff = _CamUp * _Size;
これによりdiffにはカメラのy軸のベクトルの値が入っています。
ですので、カメラのx軸のベクトルを取得します。
eyeVectorには、オブジェクトからカメラに向かう視線ベクトルが入っています。
ですので、diffとの外積を取ることによりカメラのx軸のベクトルを取得することができます。
各ベクトルのイメージ
雪のTexture座標の計算
カメラの軸を利用して四隅の頂点の位置を計算します。
下記のソースコードで座標の計算を行っています。
tv0 += (v.texcoord.x - 0.5f) * sideVector * _Size; tv0 += (v.texcoord.y - 0.5f) * diff;
Script側でUV値を以下のソースコードで指定していたので、
_uvs[i * 4 + 0] = new Vector2(0.0f, 0.0f); _uvs[i * 4 + 1] = new Vector2(1.0f, 0.0f); _uvs[i * 4 + 2] = new Vector2(0.0f, 1.0f); _uvs[i * 4 + 3] = new Vector2(1.0f, 1.0f);
-0.5をすることにより、texcoordで四隅を判定することができます。
fragment shaderに伝える
これが最後の処理になります。
v2f o;
o.pos = UnityObjectToClipPos(finalPosition);
o.uv = MultiplyUV(UNITY_MATRIX_TEXTURE0, v.texcoord);
return o;
上記で計算してきたものをfragment shaderに渡してあげます。
MultiplyUV, UNITY_MATRIX_TEXTURE0
どちらも明確なものがなかったので、調べて雰囲気で理解したことを記載します。
MultiplyUV
定義は以下となります。
float2 MultiplyUV (float4x4 mat, float2 inUV) { float4 temp = float4 (inUV.x, inUV.y, 0, 0); temp = mul (mat, temp); return temp.xy; }
以下のようにすることにより、高速化するらしい?
o.uv = MultiplyUV(UNITY_MATRIX_TEXTURE0, v.texcoord);
ちなみに表示結果は以下でも変わらなかったです。
o.uv = v.texcoord;
UNITY_MATRIX_TEXTURE0
テクスチャの転置行列のことです。
結果
雪が降れば完成です。
ソースコードにコメントを付与
Shader "Unlit/fallSnow" { Properties { _MainTex("MainTex", 2D) = "white" {} } SubShader { Tags { "Queue" = "Transparent" "IgnoreProjector" = "True" "RenderType" = "Transparent" } ZWrite Off Cull Off Blend SrcAlpha OneMinusSrcAlpha Pass { CGPROGRAM #pragma vertex vert #pragma fragment frag #pragma target 3.0 #include "UnityCG.cginc" uniform sampler2D _MainTex; struct appdata_custom { float4 vertex : POSITION; float2 texcoord : TEXCOORD0; }; struct v2f { float4 pos : SV_POSITION; float2 uv : TEXCOORD0; }; float4x4 _PrevInvMatrix; float3 _TargetPosition; float _Range; float _RangeR; float _Size; float3 _MoveTotal; float3 _CamUp; v2f vert(appdata_custom v) { float3 target = _TargetPosition; float3 trip; float3 mv = v.vertex.xyz; mv += _MoveTotal; // リピート数を計算する // mv + 2 * _Range * n回 < _TargetPosition + _Rangeより trip = floor(((target - mv) * _RangeR + 1) * 0.5f); trip *= (_Range * 2); mv += trip; float3 diff = _CamUp * _Size; float3 finalPosition; float3 tv0 = mv; // 雪を揺らす tv0.x += sin(mv.x*0.2) * sin(mv.y*0.3) * sin(mv.x*0.9) * sin(mv.y*0.8); tv0.z += sin(mv.x*0.1) * sin(mv.y*0.2) * sin(mv.x*0.8) * sin(mv.y*1.2); // 雪をビルボードさせる // 視線ベクトル float3 eyeVector = ObjSpaceViewDir(float4(tv0, 0)); // カメラのx軸ベクトル float3 sideVector = normalize(cross(eyeVector, diff)); // 雪のx軸の計算 tv0 += (v.texcoord.x - 0.5f) * sideVector * _Size; // 雪のy軸の計算 tv0 += (v.texcoord.y - 0.5f) * diff; finalPosition = tv0; v2f o; o.pos = UnityObjectToClipPos(finalPosition); // 高速化 o.uv = MultiplyUV(UNITY_MATRIX_TEXTURE0, v.texcoord); return o; } fixed4 frag(v2f i) :SV_TARGET { return tex2D(_MainTex, i.uv); } ENDCG } } }
今回はこれで終了です。
ここまでご視聴ありがとうございました。