Amplify Shader Editorを使ってスクリーンスペースでテクスチャを描画するマテリアルを作る

前提知識

Unityの基本的な操作ができ、マテリアル・シェーダーとは何かを知っている
「UVマップ」「UV座標系」などの言葉を聞いたことがある
Amplify Shader Editorで新しいシェーダーを作成し、マテリアルに設定する方法を知っている

この記事を特におすすめする読者

・セールで安くなっていたAmplify Shader Editorを買って触ってみたが、何ができるのかいまいちわからない
・ゲーム、映像、VRコンテンツで使えるシェーダーでの映像表現のサンプルを見てみたい
・モデリングやテクスチャ制作などの3DCG、3Dゲーム制作の経験はあるが、表現の幅をもっと広げたい
・シェーダーに興味があるが、HLSLのようなプログラミング言語は苦手だ

やりたいこと

この記事では、Unityシーン上のオブジェクトの向こう側に別の空間があるような効果を持ったマテリアルを作ります。
このような効果を持ったマテリアルを「シーンの3D空間を無視して、スクリーンスペース、つまり画面の2Dの座標系を基準としてテクスチャを表示するようなシェーダー」を作ることで実現しようと思います。

それだけでは見た目が物足りないので、テクスチャをスクロールさせたり、複数枚重ねて派手にしてみます。
今回作るものの最終的な見た目は以下のようになります

Amplify Shader Editorとは

Amplify Shader EditorはAmplify Creationsが提供するUnity向けアセットで、ノードベースでシェーダーを作る（記述する）ことができます。

UnityではHLSLという言語を使ってシェーダーを記述しますが、Amplify Shader Editorを使うと、ノード同士を繋いでいくことでHLSLでのコーディングを行わずにシェーダーを記述することができます。なお、ノードを繋いで作ったシェーダーはHLSLの形で出力されます。

Amplify Shader Editorを使ってみて、マスターノード（後述します）が多機能だと感じました。筆者はUnityのシェーダーを作成するのはほとんど初めてですが、このマスターノードだけでかなりのことができそうです。

ちなみに、Unityで利用できるシェーダーエディタとしてAmplify Shader Editorの他にUnity標準のShaderGraphやMITライセンスで配布されているShaderForgeが存在するようです。筆者はそれらを使ったことはありませんが、今後機会があれば記事にしてみたいと思います。

本題に入る前に少しお勉強

この記事で制作するシェーダーでは、基本的に「画面上のピクセルごとに処理を行う」というようなことを取り扱います。3DCGの描画の流れ（レンダリングパイプライン）の中で、このような処理をする部分をUnityでは「フラグメントシェーダー」と呼びます。同様のものをDirectXでは「ピクセルシェーダー」と呼ぶようです。

作業に入る前の前提

後述する作業手順に入る前に、以下の準備をしておいてください。これらは一般的な操作なので、各種マニュアルやブログ記事などを参照して行ってください。

・適当なバージョンのUnity Editorをインストールしておきます。本稿の例ではバージョン2022.3.31f1を使用します。
・Unityのプロジェクトを用意しておきます。本稿の例ではビルトインレンダーパイプラインを使用します。
・Unityのシーンとプロジェクトを開いてAmplify Shader Editorのアセットをインポートしておきます。本稿の例ではバージョン1.9.9.1を使用します

作業手順

Step1 シェーダーの表示確認のための準備

前置きが長くなってしまいましたが、作業にとりかかっていきましょう。
作成したシェーダーの表示を確認するため、適当なオブジェクトをシーンに配置します。Cubeでも良いですが、今回は2種類のマテリアルに分けたSuzanneをBlenderで作成してFBXエクスポートしたものを配置してみました。

シェーダーはマテリアルに割り当てることで利用します。例えばUnityでマテリアルを作成した際にはStandardシェーダーが設定されています。まずは動作確認用のマテリアルを作成します。
Assetウィンドウ上で右クリックするか、メニューバーのAssetsから Create > Material を選択します。

Assetに新規マテリアルが作成されました。任意のわかりやすい名前を付けます。今回はScreenspace Materialと命名しました。

作成したマテリアルをインスペクタで確認すると、ここにマテリアルに設定されたシェーダーが表示されています。作成したばかりのこのマテリアルでは Shader: Standard と表示されています。この先の手順でシェーダーを作成すると、作成したシェーダーをここのドロップダウンから選べるようになります。

