--- title: "Making-of: group_inou - EYE" description: StreetViewを使ったピクシレーション、雑コラ date: 2016-11-28T00:00:00.000Z updated: 2026-04-11T06:39:42.147Z tags: - making-of url: https://baku89.com/ja/making-of/eye --- # Making-of: group\_inou - EYE [group\_inou "EYE"の MV](/eye)、かなり独特なフローで制作したので、技術まわりの諸々をメモ。丁寧に書いていくと相当な物量になりそうなので、要所だけ抑える感じで……。 ## どうやって作る 見れば分かる通り、Street View を使ってます。そこにコマ撮りしたアーティストを雑コラ的に合成。 大まかなフローは以下の通りです。 1. ロケハン ([スプレッドシート](https://docs.google.com/spreadsheets/d/18ssc6eXzSahTtuvf0-JdteKtV_w82o11EWMhWd3nJ30/edit#gid=0)によさ気な場所をピックアップ) 2. プロキシ版 StreetView の取得 & プレビズ作成 3. 撮影 4. 高解像度置き換え & 合成 いくつもツールを自作しました。汚いコードですが、アップしときます。動作保証は致しかねます。 license type='mit' href='[https://github.com/baku89/group\\\_inou-EYE](https://github.com/baku89/group%5C_inou-EYE)'baku89/group\_inou-EYE : GitHub/license ## Hyperlapse.js StreetView の画像の取得には、teehan+lax 社がオープンソースで公開している[Hyperlapse.js](http://labs.teehanlax.com/project/hyperlapse)を参考にしました。Vimeo 界隈だとこのムービーは有名かも。 ただ、実のところ Hyperlapse.js 自体は殆ど使ってなくて、Hyperlapse.js が依存している[GSVPano.js](https://github.com/TeehanLax/Hyperlapse.js/blob/master/examples/js/GSVPano.js)ってライブラリを主に使いました。本家リポジトリが Google から怒られたらしく消されていたので、Hyperlapse.js に入ってるバージョンを。teehan+lax のどっかに載ってたメイキング記事によれば、GSVPano.js 内部で直でパノラマのタイル画像を引き抜いてる所がアウトだったから、API 的に呼び出すよう書き換えた、とのことでしたので。 ## パノラマの取得 Hyperlapse.js は Google Map API で 2 点間の経路を検索し、その経路のパスを分割して点群にバラし、各点毎に近傍の StreetView を検索かけています。つまり、経路検索の出来ない僻地や建物内は行けない上に、僻地や高架などではうまく動かないので、経路検索ではなく、隣接するパノラマの ID の配列を吐き出すツールを作りました。 - [Pano ID Extractor](http://s.baku89.com/panoid-extractor/) ![](https://wp.baku89.com/wp-content/uploads/2015/07/panoid-extractor.gif) ここで吐き出したパノラマ ID を GSVPano.js に読み込んで、パノラマデータを書き出します。 公開した後になって、この方のツイートで takram さんの記事を知りました。やってる事はかなり近いです。ただ、canvas の中身をローカルに保存する処理のみ、Node.js の `fs.saveFile()` 使いました。ブラウザ内から Node.js のモジュールを直に呼び出すために、[NW.js](http://nwjs.io/)なるものを使いました。Node.js でネイティブアプリを作るためのフレームワークで、ちょうど Electron の競合にあたります。使い方も割と簡単。多分 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 をシリアライズした上で、各ビットを書き込んでいます。[該当箇所のコード](https://github.com/baku89/group_inou-EYE/blob/master/src/coffee/canvas-matrix-code.coffee)です。つまり何がしたいのかというと、後で高解像度版に置き換えられるようにするためです。フル HD でスカイマップとして使うには、横 13,000px 位は必要なのですが、そんなに高解像度のデータをわんさかと取得するのはいささか重たいです。そこで編集段階ではできる限りデータを軽くするために、一旦横 1600px 程度のプロキシ画像をダウンロードし、Premiere で編集したものを一括で高解像度版に置き換えるという手順をとりました。これも専用のツールを作りました。 ![](https://wp.baku89.com/wp-content/uploads/2015/07/replace-proxy_gif.gif) ## プレビズ作成 撮影が大変そうだったので、プリプロ段階でかなり細かい所までプレビズを作りこみました。 編集したパノラマを C4D にインポートし、カメラワークなどを付けます。少し前の group\_inou の[PR vol.10 のティザー映像](https://www.youtube.com/watch?v=5dKattFJwnc)で、お二人のローポリモデルを作っていたので、それを再利用して、人物の動きも大まかに決めていきます。 ## 撮影 5Dmk2 で写真撮影しました。基本的に雑コラ感を意図的に出し、あまり馴染ませない方向にはしようと思っていたのですが、それでも最低限パースとライティングは合わせておく方針としました。そうとなると、汎用性の高いポーズを素材撮りして随所で使いまわすという方法が難しかった上に、やっぱりそこは苦労してタイムラインに沿って撮った方が画に凄みが出るように思えたので、3000F 近く順撮りすることにしました。時短のためにも徹底的にオートメーション化してやろうということで、またもや NW\.js で撮影用アプリを組みました。 ![](https://wp.baku89.com/wp-content/uploads/2015/07/shooting-app.jpg) ### DMX で照明の制御 ライブハウスとかの照明の制御に使われるプロトコルである[DMX](http://www.soundhouse.co.jp/howto/light/dmx/)を使って、ライトの制御をしました。DMX の送信には[ENTTEC DMX USB PRO](http://www.akaricenter.com/tokusyu/mirror_ball/enttec/dmx-usb-pro.htm)を使いました。Marvericks 以降のドライバのインストールはかなり厄介です。[サポート記事](http://www.enttec.com/support-center/kb/article/108-OS_X_Mavericks_\(10.9\)_-_IMPORTANT)を参考にしました。 DMX を一言でいうと XLR ケーブルで照明の明度を送るためのプロトコルです。ライブ照明には、制御用に XLR の入力端子が付いていたりするのですが、撮影用照明の場合そうはいかないので、[ELATION DP-415](http://www.soundhouse.co.jp/products/detail/item/87785/)を使って照明への入力電圧を直接変えることにました。 ### カメラ位置、メンバーの向く角度の算出 プレビズ作成に使った C4D のプロジェクトを、Xpresso を使い、カメラ位置などを算出します。人物の向く方向は「○ 時の方向」で指示。スタジオ床にメンバーからの距離をバミって、三脚の伸縮部分にも目盛りを付けるなどして、カメラ位置を正確に手で移動させられるようにしました。スタジオの周囲には「○ 時」のプレートを貼り付け、上のガイド映像に従って指定の方向を向いてもらいます。 ![](https://wp.baku89.com/wp-content/uploads/2015/07/shooting-data.gif) ### Arduino でレリーズと電動フォローフォーカスの自作 三脚位置が高いので、PC からシャッターやズームリングを制御出来ると便利かと思い、Arduino でフォローフォーカスを自作しました。こちらの記事『[カメラのタイマーレリーズを自作してみた - FALCON's Diary](http://blog.falconsrv.net/articles/558)』を参考にしています。終わって気づいたのですが、EOS の SDK も実は公式リリースされている上に、[oF 用のアドオン](https://github.com/roxlu/ofxCanon)もあったりします。国内では規約の関係上ダウンロード出来ないのですが…。フォローフォーカスはステッピングモーターを使って回します。ズームリングが回りきったかを検出してくれないので、リングに負荷はかかるのですが、時間が無かったのでとりあえず動けば良いという方針でそのままに。東急ハンズで諸々買い出しし、近所の FabCafe でアクリルを切って組み立てました。相当不格好ですが。 とはいえ、実際には撮影段階で上手く動かないことも多く、後半は使わず...。このまま陽の目を見ないのは可哀想なので、借りたい人は気軽にご連絡ください。 ### C4D Library C4D は外部の Python ライブラリをインポートすることが出来ます。そこで、[pyhton-osc](https://pypi.python.org/pypi/python-osc)をつかって、Node.js の撮影アプリと C4D 間でフレームやカメラ情報の同期をしたり、[pySimpleDMX](https://github.com/c0z3n/pySimpleDMX)を用いて C4D から DMX の制御をしています。 - 参考: [OSC with C4D - gist](https://gist.github.com/baku89/7e2b381bbeac77ba295f) ### VDMX の有効活用 [VDMX](https://vidvox.net/)を使って、ガイドやカメラからの映像出力を重ね合わせて、プロジェクターで現場に大きく投影しました。現場全体で撮影しているシーンや展開を共有できたので良かったです。 ![](https://wp.baku89.com/wp-content/uploads/2015/07/vdmx-out.jpg) ### 撮影本番 ![](https://wp.baku89.com/wp-content/uploads/2015/07/shooting-system.png) このようなシステム構成に落ち着きました。ピンクの矢印は OSC。 結局 2 日で 3500 フレーム超撮影することが出ました。とはいえ、相当お二人に負担をかけてしまったのが反省点です。 ![](https://wp.baku89.com/wp-content/uploads/2015/07/shot-test.gif)\ _テスト撮影_ ## ポストプロダクション 撮影後は、地道に AfterEffects を使って編集。背景は先の Replace Proxy を用いて高画質版に変換し、AE でワープスタビライザーかけています。ただ、あまりに動きが早すぎて、スタビライズが全く上手く効いてくれなかったので、半分くらいは人力で手ブレ補正しました。 人物の配置は全編にわたって 1 フレームずつキーフレームを打っています。2 コマ打ちでも良かったのかもしれませんが、地面のプルプルに追従する感じや、動きのジワジワ感を醸し出すためには、ここはあえて 1 コマずつ編集しています。 また、グリッチ空間のシーンはノガミの担当でした。これも Photoscan というソフトを謎活用して無茶苦茶なことやってるらしいです。 ![](https://wp.baku89.com/wp-content/uploads/2015/06/group_inou-eye_thumb10.jpg) ## そのほか Term of Services はかなり読み込みました。ウォーターマークを消さない状態で、ブラウザ上での見え方から"著しく"変わらなければ商用利用も可、許可申請も要らない。雲などの自然物の除去や合成は可。あとは多分 ToS 的にはアウトですが、2 年以上公開停止になっていない StreetView を使った他作品([これ](https://vimeo.com/63653873)とか[これ](https://vimeo.com/37214968))を参考にしつつ、どこまで画を弄っていいかを判断しました。 リファレンスは色々あります。ノガミと共有してるものだと - [Google Street View Hyperlapse](https://vimeo.com/63653873) - [Gunnar and the Grizzly Boys - Could Be Me](https://www.youtube.com/watch?v=rphOfG52obM) あと個人的には: - [REDLINE](https://www.youtube.com/watch?v=R2H_FsmxWzc) - [ちびまる子ちゃん わたしの好きな歌／1969 年のドラッグ・レース](https://www.youtube.com/watch?v=6tye60cgY6k) - [OK Go - End Love](https://www.youtube.com/watch?v=V2fpgpanZAw) - [OK Go - Do What You Want](https://www.youtube.com/watch?v=D9MFpXDqpZI) - [黒板戦争](https://www.youtube.com/watch?v=4ucC2kSKoz0) - [Digitalism – Pogo](https://www.youtube.com/watch?v=lx_CowfnQJY)[1](#user-content-fn-pogo) --- 本家 Hyperlapse.js や NW\.js など、さまざまなオープンソース・プロジェクトあって完成したビデオだったので、ソースコードだけではなくメイキングを洗いざらい公開するという形で自分なりに少しは恩返しが出来たのかなと思っています。また、面白いものが出来れば良しとのスタンスで変則的な作り方を歓迎してくれた、アーティストやレーベルの方々のご配慮や、小回りの効く座組あって、どうにか完成させられたと今振り返って思います。本当にありがとうございます。今後同じ手法を用いて作品作ることはありませんし、似た案件が来たとしても断るつもりでいます。この記事がどこまで参考になるかは分かりませんが、ご自由に手法として発展させていって頂けたら本望です。 --- ### 追記 Feb 4, 2016 ## Footnotes 1. [@mippeiuu](https://x.com/mippeiuuu/status/1975228876302553407)さんのご指摘を受け、「確かに」と思い出して追記。曲もMVも観てました。2026-04-11 [↩](#user-content-fnref-pogo)