LoginSignup
57
31

More than 5 years have passed since last update.

@sanokazuya0306(Kazuya Sano)

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

Last updated at Posted at 2019-03-28

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

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

お手伝いするまで

同じくクマ財団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（情報科学芸術大学院大学）とかでは割とよくある話だったので、できる範囲でお手伝いすることに。

どう実現するか

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

ハードウェア面

ざっくり下記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
7680×1080のconstantを用意して、overで左から順番に重ねる。
今気づいたけど、3つに分かれてるならわざわざ1つにする必要なかったわ。

3.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で買った安物だったのでちょっと不安だった。

実際に現場でつないだら、案の定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
最初はボタンを置き、Movie File in TOP3つのReloadに連動させていたが、2GB程度のファイル3つを一度にReloadするとReloadに結構負荷がかかることを察し（あたりまえ体操）、CUEとの連動に切り替える。

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

7.PNG
迷った結果、Timeline CHOPを使ってフレーム数をとることに。

6.PNG
動画が毎秒24フレーム、3'00"=180秒ちょうどなので、180×24=4320。5秒分のバッファをとって4440フレームに調整。

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

1.PNG
あとは音が若干ずれたりしたので、Cue Pointを目方で0.5秒ズラして調整。ピッタリ合った。

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

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

追記

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

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

オペレーション用

4.PNG
Window COMPのOpenに連動させて、ボタン押したらWindowが3枚出るようにしておきました。秘伝の（全然すぐ作れる）FPS Viewerも同封しております。

8.PNG
PerformモードにするとWindowボタンとFPS表示だけ出てくる。

これで完了

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

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

キーホルダー買っちゃった

Creative Commons License: CC BY 4.0

57
31
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
57
31