次にシェーダーそのものを作成します。Assetウィンドウの右クリックかメニューバーのAssetsから Create > Amplify Shader > Surface を選びます。今回はこのようにして作成したシェーダーを編集して希望のものを作っていきます。

Assetに新規シェーダーが作成されます。Screenspace Shaderと命名してEnterを押下します。

Shader Editorのウィンドウが開きました。ウィンドウ中央のNew Amplify Shaderと表示されているものが「マスターノード」です。ウィンドウ左側にはNodeの詳細設定が表示されています。

ノードの詳細設定の最上部を見ると Output Node > General > Shader Name: New Amplify Shader と表示されています。先ほど、新規作成したマテリアルをインスペクタで見て、Standardシェーダーが選択されていることを確認しましたが、このShader Nameで設定した名前がマテリアルのインスペクタ上で使われる名前になります。

シェーダーのアセットと同じくScreenspace Shaderという名前にします。

ちなみに、シェーダー名を入力するフィールドの近くにアイコンが三つほど並んでいます。中央の円をクリックして緑色に点灯させると編集が自動で保存されるようになります。楽なのでONにしておきましょう。

先ほど作成したマテリアル「Screenspace Material」をAsset上で選択します。インスペクタ上で、先ほども確認した「Shader: Standard」の部分をクリックするとドロップダウンが表示されますが、ここに先ほど作成したScreenspace Shaderが存在しています。選択してこのマテリアルにシェーダーを割り当てましょう。

するとインスペクタがこのような表示になります。マットな質感ですね。

Scene上ではこのマテリアルが割り当てられたオブジェクトが存在していませんので、AssetsからScene上のオブジェクトにマテリアルをドラッグ＆ドロップして設定しましょう。
この手順で、作成したシェーダーの見た目をScene上で確認できるようになりました。CubeとSuzanneの黒い部分に割り当ててみるとこんな見た目です。

Step2 とりあえずテクスチャを表示させてみよう

Step1の手順で、ようやくシェーダーの制作の準備が整いました。
最終的には「スクリーンスペースでテクスチャを表示」させますが、まずはとにかくテクスチャを表示させるところから始めます。今回、ペイントソフトを使ってテクスチャ画像を用意しました。シェーダーにこれを設定し、テスト用のメッシュに貼り付けてみます。このテクスチャ画像はAsset内にインポートしておきます。

Shader Editorの画面を開き、中央の領域を右クリックするかスペースキーでノードを追加できます。Texture Sampleを選択します。

Texture Sampleノードが表れるので、Texture SampleノードのRGB出力をマスターノードにのAlbedo入力に接続します。

この段階では単なる白っぽいマテリアルです。

Texture Sample0 ノードのSelectをクリックして、テクスチャ画像を設定します。一旦シェーダーエディタ画面は閉じます。

SceneウィンドウやInspectorウィンドウを見ても、テクスチャは反映されていません。Shader:Screenspace Shader の部分から再度同じシェーダーを選択します。

シェーダーのデフォルトが読み込まれ、マテリアルプレビューとScene上のオブジェクトにテクスチャが反映されました。

Suzanneは少しゆめかわな感じになってます。

以上の手順でテクスチャ画像をUVに従って貼ることに成功しました。

Step3 スクリーンスペースで表示させよう

今回の例は最終的にはテクスチャをスクリーンスペースで表示、つまりシーン上のオブジェクトの面の向きは無視し、画面上に表示したテクスチャをオブジェクトのシルエットで切り取ったような見た目にしたいです。

現在の設定では、光源と面の角度に従った光の当たり方が表示に反映されています。今回はそのような光の反射の計算は不要です。Shader Editorを開きマスターノードを選択します。Light ModelがStandardになっていますがこれをクリックしUnlitを選択します。

Albedoは光の反射を設定するものですが、Unlitは光の反射を扱わないLight Modelになります。ですのでLight ModelをUnlitにすると当然Albedoは使えません。Texture SampleノードとEmissionノードの接続が切れてしまいました。

Texture Sample 0ノードのRGB出力を、マスターノードのEmission入力に接続します。

これでマテリアル表示が光源の影響を受けないようになり、貼られたテクスチャの色で発光するようになりました。逆光側から見ると影がないことがよくわかります

現在の設定では、オブジェクトの面が斜めならば斜めにテクスチャが貼られるようになっています。これは言い換えればTexture Sampleノードが
1.現在のフラグメント（ピクセル）の座標がUVマップ上のどの位置か調べる
2. UVマップ上の該当位置に対応するテクスチャ画像のピクセルの色を返す

