【Unity道場 2月】シェーダを書けるプログラマになろう

48.4K Views

February 26, 19

#gpu #unity #unity3d #shader #unity道場 #unitydojo #unity道場 2月~シェーダを書けるプログラマになろう~ #Unity #Shader #Graphics Programming #Rendering #Japanese Presentation

スライド概要

2019/2/25に開催されたUnity道場 2月~シェーダを書けるプログラマになろう~の講演スライドです。
講師：安原祐二（ユニティ・テクノロジーズ・ジャパン合同会社）

Unityのイベント資料はこちらから：https://www.slideshare.net/UnityTechnologiesJapan/clipboards

Unity Technologies Japan

@UnityJapan

スライド一覧

リアルタイム3Dコンテンツを制作・運用するための世界的にリードするプラットフォームである「Unity」の日本国内における販売、サポート、コミュニティ活動、研究開発、教育支援を行っています。ゲーム開発者からアーティスト、建築家、自動車デザイナー、映画製作者など、さまざまなクリエイターがUnityを使い想像力を発揮しています。

またはPlayer版

埋め込む »CMSなどでJSが使えない場合

ダウンロード

ダウンロード(pdf - 70.11MB)

関連スライド

UnityのVR開発環境の現状整理 2022

unity unitysync

Unity Technologies Japan 157.6K

UIもshaderで盛る！〜 shaderとanimationで作るリッチなUI演出

unity unitysync

Unity Technologies Japan 116.2K

オープンソース自動運転シミュレーター「AWSIM」のご紹介と実装事例

unity unitysync

Unity Technologies Japan 83.2K

トゥーンシェーダー応用編～楽して破綻のないアウトラインを目指して～

unity unitysync

Unity Technologies Japan 76.8K

モバイル向け大量描画テクニック

unity unitysync

Unity Technologies Japan 71K

UnityとMATLABで実現する自律ロボティクスシミュレーション

unity unitysync

Unity Technologies Japan 45K

各ページのテキスト

シェーダを書けるプログラマになろうユニティ・テクノロジーズ・ジャパン安原祐二

Part I シェーダを理解しよう

理解とは？

理解とは？境界の把握

〜〇〇を理解したい〜それができるできるできるできないことは何か？できるできるできる

〜〇〇を理解したい〜それができないことは何か？できないできないできるできるできるできるできるできるできないできるできるできないできないできるできないできるできるできるできないできないできないできない

こんなことにも使えるよ！・・・という話はまたこんど

道具の特徴を抑えて持ち手接合部刃紙が切れる理由を知ろう

10.

Part I シェーダを理解しよう

11.

８ステップで描画する

12.

ステップ１ 3Dモデルを準備ステップ２ Transformの値を4x4行列に変換ステップ３頂点ごとに描画位置を算出ステップ４表裏を調べ、裏なら描画しないステップ５描画点を確定ステップ６描画点をデプスバッファと比較ステップ７描画点に打つべき色を確定ステップ８点を打つ

13.

シェーダとは頂点シェーダフラグメントシェーダ GPU搭載の基本シェーダはこのふたつ

14.

描画とはモニタ上の画素に色付きの点を打つこと

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.

ステップ４

22.

ステップ４表裏を調べ、裏なら描画しない３点そろったら

23.

ステップ５

24.

ステップ５描画点を確定ピクセルの中心が三角形の内側にあるかどうか

25.

ステップ６

26.

ステップ６描画点を深度バッファと比較描画済みの点が手前にあるなら描画しない深度バッファ ※GPUごとに実装が異なります

27.

ステップ７

28.

ステップ７描画点に打つべき色を確定テクスチャ、ライティング、シャドウ、フォグなどなど考慮

29.

ステップ８

30.

ステップ８点を打つブレンド関数を指定可深度バッファも更新

31.

32.

CPU GPU ステップ１ 3Dモデルを準備ステップ２ Transformの値を4x4行列に変換ステップ３頂点ごとに描画位置を算出ステップ４表裏を調べ、裏なら描画しないステップ５描画点を確定ステップ６描画点をデプスバッファと比較ステップ７描画点に打つべき色を確定ステップ８点を打つ

33.

CPU GPU ステップ１ 3Dモデルを準備ステップ２ Transformの値を4x4行列に変換ステップ３頂点ごとに描画位置を算出頂点シェーダステップ４表裏を調べ、裏なら描画しないステップ５描画点を確定ステップ６描画点をデプスバッファと比較ステップ７フラグメント描画点に打つべき色を確定シェーダステップ８点を打つ

