RenderTextureを使ってスマホ版Twitterのタイムライン的演出をごり押し実装した

はじめに

記事のタイトル通りRenderTextureを使ってスマホ版Twitterのタイムライン的演出作ろうとした記事です。プラットフォームはVRChatですが、Unity内の機能のみの仕様なのでそこは関係してこないはずです。

RenderTextureの勉強とアウトプットの為に書いた記事ですので、優しい目で見てください。
パッと見の完成度としては結構満足度が高いのですが、そこまでのリソースや手間が多すぎて頭の悪い実装になってしまった感がパンパないです。もっと簡単でスマートなやり方があれば誰か教えて(´；ω；`)

環境

・Unity2019.4.29f1
・VRCSDK2-2021.08.04.11.23_Public
(作成するにあたってVRCSDKは無関係ですが、一応記載しておきます)

事の始まりは…

「VRChat内でパーティクルライブ的なのを作ってみたい」
↓
「VRChat内のスマートフォンの液晶画面にTwitterのタイムラインが更新されて動いていく演出を取り入れたい！！」
↓
「他の人はシェーダーで実装してるっぽいけどシェーダー分かんない(´・ω・`)」
↓
ごり押し実装するしかねぇ!!

完成したもの

大まかな作りとしては、RenderTextureでカメラ映像をスマホの液晶画面に映し、作ったTwitterタイムライン風の画像をアニメーションでスライドさせてるだけ。

RenderTextureとは

ランタイムに作成・更新される特殊なテクスチャのことです。カメラの映像をテクスチャに反映して、リアルタイムにオブジェクトに写せたりします。

1.準備物

この準備はあくまでもTwitterのタイムライン的演出をするための準備ですので、RenderTextureについて知りたいだけの人はスルーして大丈夫です。

使用アセット等

・[Free] Phone
液晶画面のマテリアルが別にあるスマートフォンのアセットが好ましいです。今回はこちらを使用しています。

・タイムラインを再現した画像
こちらは別のソフトを使って自力で作って用意しました。用意したのはタイムライン本体の画像とタイムライン下に表示されるメニューの2枚です。アイコン等はicooon-monoさんのものを使用しています。
（icooon-monoさんの使用条件により、ここでの配布はできないので自分で作ってください）

2.RenderTextureを作成する

Projectタブ内で右クリックをし、Create→RenderTextureでRenderTextureを作成します。
次にHierarchy上で右クリックをし、Cameraを選択し、新しいカメラを作成します。

先ほど作成した新しいカメラのInspector内のTaegetTextureに作ったRenderTextureを設定します。

これでカメラの映像をRenderTextureに適応することができました。

3.マテリアルを作る

Projectタブ上を右クリックをし、Create→Materialでマテリアルを作成します。シェーダーはスタンダートシェーダーでOKです。
そして普通のTextureを適応させるのと同じように、作ったRenderTextureを適応させます。
そして、そのマテリアルをオブジェクトに適応させれば完了です。これでカメラの映像がオブジェクトに写るようになりました。
今回はスマートフォンの液晶画面部分にこのマテリアルを適応させます。

「RenderTextureを利用してカメラの映像のオブジェクトに写す」という作業自体はここで終了です。

3-1.スマートフォンの液晶画面感を出す

今回はスマートフォンの液晶画面感を出したいのでマテリアルのEmissionの項目にもRenderTextureを適応させ自己発光マテリアル化します。
この記事と同じことをしています。
PostProcessingも適応すれば、よりいい感じになるのでは。

4.タイムライン的演出を作成する。

先ほども説明しましたが、RenderTextureはカメラの映像をテクスチャに反映して、リアルタイムにオブジェクトに写せたりします。
つまり、これでカメラの映像がスマートフォンの液晶画面に写るようになりました。これを利用してタイムライン的演出を作ります。
まず、以下のようにカメラとオブジェクトを配置します。
作ったタイムライン素材はQuadやuGUIなどで配置します。今回はQuadで実装しました。Quadの場合はUnlitシェーダー等を利用して光源の影響を受けないようにします。

Twitterの利用者なら分かると思いますが、画面下のメニューはタイムラインのツイートの手前側に必ず見えます。ツイートがメニューの手前に来ることはありません。

なので、ペイントソフトのレイヤーの概念と同じように、メニューのオブジェクトがツイートのオブジェクトよりもカメラ寄りになるように調整し配置します。
背景は後ろのオブジェクトやSkyBoxが写らないために一番後ろに配置します。カメラのClearFlagsをSolidColorにして色を指定したり、Culling Maskで邪魔なオブジェクトが写らないようにする方法もありだと思います。というかそっちの方が賢いです。

そして、スマートフォンの液晶画面にすべてがきれいに映るようにカメラやオブジェクトの位置を微調整します。カメラの設定は適当です。画角とか色々あると思いますが、この辺りは勉強不足なので分からないです。（平行投影法とかなんかそういうの）
変にカメラをズームしなければ大丈夫でしょう。

最後に、アニメーションやTimeLineでタイムラインのオブジェクトを動かすだけです。

さいごに

今回はタイムライン的演出を脳筋で無理やり実装しました。
RenderTexture1つで7MBくらいの容量を使っていることと、タイムラインが長ければ長いほど使う容量も増える、素材を作ることのめんどくささなど、リソース面で無駄が多い気がするので、やっぱりシェーダーを勉強して実装するのがいいのかなと思いました。
後、記事を書いている途中に気が付いたのですが、タイムラインのオブジェクトに画像をスライドするシェーダーを適応すれば、もうちょいスマートになるんじゃないかな。もしくはメニューのレイヤー等を気にしないのであれば、スライドシェーダー自体をスマホ画面に適応すればいいですしね。
でもパッと見の出来はかなりお気に入りです。