読者です 読者をやめる 読者になる 読者になる

Weed.nagoya

物理教育アプリを開発しています

複合現実(MR)デバイスのアプリを作るハンズオンに参加

開発-物理教育アプリ 開発-ハードウェア:その他 開発 スマホ・ガジェット等 スマホ・ガジェット等-HoloLens

f:id:weed_7777:20170114195740j:plain

f:id:weed_7777:20170114195806j:plain

複合現実とは、実際の視野に仮想の映像を重ねて見ることができる技術で、例えば脈動する心臓を首を動かして上下左右から眺めることができます。複合現実デバイHoloLensのハンズオンに参加したときの作成手順です。

オオサカプログラミングスクールさんが開催してくれました。

【オオサカプログラミングカフェ】 さまざまな境遇のエンジニアやデザイナーが、会社等の所属を超えて1つの場に集まり、もくもく開発します。 技術的な相談はもちろん、起業・転職・確定申告等のご相談やバックアップもさせて頂きます。

[FBのみ] https://www.facebook.com/osaka.prg.cafe/

【オオサカプログラミングスクール】 エンジニアやデザイナー、クリエーターの皆様のスキルアップを目的に、 勉強会やハンズオンセミナーを行っています。

[FBのみ]https://www.facebook.com/osaka.prg.school/

twitter.com

www.instagram.com

今回の会場です(今回の会場=オオサカプログラミングスクールの拠点というわけではなく、企業の会議室、コワーキングスペース、大学、公共施設など、授業の目的や参加人数に応じて都度お借りしている状況だそうです):

Post from RICOH THETA. - Spherical Image - RICOH THETA

複合現実とは?

詳しくは以下の記事に書いてありますが、実際の視野に仮想の映像(3Dモデル)を重ねます。自分で移動することでその複合現実の世界をその仮想の映像を上下左右からからながめることができます。実際には工場の点検支援や遠隔手術などで利用が始まっています。

blog.jp.feelphysics.education

具体的に仮想映像を作った動画をいくつかご紹介します:


Bone and Skin Rendering of a full Abdominal CT Scan on Hololens


Epona 2017 HoloLens


Red Arrow - Synchro Hololens interactive Model

このように、実際の視野に仮想の映像(3Dモデル)を重ねます。自分で移動することでその複合現実の世界をその仮想の映像を上下左右からからながめることができます。

HoloLensとは?

HoloLensとはMicrosoftが開発したHMD(ヘッド・マウント・ディスプレイ)です。HMDの中にWindows10搭載の小型のPCが乗っており、視野の空間学習やアプリケーションの実行を担当します。複合現実の描画を担当します。HoloLensでは目の網膜に映像を照射することで複合現実の視界を実現しています。

遅延はほとんど感じないのが素晴らしいです。けっこう良いスペックのマシンがHoloLensには載っているようです。

HoloLensアプリの開発ってどうやるの?

昨日実際にやりましたので、以下、説明します。

なお、当日の前にいくつかHoloLens開発のページを見て「あれの前にこれをインストールしなければならない」などと書かれていて少しビビっていたのですが、当日はほぼ一発で動きました。だいぶ環境がこなれてきているようです。

環境

ParallelsMacの上に仮想マシンを起ち上げ、Windows10などを動かすソフトです。これは挑戦でした。「Parallelsでも動く」という記事は一度だけ見かけたのですが、結果的に動いて良かったです。

ソフトウェアは

  • Unity(作業のほとんどはこっちでした)
  • Visual Studio 2015 Community

を使いました。

なお、HoloLensアプリの開発は実機上でなくともエミュレーター上でやることができます。この場合、オフィスやリビングのような空間がいくつか用意され、そこにモデルを配置することになります。床や壁の空間学習などもできます。ただし、エミュレーター重いためVR ReadyなPCが望ましいです。また、エミュレーターは内部でHyper-Vを使っていますので、Windows 10 Proffesionalでないと動かすことができません(Windows 10 Homeはダメ)。

さらに、少数派だと思われますが、MacParallels上ではHyper-Vは動かないそうです。Parallels仮想マシンエミュレーターを入れたいところですが、今のところHyper-Vとセットで配布されているようで、無理そうです。

