VRChatのMirrorを自作してみる

いきなりまとめ

Cameraに登録したTexture RendererをPalaneのMaterialとして付与する
複数のMirrorで写し鏡を避けるには視体積のFarの値を小さくすればよい

今回やること

最近レンダリングパイプラインの勉強を少ししていたので、Cameraで何か作れないかと思いVRChatのMirrorを自作してみたくなりました。まあSDKに入ってるので、いわゆる車輪の再発名ですね。ちなみにグラフィックス（というよりOpenGL）の仕組みについて勉強したい方は以下の本がおすすめです。グラフィックスが画面に描画されるまでの仕組みが詳しく書かれている代わりに、シェーダーに特化した内容ではないことだけ注意です。

「グラフィックス・アプリ」制作のためのOpenGL入門 (I・O BOOKS)

作者:浩平, 床井
工学社

Amazon

さて、それではオリジナルのMirrorを作っていきましょう。

下準備

Unityで新規のSceneを作成し、PlaneとCubeを追加しましょう。また、後で2つ目のCameraを追加する都合、Main Camera の名前をFrontCameraにしておきましょう。VRChat World SDK のインポートとVRCWorldの追加も忘れずに。

f:id:prupru_prune:20220213193808p:plain — いわゆる下準備.

Render Textureの設定

プロジェクトウインドウで右クリック->Create->Render Textureを選択してRender Textureなるものを新規作成します。このRender Textureですが、要は紐づけたCameraの映像を映すことが出来る特別なTextureです。

f:id:prupru_prune:20220213195545p:plain — Render Textureを新規作成

後々のため、このRender Textureの名前をFrontにしておきましょう。その後Hierarchy上のFrontCameraをクリックし、Inspector上のCameraコンポーネントのTarget Textureの欄に先ほど作ったRender Texture（名前はFront）をドラッグ&ドロップします。

f:id:prupru_prune:20220213195939p:plain — CameraコンポーネントのTarget TextureにRender Textureを指定

これだけででRender Textureの設定は終了です。試しに、Planeを追加してMaterialをこのRender Texture（Front）にしましょう。つまり、新規に作成したPlaneにRender Textureをドラッグ&ドロップしましょう。Cameraがとらえている画像がPlaneにも投影されていれば成功です。PlaneのRotationなどは適宜調整してください。また、Render TextureのSizeの値を大きくすれば解像度が大きくなります。

f:id:prupru_prune:20220213200642p:plain — Cameraの映像がPlaneに投影される

今後のため新規作成したPlaneの名前をFrontScreenにしておきます。

同時に後姿も映るようにする

Render Textureの使い方はわかったので、せっかくなら後姿も見られるようにしてみます。といっても簡単で、後姿用のCamera（BackCamera）とRender Texture（Back）を作成し、上記と同じ要領で設定をしていきます。

f:id:prupru_prune:20220213203054p:plain — Back用のCameraとPlaneも追加

しかし、よく見るとBack用の映像が写し鏡になってしまってますね。縁起も見栄えも良くないです。これはCameraのClipping Volumeを小さくすることで解決できます。というのも、私たちがCameraを通して見ているものはClipping Volumeという体積内のオブジェクトなのです。今回は、CameraコンポーネントのClipping PlanesのFarの値を小さくしました。画像だと少しわかりにくいですが、デフォルトのFarの値ではClipping VolumeにPlanesが含まれていて、これが写し鏡の原因になっています。Farの値を適当な値にすることで写し鏡は避けれますが、小さくしすぎると逆にキャラクターが映らなくなってしまうので要注意です。