Skip to content
Science (Physics) education app visualizes Magnetic Field for HoloLens
Branch: master
Clone or download
Latest commit 2abf77f Jun 19, 2019
Type Name Latest commit message Commit time
Failed to load latest commit information.
Assets Translate Readme into English Jun 13, 2019
Packages Create manifest.json Apr 17, 2019
ProjectSettings アイコン:追加 May 20, 2019
UnityPackageManager Import HoloToolkit Apr 14, 2019
.gitattributes Initial commit Apr 14, 2019
.gitignore VSSolutionを出力するためのAppフォルダをignoreに追加 May 7, 2019
LICENSE Update LICENSE May 17, 2019 Readme: Update Jun 19, 2019


Physics education app visualizes Magnetic Field for HoloLens

We are very welcome to your contribution for education including porting to other platforms (such as Magic Leap One, Oculus Quest, and many others).

2019年5月22日:HoloMagnet37、3次元自動 2018年6月21日:(学会発表用)三重高校愛知総合工科高校授業風景320x180



This code is published to help understanding sessions of HoloLens app development in IT Tech conference which held once a year by Microsoft Japan.

The reason why I published this open-source app is, because I was one of 17 personal sponsors who have Microsoft MVP Award (The Microsoft Most Valuable Professional award is given by Microsoft to "technology experts who passionately share their knowledge with the community.")

  • Made by feedbacks of 300 experienced people in 5 countries at 11 schools
  • Physics education app for headset with mixed reality technology (very new technology).
  • Objective is experience education for:
    • student in junior high school, high school, college, university, night school
    • visitor in science museum, event
  • You can see invisible phenomena, magnetic field, which can not be seen in real world.
  • Rare education app for mixed reality headset.
  • Anyone can get app via Microsoft Store
  • Free



Light Load

2019年5月22日:HoloMagnet37、2次元 2019年5月22日:HoloMagnet37、3次元手動

The app executes the Physics calculation of each of 500 compasses on every frame, and the FPS is 58.

Specifically, it does not instantiate it's Shader. It executes Physics calculation in the single Shader. As a result, the load is very light.

Furthermore, the reason why the light weight is needed is explained in next subject "UI / Expression".

Does not instantiate shader

As the following codes, the Material is not operated by a Script. Valuables are set in the Shader which accept external valuables. They are assigned directly to the Shader by a Script.


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

        // Set coordinates to Shader of Material of NORTH side of compass
        CompassesModel.Instance.MatNorth.SetVector("_NorthPolePos", nv4);
        CompassesModel.Instance.MatNorth.SetVector("_SouthPolePos", sv4);
        // Set coordinates to Shader of Material of SOUTH side of compass
        CompassesModel.Instance.MatSouth.SetVector("_NorthPolePos", nv4);
        CompassesModel.Instance.MatSouth.SetVector("_SouthPolePos", sv4);

As a result, the Shader is not instantiated and processed as a single Shader. That significantly reduces the calculation load.

Execute Physics calculation in Shader

As the following codes, Physics calculation is executed in a Shader.


// Define position vector of self (compass) as vecP
float3 vecP;
vecP = IN.worldPos;

// Define position vector of NORTH Pole as vecN
float3 vecN;
vecN.x = _NorthPolePos.x;
vecN.y = _NorthPolePos.y;
vecN.z = _NorthPolePos.z;

// Define position vector of SOUTH Pole as vecS
float3 vecS;
vecS.x = _SouthPolePos.x;
vecS.y = _SouthPolePos.y;
vecS.z = _SouthPolePos.z;

// Define displacement vector from self to bar magnet as vecDisN, vecDisS
float3 vecDisN, vecDisS;
vecDisN = vecP - vecN;
vecDisS = vecP - vecS;

// Get magnetic force vectors from two poles as 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);

// Get resultant magnetic force vector as vecF
float3 vecF;
vecF = vecF_N + vecF_S;

