はじめようShader Graph: クロマキー処理

36.3K Views

March 25, 22

スライド概要

2022/03/25に開催したハンズオン資料

profile-image

可視化技術や人間計測/空間計測技術を活用した問題解決に関する研究開発。 ARコンテンツ作成勉強会(AR_Fukuoka)を主催。

シェア

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

各ページのテキスト
1.

はじめようShader Graph クロマキー処理

2.

⾃⼰紹介 ⽒名︓吉永崇(@Taka_Yoshinaga) 専⾨︓ARを⽤いた医療⽀援や運動計測 Volumetric Video コミュニティ︓ARコンテンツ作成勉強会 主催

3.

ARコンテンツ作成勉強会の紹介 p 2013年5⽉に勉強会をスタート。 p ARコンテンツの作り⽅をハンズオン形式で学ぶ p ⼈数は5~10名程度の少⼈数で実施 p 参加条件はAR/VRに興味がある⼈(知識不要) p 各地で開催 (福岡、熊本、宮崎、⻑崎、⼤分、 ⿅児島、⼭⼝、広島、札幌、関東)

4.

Twitterと勉強会ページで情報を発信しています @AR_Fukuoka Googleで「AR勉強会」で検索

5.

ハッシュタグ #AR_Fukuoka

6.

今⽇のゴール クロマキー処理を例にShaderGraphを使ってみる https://youtu.be/5E2Z41U01_8

7.

演習⽤素材のダウンロード https://github.com/TakashiYoshinaga/ARFukuoka/raw/main/20220325_ShaderGra ph/Sample.zip

8.

Unity Hub起動 Unity Hub

9.

プロジェクトの作成 (1/6) ①Projects ②New Project

10.

プロジェクトの作成 (2/6) ここをクリック

11.

プロジェクトの作成 (3/6) 2021.2.x

12.

プロジェクトの作成 (4/6) 3D

13.

プロジェクトの作成 (5/6) プロジェクト名(例: ShaderTest) 保存場所 Create Project

14.

プロジェクトの作成 (6/6) Unity Editorが起動すればOK

15.

オブジェクトを追加してみる (1/3) 右クリック

16.

オブジェクトを追加してみる (2/3) 3D Object Quad

17.

オブジェクトを追加してみる (3/3) 何か追加されてる

18.

作業しやすいようにSceneの視点を変更 (1/3) 何もないところをクリック

19.

作業しやすいようにSceneの視点を変更 (2/3) Alt/option + ドラッグで回転

20.

作業しやすいようにSceneの視点を変更 (3/3) ⽩い板が⾒えるアングル

21.

動作確認 Playボタン

22.

動作確認 ⽩い板が出ればOK

23.

動作確認を終了する 再度Playボタンをクリック ※⻘くなければOK

24.

Play時に表⽰される情報 カメラから⾒た3D空間 =最終的な画⾯出⼒

25.

カメラの位置を調整 ①Main Camera ②Position 0 0 -1.2

26.

動作確認 Gameタブ ※動きの無いコンテンツならPlayを押さずに Gameタブでも確認可能

27.

動作確認 板がさっきより近く(≒⼤きく)表⽰される

28.

表⽰オブジェクトの向きを変更 (1/4) Sceneタブ

29.

表⽰オブジェクトの向きを変更 (2/4) ①Quad ②Rotation 0 20 0

30.

表⽰オブジェクトの向きを変更 (3/4) Game

31.

表⽰オブジェクトの向きを変更 (4/4) ちょっと傾く

32.

⾊を変更 (1/9) Sceneタブ

33.

⾊を変更 (2/9) Assetsフォルダ 空⽩を右クリック

34.

⾊を変更 (3/9) Create Material

35.

⾊を変更 (4/9) New MaterialができればOK Unityでは⾊や質感などを記述したMaterialファイルを 作成し、オブジェクトに適⽤することで⾒た⽬を変える

36.

⾊を変更 (5/9) Quad MeshRenderer Materialsを開く

37.

⾊を変更 (6/9) Default Materialsと書かれた エリアにドラッグ&ドロップ New Material

38.

⾊を変更 (7/9) New Materialを開く

39.

⾊を変更 (8/9) Albedoの横の□

40.

⾊を変更 (9/9) ⾊を⾃由に設定

41.

現状のまとめ 設定項⽬ p カメラの位置や向き p オブジェクトの位置・⾓度・⾊など p 光源の位置・向き・強さ 出⼒画⾯ p 然るべき位置や⼤きさで オブジェクトが描かれる この処理をShaderが担当

