『DevLapse』解説(Hack Day 10th Anniv. 優秀賞作品)// 第33回社内勉強会 #sa_study #hackdayjp

IMG_0109

あけましておめでとうございます。
遠藤です。
今回は2018年最初の社内勉強会について書いていきたいと思います。
今回の第33回社内勉強会は、Yahoo! JAPAN Hack Day 10th Anniv.で制作したDevLapseというアプリについて発表しました。

DevLapseとは

『DevLapse』は、ARで現実世界のミニチュアを作り、
その空間の中で時間の経過を感じることができる「四次元のミニチュア」です。
日本最大級のハッカソンイベント『Yahoo! JAPAN Hack Day 10th Anniv.』の
開発会場(秋葉原UDX)をモデルにして、
HackDay参加者の開発の経過を体験することができます。

HackDayでの発表の様子はこんな感じです!

ではでは説明に入っていきます。

『DevLapse』技術解説

『DevLapse』技術解説 – HackDay10thAnniv. #sa_study from Hikari Fukasawa

今回のHack Dayも前回と同じくワイルドクレイジーチームメンバーで参加してきました。
フォーメーションはこんな感じです。

  • 深澤:代表・Tangoでスキャンした3Dモデルの最適化・プレゼンテーション
  • 勝見:天球写真の撮影・WebVR
  • 遠藤:iOSアプリケーション・AR
  • 吉田:Tangoでの3Dモデルスキャン・各サポート

それではスライドの順番に沿って書いていきます。

RICOH THETAで一定時間おきに撮影した全天球写真を
Webブラウザで表示
(担当:勝見さん、よしださん)

hd10th-theta まずは勝見さんの担当した箇所について書いていきます。

360°写真をブラウザで表示する

WebVRの実装にはJSのフレームワークA-Frameを使いました。
A-Frameはこんな感じにHTMLタグでシーンを記述できるので、これは1時間くらいで完了したようです。

<a-sky src="puydesancy.jpg" rotation="0 -130 0"></a-sky>

RICOH THETAで360°写真を撮影

撮影した写真は単純計算で24(時間) × 23(箇所)で552枚でした。
実際には夜は仮眠室として利用される部屋があるので、撮影できない時間帯もありましたが。
撮影は1台のRICOH THETAを使って1時間毎に人力で23箇所回って行いました。
自分も何回かお手伝いしましたが、この作業が結構辛かったです。
写真は24時間分欲しかったので開発時間終了30分前まで行われました。
ちなみに当日撮影に使ったマップはこんな感じです。

map

感想(勝見さん)

前回担当作業終わらなかったから今回は無事に終わって本当に良かった

TangoでスキャンしたHackDay会場3Dモデルを最適化
(担当:深澤さん、よしださん)

devlapse-meshlab-capture2

次に深澤さんの担当した箇所について書いていきます。

作業

深澤さんの作業はTangoでスキャンしたHackDay会場の3Dモデルの最適化です。
Tangoから出力したままの3Dモデルでは容量が大きいためポリゴンの削減を行い、
床や壁などの表面が乱れているため平滑化を行います。
まずは吉田さんがTangoを使って会場を数カ所に分けて3Dモデルにしました。
まずはこれをMeshLabを使って機械的に平滑化します。
さらにBlenderを使って平滑化とポリゴン数削減を行います。
最後に全部の部屋と廊下をマージして1つの3Dモデルにします。

つまずきポイント

  • Tangoでスキャンされる3Dモデルは、頂点カラー付きのOBJファイル(別のテクスチャ画像ファイルとかは無い)
  • Blenderだとカラー付きのOBJファイルに対応していなくて、色が抜けてしまって数時間むだにした
  • PLYに変換すると頂点カラーも保持できていたけど、アプリに持っていく段階でモデルが崩れてしまう謎現象
  • 最終的にDAEにすると問題なくでけた

感想(深澤さん)

  • 3Dモデルに関する知識がなさすぎてググり方もわからず無駄な時間を過ごしていた。
  • たぶん、MeshLabかBlenderどちらかだけでいけたとおもう。。
  • 今年も発表用スライドは私が作りました。みんなが寝てる中がんばりました。がんばりました!!!

AR(iOSアプリ)の実装
(担当:遠藤、よしださん)

IMG_4839

アプリの処理の流れはこんな感じになっています。

  1. 1. 平面の検出する
  2. 2. 平面モデルを生成、追加する
  3. 3. 平面のモデルをタップしたらその平面上に会場の3Dモデルと天球写真を配置する
  4. 4. 画面下のスライダーを動かすと天球写真が切り替わる
  5. 5. 天球写真をタップしたらVRモードに切り替える
  6. 6. 戻るボタンを押したらARモードに切り替える

詳しい内容はスライドに書いてあるので興味がある方は読んでみてください!
開発の際に工夫した点は、VRモードの開発コストを下げるためにWebVeiwを使ってWebVRで表示している事と、
球体へのテクスチャマッピングの際に表面(外側)ではなくて裏面(内側)にテクスチャをマッピングしている事です。

感想(遠藤)

  • 始まる前は「今回は楽できそうですね」とか言ってたのに、結局ハードな24時間だった
  • かつみさんの代わりに何回か天球写真の撮影をした
    • 精神的にきつい
    • 他の参加者さんから「地味だけどがんばって」と労われた
    • 膝や腰にもくる
    • でも途中で抜け出して深夜の秋葉原の中央通りを天球撮影できた

まとめ

IMG_0100

そんなこんなで前回に続き今回も賞をい頂くことができました!
プレゼンはトリだし、機材トラブルもあったしで今年もバタバタしていました。
そしてこのDevLapseですが……

App Storeにリリースしました!

是非是非、ダウンロードして体験してみてください!
注) アプリの容量が結構大きのでWi-Fi環境でのダウンロードをおすすめします。

今回は勉強会の記事というよりHack Dayの記事になっちゃいました。
次回の勉強会は話題のVTuberについてやるとかやらないとか。

ではでは