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

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

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

• https://twitter.com/Taka_Yoshinaga

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

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

ハッシュタグ #AR_Fukuoka

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

• https://youtu.be/5E2Z41U01_8

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

• https://github.com/TakashiYoshinaga/AR-Fukuoka/raw/main/20220325_ShaderGraph/Sample.zip

Unity Hub起動 Unity Hub

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

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

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

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

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

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

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

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

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

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

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

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

動作確認 Playボタン

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

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

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

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

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

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

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

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

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

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

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

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

⾊を変更 (3/9) Create Material

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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°)を分離

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

透過処理 (3/9) Alpha

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

透過処理 (5/9) Graph Inspector

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

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

透過処理 (8/9) Save Asset

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ノード全体

確認 Save Asset

確認 ある程度⽳が埋まる

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

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

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

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

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

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

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

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

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

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

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

動作確認 Play

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

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

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

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

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

完成