と言うことをやっているからであると言えます。UVマップを無視してスクリーン上の座標を基準に表示されるようにします。
Shader Editorを開き、Screen Positionノードを配置します。

今回の記事のシェーダーでは「フラグメントシェーダー」と言って、画面上のピクセルごとに色を計算する部分を制作すると書きました。このノードは、現在のフラグメント（ピクセル）のスクリーン上での座標を出力します。

Screen Positionノードが出力するスクリーン上のXY座標を Texture SampleノードのUV座標に渡すことで、現在のフラグメントのエミッションの色を決定します。Screen PositionノードはX,Y,Z,Wの4つの値を出力するので、Component Maskノードを使用してこのうちのX,Yだけを取り出します。

Component Maskノードを選択すると、XYZWの４つのチェックボックスが表れます。ZとWのチェックを外してXとYが選択された状態にします。

Component Maskノードから出力されるXY座標をTexture SampleのUVに接続します。これでレンダリング時にスクリーンスペースの座標でテクスチャを表示するようになります。

このシェーダーを設定したマテリアルの向こうに別の世界があるような効果が出ていると思います。フレームに対してオブジェクトを上下に動かすと、テクスチャ画像のグラデーションがそのまま表示されていることがわかるかと思います。

以上で今回やりたいことの基本部分は完成しました。

Step4 改良1 スクロールさせてみよう

これだけでは面白くないので、画像をスクロールさせて動きをつけてみましょう。テクスチャをスクロールさせるには、経過時間に応じて座標の値を加算するということを行う必要があります。Amplify Shader EditorにはPannerというノードが用意されており、これを使うとスクロールが簡単に実現できます。

余談ですが、Panというのは映像の世界ではカメラの向きを変えてフレームを横向きに動かすことで、Panoramaの略だそうです。ステレオ音声の世界でも音源の位置を左右に動かすことをPanと言いますね。
Pannerノードを追加します。

Addノードを追加します

Component Maskの出力とPannerの出力それぞれをAddノードの入力に接続し、足し合わされた出力をTexture Sample 0ノードのUVに入力します。

座標をScreen Spaceのものと合成し、Texture SampleのUVに接続します。
Pannerノードを選択するとこのような表示になります。縦にスクロールさせたいのでYに1を入力し、保存します。
少しゲーミングSuzanneと言った風情になってきました。

ちなみに、Vector2ノードをSpeedに接続することでUnityエディタのインスペクタからスクロール速度を設定できるようにもできます。

Step5 改良2 テクスチャを重ねてみよう

さらに動きを出すために、別のテクスチャを重ねて違った方向にスクロールさせてみましょう。
ペイントソフトで、黒地に白で水彩スパッタリング風の画像を用意してみました。これをあらかじめAssetsにインポートしておきます。

Texture Sample0, Add, Pannerの３つのノードを選択し、コピー＆ペーストで複製します。

Component Maskの出力をAddに接続、テクスチャを設定します。2枚目のテクスチャも縦にスクロールしてます。

スクロールさせた2枚目のテクスチャを1枚目のテクスチャと合成します。2枚目のテクスチャの白い部分を1枚目のテクスチャに明るく重ねたいのでAddノードを使います。これはペイントソフトの「加算」合成と同じです。

2枚目のテクスチャの主張が強すぎたのでMultiplyノード（ペイントソフトの「乗算」合成と同じ）とColorノードを使い、明るさを*0.8程度にして調整しました。Colorノードの設定次第で、2枚目のテクスチャの色合いを変えることなどもできます。

最終的なノードグラフはこのようになりました。

Playして確認してみるとSuzanneもなんだかマジカルな感じになっています。

おわりに

Amplify Shader Editorを使ってスクリーンスペースでテクスチャを扱う方法を解説しました。Amplify Shader は簡単な操作で見た目をリッチにできるので、今回作ったシェーダーを改造する形で色々試してみるのも面白いでしょう。
例えばマスターノードの設定でアウトラインをつけたり

Fresnelノードを使ってガラスや宝石っぽくしたりといった表現が簡単に行えます。

ぜひ色々試してみてください。
この記事を書いた人

クラウドソリューション第１チーム　米永

Webアプリの開発を行う傍ら、社内の有志チームでUnityを使ったゲームコンテンツの制作を行っています。インタビュー記事もありますのでよろしければご覧ください。
エンジニアインタビュー：Webとメタバースで切り開く　Web/AIチームのリーダーとしての成長と夢