記事の流れ

  1. まず、HoloLensのチュートリアルのページに沿った開発手順を説明します。
  2. その後、ハンズオンのときの開発手順を説明します。こちらは当日のデータを持っている方々だけが参考になります。

開発手順1 Origami

この開発手順1は私がHoloLens教室イベントに参加した経験を元に、室で配布されたプロジェクトの代わりにMicrosoftがHoloLens用に配布しているプロジェクトファイルを使って、HoloLensアプリを開発したときの手順書です。

HoloLensのチュートリアル

まず、HoloLensのチュートリアルのページに沿った開発手順を説明します。

準備

講師の山地さんからセットアップのやり方を説明する動画のアドレスを頂きました。こちらが確実です:


HoloLensスタートダッシュ! 環境構築

以下は、上の動画を見ずにセットアップした植田のケースです。ほとんど同じですが、念のために残しておきます。

Visual Studioのインストール

ここからダウンロード:https://www.visualstudio.com/ja/downloads/

インストーラを起動すると、いったん再起動を促されます。再起動したら、先ほどのインストーラをもう一度実行しましょう。

インストールオプション

「標準」ではなく「カスタム」

f:id:weed_7777:20170115043326j:plain

「ツールとWindows 10 SDKのチェックをオンにする(不要かも?)

Unity

アカウント作成

Unityを使うにはアカウントをあらかじめ作らなければなりません。

インストール

Unityをインストールします。山地さんの動画の通り、Unityを普通にインストールする途中でWindows Store Moduleのオプションが表示されるので、チェックします。そしてインストールします。

こんなやり方も

私はWindows Store Moduleをどう付けるかわからず、以下のようにインストールしました。念のため残しておきます:

Windows Store Module付きのUnityが必要で、これを入れるにはUnityを丸ごとダウンロードし直さなければならず、当日は往生しました。結局作業を進めながら40分ぐらいかけてダウンロードしました。きちっと正しいものを入れていきましょう(どこにあるか分かりにくいんですけどね)。

まずUnityのサイトに行き、「Unityを入手」→「Personalを今すぐダウンロード」→下へ行き「最新リリース」→Windows Store (.NET) Target Support」

f:id:weed_7777:20170115043343p:plain

現在のURLは以下の通りです。バージョンが上がったら上記の通りに探して下さい:http://download.unity3d.com/download_unity/38b4efef76f0/TargetSupportInstaller/UnitySetup-Metro-Support-for-Editor-5.5.0f3.exe

サンプルプロジェクト

HoloLensのチュートリアルのページからプロジェクトファイルをダウンロードします。解凍しておきます

f:id:weed_7777:20170115043417p:plain

その他

Parallelsが作るMacWindows共有フォルダにプロジェクトを保存するとおかしくなるらしい(どこかで読んだ)ので、Windows側にフォルダをつくり、そこに保存しました。

Unityで作業

インポート

解凍したフォルダの中の「origami」フォルダを選択して開きます。

インポートするのにけっこう時間がかかります

f:id:weed_7777:20170115045337p:plain

とりあえずシーンを保存しておきます。

File→Save Scene As…→「Origami」

メインカメラのセットアップ

山地さん:「Apply HoloLens Scene Settings」で自動的に設定されます。

f:id:weed_7777:20170117100206p:plain

シーンのセットアップ

ヒエラルキーパネルでクリエイト→クリエイトEmptyします。ヒエラルキーパネルに「GameObject」がつくられます。

GameObjectを右クリックして名前を「OrigamiCollection」に変えます。

下のプロジェクトパネルのHologramsフォルダからオブジェクト3つをシーンに追加します

まず、「Stage」をOrigamiCollectionの子要素に追加します。

f:id:weed_7777:20170115043521p:plain

f:id:weed_7777:20170115043535p:plain

「Sphere1」をOrigamiCollectionの子要素に追加します。

「Sphere2」をOrigamiCollectionの子要素に追加します。

f:id:weed_7777:20170115043547p:plain

自動で設定

以下の設定ですが、現在は自動化されています。上のメニューバーの「HoloToolKit」→「Configure」を開きます。

f:id:weed_7777:20170117110337p:plain

