ゼロからはじめるUnityでVJ |shaderによるシーン重畳について
※ 2019年時点での検証内容のため、内容が古い可能性があります。 ここでは、Shaderによるシーン重畳について触れていきたいと思います。 Unityで、一度、このような環境を作ってしまって、後はシーンさえ作り込めば、いい感じに映像をブレンディングすることができます!自分の場合、キーボード入力に応じてブレンドするシーンの選択をしていますが、ここをMIDIコントローラに近々変えたいなという感じです。 実現したいこと まずは、実現したいことを振り返っておきます. 前回の投稿「ゼロからはじめるUnityでVJ | 各シーンの映像をRenderTextureに書き出す」でも触れたのですが、最終ゴールは「音楽に反応して動的に変化する映像を手動入力により重ね合わせて表示する」です。 そのために、「オーディオに動的に反応する映像を作る」「各シーンの映像をRenderTextureに書き出す」「各シーンのRendertextureを重畳してスクリーンに表示する」の3点のサブゴールを設定しました。 ここでは、「各シーンのRendertextureを重畳してカメラ映像として描画する」の実現方法について、ざっと紹介したいと思います。 shaderで各シーンのRenderTextureを重畳表示する方法 さて、本題に入っていきます. 各シーン(以下、サブシーンと呼びましょう)をどのようにして重畳するのか? 基本的には、以下の3ステップで実現させます。 「サブシーンのRenderTextureをMainシーンで受け取りshaderに渡す」「shaderでサブシーンのRenderTextureを重畳する」「メインシーンのカメラに描画する」 サブシーンの RenderTexture を Main シーンで受け取り shader に渡す まずはこれですが、Mainシーンのカメラに以下のスクリプト(ここでは"MixCameraController.cs"とする)をアタッチします. 何をしているかと思うと、インスペクタで設定された RenderTexture を Shader の sampler2D(2次元テクスチャ)として扱えるようにしておきます。後々、任意の RenderTexture(shader 上では sampler2D)のみ shader でブレンディングするためにSetchannelGain 関数を用意しておきます。
ゼロからはじめるUnityでVJ | 各シーンの映像をRenderTextureに書き出す
※ 2019年時点での検証内容になります。 前回の投稿から、約2ヶ月が過ぎました。 気がつけばすっかり秋に。さてさて、真夏から秋の間、何もしていないかったわけではなく、UnityでVJ環境の構築を着々と進めまして、ほぼ終わりの状態が見えてきました。 制作を進める中でいくつかの Tips が見えてきたので、複数回に分けて、こちらに記録を残していこうと思います。 ここでは、前回の投稿でも触れていたように、Shader を活用したシーン重畳について紹介する前に「各シーンの映像をRenderTextureに書き出す」方法について触れておきます。 shaderでのシーン重畳については以下の先駆者の方のブログと github を参考にさせていただきました。 UnityでVJシステム作ってパフォーマンスした 全体構成の振り返り 手書きで適当に書いていた全体構成を書き直しました。 実現したいことを抽象化すると以下のようになります(実際には、サブゴールにぶら下がる形でいくつかの機能も実装しています) ゴール:音楽に反応して動的に変化する映像を手動入力により重ね合わせて表示。サブゴール1:オーディオに動的に反応する映像を作るサブゴール2:各シーンの映像をRenderTextureに書き出すサブゴール3:各シーンのRendertextureを重畳してカメラ映像として描画する これらのゴールを実現するために、先程の先駆者の方の知見を元に以下の構成でVJする環境を構築しました。 今回の投稿では、サブゴール2と3について解説したいと思います。 動作環境は以下のバージョンとなります。 2019.2.5f1 今回、構築した環境で各シーンを作り込むことで以下のような映像を作ることができます。 https://www.youtube.com/watch?v=BxDTxO8PEOg https://www.youtube.com/watch?v=X6zye_-oW-4&t=117s やりたいことはいくつかのシーンの映像を RenderTexture として書き出して、複数の RenderTexture を shader を使って重畳処理するということです。 では、どうやって実現するのか? ここでは Camera.targetTexture で取得したシーン内のカメラの映像を予め用意した RenderTexture に出力するスクリプト「Sub Scene Controller.cs」を書きました(下記をご参考に) シーンに「シーン名+Root」という空のオブジェクトを作成の上、カメラや他のオブジェクトをすべて「シーン名+Root」配下にした上で、「Sub Scene Controller.cs」を「シーン名+Root」にアタッチします. で、書き出したい映像を撮っているカメラと予め用意したRenderTextureをインスペクター上で「Sub Scene Controller.cs」に設定します。 各シーンのカメラ映像を書き出しする RenderTexture