34.

シェーダで対応できない例

35.

線を引きたい

36.

CPU GPU ステップ１ 3Dモデルを準備ステップ２ Transformの値を4x4行列に変換ステップ３頂点ごとに描画位置を算出頂点シェーダステップ４表裏を調べ、裏なら描画しないステップ６描画点をデプスバッファと比較ステップ７フラグメント描画点に打つべき色を確定シェーダステップ８点を打つステップ１で対応が必要ステップ５描画点を確定

37.

3Dモデル(Mesh)の構造

38.

・頂点列頂点座標頂点座標頂点座標頂点座標法線法線法線法線 UV UV UV UV 0 1 ・三角形列 0 2 4 6 5 7 1 3 1 1 5 5 0 0 4 4 2 3 6 7 7 2 3 6 線を引くには線分用のデータが必要 2 3

39.

シェーダで対応できない例

40.

半透明描画をしたい窓ガラス

41.

CPU GPU ステップ１ 3Dモデルを準備ステップ２ Transformの値を4x4行列に変換ステップ３頂点ごとに描画位置を算出頂点シェーダステップ４表裏を調べ、裏なら描画しないステップ６描画点をデプスバッファと比較ステップ７フラグメント描画点に打つべき色を確定シェーダステップ８点を打つステップ８で対応が必要ステップ５描画点を確定

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.

[beta]

最小のシェーダ

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.

[beta]

最小のシェーダ

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.

[beta]

最小のシェーダ

Shader "Custom/minimum" {
SubShader {
Tags { "RenderType"="Opaque" }
Pass {
CGPROGRAM
#pragma vertex vert
#pragma fragment frag
#include "UnityCG.cginc"

Unityが用意している
便利な記述
様々な設定が可能

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.

[beta]

最小のシェーダ

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に扱い方を伝える

56.

補間ここが96ならここが28でこのへんは71.3 途中の値を算出する GPUががんばる

57.

テクスチャマッピングの例

58.

テクスチャマッピングのシェーダ 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); }

59.

uvはテクスチャ座標 uvはテクスチャ座標 uvを渡すテクセルを拾う 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); }

60.

頂点シェーダの出力 v2f v2f v2f

61.

頂点シェーダの出力補間 v2f v2f v2f フラグメントシェーダの入力 v2f

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.

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; } 補間されたUV座標でテクスチャから色を得る fixed4 frag(v2f i) : SV_Target { return tex2D(_MainTex, i.uv); }

64.

ところでサーフェスシェーダ(surface shader) ってなんなの？

65.

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.

68.

サーフェスシェーダ(surface shader)は頂点シェーダ 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); } たいてい同じことを書くたいていフクザツになる Unityからのプレゼント省略しても生成してくれる楽な記述で生成してくれる

69.

CPU GPU ステップ１ 3Dモデルを準備ステップ２ Transformの値を4x4行列に変換ステップ３頂点ごとに描画位置を算出頂点シェーダステップ４表裏を調べ、裏なら描画しない設定変更可ステップ５描画点を確定ステップ６描画点をデプスバッファと比較設定変更可ステップ７フラグメント描画点に打つべき色を確定シェーダステップ８点を打つ設定変更可

70.

休憩

71.

Part II GPUの神秘

72.

tex2Dでテクセルをゲット fixed4 frag(v2f i) : SV_Target { return tex2D(_MainTex, i.uv); } tex2DはGPUに直結ここにシェーダの神秘がある

73.

一般論テクスチャは縮小に課題あり

74.

品質の低下ちらつき

75.

ORIGINAL NEAREST

76.

高度な縮小は時間がかかる ORIGINAL KAISER NEAREST BICUBIC BOX HAMMING

77.

高度な縮小はシェーダでは使えない tex2D(_MainTex, i.uv) UVが大きく動くとテクセルを飛ばしてしまう

78.

無限平面を作ろう

79.

80.

作戦カメラの視界に必ず入るように平面を作る頂点シェーダで計算

81.

1.0の四角形を準備する 1.0

82.

カメラの座標カメラの前方ベクトル 1.0 vertexシェーダで頂点を拡大・移動

83.

