CardboardのUXをカメラで向上する (droidkaigi 2015/04)
-
Upload
kenichi-takahashi -
Category
Engineering
-
view
6.343 -
download
2
Transcript of CardboardのUXをカメラで向上する (droidkaigi 2015/04)
![Page 1: CardboardのUXをカメラで向上する (droidkaigi 2015/04)](https://reader033.fdocuments.net/reader033/viewer/2022042716/55a9fe4a1a28abe5578b4603/html5/thumbnails/1.jpg)
CardboardのUIを カメラで向上する
高橋憲一 @ken1_taka
![Page 2: CardboardのUXをカメラで向上する (droidkaigi 2015/04)](https://reader033.fdocuments.net/reader033/viewer/2022042716/55a9fe4a1a28abe5578b4603/html5/thumbnails/2.jpg)
自己紹介
• Android, iOS, 3Dグラフィクス
• 株式会社 kabuku ソフトウェアエンジニア
• 東北TECH道場、Tech Institute 講師
![Page 3: CardboardのUXをカメラで向上する (droidkaigi 2015/04)](https://reader033.fdocuments.net/reader033/viewer/2022042716/55a9fe4a1a28abe5578b4603/html5/thumbnails/3.jpg)
普段はvirtualなものを実体化 (3Dプリント)するための開発をしてます
![Page 4: CardboardのUXをカメラで向上する (droidkaigi 2015/04)](https://reader033.fdocuments.net/reader033/viewer/2022042716/55a9fe4a1a28abe5578b4603/html5/thumbnails/4.jpg)
今日は思い切りバーチャルな世界の話
![Page 5: CardboardのUXをカメラで向上する (droidkaigi 2015/04)](https://reader033.fdocuments.net/reader033/viewer/2022042716/55a9fe4a1a28abe5578b4603/html5/thumbnails/5.jpg)
なぜやろうと思ったか
![Page 6: CardboardのUXをカメラで向上する (droidkaigi 2015/04)](https://reader033.fdocuments.net/reader033/viewer/2022042716/55a9fe4a1a28abe5578b4603/html5/thumbnails/6.jpg)
最近アプリ開発の講師はやっているけど、Androidについてhackしてないなぁ…
![Page 7: CardboardのUXをカメラで向上する (droidkaigi 2015/04)](https://reader033.fdocuments.net/reader033/viewer/2022042716/55a9fe4a1a28abe5578b4603/html5/thumbnails/7.jpg)
そうだ、Cardboard
![Page 8: CardboardのUXをカメラで向上する (droidkaigi 2015/04)](https://reader033.fdocuments.net/reader033/viewer/2022042716/55a9fe4a1a28abe5578b4603/html5/thumbnails/8.jpg)
![Page 9: CardboardのUXをカメラで向上する (droidkaigi 2015/04)](https://reader033.fdocuments.net/reader033/viewer/2022042716/55a9fe4a1a28abe5578b4603/html5/thumbnails/9.jpg)
CardboarでVR
• とっても手軽
• PCと繋ぐもっと高性能なのはもちろんありますが…
• ケーブルを繋いだりする煩わしさ
![Page 10: CardboardのUXをカメラで向上する (droidkaigi 2015/04)](https://reader033.fdocuments.net/reader033/viewer/2022042716/55a9fe4a1a28abe5578b4603/html5/thumbnails/10.jpg)
一つだけ残念なこと
• せっかくのタッチパネルを覆ってしまうのでタッチ操作が出来ない
• 横にマグネットのスライドスイッチはあります
![Page 11: CardboardのUXをカメラで向上する (droidkaigi 2015/04)](https://reader033.fdocuments.net/reader033/viewer/2022042716/55a9fe4a1a28abe5578b4603/html5/thumbnails/11.jpg)
しかし…
![Page 12: CardboardのUXをカメラで向上する (droidkaigi 2015/04)](https://reader033.fdocuments.net/reader033/viewer/2022042716/55a9fe4a1a28abe5578b4603/html5/thumbnails/12.jpg)
使ってくれと言わんばかりにカメラの部分がくり抜かれている
![Page 13: CardboardのUXをカメラで向上する (droidkaigi 2015/04)](https://reader033.fdocuments.net/reader033/viewer/2022042716/55a9fe4a1a28abe5578b4603/html5/thumbnails/13.jpg)
これを使わない 手はない!
![Page 14: CardboardのUXをカメラで向上する (droidkaigi 2015/04)](https://reader033.fdocuments.net/reader033/viewer/2022042716/55a9fe4a1a28abe5578b4603/html5/thumbnails/14.jpg)
でもやり始めたら結構茨の道だった(^^;
![Page 15: CardboardのUXをカメラで向上する (droidkaigi 2015/04)](https://reader033.fdocuments.net/reader033/viewer/2022042716/55a9fe4a1a28abe5578b4603/html5/thumbnails/15.jpg)
必要なもの
• Android Studio
• Cardboard SDK
• Unity 対応版もありますがそれではない方
• OpenCV
![Page 16: CardboardのUXをカメラで向上する (droidkaigi 2015/04)](https://reader033.fdocuments.net/reader033/viewer/2022042716/55a9fe4a1a28abe5578b4603/html5/thumbnails/16.jpg)
Cardboard SDK
• 導入は簡単
• https://developers.google.com/cardboard/android/download
• サンプルとライブラリ(.jar) をダウンロード
![Page 17: CardboardのUXをカメラで向上する (droidkaigi 2015/04)](https://reader033.fdocuments.net/reader033/viewer/2022042716/55a9fe4a1a28abe5578b4603/html5/thumbnails/17.jpg)
Cardboard SDK がやってくれること
• 左右に並べた複眼ビュー
• レンズ歪み補正
• マグネットスイッチのイベント
![Page 18: CardboardのUXをカメラで向上する (droidkaigi 2015/04)](https://reader033.fdocuments.net/reader033/viewer/2022042716/55a9fe4a1a28abe5578b4603/html5/thumbnails/18.jpg)
OpenCV
• ちょっと大変
• ここを参考にしました。
• http://smartphone-zine.com/android/use-opencv-for-android-in-the-android-studio.html
![Page 19: CardboardのUXをカメラで向上する (droidkaigi 2015/04)](https://reader033.fdocuments.net/reader033/viewer/2022042716/55a9fe4a1a28abe5578b4603/html5/thumbnails/19.jpg)
5.0だとうまく動かなかったり
• ここで解決
• http://answers.opencv.org/question/54450/error-opencv4android-caused-by-javalangillegalargumentexception-service-intent-must-be-explicit/
![Page 20: CardboardのUXをカメラで向上する (droidkaigi 2015/04)](https://reader033.fdocuments.net/reader033/viewer/2022042716/55a9fe4a1a28abe5578b4603/html5/thumbnails/20.jpg)
OpenCVを どう活用するか
![Page 21: CardboardのUXをカメラで向上する (droidkaigi 2015/04)](https://reader033.fdocuments.net/reader033/viewer/2022042716/55a9fe4a1a28abe5578b4603/html5/thumbnails/21.jpg)
カメラからの画像をOpenCVで認識する
• 指の形、ポジション
• 色を元にトラッキング
• http://docs.opencv.org/doc/tutorials/imgproc/shapedescriptors/hull/hull.html
![Page 22: CardboardのUXをカメラで向上する (droidkaigi 2015/04)](https://reader033.fdocuments.net/reader033/viewer/2022042716/55a9fe4a1a28abe5578b4603/html5/thumbnails/22.jpg)
Demo