Entries

THE GIANT MAP インスタレーションのメイキング

フランスで展示してきたTHE GIANT MAP。いろいろ四苦八苦したので、制作忘備録。将来の自分と、今後こういうのやってみたい人用。






きっかけ
実はもともとはGoogle主催のアートコンペ、Google Dev Artエントリー用の作品だった。

このDevArtは、グーグルがスポンサーとなって行われるデジタルアート展覧会へに出品するための公開コンペ。たった1人の座を争っての世界中からのバトルロイヤル。条件は2つ。Googleのテクノロジーを使った、デジタルアート作品を作ること。そして、途中プロセスを全て公開すること(プロセスも審査に含む)。

ちょうど新しいことをやりたいなぁと思っていた僕は、無謀にもこのコンペにエントリーを試みる。



コンセプト設計
まずは何を作るべきか!?というところで、コンセプト設計から。ロンドン留学時代に学んだことは2つ。コンセプトのない作品は評価されないこと。ワールドワイドな製品作ろうとしたら「1秒で伝わる」設計にする必要があるということ。この辺はせっかく留学してたのだし、海外ウケするロジックで作ろうかなと。

コンペという性質上、「キャッチーであること」と「被らないこと」が重要だったので、アウトプットの表現より先に「応募作品の中で一番、子供が発狂して暴れ回って夜眠れなくなるものを作る!」というのを内部テーマに。

次に「子供が大興奮」というテーマから逆算をして、立ち止まってたり手にとるよりは、走り回るもの暴れ回るものが有利・・・ということで、まず「床を使った表現」が決定。動作に必然性をもたせるために「踏む」「走る」「転がる」をトリガーに。

そして、制作期間1ヶ月・・・というしばりから、ある程度引き出しのある分野がよいので、自分の過去資産から物理エンジンをひっぱってきて、「縮尺感の破壊、ゴッコ遊び、ゴジラになれる!」という表現に至る。

また、そもそもの「Googleテクノロジーを使う事」というお題からGoogle Mapを取り込む。

最終的にプレゼン用のコンセプトは「大人がしかめ面で見るのではなく、子供が体感できるインタラクティブアート」「1秒でわかる」「世界の縮図である地図を、今度は再拡大してリアリティを破壊」みたいなあたりに着地。

同様のネタを過去10年ぐらいの事例をGoogle検索したが出てこず、いける感触がしたので作業を進めることに。


初期コンセプトプレゼン用のスケッチ。iPadとGoogle Mapのキャプチャにミニチュアを置いて検証。このスケッチができた時点で、なんか行けそうな気分になる。



プラットフォーム選択
コンセプトと作るモノがきまったら、まずは最適なプラットフォームの選定。とりあえずの候補としては、以下のようなものを考えた。それぞれの長所短所を比べつつ、適切なものを選ぶ。〆切がたったの1.5ヶ月しかないし、使える時間は放課後オンリーなので割と急ぐのである。

Flash
我が最強兵器。長所は作業のスピード感と表現力、オンライン作品。短所はデバイス連動と速度。
iOS
長所はメインフィールドかつキャッチーなこと。短所は自作デバイスとの連動に難がある。応用を聞かせづらい。
Cocoa & Mac
長所はiOSとの技術互換。短所はC++でできることの劣化版であること
Android
長所はこれだけで「Googleテクノロジー」のお題を突破。短所は経験無し。
Processing
長所は作業のスピード感と表現力。短所はダウントレンドなこと。
JavaScript
長所は作業のスピード感。オンライン作品。短所はパワー不足な点と自作デバイスとの連動に難。
Open Frameworks & C++
長所は速度と表現力。短所はC++のノウハウのなさ。
Cinder & C++
長所は速度と表現力。短所はC++のノウハウのなさ。
MAX MSP
長所は音楽、デバイスとの親和性。短所はグラフィック表現の弱さ。

今回の場合は、センサーなどデバイス連動が想定されたのでProceesing、OpenFrameworks、Cinderあたりで悩む。最終的に、やったことのない分野に挑戦しよう!とOpenFrameworksとC++を勉強がてらで挑戦することにした。ライゾマさんとか見てて、自分もoF作れるようになりたいと。以下、「ロベールのC++入門講座」という本を買って、ゴリゴリ読みながら書く。



物理エンジンの実装
踏んだら揺れる、大地が砕ける。そういうのを実装するのに物理エンジンが必要に。

Box2dなどの物理エンジンは、発散するしチューニングが難しいのでボツ。自前で物理エンジンを実装することに。簡単な物理エンジンは人生で10回ぐらい実装してるのでラクチン。JavaScriptで書いた簡易の物理エンジンを移植しながら、C++の練習とした。