シェーダまめ知識カメラの前方ベクトル float3 forward = -UNITY_MATRIX_V._m20_m21_m22; ビュー行列

84.

uvにワールド座標を入れちゃう

85.

86.

テクスチャ座標 (0, 1) (1, 1) (0, 0) (1, 0) 画像のサイズに関わらずテクスチャ座標は [0, 1]

87.

テクスチャ座標が[0, 1]の範囲外の場合 (0, 1) (0, 2) (1, 1) ？ 2.0 (2, 2) ？？ (0, 0) (1, 0) (0, 0) (2, 0)

88.

(0, 2) tex2D(1.5, 1.5) は何を返すのか？？ 2.0 (2, 2) ？？ (0, 0) (2, 0)

89.

(0, 2) tex2D(1.5, 1.5) は何を返すのか？？ 2.0 (2, 2) ？？ tex2D(0.5, 0.5) の値を返す (0, 0) (2, 0)

90.

テクスチャ座標が[0, 1]の範囲外の場合 (0, 1) (0, 2) (1, 1) (2, 2) 2.0 (0, 0) (1, 0) (0, 0) (2, 0)

91.

[0.0, 1.0]範囲外のuvの扱い Repeat テクスチャのインポート設定で tex2Dの動作を変えられる Clamp

92.

uvにワールド座標(x, z)を入れる (235, 1021) (-728, 1041) (346, 124) (-549, 103)

93.

94.

キレイに縮小されている不思議ミップマップ(mipmap)の効果

95.

テクスチャインポート時に高度な縮小を作成 mipmap生成時間がかかっても良い

96.

縮小済みのテクスチャが使用される

97.

ミップマップありミップマップなし

98.

ミップマップありミップマップなし

99.

mipmap生成を指定するだけシェーダはtex2Dを呼んでいるだけそれでも mipmapレベルが選ばれる・・・

100.

mipmap生成を指定するだけシェーダはtex2Dを呼んでいるだけそれでも mipmapレベルが選ばれる・・・疑問 tex2Dはどうやって mipmapレベルを選択しているのか？

101.

それはさておき

102.

繰り返しが気になる

103.

単位範囲ごとに uv座標をずらしてみる

104.

uvをずらす

105.

[beta]

コード例
fixed4 frag(v2f i) : SV_Target
{
float4 oﬀ = hash4fast(floor(i.uv));
oﬀ.zw = oﬀ.zw >= float2(0.5, 0.5) ?
float2(1, 1) : float2(-1, -1);
float2 fuv = frac(i.uv);
float2 uv = fuv * oﬀ.zw + oﬀ.xy;
fixed4 col = tex2D(_MainTex, uv);
UNITY_APPLY_FOG(i.fogCoord, col);
return col;
}
※hash4fastは別に定義

106.

不連続が気になるかどうかはテクスチャ次第（意外と大丈夫だった）

107.

やや不連続が気になるテクスチャ

108.

チラつきが発生するいよいよシェーダの神秘へ

109.

チラつきの原因をわかりやすいテクスチャで比較

110.

チラつきの原因をわかりやすいテクスチャで比較間違ったmipmap 正しいmipmap

111.

ここで衝撃の事実フラグメントシェーダは必ず４ピクセル同時に実行している

112.

ここで衝撃の事実フラグメントシェーダは必ず４ピクセル同時に実行している実行単位の４ピクセル

113.

[beta]

本当に同時に実行される

fixed4 frag(v2f i) : SV_Target
{
float4 oﬀ = hash4fast(floor(i.uv));
oﬀ.zw = ((step(0.5, oﬀ.zw)) - 0.5) * 2;
float2 fuv = frac(i.uv);
float2 uv = fuv * oﬀ.zw + oﬀ.xy;
fixed4 col = tex2D(_MainTex, uv);
UNITY_APPLY_FOG(i.fogCoord, col);
return col;
}

fixed4 frag(v2f i) : SV_Target
{
float4 oﬀ = hash4fast(floor(i.uv));
oﬀ.zw = ((step(0.5, oﬀ.zw)) - 0.5) * 2;
float2 fuv = frac(i.uv);
float2 uv = fuv * oﬀ.zw + oﬀ.xy;
fixed4 col = tex2D(_MainTex, uv);
UNITY_APPLY_FOG(i.fogCoord, col);
return col;
}

