Baku Hashimoto

橋本 麦

Making-of: group_inou – EYE

group_inou “EYE”のMV、かなり独特なフローで制作したので、技術まわりの諸々をメモ。丁寧に書いていくと相当な物量になりそうなので、要所だけ抑える感じで…。

どうやって作る

見れば分かる通り、Street Viewを使ってます。そこにコマ撮りしたアーティストを雑コラ的に合成。 大まかなフローは以下の通りです。

  1. ロケハン (スプレッドシートによさ気な場所をピックアップ)
  2. プロキシ版StreetViewの取得 & プレビズ作成
  3. 撮影
  4. 高解像度置き換え & 合成

いくつもインハウス・ツール的なものを作りました。超汚いコードで多分動かなそうだけど、一応まるっとコードアップしときます。 baku89/group_inou-EYE – GitHub

Hyperlapse.js

StreetViewの画像の取得には、teehan+lax社がオープンソースで公開しているHyperlapse.jsを参考にしました。Vimeo界隈だとこのムービーは有名かも。

ただ、実のところHyperlapse.js自体は殆ど使ってなくて、Hyperlapse.jsが依存しているGSVPano.jsってライブラリを主に使いました。本家リポジトリがGoogleから怒られたらしく消されていたので、Hyperlapse.jsに入ってるバージョンを。teehan+laxのどっかに載ってたメイキング記事によれば、GSVPano.js内部で直でパノラマのタイル画像を引き抜いてる所がアウトだったから、API的に呼び出すよう書き換えた、とのことでしたので。

パノラマの取得

Hyperlapse.jsはGoogle Map APIで2点間の経路を検索し、その経路のパスを分割して点群にバラし、各点毎に近傍のStreetViewを検索かけています。つまり、経路検索の出来ない僻地や建物内は行けない上に、僻地や高架などではうまく動かないので、経路検索ではなく、隣接するパノラマのIDの配列を吐き出すツールを作りました。

ここで吐き出したパノラマIDをGSVPano.jsに読み込んで、パノラマデータを書き出します。

公開した後になって、この方のツイートでtakramさんの記事を知ったのだけど、やってる事はかなり近いです。ただ、canvasをbase64変換したやつをAjax的にゴニョゴニョしてサーバーから保存かけてやるのはコードが分散して億劫だったので、Node.jsの fs.saveFile() 使ったというワケ。で、ブラウザ内からNode.jsのモジュールが使えるようにするために、NW.jsなるものを使いました。要するにNode.jsでネイティブアプリっぽいものが作れるよーっていうやつで、使い方も割と簡単。多分APIとか絡めてジェネ的に映像素材を作るためのフレームワークとして今後もかなり使えそうです。何よりHTML+CSSでUIが組めるのがデカイ。

データの埋め込み

Hyperlapse.jsを使って保存した連番をPremiereで編集したものがこれ。

下の方にある赤と緑のQRコードみたいなのは、保存をかけたパノラマの各種情報が埋め込まれてて。

{
    "id": "WysqsRo6h5YGNmkkXVa9ZA",
    "rotation": 35.11,
    "pitch": 1.09,
    "latLng": {
        "A": 51.59035,
        "F": 3.677251999999953
    },
    "date": "2009-09",
    "heading": 0
}

こういうJSONを、バイト配列にバラし、各ビットを書き込んでるから仕組みは単純です。(該当箇所のコード) 何がしたいのかというと、後で高解像度版に置き換えられるようにするため。フルHDでスカイマップとして使うには横13,000px位は必要なのだけど、そんなバカバカ画像取得しまくったら何となく怒られそうだったのと、編集段階ではなるたけデータを軽くしたかったので、一旦横1600px程度でサクサクよさ気な場所を取得し、Premiereで実尺に編集したのを一気に高解像度版に置き換え。これも専用のツールを作りました。

プレビズ作成

撮影が大変そうだったので、プリプロ段階でかなり細かい所までプレビズを作りこみました。 編集したパノラマをC4Dに持って行ってカメラワークとか付けて。ちょど前のgroup_inouのPR vol.10のティザー映像で、お二人のローポリモデルを作っていたので、それを再利用して人物の動きも決めていきます。

撮影

コマ撮りなので、5Dmk2で写真撮影しました。基本的に雑コラ感を意図的に出し、あまり馴染ませない方向にはしようと思っていたのだけど、それでも最低限パースとライティングは合わせておこうと。そうなると汎用性の高いポーズを素材撮りして随所で使いまわすという方法が難しかった上に、やっぱりそこは苦労してタイムラインに沿って撮った方が画に凄みが出るように思えたので、3000F近く撮ることに。こうなると、時短のためにも徹底的にオートメーション化してやろうということで、またもやNW.jsで撮影用アプリを組みました。NW.js最高。

DMXで照明の制御

