HoloMagnet3

本アプリは、「de:code 2019」（マイクロソフト社の開発者をはじめとするITに携わるすべてのエンジニアのための年に一度のテクニカルカンファレンス）において、

「Microsoft MVP アワード」（マイクロソフトの製品やテクノロジーに関する豊富な知識や経験を他者と共有することで、すべてのユーザーが最大限に製品を活用できるよう多大なサポートをおこなったコミュニティのリーダーに、マイクロソフトが感謝の意を表して授与する賞）の受賞者として、

セッション内容をより深く理解し実践するのに役に立つコード「パターンを用い、シンプルな UI を提供する、初心者でもできる HoloLens アプリ開発と Microsoft ストアへの登録方法～実際のソースコードと構成図を見ながら～」という位置づけで公開したものです。

このアプリは 5カ国10の学校300人の体験者のフィードバックにより作られました。
最先端の複合現実ヘッドセット 「HoloLens」 用の理科（物理）学習アプリです。
このアプリの目的は教育です。対象は中学生、高校生、専門学校生、大学生です。
このアプリを使って、現実世界では目で見ることのできない磁界について学習することができます。
数少ない教育用HoloLensアプリです。
誰でも Microsoft ストアで無料で入手して体験することができます。

特徴

軽量化

500個の方位磁針の個々の物理計算を毎フレームおこないながら、FPS 58を実現しています。

具体的には、シェーダをインスタンス化せずに、シェーダ内で物理計算をおこなって負荷を大幅に減らしています。

なお、軽量化が必要な理由については次項の「UI・表現」で説明します。

シェーダをインスタンス化しない

以下のように、マテリアルをスクリプトから操作せずに、シェーダに外部変数を受け取る変数を設定し、スクリプトからマテリアルを介さずにシェーダに直接値を代入しています。

CompassesManagedlySimultaneouslyUpdater.cs

void AssignMagnetPosition()
    {
        var np = barMagnet01NorthPole.transform.position;
        var sp = barMagnet01SouthPole.transform.position;
        var nv4 = new Vector4(np.x, np.y, np.z, 0);  //Vector4 に変換
        var sv4 = new Vector4(sp.x, sp.y, sp.z, 0);  //Vector4 に変換

        // 方位磁針の N 極側のマテリアルのシェーダに座標をセット
        CompassesModel.Instance.MatNorth.SetVector("_NorthPolePos", nv4);
        CompassesModel.Instance.MatNorth.SetVector("_SouthPolePos", sv4);
        // 方位磁針の S 極側のマテリアルのシェーダに座標をセット
        CompassesModel.Instance.MatSouth.SetVector("_NorthPolePos", nv4);
        CompassesModel.Instance.MatSouth.SetVector("_SouthPolePos", sv4);
    }

これによりシェーダがインスタンス化されず、単一のシェーダとして処理されるため、計算負荷を大幅に減らすことができます。

シェーダ内で物理計算を行う

以下のように、シェーダ内で物理計算を行っています。

MyCompassShader2.shader

// 自身（方位磁針）の位置ベクトルvecPを作成
float3 vecP;
vecP = IN.worldPos;

// N極の位置ベクトルvecNを作成
float3 vecN;
vecN.x = _NorthPolePos.x;
vecN.y = _NorthPolePos.y;
vecN.z = _NorthPolePos.z;

// S極の位置ベクトルvecSを作成
float3 vecS;
vecS.x = _SouthPolePos.x;
vecS.y = _SouthPolePos.y;
vecS.z = _SouthPolePos.z;

// 自身から棒磁石に対する変位ベクトルvecDisN、vecDisSを作成
float3 vecDisN, vecDisS;
vecDisN = vecP - vecN;
vecDisS = vecP - vecS;

// 極からの磁力ベクトルvecF_N, vecF_Sを求める
float3 vecF_N, vecF_S;
vecF_N =        vecDisN / pow(length(vecDisN), 3);
vecF_S = -1.0 * vecDisS / pow(length(vecDisS), 3);

// 磁力の合力ベクトルvecFを求める
float3 vecF;
vecF = vecF_N + vecF_S;

これにより、物理計算をGPU内で完結させることができ、CPUへの負荷を大幅に減らすことができます。HoloLensのCPUはとても非力なため、必要な処理をどれだけGPUに回せるかが重要です。

UI・表現

