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

3.6K Views

February 26, 19

スライド概要

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

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

profile-image

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

シェア

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

各ページのテキスト
1.

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

2.

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

3.

理解 とは?

4.

理解 とは? 境界 の把握

5.

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

6.

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

8.

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

9.

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

10.

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

11.

8ステップで描画する

12.

ステップ1 3Dモデルを準備 ステップ2 Transformの値を4x4行列に変換 ステップ3 頂点ごとに描画位置を算出 ステップ4 表裏を調べ、裏なら描画しない ステップ5 描画点を確定 ステップ6 描画点をデプスバッファと比較 ステップ7 描画点に打つべき色を確定 ステップ8 点を打つ

13.

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

14.

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

15.

ステップ1

16.

ステップ1 3Dモデルを準備

17.

ステップ2

18.

Transformの値を4x4行列に変換 Rotation & Scale 固定 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 モデル行列という Position ステップ2

19.

ステップ3

20.

ステップ3 頂点ごとに描画位置を算出 モデル行列 1 0 0 0 カメラ情報 0 1 0 0 0 0 1 0 0 0 0 1

21.

ステップ4

22.

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

23.

ステップ5

24.

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

25.

ステップ6

26.

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

27.

ステップ7

28.

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

29.

ステップ8

30.

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

31.

ステップ1 3Dモデルを準備 ステップ2 Transformの値を4x4行列に変換 ステップ3 頂点ごとに描画位置を算出 ステップ4 表裏を調べ、裏なら描画しない ステップ5 描画点を確定 ステップ6 描画点をデプスバッファと比較 ステップ7 描画点に打つべき色を確定 ステップ8 点を打つ

32.

CPU GPU ステップ1 3Dモデルを準備 ステップ2 Transformの値を4x4行列に変換 ステップ3 頂点ごとに描画位置を算出 ステップ4 表裏を調べ、裏なら描画しない ステップ5 描画点を確定 ステップ6 描画点をデプスバッファと比較 ステップ7 描画点に打つべき色を確定 ステップ8 点を打つ

33.

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

34.

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

35.

線を引きたい

36.

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

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 ステップ1 3Dモデルを準備 ステップ2 Transformの値を4x4行列に変換 ステップ3 頂点ごとに描画位置を算出 頂点シェーダ ステップ4 表裏を調べ、裏なら描画しない ステップ6 描画点をデプスバッファと比較 ステップ7 フラグメント 描画点に打つべき色を確定 シェーダ ステップ8 点を打つ ステップ8で対応が必要 ステップ5 描画点を確定

42.

半透明に必要な計算例 + 2 =

43.

計算にはすでに打ってある色が必要 フラグメント シェーダの出力 + 2 = 打つべき色

44.

半透明はBlend で設定可能 Shader "Custom/minimum" { SubShader { Tags { "RenderType"="Transparent" } Blend SrcAlpha OneMinusSrcAlpha Pass { CGPROGRAM #pragma vertex vert #pragma fragment frag #include "UnityCG.cginc" … プログラマブルではない 演算は書けない ステップ8に対する設定 ピクセルごとに変えられない

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.

頂点シェーダ 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; } フラグメントシェーダ fixed4 frag(v2f i) : SV_Target { return tex2D(_MainTex, i.uv); } たいてい 同じことを書く たいてい フクザツになる Unityからのプレゼント 省略しても 生成してくれる 楽な記述で 生成してくれる

69.

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

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.

無限平面を作ろう

80.

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

81.

1.0の四角形を準備する 1.0

82.

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

83.

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

84.

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

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)

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 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.

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

111.

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

112.

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

113.
[beta]
本当に同時に実行される

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.
[beta]
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;
}

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

115.
[beta]
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は
隣の3つの情報も使う!

116.

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

117.

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

118.

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

119.

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

120.

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

121.
[beta]
対処:適切な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.
[beta]
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.
[beta]
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.
[beta]
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.
[beta]
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.

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)); }

130.

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

131.
[beta]
GPUを扱うときの心構え

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;
}

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

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/158bab01cfff3c39214b [Unity] CGに使用される行列についての考察 https://qiita.com/yuji_yasuhara/private/8d63455d1d277af4c270

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.

おしまい