fixed4 frag(v2f i) : SV_Target
{
float4 oﬀ = hash4fast(floor(i.uv));
oﬀ.zw = ((step(0.5, oﬀ.zw)) - 0.5) * 2;
float2 fuv = frac(i.uv);
float2 uv = fuv * oﬀ.zw + oﬀ.xy;
fixed4 col = tex2D(_MainTex, uv);
UNITY_APPLY_FOG(i.fogCoord, col);
return col;
}

fixed4 frag(v2f i) : SV_Target
{
float4 oﬀ = hash4fast(floor(i.uv));
oﬀ.zw = ((step(0.5, oﬀ.zw)) - 0.5) * 2;
float2 fuv = frac(i.uv);
float2 uv = fuv * oﬀ.zw + oﬀ.xy;
fixed4 col = tex2D(_MainTex, uv);
UNITY_APPLY_FOG(i.fogCoord, col);
return col;
}

114.

[beta]

fixed4 frag(v2f i) : SV_Target
{
float4 oﬀ = hash4fast(floor(i.uv));
oﬀ.zw = oﬀ.zw >= float2(0.5, 0.5) ?
float2(1, 1) : float2(-1, -1);
float2 fuv = frac(i.uv);
float2 uv = fuv * oﬀ.zw + oﬀ.xy;
fixed4 col = tex2D(_MainTex, uv);
UNITY_APPLY_FOG(i.fogCoord, col);
return col;
}

隣の３つも
同じ場所を実行

115.

[beta]

fixed4 frag(v2f i) : SV_Target
{
float4 oﬀ = hash4fast(floor(i.uv));
oﬀ.zw = oﬀ.zw >= float2(0.5, 0.5) ?
float2(1, 1) : float2(-1, -1);
float2 fuv = frac(i.uv);
float2 uv = fuv * oﬀ.zw + oﬀ.xy;
fixed4 col = tex2D(_MainTex, uv);
UNITY_APPLY_FOG(i.fogCoord, col);
return col;
}

tex2Dは
隣の３つの情報も使う！

116.

tex2D(_MainTex, uv) uv uv uv uv GPUは異なる４つのuv値を入手している

117.

tex2D(_MainTex, uv) uv uv uv uv GPUは異なる４つのuv値を入手している隣接ピクセルのuv値との差分を取れる uv値の飛び具合がわかる！

118.

再掲 mipmap生成を指定するだけ・・・シェーダはtex2Dを呼んでいるだけ・・・それでも mipmapレベルが選ばれる・・・疑問 tex2Dはどうやって mipmapレベルを選択しているのか？

119.

tex2D(_MainTex, uv) uv uv uv uv GPUは異なる４つのuv値を入手している隣で実行中の値を使って適切なmipmapを選ぶ

120.

チラつきが発生する uvを操作したので適切なmipmapが選ばれていない問題

121.

[beta]

対処：適切なuvを指定
fixed4 frag(v2f i) : SV_Target
{
float4 oﬀ = hash4fast(floor(i.uv));
oﬀ.zw = oﬀ.zw >= float2(0.5, 0.5) ?
float2(1, 1) : float2(-1, -1);
float2 fuv = frac(i.uv);
float2 uv = fuv * oﬀ.zw + oﬀ.xy;
float2 dx = ddx(i.uv) * oﬀ.zw;
float2 dy = ddy(i.uv) * oﬀ.zw;
fixed4 col = tex2Dgrad(_MainTex, uv, dx, dy);
UNITY_APPLY_FOG(i.fogCoord, col);
return col;
}

ddx, ddy で適切な傾きを得て tex2Dgradで指定

122.

完成！チラつきが消滅

123.

[beta]

ddx, ddy の神秘
fixed4 frag(v2f i) : SV_Target
{
float4 oﬀ = hash4fast(floor(i.uv));
oﬀ.zw = oﬀ.zw >= float2(0.5, 0.5) ?
float2(1, 1) : float2(-1, -1);
float2 fuv = frac(i.uv);
float2 uv = fuv * oﬀ.zw + oﬀ.xy;
float2 dx = ddx(i.uv) * oﬀ.zw;
float2 dy = ddy(i.uv) * oﬀ.zw;
fixed4 col = tex2Dgrad(_MainTex, uv, dx, dy);
UNITY_APPLY_FOG(i.fogCoord, col);
return col;
}

124.

[beta]