「Apply HoloLens …」を3つともやります。カメラ、ビルド、マイク、空間マッピングなどが自動設定されます。なお、途中で再起動を求められます。

手動で設定

手動で設定するやり方(Microsoftチュートリアル)も残しておきます。

ヒエラルキーパネルのディレクションライトを右クリックしてDeleteします。

HorogramsフォルダからLightsをドラッグしてヒエラルキーペインのrootに追加します。

ヒエラルキーパネルのOrigamiCollectionを選択します。

インスペクターパネルのトランスフォーム・ポジションを「0, -0.5, 2」にします。

Playボタンを押して、Unityの中でホログラムをプレビューします。

f:id:weed_7777:20170115043600p:plain

再度Playボタンを押してプレビューを終了します。

UnityからVisual Studioへエクスポート

UnityのFile→Build Settingを選びます。

プラットフォームリストの中からWindows Storeを選び、左下のSwitch Platformを押します。

f:id:weed_7777:20170115043614p:plain

SDK「Universal 10」に、Build Typeを「D3D」にします。

f:id:weed_7777:20170115043628p:plain

先ほどの自動設定は、ここまで自動的にやってくれます。


ここからの作業は必要です。気をつけて下さい。

「Unity C# Project」をチェックします。

「Add Open Scenes」を押します。

f:id:weed_7777:20170115043641p:plain

「Build」を押します。

エクスプローラウィンドウで「App」という新しいフォルダをつくります。

Appフォルダを選択して「フォルダを選択」します。

ビルドが走ります。このビルドは、Unityプロジェクトから、Visual Studioのソリューションファイルを生成するもののようです(たぶん)。

Visual Studioでビルド

終わるとエクスプローラウィンドウが表示されます。「App」フォルダに入って「Origami.sln」をダブルクリックします。

f:id:weed_7777:20170115043712p:plain

Visual Studioが起動します

上のツールバーのターゲットをデバッグからリリースへ、ARMからX86へ(HoloLens OSは32bitです)、ローカルコンピューターからDeviceに変更します。

Deviceを押してビルドします。画面下にビルドの進行状況が表示されます。

f:id:weed_7777:20170115043725p:plain

現実のDeviceない場合、エミュレーターをインストールして実行するか、バイスを接続して実行するか、聞かれます。

f:id:weed_7777:20170115043734p:plain

私の場合は持っているので、HoloLensを開発者モードにしてPINを取得してVisual Studioに打ち込みます。

(時間があればあとでビデオを撮ります)

これは先の話ですが、HoloLens アプリを何回もあれこれ条件を変えながらビルドしても、実行すると真っ白なウィンドウが表示されるだけ、ということがありました。結局、HoloLensを再起動する(電源ボタンを5秒くらい押してシャットダウン。起動するのは軽く押すだけで良いです)で直りました。うーむ、要注意です。

開発手順2 ユニティちゃん

Osaka Programing Schoolのプロジェクトです。

Unityで作業(未完)

素材のインポート

まずOpen New Projectします。プロジェクト名は「170117-osaka-programing-school-2」とします。

エクスプローラウィンドウに戻り、配布されたデータの

  1. 「data」→「HoloLensStartDash」を開きます。
  2. 「Asset」「External」「ProjectSetting」フォルダをコピーします。
  3. そして、「170117-osaka-programing-school-2」フォルダの中に貼り付けます。

1700個ほどのファイルが貼り付けられます。

f:id:weed_7777:20170115043748p:plain

Unityに戻ってもインポートは続きます。

f:id:weed_7777:20170115043759p:plain

インポートしたAssetを確認します。

f:id:weed_7777:20170115043808p:plain

Resource→UnityChan→Models→unitychanヒエラルキーパネルにドラッグします。すると、Unityちゃんが表示されます

HoloToolKit Configure

上のメニューバーの「HoloToolKit」→「Configure」を開きます。

f:id:weed_7777:20170117110337p:plain

「Apply HoloLens …」を3つともやります。カメラ、ビルドなどが自動設定されます。なお、途中で再起動を求められます。

カメラ設定

ヒエラルキーパネルのメインカメラをクリックし、インスペクタパネルのトランスフォーム・ポジションを「0, 0, 0」にします。

