<h1 id="%E6%A5%BD%E3%81%97%E3%81%8B%E3%81%A3%E3%81%9Faudio-visual-live">
<a class="header-anchor-link" href="#%E6%A5%BD%E3%81%97%E3%81%8B%E3%81%A3%E3%81%9Faudio-visual-live" aria-hidden="true"></a> 楽しかったAudio Visual LIVE</h1>
卒業式の「楽しかった修学旅行」 
「修学旅行(全員)」 
みたいな文で始めてますが、
今回はUE5と<a href="https://note.com/toyoshimorioka/n/nb435551187f1?magazine_key=m29f2bdbc8dbb" target="_blank" rel="nofollow noopener noreferrer">Touchdesigner</a>でVJをしたので、
そこで培ったものを今後UE5とTD(Touchdesigner)でVJまたは、イベントをやるであろう皆さんに 
ご共有できればと思います！！
さざれ場 #001にて、パフォーマンスしました。 
その様子こちら↓
<iframe src="https://www.youtube-nocookie.com/embed/v4flzTJbKBk" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen loading="lazy"></iframe><a href="https://www.youtube.com/watch?v=v4flzTJbKBk" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://www.youtube.com/watch?v=v4flzTJbKBk</a>
音は<a href="https://twitter.com/uzu_ars" target="_blank" rel="nofollow noopener noreferrer">UZUさん</a> 
miwa maroon は横にいました。。
TDはUIを自由に組めて、当日のオペレーションがすごいやりやすかった 
し、 
UE5は見ての通りライティングがかっこよすぎって初心者でもそれなりの絵が出せる！！
最強の組み合わせ。 
例えるなら、サイモンとガーファンクルのデュエット！ 
ウッチャンに対するナンチャン！ 
高森朝雄の原作に対する 
ちばてつやの「あしたのジョー」！ 
…つうーっ感じっスよお～っ 
<img src="https://storage.googleapis.com/zenn-user-upload/8c73c86b0110-20221209.jpg" alt loading="lazy" class="md-img">
<blockquote>
引用https://www.zaikei.co.jp/article/20170107/346214.html
</blockquote>
<h1 id="%E7%B5%B6%E5%AF%BE%E5%BF%85%E8%A6%81%E3%81%AA%E3%81%93%E3%81%A8">
<a class="header-anchor-link" href="#%E7%B5%B6%E5%AF%BE%E5%BF%85%E8%A6%81%E3%81%AA%E3%81%93%E3%81%A8" aria-hidden="true"></a> 絶対必要なこと</h1>
単刀直入にいいますと、
TDとUE5をどう連携させるかです！！
それはわかってるよ！もっと具体的に！！
ですよね～
連携方法としては、主に3つで、
<ol>
<li>OSC</li>
<li>NDI</li>
<li>DMX</li>
</ol>
です。 
聞いたことなくても大丈夫。そんなに難しいことではないので！！ 
これはリアルタイムでの通信を前提にお話しします！
<h2 id="%E3%82%B7%E3%82%B9%E3%83%86%E3%83%A0%E6%A6%82%E8%A6%81%E5%9B%B3">
<a class="header-anchor-link" href="#%E3%82%B7%E3%82%B9%E3%83%86%E3%83%A0%E6%A6%82%E8%A6%81%E5%9B%B3" aria-hidden="true"></a> システム概要図</h2>
自分のPCのスペック的にtouchDesignerとUE5を同じPCで動かすのは、しんどすぎました。 
TouchDesignerだけなら問題ないんですけど、UE5が来ると重すぎて、 
ロードローラーだっ！！ 
を思い出しました。 
ってことで、PC2台のシステム概要図こちら 
<img src="https://storage.googleapis.com/zenn-user-upload/525866efe45b-20221209.png" alt loading="lazy" class="md-img">
理解する必要ないので、パッと見てください～
<h2 id="1.osc">
<a class="header-anchor-link" href="#1.osc" aria-hidden="true"></a> 1.OSC</h2>
OSCは、int、float、stringが送受信できるので、 
TDで受け取った音のデータをlow、mid、highなんかにわけて、 
音量として、UE5に送ります。 
<img src="https://storage.googleapis.com/zenn-user-upload/fd38e58ad166-20221209.jpg" alt loading="lazy" class="md-img">
エフェクトのオンオフのUIもあるので、これもOSCで送ります！！ 
<img src="https://storage.googleapis.com/zenn-user-upload/2733e215a28d-20221209.jpg" alt loading="lazy" class="md-img">
UE5では、そのデータを受けれるように、OSC pluginを使います。 
OSCを受け取るBluePrintはこんな感じ～
<iframe src="https://blueprintue.com/render/nyff0j3m/" width="100%" style="aspect-ratio:16/9" scrolling="no" frameborder="no" loading="lazy" allowfullscreen></iframe>
おのおのOSCで反応させたいActorのBaseを作ります
<iframe src="https://blueprintue.com/render/4vdl5pxg/" width="100%" style="aspect-ratio:16/9" scrolling="no" frameborder="no" loading="lazy" allowfullscreen></iframe>
これでOSC受け取り専用とエフェクト等のActorで機能分けられた！ 
万歳！ 
OSC_Base継承したエフェクトのブループリントの一例
てな感じで、UE5のすべてをTouchDesignerで制御できるようになります
注意　OSCでやり取りするには、TouchDesignerの環境とUE5の環境が同じネットワーク内にある必要があります。IP Addressやportの設定もあるので、詳しく知りたい方は、 
<a href="https://www.youtube.com/watch?v=ct2C5rADpr4" target="_blank" rel="nofollow noopener noreferrer">こちらの動画</a>から
<h2 id="2.ndi">
<a class="header-anchor-link" href="#2.ndi" aria-hidden="true"></a> 2.NDI</h2>
OSCは数値や文字を送れました 
後必要なのは映像！！ 
なぜなら、最終OutはTouchDesignerからHDMIとかで出力するからっす
まあ要は、UE5の画面をTouchDesignerに送ろうよって話です。
そんなときに使うのがNDI 
TouchDesignerは <code>NDI in TOP</code> 
<img src="https://storage.googleapis.com/zenn-user-upload/e3c4f8f404e3-20221209.png" alt loading="lazy" class="md-img">
UE5はわれらの父Satoru Higaのこのplug-inが最強です 
<iframe id="zenn-embedded__b14e246c5c62d" src="https://embed.zenn.studio/card#zenn-embedded__b14e246c5c62d" data-content="https%3A%2F%2Fgithub.com%2Fbackspacetokyo%2FUE-NDIMedia" frameborder="0" scrolling="no" loading="lazy"></iframe><a href="https://github.com/backspacetokyo/UE-NDIMedia" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://github.com/backspacetokyo/UE-NDIMedia</a> 
<iframe src="https://www.youtube-nocookie.com/embed/RVNNSYyeOFY" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen loading="lazy"></iframe><a href="https://www.youtube.com/watch?v=RVNNSYyeOFY" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://www.youtube.com/watch?v=RVNNSYyeOFY</a>
動画見てもらえればわかるんですが、Capture buttonを押さないと送信が始まらないので、 
これをPIE時にできるようにEditor BluePrintを作った(はじめてつかったぞ)
<iframe src="https://blueprintue.com/render/lqohuvjk/" width="100%" style="aspect-ratio:16/9" scrolling="no" frameborder="no" loading="lazy" allowfullscreen></iframe>
ちなこれを使うために、Buildはしてません！！Editor画面でいくんじゃい！！
まあこんな感じで、NDI簡単じゃん！
と思われるかと思いますが、結構あれ？映像来ないなってときあります
NDIもOSC同様どういつネットワーク上にある必要があります。 
それでも送れないときは、アプリ立ち上げ直したり、必殺のおまじない再起動！
ちなみにLIVEの時は、一回もおちなかったからそこそこ安定してます！！！怖がらせてごめんなさい
<h2 id="3.dmx">
<a class="header-anchor-link" href="#3.dmx" aria-hidden="true"></a> 3.DMX</h2>
正直これは必須ではないです
ただUE5のムービングライトとかはplug-inのDMXで制御可能なので、覚えとくと表現の幅は広がります。 
たとえば、miwa maroonは8×8のムービングライトをTouchDesignerから制御しました 
<img src="https://storage.googleapis.com/zenn-user-upload/6689a527f758-20221209.jpg" alt loading="lazy" class="md-img">
UE5のムービングライトのチャンネルはこんな感じになっている。 
ちなみにDMX componentにこのFixtureを設定する必要がある。 
<img src="https://storage.googleapis.com/zenn-user-upload/be1a05a8a306-20221209.jpg" alt loading="lazy" class="md-img">
なので、TouchDesignerで対応するような <code>Constant CHOP</code> を作ります 
<img src="https://storage.googleapis.com/zenn-user-upload/ed6c3e072119-20221209.jpg" alt loading="lazy" class="md-img">
この値にlowの値だったり入れてくとaudio rectiveなムービングライトになるわけですね。
8×8のライトを制御するときに、1つ1つそれぞれで制御させようとすると、単純計算 
8×8×8(パラメーター数)=512 
で512チャンネル必要になるんですよ。
嗚咽しました
さらにlowで光らせたいとかhighで光らせたいとか、回したいとか考えたら、あまりにもやることおおきすぎる
さすがにヤダってことで、 
うまく最低限でかつ自由にできる方法ないかなって考えました。 
その結果、64チャンネルでいろんなライトの演出方法を変えられるようにしました。
説明が文面じゃ難しいので、興味ある方はこちらの動画から 
YouTubeのvideoIDが不正です<a href="https://youtu.be/11LUy8Ry6FE?t=344" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://youtu.be/11LUy8Ry6FE?t=344</a>
DMXも同様、ArtNetというネットワークを介して送っています。 
ってことは、ip Addressの設定必要なやつ～～
Touchdesignerは<code>DMX Out CHOP</code>で設定 
<img src="https://storage.googleapis.com/zenn-user-upload/f176a75fccd0-20221209.png" alt loading="lazy" class="md-img">
UE5はProject設定から 
<img src="https://storage.googleapis.com/zenn-user-upload/5c902e2bd01f-20221209.png" alt loading="lazy" class="md-img">
<h1 id="%E5%8D%81%E5%88%86%E6%9D%A1%E4%BB%B6">
<a class="header-anchor-link" href="#%E5%8D%81%E5%88%86%E6%9D%A1%E4%BB%B6" aria-hidden="true"></a> 十分条件</h1>
あるといいよっていうのは、
TouchDesignerでUIを組むことです。
全く触ったことない人には、ラーニングコスト高いと思われますが、 
そんなことなくてコツをつかめば、だんだん楽しくなってきます。 
基礎はここら辺の動画がわかりやすいです。 
<iframe src="https://www.youtube-nocookie.com/embed/UWtO-dVipO8" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen loading="lazy"></iframe><a href="https://www.youtube.com/watch?v=UWtO-dVipO8" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://www.youtube.com/watch?v=UWtO-dVipO8</a> 
<iframe src="https://www.youtube-nocookie.com/embed/O-CyWhN4ivI" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen loading="lazy"></iframe><a href="https://www.youtube.com/watch?v=O-CyWhN4ivI" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://www.youtube.com/watch?v=O-CyWhN4ivI</a>
見せるのがすこしはずいですけど、My VJ Systemはこんな感じで、 
<img src="https://storage.googleapis.com/zenn-user-upload/885820a27fcd-20221209.jpg" alt loading="lazy" class="md-img">
操作を簡単にするためのコンセプト 
動的な組み方するためのコツ
とかを下の動画で語っています 
<iframe src="https://www.youtube-nocookie.com/embed/11LUy8Ry6FE" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen loading="lazy"></iframe><a href="https://www.youtube.com/watch?v=11LUy8Ry6FE" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://www.youtube.com/watch?v=11LUy8Ry6FE</a>
<h1 id="%E3%81%93%E3%82%8C%E3%81%A7%E3%81%82%E3%81%AA%E3%81%9F%E3%82%82uetdvj">
<a class="header-anchor-link" href="#%E3%81%93%E3%82%8C%E3%81%A7%E3%81%82%E3%81%AA%E3%81%9F%E3%82%82uetdvj" aria-hidden="true"></a> これであなたもUETDVJ</h1>
この最低条件クリアするために、 
UE5できるひとは、ちょっとTouchdesignerを勉強してみたり、 
逆も然り。。。
個人的には、UE5のほうが断然ムズイ。。機能多すぎて。。
そこを乗り越えれば、ここからはあなたの完全フリースタイル
みなさんがやりたいようにやっちゃってください！
さらに、 
miwa maroonが映像や世界観を作るうえで、行ったクリエイティブプロセスを知りたいとの声が多々あったので、 
こちらから興味ある人は、ざっと見てください～ 
link
質問あれば、<a href="https://twitter.com/miwata34" target="_blank" rel="nofollow noopener noreferrer">twitter</a>、<a href="https://www.instagram.com/miwa_maroon/" target="_blank" rel="nofollow noopener noreferrer">insta</a>、<a href="@miwa_maroon">youtube</a>どれでもいいのでお気軽にしてください～
自分もまだまだ成長途中なので、これを読んでいただいたみなさんと一緒に、 
成長していけたらいいなと思っているので、 
ぜひいいね、フォロー等お願いします！！
まじでみんな
ぶらぼー

UE5とTouchDesignerでVJをはじめよう

Discussion