ddx, ddy の神秘
fixed4 frag(v2f i) : SV_Target
{
float4 oﬀ = hash4fast(floor(i.uv));
oﬀ.zw = oﬀ.zw >= float2(0.5, 0.5) ?
float2(1, 1) : float2(-1, -1);
float2 fuv = frac(i.uv);
float2 uv = fuv * oﬀ.zw + oﬀ.xy;
float2 dx = ddx(i.uv) * oﬀ.zw;
float2 dy = ddy(i.uv) * oﬀ.zw;
fixed4 col = tex2Dgrad(_MainTex, uv, dx, dy);
UNITY_APPLY_FOG(i.fogCoord, col);
return col;
}

125.

[beta]

ddx, ddy の神秘
fixed4 frag(v2f i) : SV_Target
{
float4 oﬀ = hash4fast(floor(i.uv));
oﬀ.zw = oﬀ.zw >= float2(0.5, 0.5) ?
float2(1, 1) : float2(-1, -1);
float2 fuv = frac(i.uv);
float2 uv = fuv * oﬀ.zw + oﬀ.xy;
float2 dx = ddx(i.uv) * oﬀ.zw;横の隣との差
float2 dy = ddy(i.uv) * oﬀ.zw;
fixed4 col = tex2Dgrad(_MainTex, uv, dx, dy);
UNITY_APPLY_FOG(i.fogCoord, col);
return col;
}

126.

[beta]

ddx, ddy の神秘
fixed4 frag(v2f i) : SV_Target
{
float4 oﬀ = hash4fast(floor(i.uv));
oﬀ.zw = oﬀ.zw >= float2(0.5, 0.5) ?
float2(1, 1) : float2(-1, -1);
float2 fuv = frac(i.uv);
float2 uv = fuv * oﬀ.zw + oﬀ.xy;
float2 dx = ddx(i.uv) * oﬀ.zw;
float2 dy = ddy(i.uv) * oﬀ.zw;縦の隣との差
fixed4 col = tex2Dgrad(_MainTex, uv, dx, dy);
UNITY_APPLY_FOG(i.fogCoord, col);
return col;
}

127.

fwidth(v)=abs(ddx(v)) + abs(ddy(v)) 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); }

128.

fwidth(v)=abs(ddx(v)) + abs(ddy(v)) fixed4 frag(v2f i) : SV_Target { fixed4 col = tex2D(_MainTex, i.uv); return lerp(col, fixed4(0,0,0,1), fwidth(col.a)); }

129.

130.

https://blogs.unity3d.com/jp/2019/02/14/procedural-stochastic-texturing-in-unity/

https://b

131.

[beta]

GPUを扱うときの心構え

fixed4 frag(v2f i) : SV_Target
{
float4 oﬀ = hash4fast(floor(i.uv));
oﬀ.zw = ((step(0.5, oﬀ.zw)) - 0.5) * 2;
float2 fuv = frac(i.uv);
float2 uv = fuv * oﬀ.zw + oﬀ.xy;
fixed4 col = tex2D(_MainTex, uv);
UNITY_APPLY_FOG(i.fogCoord, col);
return col;
}

fixed4 frag(v2f i) : SV_Target
{
float4 oﬀ = hash4fast(floor(i.uv));
oﬀ.zw = ((step(0.5, oﬀ.zw)) - 0.5) * 2;
float2 fuv = frac(i.uv);
float2 uv = fuv * oﬀ.zw + oﬀ.xy;
fixed4 col = tex2D(_MainTex, uv);
UNITY_APPLY_FOG(i.fogCoord, col);
return col;
}

fixed4 frag(v2f i) : SV_Target
{
float4 oﬀ = hash4fast(floor(i.uv));
oﬀ.zw = ((step(0.5, oﬀ.zw)) - 0.5) * 2;
float2 fuv = frac(i.uv);
float2 uv = fuv * oﬀ.zw + oﬀ.xy;
fixed4 col = tex2D(_MainTex, uv);
UNITY_APPLY_FOG(i.fogCoord, col);
return col;
}

fixed4 frag(v2f i) : SV_Target
{
float4 oﬀ = hash4fast(floor(i.uv));
oﬀ.zw = ((step(0.5, oﬀ.zw)) - 0.5) * 2;
float2 fuv = frac(i.uv);
float2 uv = fuv * oﬀ.zw + oﬀ.xy;
fixed4 col = tex2D(_MainTex, uv);
UNITY_APPLY_FOG(i.fogCoord, col);
return col;
}

