UnityでSpineに2DLightで光るフレネルシェーダーを実装してみた

概要

UnityでSpineを使用する際、シェーダーは正しく描画するためSpine公式が提供するシェーダーを使用する必要があります。しかし、このシェーダーはバラバラのパーツを描画するためのコードベースなシェーダーでさらに追加の機能を持たせるのは難易度が高く、非効率的です。
そこでSpine公式が提供しているSkeletonRenderTextureを使用しShaderGraphで簡単に追加の描画をする方法の解説です。

SkeletonRenderTextureとは

Spineは通常、他のオブジェクト同様１つRenderTexture（仮にCameraTargetTextureとします）に描き加えられていきます。
しかしSkeletonRenderTextureを使用すると、そのSpine専用のRenderTextureを用意し、一旦そのRenderTextureにCommandBufferで前もって描画します。その後通常と同じ描画タイミングでCameraTargetTextureに描き戻します。

この描き戻す際のTextureを描画するだけの単純なシェーダーでいいので、このシェーダーにフレネルなど追加したい機能を追加するのが簡単だよねという仕組みです。

負荷についてはSpineごとに描画する範囲のRenderTexture1枚分のメモリ負荷と描き戻しの描画負荷だけなのでほとんど大したことない認識です。

Spineが1枚のTextureになるので半透明にした際パーツが透けないようにできたりもします。（むしろそっちがメインの用途だと思います）

環境

• Unity 6000.0.23f1 (2DRenderPipeline)
• Spine 4.2.40
• spine-unityランタイム 4.2（SkeletonRenderTextureはSpineExamplesにあります）

導入方法はSpine公式ドキュメントを確認してください。

実装

※
SpineAssetのインポートなどのやり方は省略します。

SkeletonRenderTexture

1. SpineのGameObject¹にAddComponentでSkeletonRenderTextureを追加します
2. SkeletonRenderTextureのプロパティのQuad Materialにフレネルシェーダーを使用するマテリアルをアタッチします

2DLightで光るフレネルシェーダーグラフ

2Dなので本来のフレネルとは違いテクスチャの境界の数ピクセルに2DLightのライトテクスチャを加算させる処理をしています。

1. 2DLightTextureというノードでライトテクスチャを取得できるのでサンプルするUVをScreenPositionのノードでスクリーン座標にすることで2DLightのカラーを取得できます
2. SkeletonRenderTextureで描画したRenderTextureのAlphaを使用し微妙にずらしたUVでテクスチャの境界部分を抽出します
3. 2DLightのカラーと抽出した境界部分を乗算し、さらに通常のサンプルしたカラーに加算してあげれば完成です

フレネル以外にも機能追加してますが1~3の部分です。

描画結果

まとめ

SkeletonRenderTextureはあくまでサンプルなので色々応用が利くと思います。用途に合わせてカスタマイズしたりして便利に使えると思います。個人的にはRendererFeatureで動くようにしてみたいです。

また、2DRenderPipelineや2DLightに関しても説明しなかったのｄそのうち記事書こうと思います。

1. MeshFilterやMeshRenderer、SkeletonRendererを継承してるSkeletonAnimationが追加されてるGameObject ↩