【Unity道場 2月】シェーダを書けるプログラマになろう
•
29 gefällt mir•28,954 views
2019/2/25に開催されたUnity道場 2月~シェーダを書けるプログラマになろう~の講演スライドです。 講師：安原 祐二 （ユニティ・テクノロジーズ・ジャパン合同会社） Unityのイベント資料はこちらから：https://www.slideshare.net/UnityTechnologiesJapan/clipboards
Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (20)
Ähnlich wie 【Unity道場 2月】シェーダを書けるプログラマになろう
Ähnlich wie 【Unity道場 2月】シェーダを書けるプログラマになろう (20)
Mehr von Unity Technologies Japan K.K.
Mehr von Unity Technologies Japan K.K. (20)
Kürzlich hochgeladen
Kürzlich hochgeladen (12)
【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))
- 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. おしまい