次にユニティちゃんを選択して、ポジションを「0, -1, 3」(カメラ位置から1m下のところに立っている、奥行きが3m離れている)にします。カメラの方を向かせるためにローテーションで「0, 180, 0」(y軸が鉛直方向です)を指定します。

f:id:weed_7777:20170115043820p:plain

アニメーション

f:id:weed_7777:20170126204159p:plain

現状のユニティちゃんは解体新書のような姿勢なので、アニメーションを付けます

下のアセットパネルからResource→UnityChan→Animatorsと進みます。

いちばん左のUnityChanActionCheck.controllerをドラッグしてヒエラルキーパネルのunitychanに落とします。

画面上部のPlay(▶️)を押してみて下さい。プレビューモードになり、ユニティちゃんが普通の姿勢になって、まばたきするようになります。

f:id:weed_7777:20170117112113g:plain

もう一度Play(▶️)を押すと編集モードに戻ります。

パタパタちゃんの追加

下のアセットパネルからResource→patapataと進みます。

patapataちゃんをドラッグしてヒエラルキーパネルのルートに入れます。

インスペクタパネルのトランスフォームのポジションを(0, 0, 2)、スケールを(0.2, 0.2, 0.2)にします。

f:id:weed_7777:20170115043841p:plain

パタパタちゃんにアニメーションを追加

下のアセットパネルのAnimationフォルダの中にpatapata.controllerが入っていますので、これをドラッグしてヒエラルキーペインのpatapataに落とします。すると、Play(▶️)を押したときにpatapataちゃんもアニメーションするようになります。

f:id:weed_7777:20170117113318g:plain

パタパタちゃんにAirTapを割り当て

以下、山地さんがフォローして下さいました。ありがとうございます!以下ほぼ全て山地さんの説明です。

Hierarchyタブの「patapata」を選択して、Inspectorタブの一番上のチェックを外します(Sceneタブに表示されていたパタパタが消えます)。

f:id:weed_7777:20170117100548p:plain

配布したHoloLensStartdashフォルダの中にあるAirTap.csのコードがあります。Hierarchyタブの「Main Camera」を選択して、Inspectorタブから「Add Component」を押して「AirTap.cs」を追加します(検索フィールドで「a」と打てば出てきます)。プレビュー画面に「Air Tap」ボタンが出現します。

f:id:weed_7777:20170117114638p:plain

AirTapコンポーネントの2行目にある「Origin Object」の項目に、Hierarchyタブの「patapata」をドラッグアンドドロップ

f:id:weed_7777:20170117134550p:plain

UnityEditor上で実行すると、画面の左上に「AirTap」と書かれたボタンが追加されるので、ボタンを押すと先ほどパタパタが表示されていた場所にパタパタが出現し、10秒後に消えるようになります。

f:id:weed_7777:20170117133049g:plain

以下、ソースコードの抜粋です。

(1) _originObject変数について

パタパタの生成の流れとして、位置、大きさ、コンポーネント等の設定を行ったゲームオブジェクト(「patapata」のことです)を元に複製して、いくつもパタパタを出現させています。_originObject変数は「patapata」を複製するときの元になっているオブジェクトが、Hierarchyタブの「patapata」だということを覚えておくための変数になっています。

(2) OnGUI関数について

画面左上のボタンの配置とボタン押下時に実行される処理を記述しています。 今回はAirTap等実機でしか確認できない処理を実機を使用せずに動作確認できるよう、 UnityEditor上で実行する場合はボタンを配置して、ボタン押下時にその処理を実行させるために使用しています。

(3) SpawnBox関数について

名前は最初にパタパタではなく、箱を作成するようにしていた時の名残りなのであまり気にしないでください、とのことです。 _originObject変数に値が設定されている場合は、そのオブジェクトを複製し、表示処理を有効化、最後に10秒で消滅するように設定しています。これにより、Hierarchyタブにある「patapata」と同様の情報(位置やコンポーネント等)を持ったオブジェクトを生成しています。

...

public class AirTap : MonoBehaviour {

    //生成する時の元になるオブジェクト (1)
    [SerializeField]private GameObject _originObject ;

...

