10/27 ISITで開催されたAR/VR体験会の説明資料。

1. AR/VR体験会@ISIT

2. VR・AR・MRって？

3. VRとは(1/2)
Virtual Realityの略。日本語で「仮想現実」や「人工現実感」
とも呼ばれる。ユーザの五感を刺激することで、本物ではないが
機能としての本質は同じような体験や環境を作り出す技術。

4. VRとは(2/2)
仮想的に創られた「あっちの世界」に没入して疑似体験ができる技術

5. ARとは(1/2)
Augmented Realityの略。日本語で「拡張現実感」
とも呼ばれる。デジタルな情報(CG,音,etc..)を現実空間に
付加する技術全般を指す。特に視覚情報の付加が主流。

6. ARとは(2/2)
そこに存在しない物を、あたかも存在するかのように見せる技術
CG

7. ようするに
引用元： http://pokemongo.nianticlabs.com/ja/

8. AR技術の普及
[これまでの動向]
 スマートフォンの普及・高性能化により誰もがARを体験可能
 販売促進やゲーム、観光分野でのコンテンツが増加
 ARのスタイルは大きく分けて2種類！
• カメラに映ったマーカーを検出してその上にCGを表示
• GPSを使って現在地に紐づいた情報を表示
GPSベースのAR画像処理ベースのAR

9. 次世代ARツールの登場(2016年~)
Tango / ARCore / ARKit
[特徴]
 GoogleはTangoやARCore, AppleはARKitという
モバイル端末用のARプラットフォームを提供
 MicrosoftはARデバイスとしてHoloLensを発売
 空間把握に基づくマーカー不要な自己位置推定が可能
Microsoft HoloLens

10. ARとVRを動画で比較
ARはコンテンツが「こっちに来る」、VRは自分が「あっちに行く」イメージ

11. 最近話題の
MRは？

12. Mixed Reality
Mixed Reality(MR:複合現実感)とは
 現実空間と仮想空間を混合する技術全般を指す
 現実>仮想の場合をAugmented Reality(AR)
 仮想>現実の場合をAugmented Virtuality(AV)
※Virtual Reality(VR)と表現される場合も多い
Real Environment Augmented Reality Augmented Virtuality Virtual Environment

13. そろそろ体験しましょう

14. 本日の体験コンテンツ
• VR
スマホVR
HMD
• AR
マーカー認識
マーカーレス

15. 本日の体験コンテンツ
• VR
スマホVR
HMD
• AR
マーカー認識
マーカーレス

16. まずは体験
A-Frameのページにアクセス (https://aframe.io/)

17. A-Frameとは
 Webブラウザ上でVRなどの3D表現を簡単に実現するためのライブラリ
 HTMLのタグを書くだけで3Dオブジェクトを配置できる
 Firefox、Chrome、Edgeなど主要なブラウザがWebVR対応を表明
 Windows MR HeadsetやHTC Viveや、スマホVRにも対応
 外部ライブラリを組み合わせればARも実現できる (開発途上)

18. 基本サンプルのコードの確認

19. まずは体験
ページの左側にサンプルがあります
サンプル

20. まずは体験
基本サンプル Hello WebVRをクリック
Hello WebVR

21. まずは体験
360°Imageをクリックして全天球コンテンツを表示
360°Image
RICOH Theta S

22. 本日の体験コンテンツ
• VR
スマホVR
HMD
• AR
マーカー認識
マーカーレス

23. ARブラウザZappar
ARブラウザZapparの導入
① まずGoole play (Android)またはApp Store(iPhone,iPad)にアクセス
② 「zappar」と検索してアプリをダウンロード・インストールを実行
・ もちろん無料！
【利用環境】
•iPhone, iPad
(iOS 5.1.1以降)
•Android端末
(2.3以降)

24. ARコンテンツの配信方法
方法2： ARブラウザを活用
携帯端末 ブラウザ インターネット
【デメリット】
✓ 細かい制御には不向き
【メリット】
 プログラミング不要
 マーカーとCG・映像のみ必要
 OSには依存しない
方法1:個々のアプリを開発
・・・・
・・・・
【メリット】
 高速処理が可能
 複雑な動きをするコンテンツ
【デメリット】
✓ プログラミングスキルが必須
✓ OS毎の開発が必要な場合も

25. ARコンテンツの配信方法
方法1:個々のアプリを開発
・・・・
・・・・
【メリット】
 高速処理が可能
 複雑な動きをするコンテンツ
【デメリット】
✓ プログラミングスキルが必須
✓ OS毎の開発が必要な場合も
方法2： ARブラウザを活用
携帯端末 ブラウザ インターネット
【メリット】
 プログラミング不要
 マーカーとCG・映像のみ必要
 OSには依存しない
【デメリット】
✓ 細かい制御には不向き

26. 実際にARを体験しよう
ARブラウザzapparの利用手順
① スキャンボタン
③ 読み込み
④ 絵(マーカー)にス
マホをかざす
② Zapcodeを撮影

27. サンプルコンテンツ
コンテンツ②コンテンツ①

28. Zappar利用時の処理の流れ
1.Zappar を起動
2.スマホをかざしてZapcode をスキャン
3.コード に対応するコンテンツをダウンロード
※QRコードみたいなものだと考えてください
4.マーカー画像にスマホをかざす
i. 画像処理でマーカを見つける
ii. マーカーの位置・姿勢を推定
iii. コンテンツを重ね合わせてAR

29. 動画や画像を用いたAR
博物館の展示 (@福岡市博物館) 新聞と映像 (京都新聞)
動画や写真なら手持ちの機材で誰でもコンテンツを作れる

30. 最新デバイスも体験