2014年7月 横浜支部 定例会


20140730_android_yokohama_group

2014年7月30日に さくらWORKS関内 で、日本Androidの会 横浜支部 定例会 を開催した。
今回のテーマは、先月開催された Google IO 2014 ですが、主に Cardboard のワークショップに時間を費やした。

Cardboard ワークショップ
Google Cardboard は、段ボールで作る VRゴーグル です。
Google IO 2014 でお土産として配られました。
設計データが公開されています。
材料は100円ショップで入手できます。
実際に作ってみたところ、予想以上に素晴らしい出来でした。
感激したので、今回 組立てワークショップを開催しました。
人数分の段ボールは、レーザーカッターで切りました。
レーザーカッターは 慶應義塾大学ソーシャル・ファブリケーション・ラボ の機材をお借りしました。
当日は、11名で組立てました。
1時間ほどで基本形は完成しました。
30分ほど、改良を加えたりし、アプリを試したりしました。
参加者からは、おおっ!という感動の声がし、満足して頂けたようです。
20140730_android_yokohama_prepare 20140730_android_yokohama_kit

Google IO 関連の発表
今回は下記の1件だけ。
L Preview Camera API 3.0を触ってみた @nakomashi312
露出などの条件を変えた連写ができるようになりました。

懇親会
同じ会場で懇親会を行いました。
話の中心は Cardboard でした。
Oculus Rift の DK2 を注文している人から、Cardboard で充分だなとか。
磁石が効かない端末には、Android Wear との連携機能が欲しいとか。
などなど。

参加者のブログ
勉強会に初めて参加してみた/日本アンドロイドの会 横浜支部 定例会


Google Cardboard Tutorial の翻訳


このページは Google Cardboard Tutorial の翻訳です。

チュートリアル
このドキュメントは、自分で VR (仮想現実) アプリを作成するために、実験的なVRツールキットを使用する方法について説明します。

アンドロイドのデモ・アプリ: 宝探し
このチュートリアルの中のコード例は、デモ・アプリ 宝探し から取得できます。

カードボードは、VRプラットフォームとしてあなたのスマホの力を広げるシンプルな装置です。 たった2ドルにもかかわらず、カードボードはあなたのスマホに、双眼でのレンダリングや頭部の動きのトラッキングや磁石によるアプリへの指示などを備えた、3D画面を提供します。 デモ・アプリ「宝探し」ではこれらの機能が使用されています。 このゲームでは、ユーザは宝物をできるだけ早く見つけて集めるために、ディジタルの世界を見て回ります。 これは初歩的なゲームですが、カードボードのコアとなる機能をデモします。

ゲームのやり方
「宝探し」ゲームは、3Dテキストとして描画られた指示で始まります。 ユーザは、宝物を見つけた場合に、磁石を動かすように指示されます。

20140728_cardborad_cube1
これはスマホの画面に表示されたものです。 カードボードで見たときには、3D画面として表示されるでしょう。

ユーザが、立方体 (宝物) を画面中央に持ってくると、立方体は黄色に変色します。 立方体が黄色の間に、ユーザが磁石を動かすと、ユーザのスコアは増加します。 次に、立方体は新しい位置へ移動します。
20140728_cardborad_cube2

このアプリは、オブジェクトの表示に Open GL ES 2.0 を使用します。 このアプリは、ライティング、空間の移動、カラーリングなどのいくつかの基本的な機能をデモします。 このアプリは、入力として磁石を使用する方法や、ユーザが何かを見ているかどうかをチェックする方法や、左右の眼に対して異なる画面を表示して3Dイメージを描画方法を示します。

VR Toolkit JAR を取得する
カードボードのAPIを使用するためには、VR Toolkit jar ファイル をダウンロードして、プロジェクトにそれを含めてください。

manifest を編集する
デモ・アプリの manifest から、カードボードアプリのために必須な設定や推奨された設定を説明します。

下記に注意してください。
・uses-sdk android:minSdkVersion=”16″
デバイスがAPIレベル16 (Jellybean) あるいはそれ以上が実行できることを示します。

・uses-feature android:glEsVersion=”0x00020000″ android:required=”true”
デモ・アプリを実行するために、デバイスが Open GL ES 2.0 をサポートすることを示します。

