Unity Version 2018.2.10f1
意外と難しいUnityでのソフトマスクの一つのやり方について説明します。
どうしてRenderTexture?
RenderTextureでレンダリングをすると、普通のイメージみたいに使えます。またアルファブレンディングのソースブレンドも使えるのでパフォーマンスに害はあまりありません。
構造
イメージ
説明
この例では両方のカメラをOrthographicに、両方のCanvasを"Screen Space - Camera"にセットしています。
レイヤーをRenderTextureLayerにセットしたRenderTextureCanvasにソフトマスクをかけたいオブジェクトを入れて、RenderTextureCameraレンダリングします。
シーンのほかのオブジェクトの邪魔にならないようにRenderTextureCameraのCullingMaskをRenderTextureLayerだけにして、MainCameraのをそれ以外にします。
これでソフトマスクをかけたいオブジェクトがテクスチャーにレンダリングされています。次はシーンにソフトマスクをかけてシーンにレンダリングすることですね。
ソフトマスクのかけ方
マテリアルとシェイダー
簡単なカスタムなシェイダ―でソフトマスクをかけます。
- まずはAssets > Create > Materialでマスクされるオブジェクト専用のマテリアルを作ります。この例ではMaskedImageMaterialと名付けました。
- Assets > Create > Shader > Unlit Shaderで新しいシェイダ―アセットを作ります。MaskedImageShaderと名付けました。
- MaskedImageShaderを以下のように変えます。。。
- Propertiesに
_MaskTex ("Mask Texture", 2D) = "white" {}を追加します - Tagsを
Tags {"Queue"="Transparent" "RenderType"="Transparent" }に変えます -
LOD100の下にZWrite Off,Blend SrcAlpha OneMinusSrcAlphaを追加します。 -
struct v2fにfloat2 uvA : TEXCOORD2;を追加します。 -
float4 _MainTex_ST;の下にsampler2D _MaskTex;とfloat4 _MaskTex_ST;を追加します。 -
v2f vertにo.uvA = TRANSFORM_TEX(v.uv, _MaskTex);を追加します - 最後に
fixed4 fragにfixed4 alpha = tex2D(_MaskTex, i.uvA);,col *= alpha.a;を追加します
- Propertiesに
Imageの表示し方
要するにシェイダ―で別のテクスチャー (MaskTex)からアルファだけサンプリングをしてそれをRenderTextureにかけます。
なのでアルファのためのテクスチャーが必要になります。この例で使っているテクスチャーはこんな感じです。
- 表示したいCanvasでRawImageを作成します
- テクスチャーをRenderTextureにセットします。
- マテリアルをMaskedImageMaterialにセットして、そのシェイダ―をMaskedImageShaderにセットします。
- MaskedImageShaderの設定でMaskTexをアルファのためのテクスチャーにセットします。
- シェイダ―のMainTextureはRawImageによってセットされますので触らなくてもいいです。
すると、こんな感じに表示されるはずです。
おまけ
- RenderCanvasがエディターで邪魔になっていたらカメラを動かしてください。
- ScrollRectなど表示したい場合はRenderTextureCanvasからRaycasterをなくし、表示する所でそのScrollRectにイベントを渡すためのオブジェクトをおきます。
- RenderCanvasのがScreen Space - Cameraの場合大きさがRenderTextureの大きさと同じです。大きさが変わるUIなどあれば、スクリプトでRenderTextureを作成してRenderCanvasにセットしないといけません。