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

SADAO TOKUYAMA
！山禎男
2019/01/31
特定非営利活動法人ウェアラブルコンピュータ研究開発機構HMDミーティング（大阪）
アプリ開発～
Web開発の
超基礎編

アジェンダ
自己紹介
Magic Leap ソフトウェア
開発編
 アプリケーションの種類
 Unity開発
 Web開発
まとめ

自己紹介
SADAO TOKUYAMA
（徳山禎男）
Twitter：tokufxug
お住まい：大阪

職業
システムインテグレーター
（14年）
WEBシステム開発
金融系システムに長期に
携わっている。

Magic Leap 活動
作ったデモがMagic Leapに
紹介されました。

Magic Leap 活動
Magic Leapから賞をもらったり…

Magic Leap 活動
LAで開催したカンファレンスに参加。

Magic Leap 活動
 いろんなイベントでMagic Leapの話を
させていただきました。

Magic Leap ソフトウェア
OSについて

OSについて
OS
空間コンピューティングの要件に
合わせて作成した独自OS

OSについて
OS
Linux と AOSP（Android Open Source Project）
を基に作成。

Lumin OS

Lumin OS
Lumin OS Core
Magic Leap Oneと
互換性のあるカスタムド
ライバを備えた
Linux ベースのカーネル

Lumin OS
OS Service
従来のOSとMagic Leap
Oneのカスタム機能と
搭載したサービス群。

Lumin OS
OS Service
WiFi, Bluetooth,マル
ティメディア,入力管
理,デバッグおよび
ログ機能など…

Lumin OS
OS Service
環境検知、グラフィッ
クスサービス、オー
ディオなど..

Lumin OS
Platform APIs
空間コンピューティン
グ機能にアプリから、
アクセスを許可する
API群。

Lumin OS
開発プラットフォーム
Magic Leap Oneのアプリケー
ション開発するためのフレー
ムワーク。

Lumin OS
アプリケーション
Magic Leap Oneのアプリケー
ション。

アプリケーションの種類

ランドスケープ
イマーシブ
ウェブプラットフォーム

Lumin OS 上で
動作する
マルチタスク型の
アプリケーション。

プリズムという
容積に含まれ、
操作、移動、配置を
行うことができる。

Lumin Runtime というフレームワークで開発。

Lumin Runtime というフレームワークで開発。
言語はC++11（C++14もサポート）。
IDEはVisual Studio 2017 または、
Visual Studio Code

2019年にJavaScriptベースのMagicScriptが
リリース予定。

2019年にJavaScriptベースのMagicScriptが
リリース予定。
MagicScriptで開発も可能になるとのこと。

ツール

ツール：Lumin Runtime Editor
3Dオブジェクトや
UIを配置し、シーン
グラフを作成。

Lumin Runtimeの
シーングラフを作成
するツール。

作成したシーングラ
フの3DやUIを
プログラムから操作
する。

イマーシブ

イマーシブ
没入型アプリケーション。

イマーシブ
没入型アプリケーション。
シングルタスクアプリケーショ
ンであるため、起動するとメ
ニューやランドスケープは全て
隠される。

イマーシブ
開発は3D Engineを使用。

イマーシブ
開発は3D Engineを使用。
UnityやUE以外の3Dエン
ジンでも開発できるよ
うにC APIも
別途、用意されている。

Magic Leap Oneに標準搭載
している Helio ブラウザで
は、空間コンテンツを
活かしたアプリケーション
の開発が可能。

Magic Lepeが提供している
Prismatic.jsという
JavaScriptライブラリを使
用する。開発は従来のWEB
アプリケーションと同様の
開発環境で行える。

今回はUnityとWebによる
開発方法に
ついて説明します。

開発環境の構築
開発環境の入手

開発環境の入手
Magic Leap Package Manager
Unity Editor MLTP
Visual Studio （当スライドは説明を割愛。）

CreatorページDownload
ページアクセスし、
Package Managerを
ダウンロード。

Magic Leap のSDKや
ツールなどを管理する
ソフトウェア。

SDKからツールは、
このPackage Manager
からダウンロード、
アップデートを行って
いきます。

Lumin SDKと
Magic Leap
Unity Package
を入手します。

Unity の Magic
Leapページに行き、
Unity Editor MLTP
を入手。

開発
1.テンプレートは
Magic Leapを選択。
2.プロジェクト作成
プロジェクトの作成

開発
1. Lumin OSを選択。
開発プラットフォームの設定
2.Lumin SDKのフォ
ルダを選択。
3.プラットフォーム
を切り替える。

開発
ML Remote の起動
ML Remoteは開発中のアプリを
シミュレーター上で動作確認する
アプリケーション。