42.

Shaderによる描画処理の概要 例︓緑⾊に着⾊したQuadを描画する場合 P2 P1 P4 P3 Vertex Shader ラスタライザ Fragment Shader in: 頂点座標(3D) out: 画⾯座標(2D) ⾯として塗りつぶす ピクセル情報を決定 描画すべきピクセル に⾊を割り当てる

43.

Vertex Shaderの操作でできることの例 P2 P1 P4 P3 Vertex Shader in: 頂点座標(3D) out: 画⾯座標(2D) 2D変換前に頂点を操作してオブジェクトを変形

44.

Fragment Shaderの操作でできることの例 Fragment Shader 描画すべきピクセル に⾊を割り当てる 2D変換後の⾊設定や表⽰・⾮表⽰箇所を操作

45.

今回のクロマキー処理は︖ 画像や動画を貼った板を作成 緑の領域を画⾯から消す Fragment Shaderで2D変換後の緑のピクセルを消す︕

46.

次に⾏く前に現状を保存 Ctrl/command + S

47.

サンプル画像のインポート Sampleフォルダ photoとvideoを Assetsにドラッグ&ドロップ

48.

ShaderGraphのインポート (1/5) Window PackageManager

49.

ShaderGraphのインポート (2/5) Packagas:in Project の横の▼をクリック

50.

ShaderGraphのインポート (3/5) Unity Registry

51.

ShaderGraphのインポート (4/5) Shaderで検索

52.

ShaderGraphのインポート (5/5) Shader Graph Install

53.

ShaderGraphの作成 (1/3) Assets内の空⽩を右クリック

54.

ShaderGraphの作成 (2/3) ④Unlit Shader Graph ③BuiltIn ②ShaderGraph ①Create

55.

ShaderGraphの作成 (3/3) New ShaderができればOK

56.

ShaderGraphの表⽰ (1/8) New Shaderをダブルクリック

57.

ShaderGraphの表⽰ (2/8) New Shader Graph

58.

ShaderGraphの表⽰ (3/8) ⾊々表⽰されて⾒づらい

59.

ShaderGraphの表⽰ (4/8) Unity EditorやShader Graphタブをできるだけ横に広げる

60.

ShaderGraphの表⽰ (5/8) 今のところ使⽤しない表⽰エリアを⾮表⽰にする Backboard Graph Inspector Main Preview

61.

ShaderGraphの表⽰ (6/8) ノードが表⽰される

62.

ShaderGraphの表⽰ (7/8) マウススクロールでズームイン/アウト Alt/Option + ドラッグで移動

63.

ShaderGraphの表⽰ (8/8) Vertex Shader オブジェクトの頂点の [位置][法線][接線] を設定 Fragment Shader 各ピクセルに割り当てる ⾊を設定

64.

Shaderによる描画処理の概要 例︓緑⾊に着⾊したQuadを描画する場合 P2 P1 P4 P3 Vertex Shader ラスタライザ Fragment Shader in: 頂点座標(3D) out: 画⾯座標(2D) ⾯として塗りつぶす ピクセル情報を決定 描画すべきピクセル に⾊を割り当てる

65.

ShaderGraphのデフォルト設定 Vertex Shader オブジェクトの頂点の [位置][法線][接線] を設定 Fragment Shader 各ピクセルに割り当てる ⾊を設定

66.

ShaderGraphで⾊の設定 (1/6) ここをクリック 先ほどと異なる ⾊を選択

67.

ShaderGraphで⾊の設定 (2/6) Shader Graphでの変更を反映させるため必ずセーブすること Save Asset

68.

ShaderGraphで⾊の設定 (3/6) ①Scene ②Quad

69.

ShaderGraphで⾊の設定 (4/6) New Material直下、 Shaderのドロップダウンを開く

70.

ShaderGraphで⾊の設定 (5/6) シェーダーをStandardから今回作ったものに差し替える New Shader Graph ShaderGraphs

71.

ShaderGraphで⾊の設定 (6/6) ⾊が変わるはず

72.

次に⾏く前に現状を保存 Ctrl/command + S

73.

補⾜︓テクスチャエラー エラーになる場合がある ShaderGraphは基本的にURPやHDRPで使⽤され、 今回使⽤しているBuilt-In RPは試験的に提供

74.

補⾜︓テクスチャエラー Assetsを右クリック

75.

補⾜︓テクスチャエラー Reimport All

76.

Unity Editorが再起動したら ハンズオン再開

77.

画像を表⽰ (1/12) New Shader Graph

78.