ブラウザの実装
グニャグニャと破壊される地図を作るとして、C++のアプリ内でGoogle Mapsを表示するにはどうすればいいだろうか?

Google Mapsをテクスチャとして読み込む方法は、正直かなり悩んだ。最初はブラウザをバックグラウンドで回して、Chrome拡張でスクリーンキャプチャをとってフォルダに保存。アプリで定期的にリロード・・・という流れを考えていた。

ところがChrome拡張作るの面倒い、マップ読み込み完了の通知ができない、遅い・・・など面倒が積算して挫折。一時は先に地図をjpegで保存しておこうか・・・ってぐらい煮詰まる。結局、自分でC++のアプリ内にブラウザ機能を実装することに。

C++はじめてのオレがブラウザなど実装できるわけもなく、最終的にChromiumというオプソのChrome互換ブラウザをアプリの中に埋め込み、JavascriptでUIのブリッジだけ作ってローディングを制御。アプリ内のブラウザ表示をそのままテクスチャーに転送するという方法を採用。はじめてのC++で他人のライブラリやらモジュール埋め込んでマジ死にかけた。



シェーダーの実装
Google Mapの衛星写真が汚い。ブロック状のムラがあるは色はくすんでいるはで、実際に表示してみると予想以上にダメな感じに。仕方がないので自力でシェーダーを書いて、強引にキレイにすることにする。この辺はiPhoneでカメラアプリを作っていたノウハウで対応。

基本的にはルックアップフィルターで色補正をするのだけれども、それだけではつまらない。結果、朝日やら夕日やら夜やらまでシェーダーで実装することに・・・

時間の移り変わりを作る必要が生まれたので、複数のシェーダーを任意の比率でブレンドできるシェーダーブレンダーまで作成。ピクセルシェーダーで夜を表現するのがムズかったけど、明度差を閾値に、照明と解釈して発光させる閾値を強引に作った。





パーティクルエンジンの実装
ただのマップをミニチュアに生まれ変わらせるための作り込み。「雲」「霧」「地割れ」「噴煙」「火花」などをパーティクルとして実装することに。

パーティクルエンジンも人生で何十回も実装しているので、C++の勉強パートとして作る・・・も、C++の継承とOverrideが鬼でまともに動かず予想外の苦戦をする。

途中から「風」を実装しはじめたら、予想外に面倒になってきたので、そこらへんは適当に嘘で誤摩化すなど。下は雲を実装した早朝シェーダーの画面。雰囲気でてる。





飛行機の実装
地図にさらなるリアリティを出す為に、飛行機を飛ばすことに。

Amazonプライムで飛行機の玩具を注文して撮影、素材とする。作ったパーティクルエンジンを使いまわして飛行機雲も作成。

神は細部とばかりに、飛行機を踏んづけたら大爆発するギミックも仕込んだのだけど、おりしもマレーシア航空が墜落したり、ウクライナで撃墜があったりで、コンペの段階ではこの機能はお蔵入りに・・・合掌。





センサー部分の実装

肝心のセンサー実装は、まぁ精度が出ないこと出ないこと。

ネットを調べても、「位置情報をとる」ノウハウや、「1人の足跡を検出する」ノウハウは一杯あるが、複数人の足を精度よく取るリーズナブルな方法がなかなか見つからない。しょうがないのでババッと仮説を6種類ぐらいたてて、現実的なものからプロトってテスト。

Web Cam
暗すぎる。位置は取れるが足踏みの瞬間の検出がムズイ。
床下ガラスパネルから赤外線センサ
床部分を1mほどせり上げる必要があるため、設営コストが膨大に。50万コース。
Kinnect
位置は取れるが、複数人の足踏みの瞬間を検出するのがムズイ。
感圧パネル
精度最強。見積もりを取ったら予算オーバー。数百万コース。
物理スイッチ
50cmで16スイッチ。4平米で1024スイッチ。arudinoではちょっと取れなさそうな分量&解像度低い。50万コース。
放射状レーザーセンサー
精度は高いがお値段も高い。検出したものの裏側(影になった部分)のオブジェクトが取れない。20万kコース

レーザーセンサーどうしようか悩んでいたところ、最終的にライゾマの中の人がオススメしてくれた北陽電気の製品が候補に。1個15万ぐらいするものを鼻血出しつつ複数購入。キャンバスの四隅に配置し、複数のセンサー検知を合成することで物陰の検出も強引にサポート。

