--- author: mugi created: 2016-11-28 wp_postid: 3301 title: "Making-of: group_inou - EYE" wp_post_type: page aliases: - making-of/eye tags: - making-of permanent: true description: StreetViewを使ったピクシレーション、雑コラ visibility: public modified: 2026-04-11T06:39:42.147Z content_id: cyC6geh1--CWtaUvlUF7N --- ::ja [[eye|group_inou "EYE"の MV]]、かなり独特なフローで制作したので、技術まわりの諸々をメモ。丁寧に書いていくと相当な物量になりそうなので、要所だけ抑える感じで……。 ## どうやって作る 見れば分かる通り、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']baku89/group_inou-EYE : GitHub[/license] ## Hyperlapse.js StreetView の画像の取得には、teehan+lax 社がオープンソースで公開している[Hyperlapse.js](http://labs.teehanlax.com/project/hyperlapse)を参考にしました。Vimeo 界隈だとこのムービーは有名かも。 https://vimeo.com/63653873 ただ、実のところ 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 に読み込んで、パノラマデータを書き出します。 https://x.com/tgck/status/615541756151533568 公開した後になって、この方のツイートで takram さんの記事を知りました。やってる事はかなり近いです。ただ、canvas の中身をローカルに保存する処理のみ、Node.js の `fs.saveFile()` 使いました。ブラウザ内から Node.js のモジュールを直に呼び出すために、[NW.js](http://nwjs.io/)なるものを使いました。Node.js でネイティブアプリを作るためのフレームワークで、ちょうど Electron の競合にあたります。使い方も割と簡単。多分 API とか絡めてジェネ的に映像素材を作るためのフレームワークとして今後もかなり使えそうです。何より HTML+CSS で UI が組めるのが便利。 ## データの埋め込み Hyperlapse.js を使って保存した連番を Premiere で編集したものがこれ。 https://www.youtube.com/watch?v=z821RUwcE8k 下の方にある赤と緑の 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 以降のドライバのインストールはかなり厄介です。[サポート記事]()を参考にしました。 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)[^pogo] [^pogo]: [@mippeiuu](https://x.com/mippeiuuu/status/1975228876302553407)さんのご指摘を受け、「確かに」と思い出して追記。曲もMVも観てました。2026-04-11 --- 本家 Hyperlapse.js や NW.js など、さまざまなオープンソース・プロジェクトあって完成したビデオだったので、ソースコードだけではなくメイキングを洗いざらい公開するという形で自分なりに少しは恩返しが出来たのかなと思っています。また、面白いものが出来れば良しとのスタンスで変則的な作り方を歓迎してくれた、アーティストやレーベルの方々のご配慮や、小回りの効く座組あって、どうにか完成させられたと今振り返って思います。本当にありがとうございます。今後同じ手法を用いて作品作ることはありませんし、似た案件が来たとしても断るつもりでいます。この記事がどこまで参考になるかは分かりませんが、ご自由に手法として発展させていって頂けたら本望です。 --- ### 追記 Feb 4, 2016 https://x.com/googlemaps/status/636975123308892160 :: ::en [Video](eye) Below is a quick technical note. ## How to Make? The basic idea of this video is to combine the Street View screenshots with the stop-motion animation of the artist of the video, group_inou. To make this technique possible, it was essential to build efficient methods of retrieving background panoramas from Street View and shooting pictures of members. Here is a basic workflow. 1. Location Hunting: Write down good locations on spreadsheet. 2. Fetching proxy images of Street View and making pre-visualization. 3. Shooting. 4. Converting images to high-res and compositing with characters. Below is a set of tools I had built in the making process -- though a large part of their codes is messed up. [license type='mit' href='https://github.com/baku89/group\_inou-EYE']baku89/group_inou-EYE : GitHub[/license] ## Hyperlapse.js To get images from StreetView, I forked [Hyperlapse.js](http://labs.teehanlax.com/project/hyperlapse), which is an open-source library from teehan+lax. https://vimeo.com/63653873 I ended up barely using Hyperlapse.js itself but mainly used a library called GSVPano.js, on which Hyperlapse.js depended. An original repository was deleted by violating the Term of Service (ToS), so I used the modified version in Hyperlapse.js. The official blog of teehan+lax said they rewrote the part of the code which downloads panorama-tiled images to use official API methods not to conflict with ToS. ## Fetching Panorama Hyperlapse.js automatically searches routes between two points with Google Map API, subdivides the route into a series of points, and finds the nearest Street View. It means Hyperlapse.js cannot go out-of-way places, like inside buildings or elevated railroads, so I built a tool to collect adjacent Street View IDs from a given initial point. [Pano ID Extractor](http://s.baku89.com/panoid-extractor/) ![](https://wp.baku89.com/wp-content/uploads/2015/07/panoid-extractor.gif) GSVPano.js loads the JSON array of panorama ID and downloads each panorama image. `toDataURL()` converts the panorama image drawn on canvas into base64, and “fs.saveFile()“ in Node.js saves them into local. I used [NW.js](http://nwjs.io/) to enable Node.js functions to be called from the browser. ## Embedding Data in Panorama Images Below is edited panorama images. https://www.youtube.com/watch?v=z821RUwcE8k A red and green dots on the bottom edge of this video are the saved Panorama data. ``` { "id": "WysqsRo6h5YGNmkkXVa9ZA", "rotation": 35.11, "pitch": 1.09, "latLng": { "A": 51.59035, "F": 3.677251999999953 }, "date": "2009-09", "heading": 0 } ``` This JSON is converted into byte arrays and writes each bit on the bottom of the video. (corresponding code) The reason for going through this process was to replace it with high-res images later. The dimension of the sky map image needed for rendering 1080p is at least 10Kpx, but it could cause some trouble if I kept downloading too many of such large images, so I got 1600px-wide good-looking images for that time. I built a proxy-replacing tool for that. ![](https://wp.baku89.com/wp-content/uploads/2015/07/replace-proxy_gif.gif) ## Making Pre-visualization A detailed previz was required at the pre-production stage because shooting could be very tough otherwise. I brought edited panorama images into Cinema4D and added camera motion. Fortunately, there were low-poly models of both characters from another project, so it was easy to set the motion of members. ## Shooting EOS 5D Mark2 was used for shooting. For realistic lighting and perspective, the idea of taking images of many general poses to use them repeatedly was not good enough. So I decided to shoot from beginning to end in turn. It turned out to be around 3,000 frames to shoot. Strong automation was required, so I built a shooting system with NW.js. ![](https://wp.baku89.com/wp-content/uploads/2015/07/shooting-app.jpg) ### Controlling lights with DMX I used DMX, a protocol generally used for controlling stage lights, to control lights. [ENTTEC DMX USB PRO](http://www.enttec.com/?main_menu=Products&pn=70304&show=description) was used to send DMX signals. It was tough to install the driver into mac with OS after Mavericks because of some known bugs. DMX is mainly used for stage lighting, most of which has XLR inputs to receive the DMX signals, but there is no such as photographic lighting. An alternative was [ELATION DP-415](http://www.elationlighting.com/ProductDetails.aspx?ItemNumber=1286) to control input voltage directly. ### Calculating Camera Position and Adjusting Direction of Characters I added Xpresso in Cinema4D project to calculate camera position. Time direction was used to set the direction of members. Distance from members is written on floors, and scale was written on tripod feet to make the angle more accurate. Plates with each time were around them. A video guide was set above them so they could see the direction to turn next. ![](https://wp.baku89.com/wp-content/uploads/2015/07/shooting-data.gif) ### DIY Release and Electric Follow-focus with Arduino I also built PC control for the shutter and zoom ring with Arduino since the camera position is quite high. (btw I found there were [official Canon SDK](http://www.usa.canon.com/cusa/consumer/standard_display/sdk_homepage) and [add-ons for oF](https://github.com/roxlu/ofxCanon) after everything was done.) I used a stepper motor to drive the follow-focus. It was a little risky because it did not recognize the end of the rotation of the zoom ring, but there was no time to fix that problem. It looks kinda ugly, but it somehow worked. ## Extending Cinema4D with Python Cinema 4D uses python as a scripting language. This means OSC/DMX libraries also run on Cinema4D. I used [python-osc](https://pypi.python.org/pypi/python-osc) to synchronize the timecode between the apps and [pySimpleDMX](https://github.com/c0z3n/pySimpleDMX) to control lighting. [Send OSC with python tag](https://gist.github.com/baku89/7e2b381bbeac77ba295f) ### Use of VDMX A large video guide was projected using [VDMX](https://vidvox.net/). This helped members to image their motion. ![](https://wp.baku89.com/wp-content/uploads/2015/07/vdmx-out.jpg) ### Actual Shooting ![](https://wp.baku89.com/wp-content/uploads/2015/07/shooting-system_en.png) It turned out to be a system like the above. Pink arrows indicate OSC. With this system, we could finish taking nearly 3,500 frames in two days. ![](https://wp.baku89.com/wp-content/uploads/2015/07/shot-test.gif) _Test shooting_ ### Post Production All sources were edited with AfterEffects. The background was replaced with a high-­res version. Because of too fast movement, AE's Warp Stabilizer did not work well, so we manually stabilized the Street View backgrounds frame-by-frame. --- If you have further questions, please feel free to mention [@\_baku89](http://x.com/_baku89). Special thanks to Nolie-san for translating. --- ### Feb 4, 2016 https://x.com/googlemaps/status/636975123308892160 ::