    void Start () {

        _gestureRecognizer = new GestureRecognizer( );
        //認識するジェスチャータイプの設定.
        _gestureRecognizer.SetRecognizableGestures(GestureSettings.Tap);
        //ジェスチャー実行時に呼び出される関数の設定.
        _gestureRecognizer.TappedEvent += AirTapEvent;
        //ジェスチャーの認識を開始.
        _gestureRecognizer.StartCapturingGestures( );

    }

    void Update () {

        ...

    }

//Unityエディターで実行中の場合のみコンパイル.
#if UNITY_EDITOR
    private void OnGUI( )
    {
        //座標(10, 10)から大きさ(100, 60)、ラベル「AirTap」のボタンを作る (2)
        if( true == GUI.Button(new Rect(10, 10, 100, 60), "AirTap") ){
            SpawnBox( );
        }

        return;
    }
#endif

    ...

    void AirTapEvent (InteractionSourceKind source, int tapCount, Ray headRay)
    {
        SpawnBox( );
        return;
    }

    ...

    void SpawnBox( )
    {

    ...

        GameObject newObject ;
        //_originBoxと同じ構成のオブジェクトを生成 (3-1)
        newObject = Instantiate(_originObject);

    ...

        //10秒後にオブジェクトを削除 (3-2)
        DestroyObject(newObject, 10.0f);
        return;
    }

...

}

パタパタちゃんに重さを付ける

押すたびにパタパタが出現しますが、全て同じ場所に出続け、出現したパタパタもまだ落ちる等の物理挙動もしないので、その辺りを追加します。

Hierarchyタブの「patapata」を選択し、Inspectorタブから「Add Component」を押して、「Rigidbody」コンポーネントを追加します。

f:id:weed_7777:20170117142218p:plain

これは追加したゲームオブジェクトに物理挙動を適用させるためのコンポーネントになっています(物理でいうところの剛体です)。詳しい内容の説明は本題から外れますので、省略します。

再度UnityEditor上で実行したら、今度は「AirTap」ボタン押下でパタパタが出現し、落下していきます。

f:id:weed_7777:20170117145024g:plain

パタパタちゃんに当たり判定を付ける

ただ、連打しているとわかりますが、パタパタ同士がぶつかった際にぶつかったような挙動はせず、完全にすり抜けています。 これは当たり判定が設定されていないため発生していますので、当たり判定も追加します。「Rigidbody」の追加時と同様の流れで、今度は「SphereCollider」を追加します(これは球体の形状をした当たり判定を管理するコンポーネントになります)。

f:id:weed_7777:20170117144545p:plain

コンポーネント追加後にUnityEditor上で実行すると、今度はパタパタ同士がぶつかるようになります(結構連打しないとわかりません)。

f:id:weed_7777:20170117145024g:plain

現在の状態で実機転送すると、AirTap動作に反応してパタパタが生成されて、落ちていくものの、現実世界の障害物と衝突するという部分が実装されていないため、床をすり抜けてどこまでも落ちていってしまいます。

現実の障害物で仮想の物体が遮られるようにする

次は、空間マッピングを使って現実世界の床や壁、机などと衝突判定をとれるようにします。

Projectタブから「Assets/HoloToolkit/SpatialMapping/Prefabs」とたどっていき、そこにある「SpatialMapping」というファイルをHierarchyタブにドラッグアンドドロップします。(SpatialMappingはUnityのprefabファイルです。)

このprefabファイルが配置されていると、現実世界の障害物と衝突を行えるようになります。たったこれだけです

既にパタパタには「SphereCollider」を設定しているため、当たり判定がついているので、これだけで実機転送すれば、床や壁に衝突するのがわかると思います。

おまけ:会場で見られたハマりどころ

Windows 8.1

ビルドはできるのですが、実機転送できません(山地さん)。Windows 10を使いましょう。

Unityを普通にインストール

MS Storeオプションを付けずにインストールすると、ビルドのときに一からダウンロードし直しになります。700MB。40分かかりました。

おわりに

実際にHoloLensアプリが動いたときは嬉しかったですし、また、このようなまとめ記事を書かさせてもらえるのも、ひとえに山地さんのおかげです。

本当にありがとうございます。