2018/1/25に開催した ARCANA Meetup #33 でのスライドです。

1. HackDay 10th Anniv.
『DevLapse』技術解説
2018/1/25 ARCANA Meetup
アルカナラボ 吉田・遠藤・勝見・深澤

2. もくじ
• RICOH THETA で一定時間おきに撮影した全天球写真をWeb
ブラウザで表示
（担当：勝見、よしだ）
• Tango でスキャンしたHackDay会場3Dモデルを最適化
（担当：深澤、よしだ）
• AR(iOSアプリ)の実装
（担当：遠藤、よしだ）

3. RICOH THETA で
一定時間おきに撮影した
全天球写真を
Webブラウザで表示

4. 担当作業
• thetaで360°写真を撮影
• 360°写真をブラウザで表示する

5. theta
https://theta360.com/ja/

6. 360°写真をブラウザで表示する
• jsのフレームワークA-FRAMEを使います。

7. A-FRAME
https://aframe.io/examples/showcase/sky/

8. 360°写真をブラウザで表示する
• 画像を `a-sky` タグで記述するだけでthetaで
撮った360°画像が表示できます。
<a-sky src="puydesancy.jpg" rotation="0 -130 0"></a-sky>

9. 担当作業
• thetaで360°写真を撮影
• 360°写真をブラウザで表示する
実装30分〜1時間程度で完了

10. 担当作業
• thetaで360°写真を撮影
残りの作業はずっとこっち
• 360°写真をブラウザで表示する

11. thetaで360°写真を撮影
• thetaで撮影した枚数は552枚
24（1時間に1枚） × 23箇所
（撮影できない時間帯があったので実際はもう少し少ないですが）

12. thetaで360°写真を撮影
• thetaで撮影した枚数は552枚
24（1時間に1枚） × 23箇所
（撮影できない時間帯があったので実際はもう少し少ないですが）
• theta1つ人力で撮影しました。

13. 撮影風景

14. 担当作業
• thetaで360°写真を撮影
開発30分前に最後の撮影を行い無事完了
• 360°写真をブラウザで表示する
実装30分〜1時間程度で完了

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

16. Tango でスキャンした
HackDay会場3Dモデルを
最適化する

17. - 3Dモデルを最適化する -
• Tangoで撮影した3Dモデルのままだと、
容量（ポリゴン数等）が大きい & 表面が乱れている。
• ある程度容量を小さく、かつ表面を平滑化する。

18. - Tangoで徘徊する吉田氏 -

19. - 会場を分割してスキャン -

20. Vertces（頂点）: 2,355,024
Faces(面): 3,770,083
（分割された会場の1部屋で）

21. - 手順(1) -
• Tangoで自動生成された obj ファイルをもらう。
• MeshLab(3Dデータ編集・変換ソフト) をつかって、
自動で頂点数やらを削減したり、表面を滑らかにする。
• daeファイルに変換して出力する。
（えんどうくんのスライド参考）
https://www.slideshare.net/KatsuyaENDOH/tango-
constructor

25. - 手順(2) -
• Blender(3DCG制作ツール)で開いて、
さらに削減したり、平滑化する。
• 各部屋のモデルをマージして一つにする。

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

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

28. DevLapseの
AR, VR実装について

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

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

31. 平面の検出 &
平面モデルの追加
• ARKitの平面検出
• ARSCNViewDelegateを継承して
rendererメソッドをオーバーライド
• rendererメソッドは3種類ある
(引数nodeの部引数名がdidAdd, didUpdate, didRemoveとなっている)
• モデルの追加
• 上記のdidAdd, didUpdate, didRemoveの際に平面モデルを追加、更新、削除
• 追加する際にノードに識別用のID(今回はplane)を振る
←タップ判定に使う

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

33. タップの判定と
会場の3Dモデルと天球写真を配置
• タップの判定
• ARSCNViewクラスのhitTestメソッドを使う
• ノードのIDから平面のモデルがタップされたことを判定(今回はIDがplaneかどうか判定)
• 会場の3Dモデルと天球写真を表示
• 不可視にしておいた会場のモデルを表示して平面のノードを削除
• 会場内モデル内への天球写真の配置は事前に手動で行う
• 会場内モデル内への天球写真の配置
• 会場のモデルデータ(.objなど)からSceneKitのデータ(.scn)をXcodeで書き出して開く
• 開いたら地図上に書かれた番号を見て、空のノードを配置
• アプリ起動時に空のノードの子ノードとして球体を生成して、写真を貼り付ける

34. 当日使った地図の再現

35. ノードを配置する様子

36. テクスチャマッピングの
ポイント
• テクスチャを表ではなくて裏にのみマッピングする
• 表に貼ってしまうと天球写真がマッピングされた球体を
上から見たときに、天井しか見えない
• おそらくThetaの公式アプリでも使われている

37. こんな感じ
👀
天井
床
👀
天井
床
👪
天井しか見えねーじゃん あ、人が写ってる
👪
＊画像はイメージです

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

39. スライダーによる
天球写真の切り替え
• スライダーの更新時に球体に再度テクスチャをマッピング
• 画像はオリジナルの1 / 4にリサイズしてある
�→ それでも重い……
��→ その辺のパフォーマンスは気にしない

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

41. 天球写真をタップしたらVRモードに遷移
戻るボタンをタップしたらARモードに遷移
• Viewを前後に入れ替える
• 作業分担のためVRモードはUIWebViewで実装
• VRモードはA-Frameでレンダリング

42. 開発中のトラブル
• 頂点を削減して編集した.objから
.scnを書き出す際にデータが崩れた
• .objではなく.daeから書き出したら
崩れずに表示された

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