10/14に福岡で開催したARCoreとTangoを使ったハンズオンの資料(抜粋)

1. スマホと簡易ヘッドセットで光学シースルーAR
ARコンテンツ作成勉強会
#AR_Fukuoka

2. スマホ・タブレット対応の次世代ARプラットフォーム
[特徴]
 スマホ等の携帯端末で自己位置推定や平面検出が可能
• Tango: 特殊なカメラを搭載した専用端末で動作
• ARCore: 通常のAndroid端末で動作(予定)
• ARKit: iOS11が動くiPhoneやiPadで動作

3. 次世代ARプラットフォームでできること
 マーカー認識を意識しない自由な視点でのAR
 光学シースルー方式のARはスマホ単体では無理

4. HoloKitとは
 段ボール製、スマホスロットイン型のARヘッドセット&SDK
 Tango,ARCore(Google)やARKit(Apple)に対応

5. Demo
https://youtu.be/sbLEsmwM1s4

6. 仕組み
前
後
↑
ハーフミラー
横
鏡
ハーフミラー
スマホ
反射
スマホ

7. さっそく開発Start

8. 開発ツール：Unity
Unityとは
 マルチプラットフォーム対応のゲームエンジンおよび開発環境
 GUI上で視覚的にCGを配置したり機能を追加したりできる
 C#、JavaScriptなどのプログラミング言語に対応
 アセットストアで高品質なCGやアニメーションを入手できる

9. まずはUnityの操作の基本

10. プロジェクトを作成
(1) holokitsdk-xxx.zipを解凍 (xxx=tango or android)
(2) Unityを起動後、画面右上のOPENをクリック
OPEN

11. プロジェクトを作成
holokitsdk-xxxフォルダを開き、[フォルダーの選択]をクリック
holokitsdk-xxx
フォルダーの選択

12. Unityの操作画面(概要)
ゲーム空間の設計画面
空間に置いた
オブジェクト
の名称一覧
プロジェクトに追加されたAsset(CGやプログラムなど)の一覧

13. ゲーム空間にCGを追加しよう
Window
AssetStore

14. ゲーム空間にCGを追加しよう
Earth
Earth Planet ...
FREE

15. ゲーム空間にCGを追加しよう
ダウンロード

16. ゲーム空間にCGを追加しよう
Earthフォルダ

17. ゲーム空間にCGを追加しよう
Assets → Earth → Prefab
Earthをドラッグ&ドロップ

18. ゲーム空間にCGを追加しよう
(2)Earthをダブルクリック
(1)Sceneタブ

19. オブジェクトの位置・向き・サイズを調整
クリックして選択
移動 回転 拡大・縮小

20. 地球の位置・サイズを調整
Positionを0,0,1に変更
Scaleを全て0.01に変更
Inspector(≒詳細情報)

21. Scene(設計画面)の視点を変えよう
[←] [→]で左右移動
[↑][↓]でズームイン/アウト
[Alt]+ドラッグで回転
+ドラッグで上下左右
他にもいろいろ
→ http://goo.gl/Lq1ILT

22. 実行してみよう
クリックして実行
クリックして終了
カメラから見た空間

23. Sceneの保存
Scene名
 [Ctrl]+[s]でダイアログを開き、好きな名前で保存
 コンテンツ作成中はこまめに[Ctrl]+[s]すること

24. 地球の自転の設定
(2) Rotation Speed Y
の値をマイナスに
(1)EarthMain

25. 実は雲も動いているので…
(2) Rotation Speed Y
の値をマイナスに
(1) EarthClouds

26. Haloは非表示に
(2) チェックを外す
(1)EarthHalo

27. ここからTango開発

28. プラットフォームの切り替え
Build Settings

29. Tangoの機能の利用設定
Androidを選択
Swith Platform

30. Tangoの機能の利用設定
Tango Managerを
ドラッグ&ドロップ
Tango Prefabs

31. Tangoの機能の利用設定
(2) Enable Video Overlay
にチェックを入れる
(1)TangoManager
(3) Keep Screen Awake
にチェックを入れる

32. Enable Video Overlayをオンにする理由
ビデオシースルーモードで配置を確認するため

33. Cameraの設定
(1)MainCameraを削除

34. Cameraの設定
HoloKitCameraを
ドラッグ&ドロップ
HoloKitSDK → StarterPrefabs

35. ビルド設定
Edit
Project Settings
Player

36. ビルド設定
Package Name
Other Settings
Package Nameを固有の名前に変更(ex. com.名前.holokit)

37. USBケーブルで端末を接続しBuild&Run!

38. ここからARCore開発

39. HoloKitカメラの使用
MainCameraを削除

40. HoloKitカメラの使用
HolokitCameraRigを
ドラッグ&ドロップ
HoloKitSDK → StarterPrefabs

41. ARCoreのトラキング機能の設定
HolokitCameraRig
Unity AR Camera Mangaer
のチェックを外す

42. ARCoreのトラキング機能の設定
Add Component
Tracked Pose Driver追加
Session Component追加

43. ARCoreのトラキング機能の設定
ColorCamera
Before Render
DefaultSessions
VideoSeeThrough
Camera

44. ARCoreのトラキング機能の設定
VideoSeeThroughCamera
Unity AR Camera Near Farと
Unity AR Video
のチェックを外す

45. スクリーンサイズの設定
HoloKitSDK → Scripts
HolokitCalibration.csを開く

46. スクリーンサイズの設定
loadSamsungS8Calibration関数のみ残す
 LoadDefaultCalibration関数を探し、switch文を表示
 loadSamsungS8Calibration関数のみ残してswitch文を削除
※S8(SM-G950FD)がなぜかうまく認識されないため

47. スクリーンサイズの設定
 loadSamsungS8Calibration関数の実装部分を表示
 スクリーンの幅と高さを実際の機器と同じ値にする
※下記もわりとアバウトな値なので要注意
cameraRig.PhoneScreenHeight = 0.130f;
cameraRig.PhoneScreenWidth = 0.064f;

48. ビルド設定
Edit
Project Settings
Player

49. ビルド設定
Package Name
Other Settings
Package Nameを固有の名前に変更(ex. com.名前.holokit)

50. USBケーブルで端末を接続しBuild&Run!

51. HoloKitを買うには：本家サイト
https://holokit.io/

52. HoloKitを買うには：サードパーティー
https://geecr.com/product/holokit-ar-mr-cardboard

53. 氏名：吉永崇(Takashi Yoshinaga)
所属：九州先端科学技術研究所(ISIT)
ほか： ARコンテンツ作成勉強会主催
お問い合わせ：
committee@arfukuoka.lolipop.jp
#AR_Fukuoka