画像を表⽰ (2/12) 空⽩を右クリック

79.

画像を表⽰ (3/12) Create Node

80.

画像を表⽰ (4/12) Create Nodeウィンドウ

81.

画像を表⽰ (5/12) Input → Texture → Sample Texture 2D

82.

画像を表⽰ (6/12) Sample Texture 2Dノード

83.

画像を表⽰ (7/12) をクリック

84.

画像を表⽰ (8/12) photoを選択

85.

画像を表⽰ (9/12) 画像がプレビュー領域に表⽰される

86.

画像を表⽰ (10/12) RGBA(4)の横の◯をドラッグ FragmentのBaseColor(3)に接続

87.

画像を表⽰ (11/12) Save Asset

88.

画像を表⽰ (12/12) Scene テクスチャが割り当てられる

89.

Sample 2D Textureの処理 p Fragmentシェーダーは表⽰オブジェクトの画⾯の上のピクセル毎の処理 p オブジェクトのUV座標(0~1で表現)に対応するテクスチャ画像のピクセル をサンプリングし、画⾯上のピクセルを塗りつぶす U 0,0 U 1,0 0.5, 0.5 0.5, 0.5 V 0,1 V 0,1 1,0

90.

アスペクト⽐を整える (1/2) ①Quad ②Scale 1,0.55, 1 (⼤体の値です)

91.

アスペクト⽐を整える (2/2) 元の画像と同じくらいのアスペクト⽐ この後、緑を除去する

92.

HSV⾊空間を⽤いたクロマキー処理 RGB 【やりたいこと】 p 緑⾊の領域とそれ以外を分離 (=⼆値化) 【問題点】 p ⾊情報はRGBの組み合わせで表現されている p RGBでは⾊の境⽬を直線的に引くことが困難 【解決策】 HSV p ⾊空間としてHSVを使⽤する p H(Hue)は⾊相で0~360°で表現される p S(Saturation)は彩度、0~100%で表現。 値が⼤きいほうがその⾊の鮮やかさが強い。 p V(Value)は明度、 0~100%で表現。 値が⼤きいほど明るい 主にHueの値で緑領域(≒120°)を分離

93.

RGB→HSV変換 (1/7) New Shader Graph

94.

RGB→HSV変換 (2/7) 空⽩を右クリック

95.

RGB→HSV変換 (3/7) Create Node

96.

RGB→HSV変換 (4/7) colorspaceで検索 Colorspace Conversion

97.

RGB→HSV変換 (5/7) RGB → HSV

98.

RGB→HSV変換 (6/7) RGBA(4)とIn(3)を接続

99.

RGB→HSV変換 (7/7) HSVの値がRGBに割り当て られているので⾒た⽬が変わる

100.

Hueの分離 (1/6) ColorSpace Conversion Outからコネクタを引っ張り 何もないところで離す

101.

Hueの分離 (2/6) Splitで検索 Splitをクリック

102.

Hueの分離 (3/6) Outの意味 R⇨H G⇨S B⇨V

103.

Hueの分離 (4/6) Split R(1)からコネクタを引っ張り 何もないところで離す

104.

Hueの分離 (5/6) Create Nodeウィンドウにて previewで検索 Preview: In(1)

105.

Hueの分離 (6/6) Hの値の⼤⼩が濃淡で表⽰

106.

HueとGrayスケールの対応付 HSV Gray 360 0 1 0 0~360を0~1に変換して⿊(0)~⽩(1)で表現

107.

緑の領域を抽出 HSV Gray 360 120 0 1 0.333 0 緑に相当する120°周辺の領域、つまりGrayScaleの0.333周辺を抽出

108.

背景の分離 (1/7) Preview Out(1)からコネクタを引っ張り、 何もない所で離す

109.

背景の分離 (2/7) Create Nodeウィンドウが現れる

110.

背景の分離 (3/7) Colormaskで検索 ColorMask: In(3)

111.

背景の分離 (4/7) ColorMaskが追加される

112.

背景の分離 (5/7) Rangeに0.2を代⼊ 次⾴で指定する⾊に対して幅をもたせる

113.

背景の分離 (6/7) Mask Colorを選択

114.

背景の分離 (7/7) RGB 0-1.0 Preview内の背景と同じ位の濃さ (R:0.333, G: 0.333, B: 0.333) 背景が選択されたら(=⽩)OK

115.

透過処理 (1/9) Fragment 右クリック

116.

透過処理 (2/9) Add Block Node

117.

透過処理 (3/9) Alpha

118.

透過処理 (4/9) Out(1)とFragment内の Alphaを接続

