Download to read offline
Uploaded bySadao Tokuyama
知っ徳！ 納徳！Magic Leap 《アプリ開発～Web開発の超基礎編》
Magic Leap のOS、アプリケーションの形態、開発による環境構築からHello Worldまで
![[Unofficial One Person Magic Leap HACKATHON] SPATIAL BOUNDING BOX SHOOTER](https://cdn.slidesharecdn.com/ss_thumbnails/1pmagicleaphackathoncomplate-181111224019-thumbnail.jpg?width=640&height=640&fit=bounds)
![[Unofficial One Person Magic Leap HACKATHON]SPATIAL BOUNDING BOX SHOOTER](https://cdn.slidesharecdn.com/ss_thumbnails/1pmagicleaphackathon-181110003253-thumbnail.jpg?width=640&height=640&fit=bounds)
知っ徳！ 納徳！Magic Leap 《アプリ開発～Web開発の超基礎編》
- 3.
- 4.
- 5. アジェンダ 自己紹介 Magic Leap ソフトウェア 開発編 アプリケーションの種類 Unity開発 Web開発 まとめ
- 6.
- 7.
- 8.
- 9.
- 10. Magic Leap 活動 作ったデモがMagicLeapに 紹介されました。
- 11. Magic Leap 活動 MagicLeapから賞をもらったり…
- 12.
- 13. Magic Leap 活動 いろんなイベント でMagic Leapの話を させていただきました。
- 14.
- 15.
- 16. Magic Leap ソフトウェア OSについて OS Linuxと AOSP（Android Open Source Project） を基に作成。
- 17.
- 18. Magic Leap ソフトウェア LuminOS Lumin OS Core Magic Leap Oneと 互換性のあるカスタムド ライバを備えた Linux ベースのカーネル
- 19. Magic Leap ソフトウェア LuminOS OS Service 従来のOSとMagic Leap Oneのカスタム機能と 搭載したサービス群。
- 20. Magic Leap ソフトウェア LuminOS OS Service 従来のOSとMagic Leap Oneのカスタム機能と 搭載したサービス群。 WiFi, Bluetooth,マル ティメディア,入力管 理,デバッグおよび ログ機能など…
- 21. Magic Leap ソフトウェア LuminOS OS Service 従来のOSとMagic Leap Oneのカスタム機能と 搭載したサービス群。 環境検知、グラフィッ クスサービス、オー ディオなど..
- 22. Magic Leap ソフトウェア LuminOS Platform APIs 空間コンピューティン グ機能にアプリから、 アクセスを許可する API群。
- 23. Magic Leap ソフトウェア LuminOS 開発プラットフォーム Magic Leap Oneのアプリケー ション開発するためのフレー ムワーク。
- 24. Magic Leap ソフトウェア LuminOS アプリケーション Magic Leap Oneのアプリケー ション。
- 25.
- 26.
- 27.
- 28.
- 29.
- 30.
- 31.
- 32. アプリケーションの種類 ランドスケープ Lumin Runtime というフレームワークで開発。 言語はC++11（C++14もサポート）。 IDEはVisualStudio 2017 または 、 Visual Studio Code
- 33.
- 34.
- 35.
- 36.
- 37. アプリケーションの種類 ランドスケープ ツール：Lumin Runtime Editor LuminRuntimeの シーングラフを作成 するツール。
- 38.
- 39.
- 40.
- 41.
- 42.
- 43.
- 44.
- 45.
- 46. アプリケーションの種類 ウェブプラットフォーム Magic Leap Oneに標準搭載 しているHelio ブラウザで は、空間コンテンツを 活かしたアプリケーション の開発が可能。
- 47.
- 48.
- 49.
- 50.
- 51.
- 52. 開発環境の構築 開発環境の入手 Magic Leap PackageManager Unity Editor MLTP Visual Studio （当スライドは説明を割愛。）
- 53. 開発環境の構築 Magic Leap PackageManager CreatorページDownload ページアクセスし、 Package Managerを ダウンロード。
- 54. 開発環境の構築 Magic Leap PackageManager
- 55. 開発環境の構築 Magic Leap PackageManager Magic Leap のSDKや ツールなどを管理する ソフトウェア。
- 56. 開発環境の構築 Magic Leap PackageManager SDKからツールは、 このPackage Manager からダウンロード、 アップデートを行って いきます。
- 57. 開発環境の構築 Magic Leap PackageManager Lumin SDKと Magic Leap Unity Package を入手します。
- 58.
- 59. 開発環境の構築 Unity Editor MLTP Unityの Magic Leapページに行き、 Unity Editor MLTP を入手。
- 60.
- 61.
- 62. 開発 1. Lumin OSを選択。 開発プラットフォームの設定 2.LuminSDKのフォ ルダを選択。 3.プラットフォーム を切り替える。
- 63. 開発 1. Lumin OSを選択。 開発プラットフォームの設定 2.LuminSDKのフォ ルダを選択。 3.プラットフォーム を切り替える。
- 64.
- 65. 開発 ML Remote の起動 MLRemoteは開発中のアプリを シミュレーター上で動作確認する アプリケーション。
- 66.
- 67. 開発 ML Remote の起動 1.Package Manager内の Use ML Remoteボタンを クリック。
- 68. 開発 ML Remote の起動 MLRemoteが起動
- 69. 開発 ML Remote の起動 “StartSimulator”というボタンと “Start Device”というボタンがある。
- 70. 開発 ML Remote の起動 “StartSimulator” はPC上で動作する シミュレーターモード。
- 71. 開発 ML Remote の起動 “StartDevice” はMagic Leap Oneで 動作するシミュレーターモード。
- 72. 開発 ML Remote の起動 2.StartSimulatorまたはStart Device のボタンをクリック。
- 73.
- 74.
- 75.
- 76.
- 77.
- 78.
- 79.
- 80.
- 81.
- 82.
- 83.
- 84.
- 85.
- 86. Web開発 雛形を作成 <html lang="en"> <head> <title>Hello, Prismatic!</title> <scriptsrc="https://unpkg.com/@magicleap/prismatic"></script> </head> <body> </body> </html>
- 87. Web開発 雛形を作成 <html lang="en"> <head> <title>Hello, Prismatic!</title> <scriptsrc="https://unpkg.com/@magicleap/prismatic"></script> </head> <body> </body> </html> Magic Leap提供の JavaScriptライブラリ を指定
- 88.
- 89. Web開発 背景の透明化 <head> <script src="https://unpkg.com/@magicleap/prismatic"></script> <meta name="viewport"content="transparent-background"> <style> body { background-color: rgba(0, 0, 0, 0); } </style> <title>Hello, Prismatic!</title> </head>
- 90. Web開発 背景の透明化 <head> <script src="https://unpkg.com/@magicleap/prismatic"></script> <meta name="viewport"content="transparent-background"> <style> body { background-color: rgba(0, 0, 0, 0); } </style> <title>Hello, Prismatic!</title> </head> 背景の透明化を 有効にする
- 91. Web開発 背景の透明化 <head> <script src="https://unpkg.com/@magicleap/prismatic"></script> <meta name="viewport"content="transparent-background"> <style> body { background-color: rgba(0, 0, 0, 0); } </style> <title>Hello, Prismatic!</title> </head> 透明度の調整を 行う
- 92.
- 93. Web開発 地球の表示 <ml-model id="earth" src="earth.fbx" style="width: 300px;height: 300px;" z-offset="-500px" unbounded="true" extractable="true" rotate-by-angles=" angles: 0 -5 0; duration: 30s; track: 1;"> </ml-model>
- 94. Web開発 地球の表示 <ml-model id="earth" src="earth.fbx" style="width: 300px;height: 300px;" z-offset="-500px" unbounded="true" extractable="true" rotate-by-angles=" angles: 0 -5 0; duration: 30s; track: 1;"> </ml-model> 3Dモデル表示の タグ
- 95. Web開発 地球の表示 <ml-model id="earth" src="earth.fbx" style="width: 300px;height: 300px;" z-offset="-500px" unbounded="true" extractable="true" rotate-by-angles=" angles: 0 -5 0; duration: 30s; track: 1;"> </ml-model> 3Dファイルを指定 （.fbx or .glb （glTF））
- 96. Web開発 地球の表示 <ml-model id="earth" src="earth.fbx" style="width: 300px;height: 300px;" z-offset="-500px" unbounded="true" extractable="true" rotate-by-angles=" angles: 0 -5 0; duration: 30s; track: 1;"> </ml-model> 3Dモデル表示する 幅と高さを指定
- 97. Web開発 地球の表示 <ml-model id="earth" src="earth.fbx" style="width: 300px;height: 300px;" z-offset="-500px" unbounded="true" extractable="true" rotate-by-angles=" angles: 0 -5 0; duration: 30s; track: 1;"> </ml-model> 3Dモデルの奥行を 指定
- 98. Web開発 地球の表示 <ml-model id="earth" src="earth.fbx" style="width: 300px;height: 300px;" z-offset="-500px" unbounded="true" extractable="true" rotate-by-angles=" angles: 0 -5 0; duration: 30s; track: 1;"> </ml-model> 正数は前方に配置 負数は後方に配置
- 99. Web開発 地球の表示 <ml-model id="earth" src="earth.fbx" style="width: 300px;height: 300px;" z-offset="-500px" unbounded="true" extractable="true" rotate-by-angles=" angles: 0 -5 0; duration: 30s; track: 1;"> </ml-model> Trueの場合 ブラウザ領域外でも 表示する
- 100. Web開発 地球の表示 <ml-model id="earth" src="earth.fbx" style="width: 300px;height: 300px;" z-offset="-500px" unbounded="true" extractable="true" rotate-by-angles=" angles: 0 -5 0; duration: 30s; track: 1;"> </ml-model> Trueの場合 3Dモデルの持ち出し て配置を許可する
- 101. Web開発 地球の表示 <ml-model id="earth" src="earth.fbx" style="width: 300px;height: 300px;" z-offset="-500px" unbounded="true" extractable="true" rotate-by-angles=" angles: 0 -5 0; duration: 30s; track: 1;"> </ml-model> 回転を制御する
- 102. Web開発 地球の表示 <ml-model id="earth" src="earth.fbx" style="width: 300px;height: 300px;" z-offset="-500px" unbounded="true" extractable="true" rotate-by-angles=" angles: 0 -5 0; duration: 30s; track: 1;"> </ml-model> Y軸に30秒間回転する
- 103.
- 104. Web開発 気球の表示 <ml-model id="balloon" src="balloon.fbx" style="width:2000px; height: 1000px;" model-scale="0.1 0.1 0.1" z-offset="300px" unbounded="true" prism-rotation="0 0 0.25" move-by="axes: -1200px 400px -400px; duration: 20s; track: 1;" rotate-by-angles=" angles: 0 0 -0.5; duration: 15s; track: 2;"> </ml-model>
- 105. Web開発 気球の表示 <ml-model id="balloon" src="balloon.fbx" style="width:2000px; height: 1000px;" model-scale="0.1 0.1 0.1" z-offset="300px" unbounded="true" prism-rotation="0 0 0.25" move-by="axes: -1200px 400px -400px; duration: 20s; track: 1;" rotate-by-angles=" angles: 0 0 -0.5; duration: 15s; track: 2;"> </ml-model> 3Dモデルのスケール を変更する
- 106. Web開発 気球の表示 <ml-model id="balloon" src="balloon.fbx" style="width:2000px; height: 1000px;" model-scale="0.1 0.1 0.1" z-offset="300px" unbounded="true" prism-rotation="0 0 0.25" move-by="axes: -1200px 400px -400px; duration: 20s; track: 1;" rotate-by-angles=" angles: 0 0 -0.5; duration: 15s; track: 2;"> </ml-model> 3Dモデルの回転を 調整する
- 107. Web開発 気球の表示 <ml-model id="balloon" src="balloon.fbx" style="width:2000px; height: 1000px;" model-scale="0.1 0.1 0.1" z-offset="300px" unbounded="true" prism-rotation="0 0 0.25" move-by="axes: -1200px 400px -400px; duration: 20s; track: 1;" rotate-by-angles=" angles: 0 0 -0.5; duration: 15s; track: 2;"> </ml-model> 元の位置（x、y、z 軸）に対して相対的 に移動します。
- 108.
- 109.
- 110.
- 111.
- 112.
- 113.
- 114. Package Manager経由から、 SDKやツールをダウンロードする。 ML Remoteでアプリの動作を行う。 MagicLeapの開発はZero Iterationの 設定を必ず行う。 まとめ Unity開発
- 115.
- 116.
- 118.