・android:screenOrientation=”landscape”
アクテビティの必要な画面の向きが landscape (横長) であることを示します。
これはVRアプリケーションのために設定しなければならない。
ツールキットによって使用されるビューや CardboardView は、フルスクリーンでlandscape モード (landscape、reverseLandscape、sensorLandscape) のときに描画されます。

・android:configChanges=”orientation|keyboardHidden”
たとえ、デモ・アプリがそれを持っていないも、このパラメータが設定されることが推奨されます。

・android.permission.NFC
カードボードの NFC タグにアクセスするために、このパーミッションを必要とします。

・android.permission.VIBRATE
スマホを振動させるパーミッションです。
振動は、ユーザに何かが起こったことを通知する仕組みです。

CardboardActivity を拡張する
CardboardActivity は、カードボードのアプリのコード作成の出発点です。 CardboardActivity は、カードボード装置に簡単に統合的な機能を追加する MainActivity です。 それは、カードボードと交信するためにイベントを検出します。 また、VRを描画するアクテビティを作成するときに、一般的に要求される詳細機能を操作します。

CardboardActivity が sticky immersive mode を使用することに注意してください。 このモードでは、システムUIは隠されて、コンテンツが画面全体に表示されます。 これはVRアプリとして必須の要求です。 アクテビティがフルスクリーン・モードのときにだけ、CardboardView は描画されるからです。 この機能の説明については、Using immersive Full-Screen Mode をご覧ください。

デモ・アプリの MainActivity は CardboardActivity を拡張しています。 MainActivity は次のインターフェースを実装します。
CardboardView.StereoRenderer
これは、描画のインターフェースです。 ビューに立体像を表示するための詳細機能をすべて委任します。 実装としては単純にビューを渡すべきです。 これが、そのビューが提供する様々な変換のパラメーターを使用するために、通常行なわれる手続きです。 全ての立体像の表示とひずみの修正は、ビューの内部で管理されてる描画の機能から、抽出されます。

CardboardView を取得する
アンドロイドのアプリ中のユーザ・インターフェース要素は、すべてビューを使用して構築されます。 VRツールキットは、VR描画に使用することができる GLSurfaceView を拡張したビュー CardboardView を提供します。 CardboardView は、立体的にコンテンツを描画します。 あなたのアクテビティの onCreate() メソッドにて CardboardView を初期化します。

ビューを描画する
一度 CardboardView を取得します。 描画機構にそれを関連させます。 次に、アクテビティに CardboardView を関連させます。 カードボードは、2種類の描画機構を支援します。 しかし、始める最も迅速な方法は CardboardView.StereoRenderer を使用することです。それはデモ・アプリが使用するものです。

CardboardView.StereoRenderer は以下の主要なメソッドを持っています。
onNewFrame() アプリが描画するたびにコールされる
onDrawEye() 異なるアイのパラメータを持つアイのビューからコールされる

これらの実装は、あなたが OpenGL アプリのために通常行うことに似ています。 これらの方法は、次の項でより詳細に説明されます。

onNewFrame を実装する
個々のアイが描画される前に、描画の論理をエンコードするために、onNewFrame() メソッドを使用する。 単一のビューに特有ではないどんな操作もここで実行されるべきである。 これはあなたのモデルを更新するのによい場所である。 このコード例では、変数 mHeadView を、ヘッダ部に持っている。 ユーザが宝物を見ているかどうか伝えることを、後からも出来るように、この値を保存する必要がある。

onDrawEye を実装する
アイごとの設定をするために onDrawEye() を実装する。 これは描画するコードの実質的な部分です。そして規則的な Open GL ES2 アプリケーションの構築に非常に似ている。 次のコード例は、ビュー変換マトリクスを得る方法、およびさらに透視変換マトリックスを教えます。 ローレイテンシーで描画することを確かめる必要があります。 そうでなければ、EyeTransform は、アイのための変形と投影のマトリックスを持っています。

以下はイベントのシーケンスです。
・宝物がアイの空間に入ってきます。
・私たちは投影マトリックスを適用します。これは、指定されたアイに対して描画された場面を提供します。
・ツールキットは最終的に場面を描画するためにひずみを自動的に適用します。

カードボードの入力ハードウェア
カードボードはアンドロイドのアプリとの交信のために、次のハードウェア部品を持っています:

