【Unity道場 2月】シェーダを書けるプログラマになろう
29 likes30,141 views
2019/2/25に開催されたUnity道場 2月~シェーダを書けるプログラマになろう~の講演スライドです。 講師：安原 祐二 （ユニティ・テクノロジーズ・ジャパン合同会社） Unityのイベント資料はこちらから：https://www.slideshare.net/UnityTechnologiesJapan/clipboards
![(0, 1)
(0, 0)
(1, 1)
(1, 0)
テクスチャ座標
画像のサイズに関わらず
テクスチャ座標は [0, 1]](https://image.slidesharecdn.com/190226unitydojoyujiyasuhara-190226093744/85/Unity-2-86-320.jpg)
![(0, 2)
(0, 0)
(2, 2)
(2, 0)
テクスチャ座標が[0, 1]の範囲外の場合
2.0
？ ？
？
(0, 1)
(0, 0)
(1, 1)
(1, 0)](https://image.slidesharecdn.com/190226unitydojoyujiyasuhara-190226093744/85/Unity-2-87-320.jpg)
![(0, 1)
(0, 0)
(1, 1)
(1, 0)
(0, 2)
(0, 0)
(2, 2)
(2, 0)
テクスチャ座標が[0, 1]の範囲外の場合
2.0](https://image.slidesharecdn.com/190226unitydojoyujiyasuhara-190226093744/85/Unity-2-90-320.jpg)
![Repeat
Clamp
テクスチャのインポート設定で
tex2Dの動作を変えられる
[0.0, 1.0]範囲外のuvの扱い](https://image.slidesharecdn.com/190226unitydojoyujiyasuhara-190226093744/85/Unity-2-91-320.jpg)
![詳しく解説したブログ記事
https://qiita.com/yuji_yasuhara/private/158bab01cfff3c39214b
[Unity]無限平面を描画する過程でGPUの理解を深める
https://qiita.com/yuji_yasuhara/private/8d63455d1d277af4c270
[Unity] CGに使用される行列についての考察](https://image.slidesharecdn.com/190226unitydojoyujiyasuhara-190226093744/85/Unity-2-137-320.jpg)
【Unity道場 2月】シェーダを書けるプログラマになろう
- 3. 理解とは？
- 4. 理解とは？ 境界の把握
- 11. ８ステップで描画する
- 15. ステップ１
- 16. ステップ１ 3Dモデルを準備
- 17. ステップ２
- 18. ステップ２ Transformの値を4x4行列に変換 モデル行列という Rotation & Scale 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 1固定 Position
- 19. ステップ３
- 20. ステップ３ 頂点ごとに描画位置を算出 モデル行列 カメラ情報 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 1
- 21. ステップ４
- 23. ステップ５
- 25. ステップ６
- 27. ステップ７
- 29. ステップ８
- 34. シェーダで 対応できない例
- 35. 線を引きたい
- 37. 3Dモデル(Mesh)の構造
- 38. ・頂点列 ・三角形列 頂点座標 法線 UV 頂点座標 法線 UV 頂点座標 法線 UV 頂点座標 法線 UV 0 1 2 0 1 2 3 2 1 3 4 5 6 6 5 7 5 0 7 7 0 2 1 4 3 3 4 6 線を引くには線分用のデータが必要
- 39. シェーダで 対応できない例
- 40. 半透明描画をしたい 窓ガラス
- 42. ＋ ＝ ２ 半透明に必要な計算例
- 44. 半透明はBlend で設定可能 ステップ８に対する設定 Shader "Custom/minimum" { SubShader { Tags { "RenderType"="Transparent" } Blend SrcAlpha OneMinusSrcAlpha Pass { CGPROGRAM #pragma vertex vert #pragma fragment frag #include "UnityCG.cginc" … プログラマブルではない 演算は書けない ピクセルごとに変えられない
- 45. 余談 半透明＆深度バッファ問題
- 46. 不透明を半透明の後に描画する困難
- 49. 改めて シェーダコードを観察
- 50. 最小のシェーダ Shader "Custom/minimum" { SubShader { Tags { "RenderType"="Opaque" } Pass { CGPROGRAM #pragma vertex vert #pragma fragment frag #include "UnityCG.cginc" struct appdata { float4 vertex : POSITION; }; struct v2f { float4 vertex : SV_POSITION; }; v2f vert(appdata v) { v2f o; o.vertex = UnityObjectToClipPos(v.vertex); return o; } fixed4 frag(v2f i) : SV_Target { return fixed4(1,0,0,1); } ENDCG } } }
- 51. 最小のシェーダ ほぼ一般的な シェーダコード Shader "Custom/minimum" { SubShader { Tags { "RenderType"="Opaque" } Pass { CGPROGRAM #pragma vertex vert #pragma fragment frag #include "UnityCG.cginc" struct appdata { float4 vertex : POSITION; }; struct v2f { float4 vertex : SV_POSITION; }; v2f vert(appdata v) { v2f o; o.vertex = UnityObjectToClipPos(v.vertex); return o; } fixed4 frag(v2f i) : SV_Target { return fixed4(1,0,0,1); } ENDCG } } } 頂点シェーダ フラグメント シェーダ
- 52. 最小のシェーダ Unityが用意している 便利な記述 Shader "Custom/minimum" { SubShader { Tags { "RenderType"="Opaque" } Pass { CGPROGRAM #pragma vertex vert #pragma fragment frag #include "UnityCG.cginc" struct appdata { float4 vertex : POSITION; }; struct v2f { float4 vertex : SV_POSITION; }; v2f vert(appdata v) { v2f o; o.vertex = UnityObjectToClipPos(v.vertex); return o; } fixed4 frag(v2f i) : SV_Target { return fixed4(1,0,0,1); } ENDCG } } } 様々な設定が可能
- 54. 最小のシェーダ Shader "Custom/minimum" { SubShader { Tags { "RenderType"="Opaque" } Pass { CGPROGRAM #pragma vertex vert #pragma fragment frag #include "UnityCG.cginc" struct appdata { float4 vertex : POSITION; }; struct v2f { float4 vertex : SV_POSITION; }; v2f vert(appdata v) { v2f o; o.vertex = UnityObjectToClipPos(v.vertex); return o; } fixed4 frag(v2f i) : SV_Target { return fixed4(1,0,0,1); } ENDCG } } } 頂点シェーダ フラグメント シェーダ セマンティクス付き構造体
- 55. セマンティクス struct appdata { float4 vertex : POSITION; }; struct v2f { float4 vertex : SV_POSITION; }; 変数の内容の意味 GPUに扱い方を伝える
- 57. テクスチャマッピングの例
- 58. v2f vert(appdata v) { v2f o; o.vertex = UnityObjectToClipPos(v.vertex); o.uv = v.uv; return o; } fixed4 frag(v2f i) : SV_Target { return tex2D(_MainTex, i.uv); } テクスチャマッピングのシェーダ uvを渡す テクセルを拾う
- 59. struct appdata { float4 vertex : POSITION; float2 uv : TEXCOORD0; }; struct v2f { float4 vertex : SV_POSITION; float2 uv : TEXCOORD0; }; uvはテクスチャ座標 uvはテクスチャ座標 v2f vert(appdata v) { v2f o; o.vertex = UnityObjectToClipPos(v.vertex); o.uv = v.uv; return o; } fixed4 frag(v2f i) : SV_Target { return tex2D(_MainTex, i.uv); } uvを渡す テクセルを拾う
- 62. struct appdata { float4 vertex : POSITION; float2 uv : TEXCOORD0; }; struct v2f { float4 vertex : SV_POSITION; float2 uv : TEXCOORD0; }; v2f vert(appdata v) { v2f o; o.vertex = UnityObjectToClipPos(v.vertex); o.uv = v.uv; return o; } fixed4 frag(v2f i) : SV_Target { return tex2D(_MainTex, i.uv); }
- 63. v2f vert(appdata v) { v2f o; o.vertex = UnityObjectToClipPos(v.vertex); o.uv = v.uv; return o; } fixed4 frag(v2f i) : SV_Target { return tex2D(_MainTex, i.uv); }補間されたUV座標で テクスチャから色を得る struct appdata { float4 vertex : POSITION; float2 uv : TEXCOORD0; }; struct v2f { float4 vertex : SV_POSITION; float2 uv : TEXCOORD0; };
- 65. v2f vert(appdata v) { v2f o; o.vertex = UnityObjectToClipPos(v.vertex); o.uv = v.uv; return o; } 頂点シェーダ フラグメントシェーダ fixed4 frag(v2f i) : SV_Target { return tex2D(_MainTex, i.uv); }
- 66. v2f vert(appdata v) { v2f o; o.vertex = UnityObjectToClipPos(v.vertex); o.uv = v.uv; return o; } たいてい 同じことを書く 省略しても 生成してくれる 頂点シェーダ フラグメントシェーダ fixed4 frag(v2f i) : SV_Target { return tex2D(_MainTex, i.uv); }
- 67. v2f vert(appdata v) { v2f o; o.vertex = UnityObjectToClipPos(v.vertex); o.uv = v.uv; return o; } たいてい 同じことを書く たいてい フクザツになる 省略しても 生成してくれる 楽な記述で 生成してくれる 頂点シェーダ フラグメントシェーダ fixed4 frag(v2f i) : SV_Target { return tex2D(_MainTex, i.uv); }
- 68. サーフェスシェーダ(surface shader)は v2f vert(appdata v) { v2f o; o.vertex = UnityObjectToClipPos(v.vertex); o.uv = v.uv; return o; } たいてい 同じことを書く たいてい フクザツになる 省略しても 生成してくれる 楽な記述で 生成してくれる 頂点シェーダ フラグメントシェーダ Unityからのプレゼント fixed4 frag(v2f i) : SV_Target { return tex2D(_MainTex, i.uv); }
- 70. 休憩
- 71. Part II GPUの神秘
- 72. fixed4 frag(v2f i) : SV_Target { return tex2D(_MainTex, i.uv); } tex2Dでテクセルをゲット tex2DはGPUに直結 ここにシェーダの神秘がある
- 74. 品質の低下 ちらつき
- 75. ORIGINAL NEAREST
- 78. 無限平面を作ろう
- 81. 1.0 1.0の四角形を準備する
- 83. カメラの前方ベクトル シェーダまめ知識 float3 forward = -UNITY_MATRIX_V._m20_m21_m22; ビュー行列
- 84. uvにワールド座標を入れちゃう
- 86. (0, 1) (0, 0) (1, 1) (1, 0) テクスチャ座標 画像のサイズに関わらず テクスチャ座標は [0, 1]
- 87. (0, 2) (0, 0) (2, 2) (2, 0) テクスチャ座標が[0, 1]の範囲外の場合 2.0 ？ ？ ？ (0, 1) (0, 0) (1, 1) (1, 0)
- 88. (0, 2) (0, 0) (2, 2) (2, 0) 2.0 ？ ？ ？ tex2D(1.5, 1.5) は何を返すのか？
- 89. (0, 2) (0, 0) (2, 2) (2, 0) 2.0 ？ ？ ？ tex2D(1.5, 1.5) は何を返すのか？ tex2D(0.5, 0.5) の値を返す
- 90. (0, 1) (0, 0) (1, 1) (1, 0) (0, 2) (0, 0) (2, 2) (2, 0) テクスチャ座標が[0, 1]の範囲外の場合 2.0
- 92. uvにワールド座標(x, z)を入れる (-728, 1041) (235, 1021) (-549, 103) (346, 124)
- 96. 縮小済みのテクスチャが使用される
- 97. ミップマップなしミップマップあり
- 98. ミップマップなしミップマップあり
- 100. tex2Dはどうやって mipmapレベルを 選択しているのか？ mipmap生成を 指定するだけ シェーダはtex2Dを 呼んでいるだけ 疑問 それでも mipmapレベルが選ばれる・・・
- 101. それはさておき
- 102. 繰り返しが気になる
- 103. 単位範囲ごとに uv座標をずらしてみる
- 104. uvをずらす
- 105. fixed4 frag(v2f i) : SV_Target { float4 off = hash4fast(floor(i.uv)); off.zw = off.zw >= float2(0.5, 0.5) ? float2(1, 1) : float2(-1, -1); float2 fuv = frac(i.uv); float2 uv = fuv * off.zw + off.xy; fixed4 col = tex2D(_MainTex, uv); UNITY_APPLY_FOG(i.fogCoord, col); return col; } コード例 ※hash4fastは別に定義
- 107. やや不連続が気になる テクスチャ
- 113. fixed4 frag(v2f i) : SV_Target { float4 off = hash4fast(floor(i.uv)); off.zw = ((step(0.5, off.zw)) - 0.5) * 2; float2 fuv = frac(i.uv); float2 uv = fuv * off.zw + off.xy; fixed4 col = tex2D(_MainTex, uv); UNITY_APPLY_FOG(i.fogCoord, col); return col; } 本当に同時に実行される fixed4 frag(v2f i) : SV_Target { float4 off = hash4fast(floor(i.uv)); off.zw = ((step(0.5, off.zw)) - 0.5) * 2; float2 fuv = frac(i.uv); float2 uv = fuv * off.zw + off.xy; fixed4 col = tex2D(_MainTex, uv); UNITY_APPLY_FOG(i.fogCoord, col); return col; } fixed4 frag(v2f i) : SV_Target { float4 off = hash4fast(floor(i.uv)); off.zw = ((step(0.5, off.zw)) - 0.5) * 2; float2 fuv = frac(i.uv); float2 uv = fuv * off.zw + off.xy; fixed4 col = tex2D(_MainTex, uv); UNITY_APPLY_FOG(i.fogCoord, col); return col; } fixed4 frag(v2f i) : SV_Target { float4 off = hash4fast(floor(i.uv)); off.zw = ((step(0.5, off.zw)) - 0.5) * 2; float2 fuv = frac(i.uv); float2 uv = fuv * off.zw + off.xy; fixed4 col = tex2D(_MainTex, uv); UNITY_APPLY_FOG(i.fogCoord, col); return col; }
- 114. 隣の３つも 同じ場所を実行 fixed4 frag(v2f i) : SV_Target { float4 off = hash4fast(floor(i.uv)); off.zw = off.zw >= float2(0.5, 0.5) ? float2(1, 1) : float2(-1, -1); float2 fuv = frac(i.uv); float2 uv = fuv * off.zw + off.xy; fixed4 col = tex2D(_MainTex, uv); UNITY_APPLY_FOG(i.fogCoord, col); return col; }
- 115. fixed4 frag(v2f i) : SV_Target { float4 off = hash4fast(floor(i.uv)); off.zw = off.zw >= float2(0.5, 0.5) ? float2(1, 1) : float2(-1, -1); float2 fuv = frac(i.uv); float2 uv = fuv * off.zw + off.xy; fixed4 col = tex2D(_MainTex, uv); UNITY_APPLY_FOG(i.fogCoord, col); return col; } tex2Dは 隣の３つの情報も使う！
- 121. 対処：適切なuvを指定 fixed4 frag(v2f i) : SV_Target { float4 off = hash4fast(floor(i.uv)); off.zw = off.zw >= float2(0.5, 0.5) ? float2(1, 1) : float2(-1, -1); float2 fuv = frac(i.uv); float2 uv = fuv * off.zw + off.xy; float2 dx = ddx(i.uv) * off.zw; float2 dy = ddy(i.uv) * off.zw; fixed4 col = tex2Dgrad(_MainTex, uv, dx, dy); UNITY_APPLY_FOG(i.fogCoord, col); return col; } ddx, ddy で適切な傾きを得て tex2Dgradで指定
- 122. チラつきが消滅 完成！
- 123. ddx, ddy の神秘 fixed4 frag(v2f i) : SV_Target { float4 off = hash4fast(floor(i.uv)); off.zw = off.zw >= float2(0.5, 0.5) ? float2(1, 1) : float2(-1, -1); float2 fuv = frac(i.uv); float2 uv = fuv * off.zw + off.xy; float2 dx = ddx(i.uv) * off.zw; float2 dy = ddy(i.uv) * off.zw; fixed4 col = tex2Dgrad(_MainTex, uv, dx, dy); UNITY_APPLY_FOG(i.fogCoord, col); return col; }
- 124. ddx, ddy の神秘 fixed4 frag(v2f i) : SV_Target { float4 off = hash4fast(floor(i.uv)); off.zw = off.zw >= float2(0.5, 0.5) ? float2(1, 1) : float2(-1, -1); float2 fuv = frac(i.uv); float2 uv = fuv * off.zw + off.xy; float2 dx = ddx(i.uv) * off.zw; float2 dy = ddy(i.uv) * off.zw; fixed4 col = tex2Dgrad(_MainTex, uv, dx, dy); UNITY_APPLY_FOG(i.fogCoord, col); return col; }
- 125. ddx, ddy の神秘 fixed4 frag(v2f i) : SV_Target { float4 off = hash4fast(floor(i.uv)); off.zw = off.zw >= float2(0.5, 0.5) ? float2(1, 1) : float2(-1, -1); float2 fuv = frac(i.uv); float2 uv = fuv * off.zw + off.xy; float2 dx = ddx(i.uv) * off.zw; float2 dy = ddy(i.uv) * off.zw; fixed4 col = tex2Dgrad(_MainTex, uv, dx, dy); UNITY_APPLY_FOG(i.fogCoord, col); return col; } 横の隣との差
- 126. ddx, ddy の神秘 fixed4 frag(v2f i) : SV_Target { float4 off = hash4fast(floor(i.uv)); off.zw = off.zw >= float2(0.5, 0.5) ? float2(1, 1) : float2(-1, -1); float2 fuv = frac(i.uv); float2 uv = fuv * off.zw + off.xy; float2 dx = ddx(i.uv) * off.zw; float2 dy = ddy(i.uv) * off.zw; fixed4 col = tex2Dgrad(_MainTex, uv, dx, dy); UNITY_APPLY_FOG(i.fogCoord, col); return col; } 縦の隣との差
- 127. fixed4 frag(v2f i) : SV_Target { fixed4 col = tex2D(_MainTex, i.uv); return col; } fixed4 frag(v2f i) : SV_Target { fixed4 col = tex2D(_MainTex, i.uv); return fwidth(col); } fwidth(v)=abs(ddx(v)) + abs(ddy(v))
- 128. fixed4 frag(v2f i) : SV_Target { fixed4 col = tex2D(_MainTex, i.uv); return lerp(col, fixed4(0,0,0,1), fwidth(col.a)); } fwidth(v)=abs(ddx(v)) + abs(ddy(v))
- 130. https://blogs.unity3d.com/jp/2019/02/14/procedural-stochastic-texturing-in-unity/
- 131. fixed4 frag(v2f i) : SV_Target { float4 off = hash4fast(floor(i.uv)); off.zw = ((step(0.5, off.zw)) - 0.5) * 2; float2 fuv = frac(i.uv); float2 uv = fuv * off.zw + off.xy; fixed4 col = tex2D(_MainTex, uv); UNITY_APPLY_FOG(i.fogCoord, col); return col; } 同時に実行されることに想いを馳せる fixed4 frag(v2f i) : SV_Target { float4 off = hash4fast(floor(i.uv)); off.zw = ((step(0.5, off.zw)) - 0.5) * 2; float2 fuv = frac(i.uv); float2 uv = fuv * off.zw + off.xy; fixed4 col = tex2D(_MainTex, uv); UNITY_APPLY_FOG(i.fogCoord, col); return col; } fixed4 frag(v2f i) : SV_Target { float4 off = hash4fast(floor(i.uv)); off.zw = ((step(0.5, off.zw)) - 0.5) * 2; float2 fuv = frac(i.uv); float2 uv = fuv * off.zw + off.xy; fixed4 col = tex2D(_MainTex, uv); UNITY_APPLY_FOG(i.fogCoord, col); return col; } fixed4 frag(v2f i) : SV_Target { float4 off = hash4fast(floor(i.uv)); off.zw = ((step(0.5, off.zw)) - 0.5) * 2; float2 fuv = frac(i.uv); float2 uv = fuv * off.zw + off.xy; fixed4 col = tex2D(_MainTex, uv); UNITY_APPLY_FOG(i.fogCoord, col); return col; } GPUを扱うときの心構え
- 132. シェーダはbranch（ようするにif文）が苦手 fixed4 frag(v2f i) : SV_Target { float4 col; if (i.uv.x < 0.5) col = tex2D(_MainTex, i.uv); else col = tex2D(_MainTex, -i.uv); return col; } 同時実行することを思えば残酷な記述
- 133. 休憩
- 134. カメラの前方ベクトル float3 forward = -UNITY_MATRIX_V._m20_m21_m22; ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?
- 135. M = ( a b c d) I = ( 1 0 0 1) = ( a b c d) −1 = 1 ad − bc ( d −b −c a )M−1 行列単位行列 行列 の逆行列M−1 M MI
- 136. おしまい
- 138. ボツスライド集
- 139. プログラマブルシェーダで出来ないこと • アルファブレンディング • 点・線の描画 • 頂点の生成（ジオメトリシェーダ、テセレーション） • 描画順の指定 • FrustomCulling抑制 • テクスチャサンプリング方式の変更 • トポロジ（三角形の構成）変更
- 142. ・頂点列 ・三角形列 頂点座標 法線 UV 頂点座標 法線 UV 頂点座標 法線 UV 頂点座標 法線 UV 0 1 2 0 1 2 3 2 1 3 4 5 6 6 5 7 5 0 7 7 0 2 1 4 3 3 4 6 ところで この立方体の頂点数はいくつ？
- 143. struct appdata { float4 vertex : POSITION; float4 normal: NORMAL; float4 uv: TEXCOORD; }; struct v2f { float4 vertex : SV_POSITION; }; v2f vert(appdata v) { v2f o; o.vertex = UnityObjectToClipPos(v.vertex); return o; } appdata に頂点情報 法線が異なれば頂点も別に必要
- 144. ・頂点列 ・三角形列 頂点座標 法線 UV 頂点座標 法線 UV 頂点座標 法線 UV 頂点座標 法線 UV 0 1 2 0 1 2 3 2 1 3 4 5 6 6 5 7 5 0 7 7 0 2 1 4 3 3 4 6 ハードエッジは法線が分かれるので24頂点
- 146. 頂点シェーダのよくあるミス
- 147. モデル行列の各部の意味 Rotation & Scale 1 0 0 0 1 0 0 0 1 0 0 0 1固定 Position a b c a b c
- 148. v2f vert(appdata v) { v2f o; o.vertex = UnityObjectToClipPos(v.vertex); o.uv = v.uv; return o; } inline float4 UnityObjectToClipPos(in float3 pos) { return mul(UNITY_MATRIX_VP, mul(unity_ObjectToWorld, float4(pos, 1.0))); } UnityObjectToClipPosの中身： これを自分で書いても良いが、この1.0を0.0にしたらアウト
- 149. 1 0 0 a 0 1 0 b 0 0 1 c 0 0 0 1 px py pz 1 = px + a py + b pz + c 1 1 0 0 a 0 1 0 b 0 0 1 c 0 0 0 1 px py pz 0 = px py pz 0 掛けるベクトルのw要素による結果の違い Positionが加算されない Positionが加算される 頂点ベクトルはw=1で計算 法線ベクトルはw=0で計算
- 150. フラグメントシェーダのよくあるミス
- 151. 法線を渡すときは注意 v2f vert(appdata v) { v2f o; o.vertex = UnityObjectToClipPos(v.vertex); o.normal = UnityObjectToWorldNormal(v.normal); return o; } normalizeが必要 fixed4 frag(v2f i) : SV_Target { float3 n = normalize(i.normal); … 線形補間なので 短くなってしまう
- 152. point sampling bilinear trilinear
- 154. おしまい