本アプリを用いた授業は、5カ国の10の学校で300人が体験しました。全員のアンケート（定量および定性）を収集し、それらを元に、アプリ体験をより良くし学習効果と満足度を上げるために、以下の工夫をおこないました。

UI

操作が安定していない（例えばフォーカスが外れる、マーカートラッキングがしばしば途切れる）と、体験者は不満を感じます。初めて体験するユーザに対するHoloLensアプリは、極めて簡易な（フォーカスもマーカートラッキングも使用しない安定した）操作方法を提供することが望ましいです。
動作が遅いと、体験者は不満を感じるため、動作を可能な限り速くすることが望ましいです。
シェアリングは高次元の体験を提供することができますが、途中で接続が切れた場合の復旧に時間がかかるため、時間にタイトな授業（40人の場合、3分のロスも許されません）には適しません。

表現

プロジェクターで多人数に見せるためには、表示するオブジェクトは大きくするべきです。
理解を妨げるため、体験とプロジェクターに映された映像のあいだのタイムラグは短くするべきです。
従来の抽象的な表現（磁力線など）だけでは初学者にとって分かりにくいため、別の理解を助ける表現の工夫（例えば格子状に配置された方位磁針）が必要です。
静的な表現よりも動的な表現の方が理解しやすく、身体を動かしてコンテンツを体験することができるとユーザの理解度と満足度は高くなります。

授業風景

HoloLensを使っておこなった授業の様子です。見た目が変わっていきますが、毎回アプリを改良しているためです。

論文

これらの知見については日本物理教育学会から研究報告の執筆を依頼されており、学会誌に詳細が掲載される予定です。（公開され次第リンクに変えます）。

構成図

本アプリの構成図です。

大きな円がプレハブ、中くらいの円がクラス、小さい円がメソッドを表しています。

プレハブに対するクラスの役割は以下の通りです。

プレハブの上部にあるクラスがプレハブのハンドラ
プレハブの右側にあるクラスがプレハブのモデル
プレハブの下側にあるクラスがプレハブのコントローラ

HoloLensアプリを作成する際は、最初はどうしても無秩序にプレハブやクラスを作ってしまいがちです。

しかし、プレハブごとにハンドラ、モデル、コントローラクラスを作成すると、見通しの良い設計を手軽におこなうことができます。

ビルド方法

環境

Unity 2017.4.26f1
Visual Studio 2017.15

手順

このリポジトリをクローンします
Unityで、プロジェクトを開きます
ビルド先フォルダ（「UWP」とするのが一般的）を指定してビルドします
ビルドが終わるとプロジェクトフォルダがエクスプローラによって開かれるので、先ほど指定したフォルダを開き、「HoloMagnet3.sln」ファイルをダブルクリックします。
Visual Studio を使って HoloLensに配置します
「HoloMagnet3」を起動します

操作

棒磁石を動かす ホールドしながら腕を動かすことで棒磁石を動かすことができます
磁力線を表示 タップします
次のシーンに進む ダブルタップする
- シーンは4つあります
- 最後のシーンでダブルタップすると最初のシーンに戻ります

棒磁石の移動に慣れてもらうためのシーン（棒磁石しかない）
1つの磁界を表すコンパスのあるシーン
平面グリッド上にコンパスが並んでいるシーン
立体グリッド上にコンパスが並んでいるシーン

ストア登録

公式の詳細な説明はここに書かれています：

Windows アプリを公開する - Windows UWP applications | Microsoft Docs

（ゆーじ様の書かれたHoloLens向けのアプリ公開の方法でも丁寧に解説されています）

以下では、公式の説明に補足した方が良いと思われる事項について説明します

アプリのアイコン画像を生成し、登録する

以前はこの機能がなく、高橋忍様が開発されたフリーソフトに頼り切りでした。

現在はVisual Studio上でアイコンを自動生成することができます。

「Project」→「Store」→「Edit App Manifest」→「Visual Assets」を開きます。

「Source」でアイコン画像を選択します。

「Apply recommended padding」をオフにします。さもないと、アイコン画像をうまく枠にフィットしてくれません。

「Generate」をクリックするとアイコン画像が生成されます。

スプラッシュ画像を変える

「Splash Screen」の画像だけを変更します。

アプリアイコンを変える

スタートパネル上のアイコンをUnityのデフォルトのものから変えます。

