More than 5 years have passed since last update.

UnityでRenderTextureを使ってソフトマスク

Posted at 2018-11-12

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; を追加します

###Imageの表示し方

要するにシェイダ―で別のテクスチャー (MaskTex)からアルファだけサンプリングをしてそれをRenderTextureにかけます。

なのでアルファのためのテクスチャーが必要になります。この例で使っているテクスチャーはこんな感じです。

すると、こんな感じに表示されるはずです。

###おまけ

RenderCanvasがエディターで邪魔になっていたらカメラを動かしてください。
ScrollRectなど表示したい場合はRenderTextureCanvasからRaycasterをなくし、表示する所でそのScrollRectにイベントを渡すためのオブジェクトをおきます。
RenderCanvasのがScreen Space - Cameraの場合大きさがRenderTextureの大きさと同じです。大きさが変わるUIなどあれば、スクリプトでRenderTextureを作成してRenderCanvasにセットしないといけません。