・磁石
磁石は押しボタンを作成するために使用されます。
あなたが磁石を押す場合、磁界は変わり、あなたのスマホの磁力計によって検知されます。 これはデモ・アプリ中の操作する引き金として使用されます。
MagnetSensor.OnCardboardTriggerListener がコールされます。 このとき動作は インターフェースの親アクテビティ (Cardboardアクテビティ) の実装によって提供されます。

・NFC タグ
あなたが、アンドロイドのデモ・アプリを持っているカードボード機器を、装着したときに、NFC はデモ・アプリの起動を引き起こします。
NfcSensor.OnCardboardNfcListener がコールされます。
このとき動作は、インターフェースの親アクテビティ (CardboardActivity) の実装によって提供されます。

下記に説明するように、これらの部品を使ったアプリとの連携を、あなたがプログラム的に変更することができます。

磁石を動かしたときのリスナー
ユーザが磁石を動かした場合に、カスタマイズされた振る舞いを提供するためには、アプリのアクテビティ中の CardboardActivity#onCardboardTrigger() を無視してください。 宝探しアプリの中で、宝物を見つけて、磁石を引けば、宝物を獲得するようになります:

NFC の動作をカスタマイズする
「CardboardActivity を拡張する」の項で、すでに述べたように、CardboardActivity 基底クラスは NfcSensor.OnCardboardNfcListener インターフェースを持っています。 スマホがカードボードに挿入される場合は、常にこのメソッドが呼ばれます。

VR (双眼鏡) モードのオン/オフを切り替えるために、NfcSensor.OnCardboardNfcListener、onInsertedIntoCardboard()、onRemovedFromCardboard() を上書きすることができます。
したがって、VRモードをオフすることで、カードボードなしで宝探し仕事を作ることも出来ます。
CardboardView#setVRModeEnabled( false ) を使用します。


Cardboard ワークショップの準備


来週の Cardboard ワークショップ の準備として、人数分の段ボールをレーザーカッターで切りました。
Tech Institute の講師として、仙台から 小泉勝志郎 さんが来ていたので、見学に誘いました。

いったん、ファブラボ関内 に集合して、すぐ近くにある 慶應義塾大学ソーシャル・ファブリケーション・ラボ の横浜拠点に移動しました。
レーザーカッターは、ファブラボ関内の機材 (Universal VLS 2.3) だと少し小さいので、慶應大学の機材 (GCC SPRIT) をお借りしました。
最初に、大学院生の金崎さんから簡単な使い方を教わりました。
機材の主な違いは、Universal で上下の位置合わせを手動でするが、GCC ではセンサーが付いていて自動でできること。
Universal ではDrawソフトから印刷してからパラメーターを設定をするが、
GCC では印刷する前にパラメーターをするなど、細かい手順が異なります。
次に、レーザーのパワーや速度などのパラメータを変えて、いくつか試し切りします。
1.5mmの段ボールなので、わりと簡単に切れました。
パラメータが決まったら、あとは、人数分の段ボールを切ります。
5人分やったところで、飽きてきました。
切ったあとの細かいゴミパーツが多くて、拾い上げるのに時間がかかるのも、一因です。
気を取り直して作業します。
13人分切るのに、1時間ほどかかりました。
1セットをお礼代わりに置いてきました。