ライブハウスとかの照明の制御に使われるプロトコル、DMXを使って、ライトの制御をしました。DMXの送信にはENTTEC DMX USB PROを使いました。Marvericks以降のドライバのインストールはかなり厄介で、サポート記事参考にしています。 DMXは要するにXLRで照明の明度を送んよーってプロトコルで、ライブ照明とかは本体にXLRの入力端子が付いていたりするのだけど、撮影用照明はそうはいかないので、ELATION DP-415を使って照明への入力電圧を直接変えることにました。今後も色々つかえそうです。 事務所の適当な電球で試したやつです。

カメラ位置、メンバーの向く角度の算出

プレビズ作成に使ったC4DのプロジェクトをXpressoを使い、カメラ位置などを算出します。人物の向く方向は「○時の方向」で。スタジオ床にメンバーからの距離をバミって、三脚の伸縮部分にも目盛りを付け, カメラ位置を正確に移動させられるようにしました。スタジオの周囲には「○時」のプレートを貼り付けて、上のガイド映像を見つつ、指定の方向を向いてもらいます。

Arduinoでレリーズと電動フォローフォーカスの自作

三脚位置が高いので、PCからシャッターやズームリング制御出来ると良いなと思って、Arduinoでチキチキ工作しています。レリーズ自作は超簡単。この記事を参考に。 カメラのタイマーレリーズを自作してみた – FALCON’s Diary あと、諸々終わって気づいたのだけど、EOSのSDKも出てるし、oF用のアドオンもある。国内ではダウンロード出来ないのだけど、色々ゴニョゴニョやったら入手出来ました。(かもしれません, と念のため言っておきます) フォローフォーカスはステッピングモーターを使って回します。ズームリングが回りきったのを検出してくれないから危なっかしいんだけど、時間が無かったのでとりあえず動けば良いという方針で。東急ハンズで諸々買い出し。近所のFabCafeでアクリル切って、組み立てた。相当不格好だしMAKERS界隈の人には笑われそうですが…。

とはいえ、実際これ撮影段階で邪魔になり後半使わず…。このまま陽の目を見ないのは可哀想だし、電動フォローフォーカスはコマ撮り系でかなり使えるはずなので、借りたい人は気軽に言ってください。

C4D Library

C4Dも外部のPythonライブラリ普通に使える。つまりはOSCも使えるということなので、pyhton-oscをつかって、Node.jsの撮影アプリとC4D間でフレームやカメラ情報の同期をしたり、C4DからDMXの制御をしたりしています。pySimpleDMXを用いてDMXも同様に

VDMXの有効活用

VDMXを使って、ガイドやカメラからの映像出力を合わせて、プロジェクターで現場に大きく投影しました。現場全体で撮影しているシーンや展開を共有できたので良かったです。

撮影本番

こういうシステム構成にんばりました。ピンクの矢印はOSC。 このシステムを使うことで、結局2日で3500フレーム超撮影することが出ました。とはいえ、相当お二人に負担をかけてしまったのが反省点です。


僕とノガミでテスト撮影。DIY感あります。

ポストプロダクション

撮影後は、地道にAfterEffectsを使って編集。背景は先のReplace Proxyを用いて高画質版に変換し、AEでワープスタビライザーかけています。ただ、あまりに動きが早すぎて、スタビライズが全く上手く効いてくれなかったので、半分くらいは人力で…。(辛かった) 人物の配置は全編にわたって1フレームずつキーフレーム打ってる感じ。2コマ打ちでも良かったのかもしれませんが、地面のプルプルに追従する感じや、動きのジワジワ感を醸し出すためには、2コマ打ちではなく、ここは地道に1コマずつ編集していかないと。。。 また、グリッチ空間のシーンはノガミがベースとなるポリゴンを作っているのですが , これもPhotoscanというソフトを謎活用して無茶苦茶なことやってるらしいです。

そのほか

Term of Servicesはかなり読み込みました。ウォーターマークを消さない状態で、ブラウザ上での見え方から”著しく”変わらなければ商用利用も可、許可申請も要らない。雲などの自然物の除去や合成は可。あとは多分ToS的にはアウトですが、2年以上公開停止になっていないStreetViewを使った他作品(これとかこれ)を参考にしつつ、どこまで画を弄っていいかを判断しました。 リファレンスは色々あります。ノガミと共有してるものだと

あと個人的には。


本家Hyperlapse.jsもオープンソースプロジェクトだし、個人的にもっと映像以外にも色々出来るんですよって自慢したかったような気もするので色々書き尽くしました。あと、多分これ普通のアーティストだといろんな意味で絶対やらせてもらえなかったと思います。アーティストやレーベルの方々も、面白いものが出来れば良し、とのスタンスで許して頂けましたし、小回りの効く座組だったからこそ、これだけ変わったワークフローでもどうにか完成させられたと今振り返って思います。 多分今後同じ手法を用いて作品作ることはありませんし, 似た案件が来たとしても断るつもりでいますので、何か作り方に関して質問等があれば気軽に@_baku89に連絡ください。webには書きづらい制作過程とか結構ありますので。


追記 Feb 4, 2016