Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

知っ徳! 納徳!Magic Leap 《アプリ開発~Web開発の超基礎編》

Magic Leap のOS、アプリケーションの形態、開発による環境構築からHello Worldまで

  • Soyez le premier à commenter

知っ徳! 納徳!Magic Leap 《アプリ開発~Web開発の超基礎編》

  1. 1. SADAO TOKUYAMA !山 禎男 2019/01/31 特定非営利活動法人ウェアラブルコンピュータ研究開発機構HMDミーティング(大阪) アプリ開発~ Web開発の 超基礎編
  2. 2. アジェンダ
  3. 3. アジェンダ 自己紹介 Magic Leap ソフトウェア 開発編  アプリケーションの種類  Unity開発  Web開発 まとめ
  4. 4. 自己紹介
  5. 5. 自己紹介 SADAO TOKUYAMA (徳山 禎男) Twitter:tokufxug お住まい:大阪
  6. 6. 職業
  7. 7. 職業 システムインテグレーター (14年) WEBシステム開発 金融系システムに長期に 携わっている。
  8. 8. Magic Leap 活動 作ったデモがMagic Leapに 紹介されました。
  9. 9. Magic Leap 活動 Magic Leapから賞をもらったり…
  10. 10. Magic Leap 活動 LAで開催したカンファレンスに参加。
  11. 11. Magic Leap 活動  いろんなイベント でMagic Leapの話を させていただきました。
  12. 12. Magic Leap ソフトウェア OSについて
  13. 13. Magic Leap ソフトウェア OSについて OS 空間コンピューティングの要件に 合わせて作成した独自OS
  14. 14. Magic Leap ソフトウェア OSについて OS Linux と AOSP(Android Open Source Project) を基に作成。
  15. 15. Magic Leap ソフトウェア Lumin OS
  16. 16. Magic Leap ソフトウェア Lumin OS Lumin OS Core Magic Leap Oneと 互換性のあるカスタムド ライバを備えた Linux ベースのカーネル
  17. 17. Magic Leap ソフトウェア Lumin OS OS Service 従来のOSとMagic Leap Oneのカスタム機能と 搭載したサービス群。
  18. 18. Magic Leap ソフトウェア Lumin OS OS Service 従来のOSとMagic Leap Oneのカスタム機能と 搭載したサービス群。 WiFi, Bluetooth,マル ティメディア,入力管 理,デバッグおよび ログ機能など…
  19. 19. Magic Leap ソフトウェア Lumin OS OS Service 従来のOSとMagic Leap Oneのカスタム機能と 搭載したサービス群。 環境検知、グラフィッ クスサービス、オー ディオなど..
  20. 20. Magic Leap ソフトウェア Lumin OS Platform APIs 空間コンピューティン グ機能にアプリから、 アクセスを許可する API群。
  21. 21. Magic Leap ソフトウェア Lumin OS 開発プラットフォーム Magic Leap Oneのアプリケー ション開発するためのフレー ムワーク。
  22. 22. Magic Leap ソフトウェア Lumin OS アプリケーション Magic Leap Oneのアプリケー ション。
  23. 23. 開発編
  24. 24. アプリケーションの種類
  25. 25. アプリケーションの種類 ランドスケープ イマーシブ ウェブプラットフォーム
  26. 26. アプリケーションの種類 ランドスケープ
  27. 27. アプリケーションの種類 ランドスケープ Lumin OS 上で 動作する マルチタスク型の アプリケーション。
  28. 28. アプリケーションの種類 ランドスケープ プリズムという 容積に含まれ、 操作、移動、配置を 行うことができる。
  29. 29. アプリケーションの種類 ランドスケープ Lumin Runtime というフレームワークで開発。
  30. 30. アプリケーションの種類 ランドスケープ Lumin Runtime というフレームワークで開発。 言語はC++11(C++14もサポート)。 IDEはVisual Studio 2017 または 、 Visual Studio Code
  31. 31. アプリケーションの種類 ランドスケープ 2019年にJavaScriptベースのMagicScriptが リリース予定。
  32. 32. アプリケーションの種類 ランドスケープ 2019年にJavaScriptベースのMagicScriptが リリース予定。 MagicScriptで開発も可能になるとのこと。
  33. 33. アプリケーションの種類 ランドスケープ ツール
  34. 34. アプリケーションの種類 ランドスケープ ツール:Lumin Runtime Editor 3Dオブジェクトや UIを配置し、シーン グラフを作成。
  35. 35. アプリケーションの種類 ランドスケープ ツール:Lumin Runtime Editor Lumin Runtimeの シーングラフを作成 するツール。
  36. 36. アプリケーションの種類 ランドスケープ ツール:Lumin Runtime Editor 作成したシーングラ フの3DやUIを プログラムから操作 する。
  37. 37. アプリケーションの種類 イマーシブ
  38. 38. アプリケーションの種類 イマーシブ 没入型アプリケーション。
  39. 39. アプリケーションの種類 イマーシブ 没入型アプリケーション。 シングルタスクアプリケーショ ンであるため、起動するとメ ニューやランドスケープは全て 隠される。
  40. 40. アプリケーションの種類 イマーシブ 没入型アプリケーション。 シングルタスクアプリケーショ ンであるため、起動するとメ ニューやランドスケープは全て 隠される。
  41. 41. アプリケーションの種類 イマーシブ 開発は3D Engineを使用。
  42. 42. アプリケーションの種類 イマーシブ 開発は3D Engineを使用。 UnityやUE以外の3Dエン ジンでも開発できるよ うにC APIも 別途、用意されている。
  43. 43. アプリケーションの種類 ウェブプラットフォーム
  44. 44. アプリケーションの種類 ウェブプラットフォーム Magic Leap Oneに標準搭載 している Helio ブラウザで は、空間コンテンツを 活かしたアプリケーション の開発が可能。
  45. 45. アプリケーションの種類 ウェブプラットフォーム Magic Lepeが提供している Prismatic.jsという JavaScriptライブラリを使 用する。開発は従来のWEB アプリケーションと同様の 開発環境で行える。
  46. 46. 今回はUnityとWebによる 開発方法に ついて説明します。
  47. 47. Unity開発
  48. 48. 開発環境の構築
  49. 49. 開発環境の構築 開発環境の入手
  50. 50. 開発環境の構築 開発環境の入手 Magic Leap Package Manager Unity Editor MLTP Visual Studio (当スライドは説明を割愛。)
  51. 51. 開発環境の構築 Magic Leap Package Manager CreatorページDownload ページアクセスし、 Package Managerを ダウンロード。
  52. 52. 開発環境の構築 Magic Leap Package Manager
  53. 53. 開発環境の構築 Magic Leap Package Manager Magic Leap のSDKや ツールなどを管理する ソフトウェア。
  54. 54. 開発環境の構築 Magic Leap Package Manager SDKからツールは、 このPackage Manager からダウンロード、 アップデートを行って いきます。
  55. 55. 開発環境の構築 Magic Leap Package Manager Lumin SDKと Magic Leap Unity Package を入手します。
  56. 56. 開発環境の構築 Unity Editor MLTP
  57. 57. 開発環境の構築 Unity Editor MLTP Unity の Magic Leapページに行き、 Unity Editor MLTP を入手。
  58. 58. 開発
  59. 59. 開発 1.テンプレートは Magic Leapを選択。 2.プロジェクト作成 プロジェクトの作成
  60. 60. 開発 1. Lumin OSを選択。 開発プラットフォームの設定 2.Lumin SDKのフォ ルダを選択。 3.プラットフォーム を切り替える。
  61. 61. 開発 1. Lumin OSを選択。 開発プラットフォームの設定 2.Lumin SDKのフォ ルダを選択。 3.プラットフォーム を切り替える。
  62. 62. 開発 ML Remote の起動
  63. 63. 開発 ML Remote の起動 ML Remoteは開発中のアプリを シミュレーター上で動作確認する アプリケーション。
  64. 64. 開発 ML Remote の起動
  65. 65. 開発 ML Remote の起動 1. Package Manager内の Use ML Remoteボタンを クリック。
  66. 66. 開発 ML Remote の起動 ML Remoteが起動
  67. 67. 開発 ML Remote の起動 “Start Simulator”というボタンと “Start Device”というボタンがある。
  68. 68. 開発 ML Remote の起動 “Start Simulator” はPC上で動作する シミュレーターモード。
  69. 69. 開発 ML Remote の起動 “Start Device” はMagic Leap Oneで 動作するシミュレーターモード。
  70. 70. 開発 ML Remote の起動 2.Start SimulatorまたはStart Device のボタンをクリック。
  71. 71. 開発 ML Remote の起動 3.Interactionが起動。
  72. 72. 開発 Zero Iteration
  73. 73. 開発 Zero Iteration Unity(またはUnreal Engine)で デプロイすることなく、プレ ビューモードと連携して、動作確 認を行うモード。
  74. 74. 開発 Zero Iteration UnityのMaigc Leapメ ニューから選択。
  75. 75. 開発 Zero Iteration Unityの再起動を要求される。 再起動を行う。
  76. 76. 開発 Unityで実行
  77. 77. 開発 Unityで実行 プレビュー時、 Unityで編集した情報が ML Remoteに反映される。
  78. 78. Web開発
  79. 79. Web開発 地球とバルーンを、 表示を行います。
  80. 80. Web開発 地球の回転 気球の移動と回転 地球を部屋に配置
  81. 81. Web開発 開発環境
  82. 82. Web開発 開発環境 テキストエディタ WEBサーバ
  83. 83. Web開発 雛形を作成
  84. 84. Web開発 雛形を作成 <html lang="en"> <head> <title>Hello, Prismatic!</title> <script src="https://unpkg.com/@magicleap/prismatic"></script> </head> <body> </body> </html>
  85. 85. Web開発 雛形を作成 <html lang="en"> <head> <title>Hello, Prismatic!</title> <script src="https://unpkg.com/@magicleap/prismatic"></script> </head> <body> </body> </html> Magic Leap提供の JavaScriptライブラリ を指定
  86. 86. Web開発 背景の透明化
  87. 87. 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>
  88. 88. 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> 背景の透明化を 有効にする
  89. 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. 90. Web開発 地球の表示
  91. 91. 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>
  92. 92. 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モデル表示の タグ
  93. 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> 3Dファイルを指定 (.fbx or .glb (glTF))
  94. 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. 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モデルの奥行を 指定
  96. 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> 正数は前方に配置 負数は後方に配置
  97. 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> Trueの場合 ブラウザ領域外でも 表示する
  98. 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> Trueの場合 3Dモデルの持ち出し て配置を許可する
  99. 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> 回転を制御する
  100. 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> Y軸に30秒間回転する
  101. 101. Web開発 気球の表示
  102. 102. 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>
  103. 103. 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モデルのスケール を変更する
  104. 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> 3Dモデルの回転を 調整する
  105. 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> 元の位置(x、y、z 軸)に対して相対的 に移動します。
  106. 106. Web開発 Magic Leap Oneを装着してアクセス。
  107. 107. Web開発 今回使用したサンプル https://bit.ly/2EUY74z
  108. 108. まとめ
  109. 109. まとめ アプリケーションは3種類
  110. 110. ランドスケープ イマーシブ ウェブプラットフォーム まとめ アプリケーションは3種類
  111. 111. まとめ Unity開発
  112. 112. Package Manager経由から、 SDKやツールをダウンロードする。 ML Remoteでアプリの動作を行う。 Magic Leapの開発はZero Iterationの 設定を必ず行う。 まとめ Unity開発
  113. 113. まとめ Web開発
  114. 114. テキストエディタだけで開発可。 JSライブラリPrismaticを読み込むこと。 3Dモデルの表示は<ml-model>を使用す る。 まとめ Web開発
  115. 115. ご清聴ありがとう ございました

    Soyez le premier à commenter

    Identifiez-vous pour voir les commentaires

  • romeohua

    Jun. 3, 2019
  • oudon

    Jul. 13, 2019
  • HiroshiMatsumoto1023

    Aug. 5, 2019
  • takab_slide

    Jan. 21, 2020
  • hiromichiyamada

    Sep. 11, 2020

Magic Leap のOS、アプリケーションの形態、開発による環境構築からHello Worldまで

Vues

Nombre de vues

2 208

Sur Slideshare

0

À partir des intégrations

0

Nombre d'intégrations

96

Actions

Téléchargements

5

Partages

0

Commentaires

0

Mentions J'aime

5

×