As a result, Physics calculation is completed in GPU. It significantly reduces CPU load. Since the CPU power of HoloLens is very weak, it's important to transfer necessary processes to GPU.

UI / Expression


More than 300 people in 5 countries at places including 11 schools were practically taken experience lessons / sessions with this app. Learning tests were taken in 3 schools, and all of them gave questionaires (both quantitative and qualitative). These results made the app experience better, and made the learning efficience and satisfaction degree increase. The devices are as followings:


  • Unstable operation (for example, Focus or marker tracking runs off) makes user feel dissatisfaction. It's desirable to provide very simple operation for a user who experience for the first time.
  • Slowness makes user feel dissatisfaction. It's desirable to make it as fast as possible.
  • Although Sharing provides a experience of higher level, it takes a few minutes to recover. Thus, it's not suitable for a lesson which is severe on time such as 40 students classroom.


  • Objects to display should be big in order to show for many people with a projector or a big TV
  • It's difficult to understand old abstract expression (such as Lines of Magnetic Force) for beginner. Thus, devices of expression to help understanding (such as compasses arranged in grid) are important.
  • Static expression is more understandable than dynamic expression. Satisfaction and comprehension degrees are higher if an user can move his/her body to experience contents.

Lesson Scenes

The followings are lesson / session scenes. Appearance of the app was changing, because we improved step by step.

2018年5月21日-大阪メイカーズバザール 170829-MFT 22908671_1328002897323117_732263550_o 2018年6月21日:(学会発表用)三重高校愛知総合工科高校授業風景320x180 2018年3月8日-京進スクールワン四日市ときわ教室320x180 ★2018年4月13日:障碍者ITカレッジ(明るくした)320x180 2018年6月6日:津東高校v3-3-320x180 イギリスでのHoloLens授業 2018年10月22日:ガーナ教員研修(含生徒)短縮版360x180 2018年10月26日:ガーナ、ホ工科大学授業320x180 2018年11月10日:FabLab-Rwanda320x180 2018年11月13日:ルワンダビジネスマッチング320x180 2018年11月15日:tumba college of technology320x180 2018年11月15日:University of Rwanda320x180 2019年3月20日:グロサミ2019-320x180


We were asked by The Physics Education Society of Japan to write a paper about these knowledge. We already posted. The detail is going to be put on the journal. We are going to add the link to the paper on publication.

Structure Figure

This is the structure figure of the app.


We drew simple original structure figure in order to express both class relations and activity flows.

  1. Large circle means Prefab, Middle size circle means class, Small circle means method.
  2. Arrows means paths of process from user

Rolls of classes against a Prefab is followings:

  • Handler class is over the Prefab
  • Model class is on the right of the Prefab
  • Controller class is under the Prefab

A beginner developer of HoloLens tends to create classes disorderly.

However, when you distinguish handler, model and controller classes against each Prefab, you can design with good prospect easily.

How to Build


  • Unity 2017.4.26f1 (2017.4.x seems to work)
  • Visual Studio 2017.15 (Check all Windows 10 SDKs) Visual Studio Installer 2019-06-19 16 59 55


  1. Clone this repository
  2. Open the project with Unity
  3. Build into target folder (normally named "UWP")
  4. When the build finished, file explorer opens the project folder. Open the target folder.
  5. Open "HoloMagnet3.sln" with Visual Studio.
  6. Build -> Deploy to HoloLens
  7. Start app named "HoloMagnet3" in HoloLens


  • 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
  1. Introduction scene in which you can grow accustomed to movement of a bar magnet
  2. One compass scene which shows the magnetic field
  3. Arranged in 2-Dimension compasses scene
  4. Arranged in 3-Dimension compasses scene


  • Susuka High School, Teacher Tabata
  • Mie High School, Teacher Murata and Teacher Kawada
  • Prefectural Aichi High School of Technology and Engineering, Teacher Kawada
  • Tokyo Gakugei University Senior High School, Teacher Ohnishi
  • Tsu Higashi High School, Teacher Sano
  • St. Giles Cambridge School, Teacher Philip
  • Japan International Cooperation Agency (JICA) volunteer, Dr. Sugimoto
  • Japan International Cooperation Agency (JICA) volunteer, Mr. Sakai
  • Kobe City Africa Business Mission Coordinator, Samuel IMANISHIMWE
  • Kobe Institute of Computing Business Development Director, Dr. Nick Barua
  • Integrated Polytechnic Regional College (IPRC) Tumba, Principal MUTABAZI Rita Clémence
  • University of Rwanda Dept of Computer Engineering Associate Professor, Dr.Santhi Kumaran
  • Tomoki Hayashi
  • Koji Matsui
  • All staffs in share office BizSquare Yokkaichi
  • 300 students who gave me their feedbacks in Japan, UK, Ghana, Rwanda, US


