Download as PDF, PPTX
![(0, 1)
(0, 0)
(1, 1)
(1, 0)
テクスチャ座標
画像のサイズに関わらず
テクスチャ座標は [0, 1]](https://image.slidesharecdn.com/190226unitydojoyujiyasuhara-190226093744/75/Unity-2-86-2048.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/75/Unity-2-87-2048.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/75/Unity-2-90-2048.jpg)
![Repeat
Clamp
テクスチャのインポート設定で
tex2Dの動作を変えられる
[0.0, 1.0]範囲外のuvの扱い](https://image.slidesharecdn.com/190226unitydojoyujiyasuhara-190226093744/75/Unity-2-91-2048.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/75/Unity-2-137-2048.jpg)
Uploaded byUnity Technologies Japan K.K.
【Unity道場 2月】シェーダを書けるプログラマになろう
2019/2/25に開催されたUnity道場 2月~シェーダを書けるプログラマになろう~の講演スライドです。 講師：安原 祐二 （ユニティ・テクノロジーズ・ジャパン合同会社） Unityのイベント資料はこちらから：https://www.slideshare.net/UnityTechnologiesJapan/clipboards
More Related Content
Similar to 【Unity道場 2月】シェーダを書けるプログラマになろう
![[UE4]マテリアルの注意すべきこと！～テクスチャロードとSwitch～](https://cdn.slidesharecdn.com/ss_thumbnails/ue4materialcaution-190309153116-thumbnail.jpg?width=640&height=640&fit=bounds)
【Unity道場 2月】シェーダを書けるプログラマになろう
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.
- 16.
- 17.
- 18. ステップ２ Transformの値を4x4行列に変換 モデル行列という Rotation & Scale 1 0 00 0 1 0 0 0 0 1 0 0 0 0 1固定 Position
- 19.
- 20. ステップ３ 頂点ごとに描画位置を算出 モデル行列 カメラ情報 1 0 00 0 1 0 0 0 0 1 0 0 0 0 1
- 21.
- 22.
- 23.
- 24.
- 25.
- 26.
- 27.
- 28.
- 29.
- 30.
- 31.
- 32.
- 33.
- 34.
- 35.
- 36.
- 37.
- 38. ・頂点列 ・三角形列 頂点座標 法線 UV 頂点座標 法線 UV 頂点座標 法線 UV 頂点座標 法線 UV 0 1 2 0 1 23 2 1 3 4 5 6 6 5 7 5 0 7 7 0 2 1 4 3 3 4 6 線を引くには線分用のデータが必要
- 39.
- 40.
- 41.
- 42.
- 43.
- 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.
- 47.
- 48.
- 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 } } } 様々な設定が可能
- 53.
- 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 { float4vertex : POSITION; }; struct v2f { float4 vertex : SV_POSITION; }; 変数の内容の意味 GPUに扱い方を伝える
- 56.
- 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 { float4vertex : 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を渡す テクセルを拾う
- 60.
- 61.
- 62. struct appdata { float4vertex : 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; };
- 64.
- 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(appdatav) { 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); }
- 69.
- 70.
- 71.
- 72. fixed4 frag(v2f i): SV_Target { return tex2D(_MainTex, i.uv); } tex2Dでテクセルをゲット tex2DはGPUに直結 ここにシェーダの神秘がある
- 73.
- 74.
- 75.
- 76.
- 77.
- 78.
- 80.
- 81.
- 82.
- 83. カメラの前方ベクトル シェーダまめ知識 float3 forward =-UNITY_MATRIX_V._m20_m21_m22; ビュー行列
- 84.
- 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
- 91.
- 92. uvにワールド座標(x, z)を入れる (-728, 1041) (235,1021) (-549, 103) (346, 124)
- 94.
- 95.
- 96.
- 97.
- 98.
- 99.
- 100.
- 101.
- 102.
- 103.
- 104.
- 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は別に定義
- 106.
- 107.
- 108.
- 109.
- 110.
- 111.
- 112.
- 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は 隣の３つの情報も使う！
- 116.
- 117.
- 118.
- 119.
- 120.
- 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 の神秘 fixed4frag(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 の神秘 fixed4frag(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 の神秘 fixed4frag(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 の神秘 fixed4frag(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.
- 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 cd) I = ( 1 0 0 1) = ( a b c d) −1 = 1 ad − bc ( d −b −c a )M−1 行列単位行列 行列 の逆行列M−1 M MI
- 136.
- 137.
- 138.
- 139. プログラマブルシェーダで出来ないこと • アルファブレンディング • 点・線の描画 •頂点の生成（ジオメトリシェーダ、テセレーション） • 描画順の指定 • FrustomCulling抑制 • テクスチャサンプリング方式の変更 • トポロジ（三角形の構成）変更
- 140.
- 141.
- 142. ・頂点列 ・三角形列 頂点座標 法線 UV 頂点座標 法線 UV 頂点座標 法線 UV 頂点座標 法線 UV 0 1 2 0 1 23 2 1 3 4 5 6 6 5 7 5 0 7 7 0 2 1 4 3 3 4 6 ところで この立方体の頂点数はいくつ？
- 143. struct appdata { float4vertex : 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 23 2 1 3 4 5 6 6 5 7 5 0 7 7 0 2 1 4 3 3 4 6 ハードエッジは法線が分かれるので24頂点
- 145.
- 146.
- 147. モデル行列の各部の意味 Rotation & Scale 1 0 0 01 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 0a 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 bilineartrilinear
- 153.
- 154.