119.

透過処理 (5/9) Graph Inspector

120.

透過処理 (6/9) Graph Settings Custom Editorをオン

121.

透過処理 (7/9) Graph Inspectorを クリックして⾮表⽰

122.

透過処理 (8/9) Save Asset

123.

透過処理 (9/9) Scene ⿊い画素が⾮表⽰

124.

マスク画像の反転 (1/6) New Shader Graph

125.

マスク画像の反転 (2/6) Color Mask Out(1)からコネクタを引っ張り、 何もない所で離す

126.

マスク画像の反転 (3/6) Create Nodeウィンドウ表⽰

127.

マスク画像の反転 (4/6) oneで検索 One Minus: In(1)

128.

マスク画像の反転 (5/6) One Minus One MinusとFragmentの Alpha(1)を接続

129.

マスク画像の反転 (6/6) Save Asset

130.

確認 Scene ロボットのみが表⽰される

131.

問題点 Hueのみのフィルタリングでは不⼗分

132.

問題点 p 同じHueの値でもSaturation (彩度)の値によって⾊が濃かったり 薄かったりする。 0 p 背景の分離には⾊味がしっかり している領域だけ使えば良い Sat u ra tion 1 Saturationの値を指定した値に 対する⼤⼩で分離すればOK

133.

Saturationの値を使⽤ (1/11) NewShaderGraph Splitに注⽬

134.

Saturationの値を使⽤ (2/11) G(1)からコネクタを引っ張り、 何もない所で離す

135.

Saturationの値を使⽤ (3/11) Create Nodeウィンドウ表⽰

136.

Saturationの値を使⽤ (4/11) previewで検索 Preview: In(1)

137.

Saturationの値を使⽤ (5/11) 彩度の⼤⼩が濃淡で表⽰される

138.

Saturationの値を使⽤ (6/11) Out(1)からコネクタを引っ張り、 何もない所で離す

139.

Saturationの値を使⽤ (7/11) Create Nodeウィンドウ表⽰

140.

Saturationの値を使⽤ (8/11) stepで検索 Step: In(1)

141.

Saturationの値を使⽤ (9/11) Stepが追加される

142.

Saturationの値を使⽤ (10/11) Edgeに0.4を代⼊ 0.4に対する⼤⼩⽐較を⾏いニ値化

143.

Saturationの値を使⽤ (11/11) 0.4以上の画素が⽩

144.

⼆値化結果の反転 OneMinusノードを追加

145.

マスク画像の合成 (1/7) 右クリック

146.

マスク画像の合成 (2/7) Create Nodeウィンドウにて addで検索 Add

147.

マスク画像の合成 (3/7)

148.

マスク画像の合成 (4/7) AddのA(1)に接続

149.

マスク画像の合成 (5/7) AddのB(1)に接続

150.

マスク画像の合成 (6/7) AddのOut(1)と FragmentのAlphaを接続

151.

マスク画像の合成 (7/7) 各ピクセルの値を加算しているので Addの結果は0~2の値となる。 0~1で正規化した画像を使用したい 場合はもう一手間必要。(今回は不要)

152.

ノード全体

153.

確認 Save Asset

154.

確認 ある程度⽳が埋まる

155.

動画に対応 (1/10) 空⽩を右クリック

156.

動画に対応 (2/10) Create Empty

157.

動画に対応 (3/10) Game Object 名前をVideoPlayerに変更

158.

動画に対応 (4/10) Add Component

159.

動画に対応 (5/10) video Vdeo Player

160.

動画に対応 (6/10) Video Player内の Video Clipを⾒つけておく videoを⾒つけておく

161.

動画に対応 (7/10) videoをVideo Clip横の ボックスにドラッグ&ドロップ

162.

動画に対応 (8/10) こんな感じ LoopをOn

163.

動画に対応 (9/10) RenderModeを Material Overrideに変更 表⽰⽤のQuadを登録 (次⾴で解説)

164.

動画に対応 (10/10) Quad QuadをRenderer横の ボックスにドラッグ&ドロップ

165.

次に⾏く前に現状を保存 Ctrl/command + S

166.

動作確認 Play

167.

動作確認 ちゃんと動画にも対応

168.

動作確認 再度Playをクリックして停⽌

169.

地⾯を作る 空⽩を右クリック 3D Object Plane

170.

地⾯を作る Plane 移動モード 緑の軸をドラッグ

171.

地⾯を作る Alpha Clipを使った場合は、特に何もしなくても クロマキー処理後の影が表⽰される

172.

完成