ファブラボ関内に戻って、小泉さんに1セット組み立てて貰いました。
すぐに組み立て終わるかと思ったら、以外と時間がかかりました。
平面図や部品から、どうやって組立てたら、完成するのかという手順が、頭に浮かばないようです。
1時間半ほどで完成しました。
Cardboard のアプリをダウンロードして、試してみます。
あれっ! 物体が立体ではなく、2つに分かれている。
Android の機種によっては、うまくいかないようです。(^^;
Nexus5 で試してもらい、奇麗に見えることを、確認して貰いました。

参考
小泉さんのFaceBook


Google Cardboard を作ってみた


20140705_cardboard_assenbled

2014年6月26日に Google IO が開催されました。
自宅で 基調講演の中継 を見てました
最後になんか段ボールが出てきました。

Cardboard というものらしい。
段ボールで作る VRゴーグル です。
作り方が公開されています。
20140705_cardboard_keynote20140705_cardboard_googleio

必要なもの
(1) 段ボール (厚紙でも可)
  最小サイズ 56cmx22cm 厚さ 1.5mm
(2) レンズ
  これが一番重要な部品で、かつ、入手しにくい。
  直径 25mm 焦点距離 45mm
(3) 磁石
  ネオジム磁石×1個、セラミック磁石×1個
  直径 19mm 厚さ3mm
(4) マジックテープ
  接着テープ付き
  サイズ: 30mm x 20mm
(5) 輪ゴム
  長さ 8cm
  後述したように、無くてもよい

100円ショップで揃えてみました。
20140705_cardboard_parts

型紙のデータ
段ボールの型紙データは2種類あります。
カッタナイフでの切り抜き用と、レーザーカッタ用です。

今回は、レーザーカッタを使いました。
オリジナルのデータでは Universal VLS 2.30 に合わないでの、パラメータを少し修正しました。
折線のところがラスタだとやたら時間がかかるので、ベクタにしました。
20140705_cardboard_laser_cut

工作
レーザーカッタで切ってみました。
必要な大きさは 22cm×56cm ですが、VLS 2.30 だと 30cm×40cm までなので、2枚に分けました。
分けたところは、重ね合わせて、テープで繋ぎました。
20140705_cardboard_frame
20140705_cardboard_joint_before20140705_cardboard_joint_after

ミニルーペを分解して、レンズを取り出します。
レンズ穴が小さかったので、カッターナイフで広げました。
20140705_cardboard_lense
20140705_cardboard_lense_hole_120140705_cardboard_lense_hole_2

あとは、組み立てるだけ。
20140705_cardboard_assenbled20140705_cardboard_face_side

動作確認
Google Play からアプリをDLして、試してみたところ、思った以上の臨場感でした。
アプリは kinnekoさん が詳しく書いています。
20140705_cardboard_app

改良1
少し使い難いところがあったので、改良しました。
スマホをゴムバンドで固定するのですが、ゴムバンドが視界に入って邪魔になります。
ゴムバンドがないと、スマホが横からすべち落ちます。
そこで、横にも蓋をつけました。
20140705_cardboard_band_before20140705_cardboard_band_after

改良2
スマホの下にボリームボタンがあります。これは何かに拍子に押されてて、画面に表示されます。
ボタンが押されないように、台をつけてみました。
20140705_cardboard_nexus5_button20140705_cardboard_button_after

欠点
大きな欠点として、眼鏡をかけたまま使えないです。
これはフレームを大きく作るしななさそうです。
今後の課題に。

アプリを作る
サンプルコードチュートリアル が公開されています。

IO土産との比較
Google IO のお土産として配られたものを見る機会がありました。
外観は、細かい違いがありますが、ほぼ同じですね。
IO土産は、レンズの質がいいので、くっきり映ります。
20140705_cardboard_compare

FakeRift
ところで、100円ショップのパーツで作るVRゴーグルには FakeRift があります。
これは、眼鏡をかけたままは使えるように、設計されています。
作者の kinneko さんは偉い。
20140705_cardboard_fakerift

発表
7月9日に開催された 日本Androidの会 定例会 で発表してきました。


20140709 Google Cardboard in JAG

8月20日に開催された 【体感!】ウェアラブルデバイスが「未来」でなくなる日! で発表してきました。
Google Cardboard を100円ショップの材料で作ってみた

追伸
ワークショップ をやりました

データ
レーザーカッタ用 (Adobe Illustrator)

3Dのサンプルアプリ
Cardboard – Google製
Chrome Experiments for Cardboard – Google製
Dive City Rollercoaster
Dive Deep
Space Terror VR
Winding Path 3D
Tuscany Dive
Hang Gliding

参考
Cardboard – Google
グーグルのヘッドマウントディスプレイを自作してみる – 週刊アスキー
Google Cardboard を500円で作ってみた
Google Cardboard 作成の覚書き
ダンボール製 VRセッドセットを作ってみるw Google Cardboard
ダンボールのVRゴーグル「Cardboard」を作ってみた
FakeRiftでGoogleI/O純正Cardboardアプリを試す!
CardboardとFakeRift
3Dプリンタで作った Google Cardboard
iPhone 5/5S adapter for Dodocase Google Cardboard VR Toolkit