Email, Homepage, Facebook, Twitter, LinkedIn


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

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

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

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




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






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);





// 自身(方位磁針)の位置ベクトル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;




  • 操作が安定していない(例えばフォーカスが外れる、マーカートラッキングがしばしば途切れる)と、体験者は不満を感じます。初めて体験するユーザに対するHoloLensアプリは、極めて簡易な操作方法を提供することが望ましいです。

  • 動作が遅いと、体験者は不満を感じるため、動作を可能な限り速くすることが望ましいです。

  • シェアリングは高次元の体験を提供することができますが、途中で接続が切れた場合の復旧に時間がかかるため、時間にタイトな授業(40人の場合、3分のロスも許されません)には適しません


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







  1. 大きな円がプレハブ、中くらいの円がクラス、小さい円がメソッドを表しています。
  2. 矢印が、ユーザからのアクションがどのような経路をたどって処理されるかを表しています。


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





  • Unity 2017.4.26f1(2017.4系列なら動くでしょう)
  • Visual Studio 2017.15 (すべての Windows 10 SDK にチェックして下さい) Visual Studio Installer 2019-06-19 16 59 55
  1. このリポジトリをクローンします
  2. Unityで、プロジェクトを開きます
  3. ビルド先フォルダ(「UWP」とするのが一般的)を指定してビルドします
  4. ビルドが終わるとプロジェクトフォルダがエクスプローラによって開かれるので、先ほど指定したフォルダを開きます
  5. 「HoloMagnet3.sln」ファイルを開きます
  6. Visual Studio を使って HoloLensに配置します
  7. 「HoloMagnet3」を起動します


  • 棒磁石を動かす ホールドしながら腕を動かすことで棒磁石を動かすことができます
  • 磁力線を表示 タップします
  • 次のシーンに進む ダブルタップする
    • シーンは4つあります
    • 最後のシーンでダブルタップすると最初のシーンに戻ります
  1. 棒磁石の移動に慣れてもらうためのシーン(棒磁石しかない)
  2. 1つの磁界を表すコンパスのあるシーン
  3. 平面グリッド上にコンパスが並んでいるシーン
  4. 立体グリッド上にコンパスが並んでいるシーン



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





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

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

Untitled - Paint 2019-05-20 12 13 36


HoloMagnet3-190114 - Microsoft Visual Studio 2019-05-20 10 24 57

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

HoloMagnet3-190114 - Microsoft Visual Studio 2019-05-20 10 53 49


HoloMagnet3-190114 - Microsoft Visual Studio 2019-05-20 11 00 48


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

NotificationsForm 2019-05-20 14 50 43




Assets 2019-05-20 14 38 17

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

Untitled - Paint 2019-05-20 12 16 23

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

NotificationsForm 2019-05-20 14 47 06




NotificationsForm 2019-05-20 15 05 06


NotificationsForm 2019-05-20 14 55 40




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







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




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



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


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


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


Email, Homepage, Facebook, Twitter, LinkedIn

© 2019 Feel Physics® All rights reserved.

You can’t perform that action at this time.