ShaderGraphでUGUIのマテリアルを作成しScreen Space - Overlayで表示したい（LWRP/HDRP）

はじめに

UnityのShaderGraph便利ですよね。 これをUGUIの要素にも使いたいのですが、 現時点では「Screen Space - Overlay」のCanvasとともに使うと 不具合が生じています。 この不具合を回避する方法をHDRPとLWRPの両方で見つけたのでメモします。

• Unity: 2019.2.6f1

LWRP

• Lightweight RP: 6.9.1
• Shader Graph: 6.9.1

「Screen Space - Overlay」なCanvasを用意します。

次のようなUnilitのノードを作成し、UGUIのImageのMaterialとしてアタッチします。

残念ながらうまく表示されず、真っ黒になってしまいます。

本来表示されて欲しい絵は次のとおり。

Canvasを「Screen Space - Camera」にすると、表示の不具合は解消されます。

しかし、「Screen Space - Camera」ではポストプロセスがUIにかかってしまいます。

UI要素にはポストプロセスをかけたくない場合は「Screen Space - Overlay」を使いたくなります。

そこで、「Creatte > Shader > 2D Renderer > Sprite Unlit Graph (Experimental)」というノードを代わりに使います。

このMasterノードを使うと「Screen Space - Overlay」でも黒くならずに正しく表示されます。

ポストプロセスがかからず画面の上にOverlayで表示されるようになりました。

HDRP

• HDRP: 6.9.1
• Shader Graph: 6.9.1

「Screen Space - Overlay」なCanvasを用意します。

次のようなUnlitのノードを作成し、UGUIのImageのMaterialとしてアタッチします。

すると画面いっぱいに拡大されて表示されてしまいます。

本来欲しい絵はこちら。

Canvasを「Screen Space - Camera」にすると、表示の不具合は解消されます。

しかし、「Screen Space - Camera」ではポストプロセスがUIにかかってしまいます。

ポストプロセスをかけずにUIを描画するには 「Screen Space - Camera」のままで HDRPのUnlitのAfter Post-processを使うとよいです。

これでポストプロセスの後からUIを描画できました。

マテリアルをアタッチした際に表示が乱れるかもしれません。

マテリアルのプロパティを触ると直ります。

おわりに

上記の方法で、とりあえずのところUIにShaderGraphを使えるようになりました。 今後のUnityのアップデートでShaderGraphにUI用のMasterノードが追加されてほしいですね。