同時に実行されることに想いを馳せる

132.

[beta]

シェーダは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.

1 a b d −b 1 0 a b −1= = M I= M= ( ) −c a (c d) ad − bc (0 1) (c d) −1 単位行列 I 行列 M 行列 M の逆行列 M −1

136.

おしまい

137.

詳しく解説したブログ記事 [Unity]無限平面を描画する過程でGPUの理解を深める https://qiita.com/yuji_yasuhara/private/158bab01cﬀf3c39214b [Unity] CGに使用される行列についての考察 https://qiita.com/yuji_yasuhara/private/8d63455d1d277af4c270

https://qiita.com/yuji

138.

ボツスライド集

139.

プログラマブルシェーダで出来ないこと • アルファブレンディング • 点・線の描画 • 頂点の生成（ジオメトリシェーダ、テセレーション） • 描画順の指定 • FrustomCulling抑制 • テクスチャサンプリング方式の変更 • トポロジ（三角形の構成）変更

140.

深度バッファで比較するということは奥の物体は手前の物体に塗りつぶされる手前のものを先に描画したい

141.

コックピットは最初に描画して効率UP ※GPUごとに特性が異なります描画順はRender Queue で指定

142.

ところで・頂点列頂点座標頂点座標頂点座標頂点座標法線法線法線法線 UV UV UV UV 0 1 ・三角形列 0 2 4 6 5 7 1 3 1 1 5 5 0 0 4 4 2 3 6 7 7 2 3 6 この立方体の頂点数はいくつ？ 2 3

143.

appdata に頂点情報 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; } 法線が異なれば頂点も別に必要

144.

・頂点列頂点座標頂点座標頂点座標頂点座標法線法線法線法線 UV UV UV UV 0 1 ・三角形列 0 2 4 6 5 7 1 3 1 1 5 5 0 0 4 4 2 3 6 7 7 2 3 6 ハードエッジは法線が分かれるので24頂点 2 3

145.

ただの補間ではない単なる二次元補間奥行が考慮された補間

146.

頂点シェーダのよくあるミス

147.

モデル行列の各部の意味 Rotation & Scale 固定 1 0 0 0 b 0 1 0 0 0 0 1 0 a b c 1 Position a c

148.

v2f vert(appdata v) { v2f o; o.vertex = UnityObjectToClipPos(v.vertex); o.uv = v.uv; return o; } UnityObjectToClipPosの中身： inline float4 UnityObjectToClipPos(in float3 pos) { return mul(UNITY_MATRIX_VP, mul(unity_ObjectToWorld, float4(pos, 1.0))); } これを自分で書いても良いが、この1.0を0.0にしたらアウト

149.

掛けるベクトルのw要素による結果の違い 1 0 0 0 1 0 0 0 0 1 0 0 0 1 0 0 0 0 1 0 0 0 1 0 a b c 1 px + a px py py + b = pz pz + c 1 1 a b c 1 px px py py = pz pz 0 0 Positionが加算される頂点ベクトルはw=1で計算 Positionが加算されない法線ベクトルはw=0で計算

150.

フラグメントシェーダのよくあるミス

151.

法線を渡すときは注意 v2f vert(appdata v) { v2f o; o.vertex = UnityObjectToClipPos(v.vertex); o.normal = UnityObjectToWorldNormal(v.normal); return o; } fixed4 frag(v2f i) : SV_Target { float3 n = normalize(i.normal); … 線形補間なので短くなってしまう normalizeが必要

152.

point sampling bilinear trilinear

153.

Kaiser Box ミップマップ作成アリゴリズム比較

154.

おしまい

【Unity道場 2月】シェーダを書けるプログラマになろう

Unity Technologies Japan

関連スライド

UnityのVR開発環境の現状整理 2022

UIもshaderで盛る！ 〜 shaderとanimationで作るリッチなUI演出

オープンソース自動運転シミュレーター「AWSIM」のご紹介と実装事例

トゥーンシェーダー応用編 ～楽して破綻のないアウトラインを目指して～

モバイル向け大量描画テクニック

UnityとMATLABで実現する自律ロボティクスシミュレーション

各ページのテキスト

UIもshaderで盛る！〜 shaderとanimationで作るリッチなUI演出

トゥーンシェーダー応用編～楽して破綻のないアウトラインを目指して～