【Unity】透過スクリーンショットを撮るとき影つきで撮影する方法

主にキャラ表示系アプリを作ってる人向けの小ネタです。

1. やったこと

拙作VMagicMirrorの最新版v0.9.0にて、表示しているVRMを影ごと透過pngとしてスクリーンショットする機能を追加しました。

影ごと透過pngが撮れたら何が嬉しいかというと、コラ画像のそれっぽさが増します。

そこで本機能を他ソフトでも再現できるよう作成手順を抜粋してみた、というのが本記事の内容です。

サンプルパッケージを用意しました。Unity 2018.3.7f1で作成しています。

パッケージをインポートしてShadowScreenshot/ShadowScreenshotExampleシーンを開いて実行し、Shift+Sを押すとスクリーンショットが撮れます。

うまく動くとデスクトップ以下に"Screenshot"フォルダが作られ、こういう絵が保存されます。

…ブログ上だと本当に透明に撮れてるのか分かりづらいですね…。

影つきのスクリーンショットを撮るまでの手順ですが、まずスクリーンショット自体はUnityの標準機能ScreenCapture.CaptureScreenshotAsTextureで撮影できます。

背景の透明化については、カメラのClear FlagsをSolid Colorにして、Backgroundを透明にすればOKです。

その他、細かいコツは「Unity スクリーンショット透過」とかでググれば他のブログ記事がヒットするはずなので、本記事では省略します。

サンプルパッケージ内での実装についてはScreenshotCapture.csスクリプトをご覧下さい。

本記事に固有なのは影の描き足し部分です。

これは以前の記事でも紹介したShadowDrawerというシェーダーを使って実現しています。

このシェーダーを指定したマテリアルを板ポリに適用し、床やカベに相当する位置に配置することで、追加的に影を描画できます。

いわばShadowDrawerは「影だけは映る透明な板きれ」みたいな扱いです。

サンプルパッケージでは2つのライトを使い、影の向きと物体の陰影は独立にコントロールしています。

たとえばShadowLightの角度を変えると、影の向きは変わりますが、キューブの陰影はそのままです。

2つのライトでの設定の違いは以下の通りです。

このように、「物理的には正しくないけど影はコッチに描きたい…」という時はライトを2つに分けると簡単になります。