まずエクスプローラでUnityプロジェクトフォルダ→「UWP」→「（プロジェクト名）」→「Assets」に移動し、「Square310x310Logo.scale-200.png」というファイルをUnityのプロジェクトのAssetsフォルダに入れます。

「Edit」→「Project Settings」→「Player」を開きます

「Icon」→「Univarsal 10 Tiles and Logos」→「Scale 200% (620x620 pixels)」を開き、先ほどプロジェクトに追加した画像ファイルを選択します。

これでHoloLensのスタートパネルのアイコンを変更することができます。

ストアに登録するためにビルドする

HoloLens2はARMアーキテクチャかもしれないので、「ARM」にもチェックを入れます。2つとも「Master」でビルドします。

以下のようなエラーでビルドが止まる場合は、該当のファイルのサイズをPhotoshopの「Web用に保存」などで小さくします。

ストア上の情報を登録する

ビルドしてアップロードするとストア登録がだいたい終わった気になりますが、その後の作業量が意外に多いです。記入事項を事前に準備しておくと良いです。

まず、以下の事項を記入します。

アプリ名
アプリの説明
（更新したときは）更新内容
検索キーワード

次に、スクリーンショットを登録します。

アプリのアイコンを登録します。

ここがわかりにくいのですが、以下のように進めます。

トレーラー動画をアップロードする
「Windows10 & XBox Image」をアップロードする
少し上に戻って、ストアのトップに表示するトレーラーを選びます

2番目の事項をしないと、3番目の事項ができません。気をつけて下さい。

以下の事項を記入します。

ユーザがストアでアプリを検索する際に、部分一致でもヒットするように文節で分けたアプリ名
音声認識で認識されるように文節で分けたアプリ名

以下の事項を記入します。

サポートのメールアドレス
検索用キーワード
著作権と商標
開発者名

これが終わったら、Submit しましょう。

謝辞

鈴鹿高校田端先生
三重高校村田先生、川田先生
愛知総合工科高校川田先生
学芸大附属高校大西先生
津東高校佐野先生
St. Giles Cambridge 校 Philip 先生
JICA ボランティア杉本博士
JICA ボランティア酒井先生
神戸市アフリカビジネスミッションコーディネーター Samuel 様
神戸情報大学院大学 Business Development 学部長 Barua 博士
トゥンバ工科大学 Clémence 校長
ルワンダ大学理工学部情報工学科 Kumaran 助教授
林知樹様
松井幸治様
シェアオフィス「ビズスクエアよっかいち」のスタッフの皆様
日本・イギリス・ガーナ・ルワンダ・US の 300 人以上のフィードバックを下さった生徒たち

連絡先

Email, Homepage, Facebook, Twitter, LinkedIn

What's this?

This is a Science (Physics) education app for the newest Mixed Reality (MR) technology headset "HoloLens".
The purpose of this app is for education. The target of this app is students in junior high school, high school, college and university.
You can learn about magnetic field which can not be seen in real world.
This is one of education app which is few in the world.
Everyone can get this app via Microsoft Store and experience.

Concept

Implementation example of proper size for understanding how to develop for HoloLens Development newbies
Simple and easy UI for a user who have never touch HoloLens and experience for the first time
Example of MVP Design pattern as a HoloLens application
Example avoiding GameObject.Find() which slow down the process speed

Getting Started

Development Environment

Unity 2017.4.26f1
Visual Studio 2017.15

Clone this repository
Open the project
Build
Deploy to HoloLens
Start app named "HoloMagnet3"

Usage

Move Bar Magnet Hold and move your arm, then the bar magnet moves
Show Magnetic Force Lines Tap
Proceed to Next Scene Double tap
- There are four scenes
- You can return to the first scene by double tap in the last scene

Introduction scene in which you can grow accustomed to movement of a bar magnet
One compass scene which shows the magnetic field
Arranged in 2-Dimension compasses scene
Arranged in 3-Dimension compasses scene

Licence

GPL-3.0

Contact

Email: [email protected]

Twitter: @feelphysicsjp

Homepage: https://www.youtube.com/watch?v=1nC2X5o88xA&list=PLUUoZRXFtWCeUb-ZHFwxF1LjgrtBOYd3G

Facebook: https://www.facebook.com/feelphysicsjp

zengxianhong / holomagnet3 Goto Github PK

holomagnet3's Introduction