開発
1. Package Manager内の
Use ML Remoteボタンを
クリック。

開発
ML Remoteが起動

開発
“Start Simulator”というボタンと
“Start Device”というボタンがある。

開発
“Start Simulator” はPC上で動作する
シミュレーターモード。

開発
“Start Device” はMagic Leap Oneで
動作するシミュレーターモード。

開発
2.Start SimulatorまたはStart Device
のボタンをクリック。

開発
3.Interactionが起動。

開発
Zero Iteration
Unity（またはUnreal Engine）で
デプロイすることなく、プレ
ビューモードと連携して、動作確
認を行うモード。

開発
Zero Iteration
UnityのMaigc Leapメ
ニューから選択。

開発
Zero Iteration
Unityの再起動を要求される。
再起動を行う。

開発
Unityで実行
プレビュー時、
Unityで編集した情報が
ML Remoteに反映される。

Web開発
地球とバルーンを、
表示を行います。

Web開発
地球の回転
気球の移動と回転
地球を部屋に配置

Web開発
開発環境
テキストエディタ
WEBサーバ

Web開発
雛形を作成
<html lang="en">
<head>
<title>Hello, Prismatic!</title>
<script src="https://unpkg.com/@magicleap/prismatic"></script>
</head>
<body>
</body>
</html>

Web開発
雛形を作成
<html lang="en">
<head>
</head>
<body>
</body>
</html>
Magic Leap提供の
JavaScriptライブラリ
を指定

Web開発
背景の透明化

Web開発
<head>
<meta name="viewport" content="transparent-background">
<style> body { background-color: rgba(0, 0, 0, 0); } </style>
</head>

Web開発
<head>
</head>
背景の透明化を
有効にする

Web開発
<head>
</head>
透明度の調整を
行う

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>

Web開発
地球の表示
src="earth.fbx"
z-offset="-500px"
unbounded="true"
extractable="true"
</ml-model>
3Dモデル表示の
タグ

Web開発
地球の表示
src="earth.fbx"
z-offset="-500px"
unbounded="true"
extractable="true"
</ml-model>
3Dファイルを指定
（.fbx or .glb
（glTF））

Web開発
地球の表示
src="earth.fbx"
z-offset="-500px"
unbounded="true"
extractable="true"
</ml-model>
3Dモデル表示する
幅と高さを指定

Web開発
地球の表示
src="earth.fbx"
z-offset="-500px"
unbounded="true"
extractable="true"
</ml-model>
3Dモデルの奥行を
指定

Web開発
地球の表示
src="earth.fbx"
z-offset="-500px"
unbounded="true"
extractable="true"
</ml-model>
正数は前方に配置
負数は後方に配置

Web開発
地球の表示
src="earth.fbx"
z-offset="-500px"
unbounded="true"
extractable="true"
</ml-model>
Trueの場合
ブラウザ領域外でも
表示する

Web開発
地球の表示
src="earth.fbx"
z-offset="-500px"
unbounded="true"
extractable="true"
</ml-model>
Trueの場合
3Dモデルの持ち出し
て配置を許可する

Web開発
地球の表示
src="earth.fbx"
z-offset="-500px"
unbounded="true"
extractable="true"
</ml-model>
回転を制御する

Web開発
地球の表示
src="earth.fbx"
z-offset="-500px"
unbounded="true"
extractable="true"
</ml-model>
Y軸に30秒間回転する

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>

Web開発
気球の表示
unbounded="true"
</ml-model>
3Dモデルのスケール
を変更する

Web開発
気球の表示
unbounded="true"
</ml-model>
3Dモデルの回転を
調整する

Web開発
気球の表示
unbounded="true"
</ml-model>
元の位置（x、y、z
軸）に対して相対的
に移動します。

Web開発
Magic Leap Oneを装着してアクセス。

Web開発
今回使用したサンプル
https://bit.ly/2EUY74z

まとめ
アプリケーションは3種類

イマーシブ
まとめ
アプリケーションは3種類

Package Manager経由から、
SDKやツールをダウンロードする。
ML Remoteでアプリの動作を行う。
Magic Leapの開発はZero Iterationの
設定を必ず行う。
まとめ
Unity開発

テキストエディタだけで開発可。
JSライブラリPrismaticを読み込むこと。
3Dモデルの表示は<ml-model>を使用す
る。
まとめ
Web開発

ご清聴ありがとう
ございました

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

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to 知っ徳！納徳！Magic Leap 《アプリ開発～Web開発の超基礎編》

Similar to 知っ徳！納徳！Magic Leap 《アプリ開発～Web開発の超基礎編》 (20)

More from Sadao Tokuyama

More from Sadao Tokuyama (12)