google cardbordとleapmotion〜お手軽vr〜
TRANSCRIPT
![Page 1: Google CardbordとLeapMotion〜お手軽VR〜](https://reader035.vdocuments.pub/reader035/viewer/2022062313/55aabdd11a28ab4f138b47e9/html5/thumbnails/1.jpg)
Google CardbordとLeapMotion
〜お手軽VR〜
2015 MVP Community Camp~福岡編~
2015/01/31@麻生情報ビジネス専門学校
JAWS-UG北九州代表 藤崎 優
![Page 2: Google CardbordとLeapMotion〜お手軽VR〜](https://reader035.vdocuments.pub/reader035/viewer/2022062313/55aabdd11a28ab4f138b47e9/html5/thumbnails/2.jpg)
自己紹介
藤崎 優@youukkari・AWS 認定ソリューションアーキテクト –アソシエイト・JAWS−UG北九州支部長・AWSにこだわらず北九州で勉強会開催(ARとか)・いろいろやってますインフラ構築(DR構築とかクラウドとか)訪問介護事業者向けサービス開発(JAVA)
小規模Webサービス開発(おもにCakePHP)
小倉・秘密基地:親善大使
![Page 3: Google CardbordとLeapMotion〜お手軽VR〜](https://reader035.vdocuments.pub/reader035/viewer/2022062313/55aabdd11a28ab4f138b47e9/html5/thumbnails/3.jpg)
北九州でのコミュニティ活動でASCIIに掲載されました!!!
![Page 4: Google CardbordとLeapMotion〜お手軽VR〜](https://reader035.vdocuments.pub/reader035/viewer/2022062313/55aabdd11a28ab4f138b47e9/html5/thumbnails/4.jpg)
本日の内容
・VRについて・CardBordについて・CardBordでみるコンテンツについて・CardBordのコンテンツの作り方について・LeapMotionについて
![Page 5: Google CardbordとLeapMotion〜お手軽VR〜](https://reader035.vdocuments.pub/reader035/viewer/2022062313/55aabdd11a28ab4f138b47e9/html5/thumbnails/5.jpg)
【最初に】
体感しないとわからない話が続くので、終わったあとにぜひ声をかけてください。
お見せします!!
![Page 6: Google CardbordとLeapMotion〜お手軽VR〜](https://reader035.vdocuments.pub/reader035/viewer/2022062313/55aabdd11a28ab4f138b47e9/html5/thumbnails/6.jpg)
VRってなんだろう?
![Page 7: Google CardbordとLeapMotion〜お手軽VR〜](https://reader035.vdocuments.pub/reader035/viewer/2022062313/55aabdd11a28ab4f138b47e9/html5/thumbnails/7.jpg)
バーチャルリアリティ(英: Virtual Reality, 英語発音:
[ˈvəːrʧuəl riˈæləti] ヴァーチュァル・リアラティ)とは、実際の形はしていないか、形は異なるかも知れないが、機能としての本質は同じであるような環境を、ユーザの感覚を刺激することにより理工学的に作り出す技術およびその体系。略語としてVRとも。仮想現実。
「バーチャルリアリティ」『フリー百科事典ウィキペディア日本語版』より。最終更新 2015年1月17日 (土) 23:44 UTC
URL: http://ja.wikipedia.org/wiki/%E3%83%90%E3%83%BC%E3%83%81%E3%83%A
3%E3%83%AB%E3%83%AA%E3%82%A2%E3%83%AA%E3%83%86%E3%82%A3
![Page 8: Google CardbordとLeapMotion〜お手軽VR〜](https://reader035.vdocuments.pub/reader035/viewer/2022062313/55aabdd11a28ab4f138b47e9/html5/thumbnails/8.jpg)
VRって何に使わてるんだろう?
![Page 9: Google CardbordとLeapMotion〜お手軽VR〜](https://reader035.vdocuments.pub/reader035/viewer/2022062313/55aabdd11a28ab4f138b47e9/html5/thumbnails/9.jpg)
航空機のシミュレーション訓練用
「フライトシミュレーション市場リポート、販売開始 英調査会社」『AviationWire』より。最終更新 2015年1月9日 08:30 JST
URL:http://www.aviationwire.jp/archives/53142
![Page 10: Google CardbordとLeapMotion〜お手軽VR〜](https://reader035.vdocuments.pub/reader035/viewer/2022062313/55aabdd11a28ab4f138b47e9/html5/thumbnails/10.jpg)
手術のシミュレーション訓練
「ムーグが開発する最先端バーチャルリアリティ眼科手術シミュレータで、慈善団体「ヘルプ・ミー・シー」が世界中の白内障による失明の根絶を目指す」『日本ムーグ』より。最終更新 2013年7月10日URL:http://info.moog.com/press_release/2013710--117YM-2414ID.html
![Page 11: Google CardbordとLeapMotion〜お手軽VR〜](https://reader035.vdocuments.pub/reader035/viewer/2022062313/55aabdd11a28ab4f138b47e9/html5/thumbnails/11.jpg)
高くて一般人には遠い存在だった・・・
うん千万・・・
![Page 12: Google CardbordとLeapMotion〜お手軽VR〜](https://reader035.vdocuments.pub/reader035/viewer/2022062313/55aabdd11a28ab4f138b47e9/html5/thumbnails/12.jpg)
そこにOculus登場
![Page 13: Google CardbordとLeapMotion〜お手軽VR〜](https://reader035.vdocuments.pub/reader035/viewer/2022062313/55aabdd11a28ab4f138b47e9/html5/thumbnails/13.jpg)
Oculus VR
・米Oculus VR社が開発したバーチャルリアリティ用ヘッドマウントディスプレイ(HMD、頭部搭載型ディスプレイ)
・バーチャルリアリティに使用するのを第一目的として開発されている
・頭の動きに高速で追随するセンサーを内蔵している
・350ドルで買える
![Page 14: Google CardbordとLeapMotion〜お手軽VR〜](https://reader035.vdocuments.pub/reader035/viewer/2022062313/55aabdd11a28ab4f138b47e9/html5/thumbnails/14.jpg)
Oculus VRでなにが変わった?
![Page 15: Google CardbordとLeapMotion〜お手軽VR〜](https://reader035.vdocuments.pub/reader035/viewer/2022062313/55aabdd11a28ab4f138b47e9/html5/thumbnails/15.jpg)
VRの技術を個人が実際に触ってみることできるようになった!
![Page 16: Google CardbordとLeapMotion〜お手軽VR〜](https://reader035.vdocuments.pub/reader035/viewer/2022062313/55aabdd11a28ab4f138b47e9/html5/thumbnails/16.jpg)
その結果・・・日本では
![Page 17: Google CardbordとLeapMotion〜お手軽VR〜](https://reader035.vdocuments.pub/reader035/viewer/2022062313/55aabdd11a28ab4f138b47e9/html5/thumbnails/17.jpg)
初音ミクと
握手してみたり添い寝してみたりキスしてみたり・・・・
![Page 18: Google CardbordとLeapMotion〜お手軽VR〜](https://reader035.vdocuments.pub/reader035/viewer/2022062313/55aabdd11a28ab4f138b47e9/html5/thumbnails/18.jpg)
DMM.co.jp
が、エロいかんじのものがはじめたり・・・
![Page 19: Google CardbordとLeapMotion〜お手軽VR〜](https://reader035.vdocuments.pub/reader035/viewer/2022062313/55aabdd11a28ab4f138b47e9/html5/thumbnails/19.jpg)
楽しそうでしょう?!
でも、また開発者用で手に入りづらい。
![Page 20: Google CardbordとLeapMotion〜お手軽VR〜](https://reader035.vdocuments.pub/reader035/viewer/2022062313/55aabdd11a28ab4f138b47e9/html5/thumbnails/20.jpg)
でも・・・
使えるかわからないものに約4万円は高い・・・
かな?
![Page 21: Google CardbordとLeapMotion〜お手軽VR〜](https://reader035.vdocuments.pub/reader035/viewer/2022062313/55aabdd11a28ab4f138b47e9/html5/thumbnails/21.jpg)
そんなあなたにGoogle CardBord
![Page 22: Google CardbordとLeapMotion〜お手軽VR〜](https://reader035.vdocuments.pub/reader035/viewer/2022062313/55aabdd11a28ab4f138b47e9/html5/thumbnails/22.jpg)
・2014年のGoogle I/O開幕キーノートの最後で突然配布された、Androidスマートフォンを挿入して使う即席バーチャルリアリティ・ヘッドセット
・『Cardboard』の製作に必要な素材リストや型紙ファイル、アプリなどを無償で公開https://www.google.com/get/cardboard/manufacturers.html
・カメラ機能、センサー機能をスマホでやることで、段ボールでヘッドマウントのVR体験を実現した!
・初代Oculusくらいの性能あるっぽい(スマホのスペックによります)
・ケーブルレスなので、Oculusと違って歩きながら使えるなど行動の自由度が高い→鑑賞以外の使い方もできそう
CardBordとは?
![Page 23: Google CardbordとLeapMotion〜お手軽VR〜](https://reader035.vdocuments.pub/reader035/viewer/2022062313/55aabdd11a28ab4f138b47e9/html5/thumbnails/23.jpg)
①段ボール(Amazonからいっぱい届くアレ)
CardBordの素材
![Page 24: Google CardbordとLeapMotion〜お手軽VR〜](https://reader035.vdocuments.pub/reader035/viewer/2022062313/55aabdd11a28ab4f138b47e9/html5/thumbnails/24.jpg)
CardBordの素材②レンズ(100円ショップのルーペ))
![Page 25: Google CardbordとLeapMotion〜お手軽VR〜](https://reader035.vdocuments.pub/reader035/viewer/2022062313/55aabdd11a28ab4f138b47e9/html5/thumbnails/25.jpg)
CardBordの素材③磁石(100円ショップの20個入り)
![Page 26: Google CardbordとLeapMotion〜お手軽VR〜](https://reader035.vdocuments.pub/reader035/viewer/2022062313/55aabdd11a28ab4f138b47e9/html5/thumbnails/26.jpg)
CardBordの素材
総額216円
![Page 27: Google CardbordとLeapMotion〜お手軽VR〜](https://reader035.vdocuments.pub/reader035/viewer/2022062313/55aabdd11a28ab4f138b47e9/html5/thumbnails/27.jpg)
これでOculusで見たかったあれこれを見ることができる!!
![Page 28: Google CardbordとLeapMotion〜お手軽VR〜](https://reader035.vdocuments.pub/reader035/viewer/2022062313/55aabdd11a28ab4f138b47e9/html5/thumbnails/28.jpg)
見たい人!!!
![Page 29: Google CardbordとLeapMotion〜お手軽VR〜](https://reader035.vdocuments.pub/reader035/viewer/2022062313/55aabdd11a28ab4f138b47e9/html5/thumbnails/29.jpg)
作り方・根性でカッターで切る(8時間位かかった)
![Page 30: Google CardbordとLeapMotion〜お手軽VR〜](https://reader035.vdocuments.pub/reader035/viewer/2022062313/55aabdd11a28ab4f138b47e9/html5/thumbnails/30.jpg)
作り方・レーザーカッターで切る(博多図工室とかヨカラボ)
![Page 31: Google CardbordとLeapMotion〜お手軽VR〜](https://reader035.vdocuments.pub/reader035/viewer/2022062313/55aabdd11a28ab4f138b47e9/html5/thumbnails/31.jpg)
作らずに買う・お金で解決(Amazonで売ってる)
![Page 32: Google CardbordとLeapMotion〜お手軽VR〜](https://reader035.vdocuments.pub/reader035/viewer/2022062313/55aabdd11a28ab4f138b47e9/html5/thumbnails/32.jpg)
iPhoneでも見れます
![Page 33: Google CardbordとLeapMotion〜お手軽VR〜](https://reader035.vdocuments.pub/reader035/viewer/2022062313/55aabdd11a28ab4f138b47e9/html5/thumbnails/33.jpg)
CardBordが用意できたら体感してみましょう!!
![Page 34: Google CardbordとLeapMotion〜お手軽VR〜](https://reader035.vdocuments.pub/reader035/viewer/2022062313/55aabdd11a28ab4f138b47e9/html5/thumbnails/34.jpg)
GoogleCardBord対応アプリ (Android)
![Page 35: Google CardbordとLeapMotion〜お手軽VR〜](https://reader035.vdocuments.pub/reader035/viewer/2022062313/55aabdd11a28ab4f138b47e9/html5/thumbnails/35.jpg)
GoogleCardBord対応アプリ (iOS)
※Durovis Dive対応アプリ
![Page 36: Google CardbordとLeapMotion〜お手軽VR〜](https://reader035.vdocuments.pub/reader035/viewer/2022062313/55aabdd11a28ab4f138b47e9/html5/thumbnails/36.jpg)
Youtube・ニコニコ動画(3D
サイドバイサイド動画)
https://www.youtube.com/watch?v=Ya5eQ_QfAog
【攻殻機動隊の公式3D動画】
![Page 37: Google CardbordとLeapMotion〜お手軽VR〜](https://reader035.vdocuments.pub/reader035/viewer/2022062313/55aabdd11a28ab4f138b47e9/html5/thumbnails/37.jpg)
見るものがなくなってきたらコンテンツを作ってみよう!!
![Page 38: Google CardbordとLeapMotion〜お手軽VR〜](https://reader035.vdocuments.pub/reader035/viewer/2022062313/55aabdd11a28ab4f138b47e9/html5/thumbnails/38.jpg)
Google CardBord
コンテンツの作り方(コードをあまりかかずに)
![Page 39: Google CardbordとLeapMotion〜お手軽VR〜](https://reader035.vdocuments.pub/reader035/viewer/2022062313/55aabdd11a28ab4f138b47e9/html5/thumbnails/39.jpg)
RICOH THETA
・1回のシャッターで360°の写真が撮れる・最大3分間の360°の動画撮影(音声付)・youtubeなどにアップできる・¥34,700くらい
![Page 40: Google CardbordとLeapMotion〜お手軽VR〜](https://reader035.vdocuments.pub/reader035/viewer/2022062313/55aabdd11a28ab4f138b47e9/html5/thumbnails/40.jpg)
タオ360でTHETAで撮ったコンテンツをCardBordでみることができます
http://taovisor.com/tao360/
![Page 41: Google CardbordとLeapMotion〜お手軽VR〜](https://reader035.vdocuments.pub/reader035/viewer/2022062313/55aabdd11a28ab4f138b47e9/html5/thumbnails/41.jpg)
もうちょっと凝ったことをしてみたい人にはMetaio CreatorでAR!
![Page 42: Google CardbordとLeapMotion〜お手軽VR〜](https://reader035.vdocuments.pub/reader035/viewer/2022062313/55aabdd11a28ab4f138b47e9/html5/thumbnails/42.jpg)
ARとは?
拡張現実(かくちょうげんじつ、英: Augmented
Reality、AR)とは、人が知覚する現実環境をコンピュータにより拡張する技術、およびコンピュータにより拡張された現実環境そのものを指す言葉
![Page 43: Google CardbordとLeapMotion〜お手軽VR〜](https://reader035.vdocuments.pub/reader035/viewer/2022062313/55aabdd11a28ab4f138b47e9/html5/thumbnails/43.jpg)
ARとはこんなもの
【使い方】Scanしたモノの上にARコンテンツを表示する
0)JunaioブラウザをDLする1)JunaioブラウザでQRコード読み込み2)ARコンテンツを表示させたいものをスキャン
![Page 44: Google CardbordとLeapMotion〜お手軽VR〜](https://reader035.vdocuments.pub/reader035/viewer/2022062313/55aabdd11a28ab4f138b47e9/html5/thumbnails/44.jpg)
metaio Creatorでできること
・プログラミング不要でCG・映像をAR技術で配信することができる
・マーカーにARブラウザをかざすことで画像認識を行い、3DのCGや動画を表示することができる
・Junaio(ARブラウザでみる)またはAndroid.iPhoneアプリに書き出すことができる※最近ARアプリ多すぎてAppStoreの審査は通らない!
・無料だとマーカー、モデルに制限あり
・無料だとアプリにロゴが必ずはいる
・配信サーバを100Mまでは無料で使える
![Page 45: Google CardbordとLeapMotion〜お手軽VR〜](https://reader035.vdocuments.pub/reader035/viewer/2022062313/55aabdd11a28ab4f138b47e9/html5/thumbnails/45.jpg)
metaio Creator+CardBordでできること
・Oculusだと別途カメラをつけないといけないが、スマホのカメラが使えるのでCardBord単体でARが実現できる
・VR+ARでMR=Mixed Reality=複合現実を作ることができる
・MRとは?CGなどで作った仮想現実を現実世界に反映(拡張)し、それを体験する
・Websocketでつながり、javascriptで使えるハードならVR・ARコンテンツと繋げられる
![Page 46: Google CardbordとLeapMotion〜お手軽VR〜](https://reader035.vdocuments.pub/reader035/viewer/2022062313/55aabdd11a28ab4f138b47e9/html5/thumbnails/46.jpg)
metaio creatorでのARの作り方は
吉永さん(九州先端科学技術研究所)
のブログへ!!
http://vizyoshinaga.sblo.jp/article/67725578.html
![Page 47: Google CardbordとLeapMotion〜お手軽VR〜](https://reader035.vdocuments.pub/reader035/viewer/2022062313/55aabdd11a28ab4f138b47e9/html5/thumbnails/47.jpg)
metaio CreatorをCardBord対応するには?
・AREL Sript-Global scriptに下記一行追加するだけ
arel.Scene.setStereoRendering(true);
![Page 48: Google CardbordとLeapMotion〜お手軽VR〜](https://reader035.vdocuments.pub/reader035/viewer/2022062313/55aabdd11a28ab4f138b47e9/html5/thumbnails/48.jpg)
metaio(AR)はHTML5Javascriptで作ったアプリ・サイトを表示できる
今までのWeb技術でのコンテンツを作成できる!
![Page 49: Google CardbordとLeapMotion〜お手軽VR〜](https://reader035.vdocuments.pub/reader035/viewer/2022062313/55aabdd11a28ab4f138b47e9/html5/thumbnails/49.jpg)
VR、ARという仮想現実の没入感を更に高めたい
![Page 50: Google CardbordとLeapMotion〜お手軽VR〜](https://reader035.vdocuments.pub/reader035/viewer/2022062313/55aabdd11a28ab4f138b47e9/html5/thumbnails/50.jpg)
そんなときはLeapMotion!!
![Page 51: Google CardbordとLeapMotion〜お手軽VR〜](https://reader035.vdocuments.pub/reader035/viewer/2022062313/55aabdd11a28ab4f138b47e9/html5/thumbnails/51.jpg)
LeapMotionとは?
・手のジェスチャーでパソコンを操作できるデバイス
・本体をPCかMacにUSB接続することで動作する。
・9800円くらい
・各言語のSDKが用意おり、Javascriptを利用してブラウザで利用することも可能
https://developer.leapmotion.com/gallery/chrome-draw
![Page 52: Google CardbordとLeapMotion〜お手軽VR〜](https://reader035.vdocuments.pub/reader035/viewer/2022062313/55aabdd11a28ab4f138b47e9/html5/thumbnails/52.jpg)
CardBordでARの仮想現実世界をのぞき、その中のコンテンツをLeapMotionで操作することができる
複合現実のなかのものに触ることができる
CardBord+LeapMotion+metaio(AR)
![Page 53: Google CardbordとLeapMotion〜お手軽VR〜](https://reader035.vdocuments.pub/reader035/viewer/2022062313/55aabdd11a28ab4f138b47e9/html5/thumbnails/53.jpg)
自分で3Dモデルを動かしてみたい!!
![Page 54: Google CardbordとLeapMotion〜お手軽VR〜](https://reader035.vdocuments.pub/reader035/viewer/2022062313/55aabdd11a28ab4f138b47e9/html5/thumbnails/54.jpg)
そんなときはUnity
![Page 55: Google CardbordとLeapMotion〜お手軽VR〜](https://reader035.vdocuments.pub/reader035/viewer/2022062313/55aabdd11a28ab4f138b47e9/html5/thumbnails/55.jpg)
Unityとは?・Windows、MacOSXで利用できるゲーム開発環境
・Win、OSX、Linux、iOS、Androidへのアプリの出力が無料で行える
・3Dだけでなく2Dも強化されてきている
・Asset Storeで自分がつくれないものは買って追加(プログラム、3Dモデル、BGM、サウンド)自分のできるものだけやり、他はAssetを組み合わせて一つのアプリを作成
![Page 56: Google CardbordとLeapMotion〜お手軽VR〜](https://reader035.vdocuments.pub/reader035/viewer/2022062313/55aabdd11a28ab4f138b47e9/html5/thumbnails/56.jpg)
Unityとは?
自分のできるものだけやり、他はAssetを組み合わせて一つのアプリを作成!!
![Page 57: Google CardbordとLeapMotion〜お手軽VR〜](https://reader035.vdocuments.pub/reader035/viewer/2022062313/55aabdd11a28ab4f138b47e9/html5/thumbnails/57.jpg)
Unityで無料で3Dモデル配布してます
![Page 58: Google CardbordとLeapMotion〜お手軽VR〜](https://reader035.vdocuments.pub/reader035/viewer/2022062313/55aabdd11a28ab4f138b47e9/html5/thumbnails/58.jpg)
UnityちゃんコンテンツをGoogleCardBordで動かそう
準備するところまでは下記に藤崎がまとめてます!
http://qiita.com/youukkari/items/c12a34cb7238de813080
http://qiita.com/youukkari/items/bd348b939d33f2260300
![Page 59: Google CardbordとLeapMotion〜お手軽VR〜](https://reader035.vdocuments.pub/reader035/viewer/2022062313/55aabdd11a28ab4f138b47e9/html5/thumbnails/59.jpg)
MMDも使えます(MikuMikuDance)
![Page 60: Google CardbordとLeapMotion〜お手軽VR〜](https://reader035.vdocuments.pub/reader035/viewer/2022062313/55aabdd11a28ab4f138b47e9/html5/thumbnails/60.jpg)
GoogleCardBord対応はカメラを追加するのみ
![Page 61: Google CardbordとLeapMotion〜お手軽VR〜](https://reader035.vdocuments.pub/reader035/viewer/2022062313/55aabdd11a28ab4f138b47e9/html5/thumbnails/61.jpg)
サンプルを改造しながらいろいろ弄ってみよう!
![Page 62: Google CardbordとLeapMotion〜お手軽VR〜](https://reader035.vdocuments.pub/reader035/viewer/2022062313/55aabdd11a28ab4f138b47e9/html5/thumbnails/62.jpg)
本日の振り返り
・CardBord楽しもう・CardBordでコンテンツ作る方法について
RICOH THETA
metaio creator
Unity
・LeapMotionについて
![Page 63: Google CardbordとLeapMotion〜お手軽VR〜](https://reader035.vdocuments.pub/reader035/viewer/2022062313/55aabdd11a28ab4f138b47e9/html5/thumbnails/63.jpg)
好きなモノを動かしてみると、楽しみながら色々覚えられるよ!!
触ってみよう!
![Page 64: Google CardbordとLeapMotion〜お手軽VR〜](https://reader035.vdocuments.pub/reader035/viewer/2022062313/55aabdd11a28ab4f138b47e9/html5/thumbnails/64.jpg)