レーザーセンサー自体、角度と距離を返してくる。これだと障害物を検知できるけど、「足」や「足を踏み出す」という行為を検知できない。
ので複数台のセンサーの戻り値を合成してノイズを除去し、角度、距離を「足を踏み出す」という情報に変換する必要がある。下のような感じで実装。

  • 角度と距離を、1024 x 1024のグリッドに変換。
  • グリッドを画像に変換し、OpenCVで足と思われるエリアを画像認識で抽出。
  • 抽出した足エリアを複数フレームにわたって監視。
  • 足エリアが新しく発生した瞬間を検知し、足踏み出しのイベントを発火



センサーとの大格闘のすえ、なんとか最後には良い精度で動くことに!実はこのあたりは最小実装にした為に、設営時に地獄をみることになったのだけど・・・それはまた別の話。とりあえずの教訓は、アプリ起動中にセンサー引っこ抜いたり電源抜き差ししても、ちゃんと動くような冗長性マジ大事。



最終調整
よく、「アニメーションや動きが気持ちよくならない!」という人がいるけど、そういう人の99.9%は、パラメータをハードコードで実装している。

アニメーションに関するあらゆるパラメーターは外だしして、スライダーでリアルタイムに調整できるようにするのがよい。こうすると最終成果物を見ながら調整できるので、気が済むまで弄くれる。調整した値はXMLとかで外に出せるのが理想。

動きをいきなりハードコードして許されるのは、頭の中で全てをプリレンダリングできる達人クラスだけ!





ビデオ
僕らもタクラムさんやライゾマさんみたいに凄いビデオ欲しい!と思いつつ、残された期間はプレゼン日まであと数日・・・
というわけで同じTHE GUILDのGo Andoさんに手伝ってもらうことに。一眼レフと何故か持ってるカメラレールによる突貫工事。僕の趣味で怪獣映画風です。

本当に助かりました。多謝でございまする。それにしてもカメラレール持ってるだけで、表現の幅が広がる広がる。



プレゼン

そんなわけでC++わからねぇと泣きながらも頑張った1ヶ月間、なんとか完成に至るわけです。〆切ギリギリにソースファイルをコミット。そして無事に第1予選を突破し、第2予選も突破。めでたくラスト4人の最終面接へとコマを進めたのであった。

ところがどっこい最終審査は、ハングアウトによる面接。面接官はGoogle London(Creative Lab)の面々と、世界のデジタルアート神3人。そしてスカイプの音質が死ぬほど悪い・・・

怪しい英語で四苦八苦頑張るも、審査員がなかなか厳しいコメントをしてくる。以下、審査員の方々からもらった厳しい質問の数々。

  • 実装は、レーザーより超音波センサーのほうが低コストだったのでは?
  • マップを踏んで破壊することにおいて宗教、政治的な問題は大丈夫か? → イスラムの聖地とか、ツインタワーとかは避けたよ。
  • Map加工は著作権的に規約違反じゃ? → 子供教育コンテンツだしフェアユースでokでしょ。
  • ブラウザ実装して世界中の人が触れるほうがよいのでは? → ぐぬぬ

胃が痛くなるような1時間の後、審査会は解散。ドキドキしながら待ちつつも、結果発表日には「残念」の通知が・・・
残念賞としてGoogle I/Oのチケットを2枚もらう。敗北である。レーザーセンサー買ったり、Arudno買ったり、床スイッチ作ったりこの時点で40万ぐらい現金赤字。



反省

そんなこんなで敗退したDevArt、Google Mapプロジェクトもこのまま闇に消えるはずだったのですが・・・捨てる神あれば拾う神あり!「作成プロセスを全公開する」というコンペのルールのお陰で、ウォッチしていたパリの美術館の人が、僕らを拾ってくれたわけです。

かくして、Gatie Lyriqueで開催される、子供の為のデジタルアート展にTHE GIANT MAPは出品されることになりましたとさ。めでたしめでたし。

いかザックリとした反省点。

  • C++超早い、ただ習熟度の問題で表現力に足かせが出た。
  • センサー系はデバッグが大変、前倒しと安定性に注力すること。
  • 立体はかさばるので保管と輸送についても考えておくこと。
  • 特殊なデバイス担いで海外にいって設営するのはかなりリスク高い。
  • 英語力を磨くこと。



はじめてのアート制作、しんどいけどかなり楽しかった。自分のC++技術力の限界でアラも結構多いけど、また次に作ることがあればもっと良い物を短期間で作れそう。時間に余裕ができたら、また次回作作りたいと思います。