7680×1080の超ワイド動画を2560×1080の曲者ディスプレイ3枚にPC1台で出力する

#アニメーション展示を手伝いました

先日、表参道はスパイラルで行われたクマ財団2期生の展示にて、影山紗和子さんの展示を手伝いました。

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">お知らせ<br>突然なんですが、本日から展覧会に参加してます。自分はアニメーションを流てます🦀展示システム開発をさのかずやさん(<a href="https://twitter.com/sanokazuya0306?ref_src=twsrc%5Etfw">@sanokazuya0306</a> )にお願いしました！３画面のモニターで流れてて凄いです<br><br>KUMA EXHIBITION 2019<br>日時🌷3/21-24<br>場所🌷スパイラルガーデン<br><br>詳細<a href="https://t.co/MKPJGJzgPq">https://t.co/MKPJGJzgPq</a> <a href="https://t.co/pOEz337Nho">pic.twitter.com/pOEz337Nho</a></p>&mdash; 影山紗和子 (@batako42) <a href="https://twitter.com/batako42/status/1108619790002745345?ref_src=twsrc%5Etfw">2019年3月21日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


## お手伝いするまで
同じくクマ財団2期のハードウェアハッカーやまけん a.k.a. Bongorian(@Bongorian)からヘルプの連絡が。

- 動画の画面解像度は**7680×1080**。初めて聞いた。
- アニメーションの長さは3分。
- LGの2560×1080ディスプレイ3枚が用意してあるということだった。
- Macは使えるがグラボが強いPCはない。
- 普通に分配器とかでいけると思ってたらいけなかった。
- **設営は3日後。**マジか。


ちなみに分配器とは、HDMI信号を2つに分けるためのもの。**2本のHDMIから同じ映像が出るが、別々の映像を出すことはできない。**それはそれ用の機材が必要になる。ちょっと高いしあんまり置いてない。分配器でいけると思ってたらいけなかった、はわりとあるある。

>【参考】HDMI分配器についてなんですけど、HDMI分配器をパソコンに入力して... - Yahoo!知恵袋
https://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q1392698383
【参考】デュアルディスプレイのやり方とケーブルの選び方（トリプルディスプレイ追記しました）
http://pasokatu.com/653

