Google 段ボールBy 高梨ギンペイ

@ginpei_jp

Cardboard

• 直訳すると「段ボール」• Google が先日の Google I/O というイベントで配布した、簡易 VR

眼鏡• 図面が公開されているので、誰でも作れる• 材料 : 段ボール、レンズ ×2 、等• https://developers.google.com/cardboard/

VR: Virtual Reality

• Google が Android アプリを公開• https://

play.google.com/store/apps/details?id=com.google.samples.apps.cardboarddemo&hl=ja• “google cardboard” で検索

するとすぐ見つかります• Google Earth なんかで遊べる

らしい• Android 4.1+

iPhone アプリ• ねーよ

え、じゃあ iPhone アプリ作る？• 時間ありませんでした (´ ・ ω ・ `)

• WebGL は iOS 8 から• 仕方ないので CSS の 3D

CSS で 3D

• transform で立体的な変形• perspective でカメラの近さを設定 (px)• perspective プロパティ = 親要素に設定• transform の perspective 関数 = 子要素に設定

• overflow:hidden とか設定すると、そこでレイヤー結合されて立体的に見えません

視界追随• devicemotion イベントで、加速度を取れる• たぶんアプリで取得できる情報と一緒だと思う• アプリはどうやってんの？（未調査）

• iOS で取れるのは加速度、重力、回転• 向いてる「方角」が取れたら、水平方向は楽なんだけどなー• ちなみに重力はこの Surface でも取れました• Android もいける？

WebGL on iOS

• iPhone 8+• みっくみくな未来が待ってる

おわり