ゼロからはじめるUnityでVJ | 暑さに敗北したのでこの夏はUnityでVJ環境を作り倒す

2019-08-11

ゼロからはじめるUnityでVJ | 暑さに敗北したのでこの夏はUnityでVJ環境を作り倒す

※ 2019年に検証した内容になりますので，内容が古い可能性があります．

はじめに

今年の夏は去年より暑い.. 都内35℃とか、本当に、来年のオリンピックは大丈夫なんでしょうかね。

そうそう、夏になると何故かやったこともないAudioVisualとかVJのための環境の作り方を調べたり、実装したくなる。去年はというと「ゼロからはじめるTouchDesigner | Visual Experience Designしてみよう」で書いていたように、ワタクシ、TouchDesignerにお熱だったようです。

今年の夏は、Unityを触り始めたこともあって”ゼロからはじめるUnity | 暑さに敗北したのでこの夏はUnityでVJ環境を作り倒す”という題で、UnityでVJ環境をつくるまでの道のりを数回に渡り書いていきたいと思います。

第1回目は、下調べ中心になります。

今後の記事に関しては、若干テクニカルな内容を入れていきたいと思いますので、前提として、以下の1〜5についてイメージできることが望ましいです！とか、言いつつ、私自身、Unityは数ヶ月前に触り始めたばかりなので、内容に至らない点や間違いなどありましたら、お気軽にコメントでご指摘ください！

Unityの画面構成と操作方法を理解している
オブジェクトの作り方と動かし方を理解している
オブジェクト指向にある程度理解がありC#の基礎知識を有している
オブジェクトへのスクリプトのアタッチを理解している
スクリプトを利用して衝突判定やkey入力ができる
スライダーやボタン等のUIの作り方と自作UIによるオブジェクト操作を理解している

そもそもUnityでVJできるのか？

そもそも、MAXMSPとかTouchDesigner、NOTCHではなく、UnityでVJする人いるのか？って感じなので、ちょこっとYouTubeで検索してみる。

日本人だと Keijiro Takahashi さんという方が、かなり神….

今回の下調べの趣旨とは外れますが、Volumetric Capture のデモを Unity で実装してたりとか、他にもめちゃ参考になる情報が満載… 勉強させていただきます..

いやーこれ拝見していると RealSense と Unity の Visual Effect Graph でめちゃくちゃ色々できそうな予感。使いこなせたら表現の幅が広がりますな。

あとは、Unity で VJ 環境つくるメリットとしては、商用でなければツール利用料が無料ってところでしょうかね。TouchDesigner で作ると無料版では 1280×1280 までで、フル HD の書き出しは有料版じゃないとできないので価格の面でのメリットもありですね。

じゃあ、どうやって VJ するような環境だとか、音に反応する Visual Effect を作るのかという感じなのですが、今回は、こちらの記事を参考にさせていただきました。

github で Unity プロジェクトを公開いただいているのが勉強にとても助かります。

特に keyboard アクションに基づいたシーン切り替えや加算のところを参考にさせていただき、頑張って作り方をデコンしつつ、自分なりにプロジェクトを作っていきたいと思います。

作り方を理解しましょう

まずは作り方を整理していきたいので、amagi さんの github で公開されているプロジェクトの Main.unity を覗いてみます。

記事内でも図解していただいてますが、コードを拝見しつつ自分なりに理解をして作り方を作るところから始めます。

途中で下段になっているので、とても見づらい…笑（後々、図に起こしたいと思います）

最終的な出力はPC上のUI、フロント画面、リア画面の3画面。3画面に、キーインプットに基づき、複数シーンの描画結果の重畳、さらにエフェクトの重畳も行う。個人的にイメージがつかなかったのは、複数シーンの重畳をUnity上でどう実現しているのかという点。ここについて、プロジェクトファイルを参考にデコンしてみると、どうやらイラストレータのようにレイヤを重ねていくような作り方らしい。

Unityはカメラから移している各シーンの風景をテクスチャとして出力できる（RenderTextureとTargetTexture）。この機能を活用することで、各シーンでRenderTextureを予め作っておき、各シーンのMain CameraのTargetTextureに割り当てておき、シーンの風景をテクスチャとして書き出すようにしておく。そして、Mainシーンから重畳するシーンの選択とエフェクトを加えた上で描画を行う。

各シーンを重畳する際に思い浮かぶのが、SceneManager の活用。

しかし、ざっと見た感じだと、ここでは、SceneManager の LoadSceneを使わずに実現しているようだ。

詳しくは次回以降に書いていきたいのですが、ちょっとだけ頭出し程度に触れておくと、カメラから取得した画像に shader でエフェクトをかけているのだが、その際に、シーンのテクスチャを shader 内で扱えるように sample2D として読み込んで、tex2D 関数で UV 座標上のピクセル色を算出する。キーインプットでシーンを削除したい場合には、各シーンの tex2D関数の算出値を0にすることで、任意のシーンの描画結果の操作を実現できているみたいな感じでしょうか（？？）

shader は大学ぶりに目にしたので、復習しないと、全然読めないですね…

shader を活用したシーン重畳については、次回以降に詳しく見ていきたいと思います。

最後に

今年の夏も積極的に引きこもって、特にUnityを活用した制作活動に精を出したいと思います。

呼吸するようにUnity使えこなせたら想像以上に世界が広がりそうな予感。

次回の記事では、shader を活用してどうやってシーン重畳を実現しているのか見ていきたいと思います。

Reference：

research, unity