最初は「よくそれでやるなあ…」と思っていたが、せっかく準備してきたのに展示できないのはとてもかわいそうだったし、ぼくのいた[IAMAS（情報科学芸術大学院大学）](https://www.iamas.ac.jp/)とかでは割とよくある話だったので、できる範囲でお手伝いすることに。


# どう実現するか
問題は大きく２つ、**ハードウェア面（どう映すか）とソフトウェア面（何で出すか）**があった。組み合わせによって必要なツールや買わなきゃいけないもの、スキルセットが変わってくる。

## ハードウェア面
ざっくり下記2つの方法がある。

- **1台からなんとかしてHDMI出力3本出す**
    - 【メリット】機材をたくさん使わなくて済むのでリスクが少なく、オペレーションしやすい。
    - 【デメリット】1台のPCに負荷がかかるので強いPCが必要。また何本も出力する工夫が必要。
- **PC1台→ディスプレイ1台の3組を通信して同期させる**
    - 【メリット】1台あたりの負荷が減るので普通のPCでもいける。
    - 【デメリット】PC3台用意してそれぞれにソフトを入れてつなぐのは準備もオペも大変。

今回の場合は、1台からHDMI出力3本くらいなら出せそうだったこと、1台のゲーミングノート（さの所有のRazer Blade 2017モデル/NVIDIA GeForce GTX1060）でも動かせそうな程度の動画サイズ（約7GB）だったこと、そしてこの週末はRazerを使う予定がなかったので、**1台から3本の出力を出すことに。**

余談ですが、知り合いに**強靭なデスクトップ→（NDI）→ゲーミングPC4台→（HDMI）→ディスプレイ14枚**をやってた人がいるので、物理的にはそこまでは全然いけるっぽいです。お金は知らん。


## ソフトウェア面
ソフトウェア面の懸念事項はざっくり下記のようなものがあった。

- **TouchDesignerで組む**
    - 【メリット】たぶんそこまで深い知識がなくても作れる
    - 【デメリット】ライセンス（通常600ドル/Educationalで300ドル）がないと1080×1080以上の出力ができない
- **openFrameworks, Processingなどで組む**
    - 【メリット】アプリケーションをBulidすれば基本そのまま使える
    - 【デメリット】それなりのスキルが必要
- **普通にディスプレイがきれいに並べば組まなくてもいける…？**
    - 【メリット】一番楽
    - 【デメリット】つないで試せるタイミングが少ないならリスクが大きい

今回はoFやProcessingでシステムをサッとつくる技術力がぼくになかったのと、TouchDesignerのCommercialライセンスをぼくが持っていて、実際にディスプレイをつなげるのは2日前の現場設営以降ということだったので、総合的に判断して**TouchDesignerで組むことに。**


# 実際につくる

## TouchDesignerで組む

ということで、先にTouchDesignerで組んでみることに。
**特に難しいことしてないので、もうtoeファイルそのまま置いておきます。**
https://github.com/sanokazuya0306/TDmultidisplay

動画は最初から2560×1080に3分割してもらっていたので、一応HapQにエンコード。Adobe Media EncoderがQuickTime対応が終わっていたようで、Batchを発見してきてなんとかする。
>【参考】[TouchDesigner] 動画のカクつきを抑える - Qiita
https://qiita.com/kodai100/items/58fab87bea36b8ca0903
【参考】もしあなたが「Hap（またはHap Q）で動画を書き出して」と言われたら(Mac) - Qiita
https://qiita.com/ozawachev/items/938df068c53eb6fdec7b
（Batchこれだった気がするんだよな…ちがうかも）

![2.PNG](https://qiita-image-store.s3.amazonaws.com/0/77925/29f5b303-4f16-76d4-ef0e-0e48e5edbcc0.png)
7680×1080のconstantを用意して、overで左から順番に重ねる。
**今気づいたけど、3つに分かれてるならわざわざ1つにする必要なかったわ。**

![3.PNG](https://qiita-image-store.s3.amazonaws.com/0/77925/4ea30815-5a97-05be-fa2a-48fcaa86a535.png)
あとは逆に2560×1080のconstantで分割して、よしなにディスプレイ3枚に分ける。


## 現場テストで分かったこと
そんな感じでソフトはできたので、ハードウェア面のトライを含め設営日に現場へ。
事前の想定としては、Razer Blade 2017モデル(13インチ)は、**HDMIポート1つ、USB-Cポート1つ、USB3.0ポート3つ**がついていたので、

- ①普通にHDMI出力
- ②USB-C→HDMI出力変換
- ③USB→HDMI出力変換

の3本でいけると思っていた。**USB→HDMI変換だけ、Amazonで買った安物だったのでちょっと不安だった。**

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">安物のUSB3.0→HDMI(Windowsのみ)を使ってみている、たまに途切れるから常設はちょっと怖いけどまあ悪くはない、遅延も60fpsで2フレくらいかな <a href="https://t.co/KwMcktpUac">pic.twitter.com/KwMcktpUac</a></p>&mdash; さのかずやは3/29〜4/14でカナダ→アラスカ (@sanokazuya0306) <a href="https://twitter.com/sanokazuya0306/status/1107546081846423552?ref_src=twsrc%5Etfw">2019年3月18日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


実際に現場でつないだら、**案の定USB→HDMI変換につないだものだけがうまく出ない。**なんでや！
よくよく調べてみると、購入したUSB→HDMI変換が**1920×1080まで対応で、2560×1080は出せない**製品だった。確かに家のモニターでは問題なかった。曲者……！

影山さんと一緒に渋谷と新宿の電気屋さんを周り（ごめん）、**新宿のヨドバシでUSBから4Kと2Kを出せるアダプターを発見。1万円弱。たけえ…！！**

>Amazon | j5 create ジェイファイブクリエイト JUA365 [USB 3.0 to Dual 4K ＆ 2K HDMI Dual モニターアダプター] | j5 create | DVIケーブル 通販
https://www.amazon.co.jp/j5-create-%E3%82%B8%E3%82%A7%E3%82%A4%E3%83%95%E3%82%A1%E3%82%A4%E3%83%96%E3%82%AF%E3%83%AA%E3%82%A8%E3%82%A4%E3%83%88-JUA365-%E3%83%A2%E3%83%8B%E3%82%BF%E3%83%BC%E3%82%A2%E3%83%80%E3%83%97%E3%82%BF%E3%83%BC/dp/B06XKWTXX9/ref=sr_1_29?s=computers&ie=UTF8&qid=1553781671&sr=1-29&keywords=USB+HDMI+4k+2k

ちなみにAmazonでも、USB-Cから4Kを2本出せるやつを発見。買ってみたが4Kディスプレイがないのでまだ試していない。

>Amazon | Cable Matters USB C to デュアルHDMI 変換アダプター 2台ディスプレイ増設 USB-C ドッキングステーション マルチディスプレイ対応 USB TYPE-C マルチ変換アダ…
https://www.amazon.co.jp/gp/product/B0746SQNDC/ref=ppx_yo_dt_b_asin_title_o03_s00?ie=UTF8&psc=1

スパイラルに戻り、**j5createのアダプターを試してみたら無事に出た！**ヤッター！これでハード面は解決。


## 3台の映像＋音声の同期と微調整
1台から同じ型のモニター3台に出しているので、アダプターやケーブルが問題なければ信号の遅延などの問題はない。
でも3つの動画に分けていて、さらに念のため音声も切り分けているので、**3つの動画と音声を完全に同じタイミングから始めなくてはならない。**TouchDesignerあるあるのとんち大会。

![5.PNG](https://qiita-image-store.s3.amazonaws.com/0/77925/4f037acf-6d8d-e7ba-ad78-c87fdcc3e349.png)
最初はボタンを置き、Movie File in TOP3つのReloadに連動させていたが、**2GB程度のファイル3つを一度にReloadするとReloadに結構負荷がかかることを察し**（あたりまえ体操）、CUEとの連動に切り替える。

でもボタンでスタートしていては、**展示しっぱなしでもし少しずつズレが発生してしまったときに、ボタンを押さないとズレをなおせない。**だとしたらボタン以外のものでズレを調整したい。
一度、「動画が終わったら信号を送ってすべて同時に最初からスタートする」というシステムにしてみたが、**「それ再帰処理だからダメだね」**とTouchDesignerに怒られる（あたりまえ体操）。

![7.PNG](https://qiita-image-store.s3.amazonaws.com/0/77925/01ada460-d1ab-9421-b2d7-ba21c9e1fab4.png)
迷った結果、**Timeline CHOPを使ってフレーム数をとることに。**

![6.PNG](https://qiita-image-store.s3.amazonaws.com/0/77925/a4f2c5f3-d6d8-3ebd-8a4c-3d2a2e329618.png)
動画が毎秒24フレーム、3'00"=180秒ちょうどなので、180×24=4320。5秒分のバッファをとって**4440フレーム**に調整。

```1 if op('select2')['frame'] < 120 else 0```
Constant CHOPで呪文を書いて、ループ終わりと最初の5秒間は何も映らないように調整。

![1.PNG](https://qiita-image-store.s3.amazonaws.com/0/77925/9b58ecb8-4942-b840-3c9b-05af54915be6.png)
あとは音が若干ずれたりしたので、**Cue Pointを目方で0.5秒ズラして調整。**ピッタリ合った。


ということで、立ち上げた瞬間はそれぞれ適当なところから始まりますが、**1回4440フレームが一巡すると、そのあとはTimeCodeが一巡するたびにすべての動画＋音声が全く同じタイミングからスタートし続ける**、というシステムができました。めでたい。

これほんとは**「ボタン押したらTimeCodeごと0からスタートする」**というようにしたかったんですが、**TDのTimeCodeをボタンでいじったりする方法（Parameterの指定方法）がわからなかったのでできずじまいでした……**誰か知ってたら教えてください……。



### 追記
<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">映像音声の同期、ムービーも音声もPlay ModeをLock to Timelineにすると楽ですよ！次回はゼヒ <a href="https://t.co/rx7dEmZvQp">https://t.co/rx7dEmZvQp</a></p>&mdash; Satoru Higa (@satoruhiga) <a href="https://twitter.com/satoruhiga/status/1111455224114245632?ref_src=twsrc%5Etfw">2019年3月29日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

比嘉Godさんからアドバイス頂きました！

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">ありがとうございます！Lock to Timelineにすると、音声を別バージョンから抜いてたのでファイル上でも若干ずれてる可能性があったのと、ループの空白時間をつくるのがちょっと面倒かも…？と思ったのあえてLockしませんでした！<br>Timelineを任意に0から始めるパラメータってご存知ですか…？あるのかな</p>&mdash; さのかずや (@sanokazuya0306) <a href="https://twitter.com/sanokazuya0306/status/1111457136628781056?ref_src=twsrc%5Etfw">2019年3月29日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">CHOPなら頭合わせはshiftとかでやりますね 安定性の面から言うと動画編集してでもLockしたほうが確実です！</p>&mdash; Satoru Higa (@satoruhiga) <a href="https://twitter.com/satoruhiga/status/1111460290401435648?ref_src=twsrc%5Etfw">2019年3月29日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


Lock to Timelineのやり方も存じてはいたものの、あえてやらなかったのですが、そっちのほうがよかった様子。もし動画編集が可能ならみなさんはぜひそちらで！



## オペレーション用

![4.PNG](https://qiita-image-store.s3.amazonaws.com/0/77925/6dab2ed1-8e1c-8a3c-ef3d-db4db46c0aa3.png)
Window COMPのOpenに連動させて、ボタン押したらWindowが3枚出るようにしておきました。秘伝の（全然すぐ作れる）FPS Viewerも同封しております。

![8.PNG](https://qiita-image-store.s3.amazonaws.com/0/77925/3a90a627-bfc5-73e4-81af-b3161cb8fc95.png)
PerformモードにするとWindowボタンとFPS表示だけ出てくる。


# これで完了

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">無事に動いててよかった！横長でキャラクターが動き回って多発的に物語が展開するアニメーションって意外と今までなかった感じするし、1つの画面内と違ってあちこち目を向けないと見逃してしまう、というのが何回も見たくなって面白い。日曜日までなのでぜひ！無事に動き続けて！ <a href="https://t.co/6gqH6cKTXo">pic.twitter.com/6gqH6cKTXo</a></p>&mdash; さのかずやは3/29〜4/14でカナダ→アラスカ (@sanokazuya0306) <a href="https://twitter.com/sanokazuya0306/status/1108690045349683201?ref_src=twsrc%5Etfw">2019年3月21日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


無事に出ました。あとは影山さんにパソコン立ち上げ→プログラムをTDで起動→Performモード→Windowオープン、までのやり方を伝授。
4日間無事故で動き続けたようです👏なにより。
めっちゃいい作品なので今後の進化が気になります。

ほんとは**openFrameworksとかでアプリにしちゃって渡せたらもっとエレガント**だし、oFチョットデキルマンとかであればすぐできるんだろうけど、そこまでのスキルがなかった。もう少し時間あればそういうやり方もできるかも。

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">影山さんキーホルダー、たいへんキュート <a href="https://t.co/tbCGcpEeux">pic.twitter.com/tbCGcpEeux</a></p>&mdash; さのかずやは3/29〜4/14でカナダ→アラスカ (@sanokazuya0306) <a href="https://twitter.com/sanokazuya0306/status/1109753138762768384?ref_src=twsrc%5Etfw">2019年3月24日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
キーホルダー買っちゃった


Creative Commons License: [CC BY 4.0](https://creativecommons.org/licenses/by/4.0/deed.ja)