2018/05/08

東京地下鉄立体路線図をARでつくってみた


ちょっと前に、東京地下鉄立体路線図」というおもちゃが話題になりました。

僕の6歳になる息子は、日本に住んでまだ半年ほどですが、東京の地下鉄路線図の駅名はだいたい読めるようになってしまったほど、鉄道が大好きです。実家に帰ると、父(じーじ)の作ったNゲージのジオラマに貼り付きます。東京の地下鉄のダイナミックな高低差が立体でわかるこのおもちゃを買ってあげたい!と思いました。(自分が買いたい、というのもある(笑))が、家に置くスペースがない…。 その時ひらめきました。そうだ、ARで作れば、部屋に置いても物理的場所はまったくとらないじゃないか! さっそく作ることにしました。調べてみると、東京地下鉄路線の駅の標高を調べて3Dで表現したデータを作った方がいました。

Sketchup 形式だったので、この機会にSketchup を使ってみることに。僕は今まで CINEMA4D、Lightwave3D、3D StudioMax、Blender、Mayaなどの3Dソフトを使っていましたが、Sketchupは(Googleにいたくせに)ほとんど使ったことがなかったのです。今回使ってみて、その個性的なUIと哲学に感動しました。

路線図のデータは断片的なパスだけだったので、一度Explodeしてつなぎ直し、小さい子供も理解できるよう、太めのパイプ、チューブをイメージしてデザインしていきます。

あのアルファベットは Futura なんだなぁ、とか、色々と学びがありました。

駅を置くのが一苦労でした。路線図の駅の位置はデフォルメされているので、地図で確認しながら、路線図のラインと合わせて配置していきました。Appleの地図は路線図が見やすくて活躍しました。

最初は球だったのを円柱にして見やすく。

ちょっと時間がかかりましたが、配置完了。

これをHololensにデプロイしてみます。

ここ最近、自分でコーディングやらビルド、デプロイなんてしていませんでした。最新のUnity と Visual Studio をダウンロードするところからです。個人利用なら無料です。Unityは Sketchup ファイルのインポートに対応しているので、読み込ませて配置するだけ。Hololens公式サイトのチュートリアルに沿うだけで、スムーズにデプロイまでいけました。

早速起きてきた息子に見せてみます…!


色々な路線を触って楽しんでくれました。リビングに見事に地下鉄路線図が現れました。こんな巨大なものでも、ARならまったく場所を取りません。

せっかくなので、ARKitを利用して、iPhoneやiPadでも楽しめるようにしようと思いました。ARKitを使って何かを作るのもはじめてだったのですが、Unity の ARKit Plugin ならほとんどコードに触らなくてもちょっとしたものならできてしまいます。すごいですね。しかも無料。せっかくなので、配置だけでなく、Lean Touch を使って拡大縮小・回転や、配置のリセットができるようにしました。縮小して机の上に置いて色々な角度から眺めたり、超巨大にして自分が地下鉄のトンネルの中に入って歩いたりもできます。

Xcodeからデバイスにデプロイするところでいくつかバグ的なものに遭遇しましたが、ARアプリがここまで手軽に作れるようになっていることに、改めて感動しました。

もし、僕の家におもちゃの置き場所がたくさんあり、「東京地下鉄立体路線図」のおもちゃをそのまま買っていたら、Sketchupに改めて触れることも、Hololensアプリを作ってみることも、ARKitを使ってアプリを作ることもせず、「東京地下鉄立体路線図」を9路線揃えるために、ガチャガチャの前で奮闘していたことでしょう。

うちのCEOのジョン・ハンケは、「制限がイノベーションを生む」とインタビューで語ってて、通訳しながら、そうだよなぁ、と思っていました。様々な自由が制限される状況でこそ、知恵を絞り、生まれるものもあるんだな、とあらためて考えさせられました。

0 件のコメント:

コメントを投稿