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.

Mixed Reality Toolkit V2.4.0の機能 ~ Progress Indicator ~

206 vues

Publié le

XRミーティング2020/07/15登壇資料。
Mixed Reality Toolkit V2.4.0のProgress Indicatorについての調査内容とカスタムする方法についての紹介。

Publié dans : Technologie
  • Soyez le premier à commenter

Mixed Reality Toolkit V2.4.0の機能 ~ Progress Indicator ~

  1. 1. takabrz1 大阪駆動開発 Takahiro Miyaura Mixed Reality Toolkit V2.4.0の機能 ~ Progress Indicator ~
  2. 2. 宮浦 恭弘 (Miyaura Takahiro)  大阪駆動開発コミュニティに生息  HoloLens日本販売してからXR系技術に取組む  HoloLens系技術Tipsを公開し続けた結果、よく知っている人扱いを受ける。  Mixed Reality Toolkit(以降MRTK)のTipsが比較的多めで、普段(?)からよく (?)MRTKの調査などを行っているうちにMRTKに詳しい人扱いを受ける。  HoloLensを中心にXR系技術と相性のいい技術(機械学習、IOT)を組合せ て日々遊びの中で知見を蓄えています。 技術Tips : https://qiita.com/miyaura takabrz1 ※よかったらこれを機にお知り合いになってください Microsoft MVP for Windows Development 2018-2021 某会社でSE(アプリケーション領域のアーキテクト的なお仕事なはず)= XRは趣味です(貢献領域:Mixed Reality)
  3. 3. Mixed Realityに関する事を普段は探求 2020/7/15 とか、新しい技術Mixed Realityで使える技術は色々調べる… 最近は・・・  Azure Spatial Anchors  Remote Rendering  World Locking Tool(FrozenWolrd.Engine) 主にMixed Reality Toolkitに関する調査  リリース機能調べたり・・・  面白い機能使ってみたり・・・  新しい実験してフィードバックしたり・・・ Copyright © 2020 Takahiro Miyaura(@takabrz1)
  4. 4. 本日のお題 Mixed Reality Toolkit V2.4.0の使いそうな機能 2020/7/15 途中経過を確認できるProgress Indicator 仕組みと動作を解説 Copyright © 2020 Takahiro Miyaura(@takabrz1)
  5. 5. Mixed Reality Toolkit V2ってなに? ~ という人のために ~ 2020/7/15 Copyright © 2020 Takahiro Miyaura(@takabrz1)
  6. 6. Mixed Reality Toolkit V2 概要  Cross Platformでの開発可能  XRデバイスにおけるUnity開発の基本的な構成要素を提供  ラピッドプロトタイピングを実現  コア機能が交換可能な拡張性の高いフレームワーク Unity向けOSSライブラリ OpenVR HMD (HTC Vive / Oculus Rift) iOS/Android (ARFoundation) HoloLens HoloLens 2 Windows Mixed Reality HMD 2020/7/15 Copyright © 2020 Takahiro Miyaura(@takabrz1)
  7. 7. Mixed Reality Toolkit V2 概要 2020/7/15 Copyright © 2020 Takahiro Miyaura(@takabrz1) XRデバイスの固有機能を含め様々な機能を提供
  8. 8. Mixed Reality Toolkit V2 概要 2020/7/15 Copyright © 2020 Takahiro Miyaura(@takabrz1) UX building blocks : 組込み済みのUX部品群  これらを組合せることで容易なアプリケーション開発が可能に Progress Indicator
  9. 9. Progress Indicator ~ 途中経過を見える化する ~ 2020/7/15 Copyright © 2020 Takahiro Miyaura(@takabrz1)
  10. 10. Progress Indicator ~ 途中経過を見える化する ~ 2020/7/15 Copyright © 2020 Takahiro Miyaura(@takabrz1) 処理中など処理経過をビジュアル化 ProgressIndicatorLoadingBar ProgressIndicatorObjectDisplay ProgressIndicatorOrbsRotator  SDKには以下の3つが提供
  11. 11. ProgressIndicatorLoadingBar ~ 全体量がわかるときに使うあれ ~ 2020/7/15 Copyright © 2020 Takahiro Miyaura(@takabrz1) 処理結果をバーで表示する 任意のタイミングで変更が可能 メッセージ表示部 任意のタイミングで変更可能 数値表示部 パーセンテージで自動的に増加 GUI表示部
  12. 12. ProgressIndicatorLoadingBar ~ 全体量がわかるときに使うあれ ~ 2020/7/15 Copyright © 2020 Takahiro Miyaura(@takabrz1) Hierarchy構造 コンポーネント本体 ProgressIndicatorLoadingBar 背景のGUI Background メッセージ表示域 MessageText 状況(パーセンテージ)表示域 ProgressText 進行状況を表示するGUI Bar
  13. 13. ProgressIndicatorLoadingBar ~ 全体量がわかるときに使うあれ ~ 2020/7/15 Copyright © 2020 Takahiro Miyaura(@takabrz1) コンポーネント定義  Progress Bar  進行状況を表示するオブジェクト  進行状況でScale.xが0~1に変化  Message Text  メッセージ表示するオブジェクト  Progress Text  進行状況を表示するオブジェクト  Progress String Format  進行状況の表示フォーマット  Target Progress  Editor上で任意の進行状況にして確認 ProgressIndicatorLoadingBar
  14. 14. ProgressIndicatorRotatingObject ~ 処理中にオブジェクトを出す ~ 2020/7/15 Copyright © 2020 Takahiro Miyaura(@takabrz1) アニメーション付きのオブジェクトで描画する(その1) オブジェクトのアニメーション動作 GUI表示部 任意のタイミングで表示可能 メッセージ表示部
  15. 15. ProgressIndicatorRotatingObject ~ 処理中にオブジェクトを出す ~ 2020/7/15 Copyright © 2020 Takahiro Miyaura(@takabrz1) Hierarchy構造 コンポーネント本体 ProgressIndicatorRotatingObject 進行状況を表示するGUI(回転用) RotationTarget メッセージ表示域 MessageText 進行状況を表示するGUI(サイズ用) ScaleTarget
  16. 16. ProgressIndicatorRotatingObject ~ 処理中にオブジェクトを出す ~ 2020/7/15 Copyright © 2020 Takahiro Miyaura(@takabrz1) コンポーネント定義  Scale Target Object  サイズ調整用オブジェクト  Rotate Target Object  回転調整用オブジェクト  How fast does object rotate?  回転量の調整  Start scale of the object?  開始時のサイズ調整  Final scale of the object?  終了時のサイズ調整  Should object rotate?  オブジェクトの回転をするか。  Rotation occurs about which axes?  回転軸をどこにするか  Grow / Shrink curve on open / close  オブジェクトのパラメータ増減設定  MessageText  メッセージを表示するオブジェクト  Progress  Editor上で任意の進行状況にして確認 ProgressIndicatorRotatingObject
  17. 17. ProgressIndicatorRotatingOrbs ~ 処理中によく出てくるあれ ~ 2020/7/15 Copyright © 2020 Takahiro Miyaura(@takabrz1) アニメーション付きオブジェクトを表示するする(その2) オブジェクトのアニメーション動作 GUI表示部 任意のタイミングで表示可能 メッセージ表示部
  18. 18. ProgressIndicatorRotatingOrbs ~ 処理中によく出てくるあれ ~ 2020/7/15 Copyright © 2020 Takahiro Miyaura(@takabrz1) Hierarchy構造 コンポーネント本体 ProgressIndicatorRotatingOrbs 進行状況を表示するGUI RotatingOrbs メッセージ表示域 MessageText Orb達 Orb
  19. 19. ProgressIndicatorRotatingOrbs ~ 処理中によく出てくるあれ ~ 2020/7/15 Copyright © 2020 Takahiro Miyaura(@takabrz1) コンポーネント定義  Orbs  Orb達を設定  Message Text  メッセージ表示するオブジェクト  Rotate Speed Raw Degrees  Orb達の回転速度  Spacing Degrees  Orb達の間隔(角度)  Acceleration  Orbs達の加速度  Revolutions  ?????????  Test Stop  デバッグ時用の終了チェック  Has Animation Finished  アニメーションが完了するとtrue ProgressIndicatorRotatingOrbs
  20. 20. Progress Indicator ~ オリジナルを作る ~ 2020/7/15 Copyright © 2020 Takahiro Miyaura(@takabrz1)
  21. 21. Progress Indicator ~ オリジナルを作る ~ 2020/7/15 Copyright © 2020 Takahiro Miyaura(@takabrz1) 関連するクラス/インターフェイス/列挙体
  22. 22. Progress Indicator ~ オリジナルを作る ~ 2020/7/15 Copyright © 2020 Takahiro Miyaura(@takabrz1) IProgressIndicatorインターフェイス  MainTransform  このコンポーネントが属するオブジェクトのTransform  Message  カレントで表示するメッセージ  Progress  進行状況(0~1)  State  Progress Indicatorの状態  AwaitTransitionAsync()  処理中の状態では完了まで待つためのチェッカー  CloseAsync()  Progress Indicator の終了処理  OpenAsync()  Progress Indicator の開始処理 インターフェイスに従った実装を行う 閉じた 開いている 開いた 閉じている
  23. 23. Progress Indicator ~ オリジナルを作る ~ 2020/7/15 Copyright © 2020 Takahiro Miyaura(@takabrz1) オブジェクトを作る コンポーネント本体 ProgressIndicatorRotatingOrbs 進行状況を表示するGUI Sphere メッセージ表示域 MessageText
  24. 24. Progress Indicator ~ オリジナルを作る ~ 2020/7/15 Copyright © 2020 Takahiro Miyaura(@takabrz1) IProgressIndicatorインターフェイス実装(プロパティ) public Transform MainTransform => transform; public ProgressIndicatorState State => state; public string Message { set => messageText.text = value; } public float Progress { get; set; } 自身のTransformを返す MainTransformプロパティ Indicatorの状態を返す stateプロパティ ステータス文字列を設定 Messageプロパティ 進行状況を取得/設定 Progressプロパティ
  25. 25. Progress Indicator ~ オリジナルを作る ~ 2020/7/15 Copyright © 2020 Takahiro Miyaura(@takabrz1) IProgressIndicatorインターフェイス実装(メソッド) public async Task AwaitTransitionAsync() { while (isActiveAndEnabled) { switch (state){ case ProgressIndicatorState.Open: case ProgressIndicatorState.Closed: return; default: break; } await Task.Yield(); } }  Progress Indicatorが実行中の場合待つ実装を入れる AwaitTransitionAsyncメソッド
  26. 26. Progress Indicator ~ オリジナルを作る ~ 2020/7/15 Copyright © 2020 Takahiro Miyaura(@takabrz1) IProgressIndicatorインターフェイス実装(メソッド) public async Task OpenAsync() { if (state != ProgressIndicatorState.Closed) { throw new System.Exception("Can't open in state " + state); } gameObject.SetActive(true); state = ProgressIndicatorState.Opening; await Task.Yield(); state = ProgressIndicatorState.Open; }  Progress Indicatorを表示する実装を入れる  基本的にはオブジェクトを可視化  ステータスをOpeningに変更  描画反映(Task.Yield)  ステータスをOpenに変更 OpenAsyncメソッド
  27. 27. Progress Indicator ~ オリジナルを作る ~ 2020/7/15 Copyright © 2020 Takahiro Miyaura(@takabrz1) IProgressIndicatorインターフェイス実装(メソッド) public async Task CloseAsync() { if (state != ProgressIndicatorState.Open) { throw new System.Exception("Can't close in state " + state); } state = ProgressIndicatorState.Closing; while (!hasAnimationFinished) { await Task.Yield(); } state = ProgressIndicatorState.Closed; gameObject.SetActive(false); }  Progress Indicatorを閉じる実装を入れる  ステータスをClosingに変更  Indicatorの後処理  ステータスをClosedに変更  基本的にはオブジェクトを非表示に CloseAsyncメソッド
  28. 28. Progress Indicator ~ オリジナルを作る ~ 2020/7/15 Copyright © 2020 Takahiro Miyaura(@takabrz1) オブジェクトの動き(Updateで実装) private void Update() { if (state == ProgressIndicatorState.Closed) { return; } animationObject.localPosition=new Vector3(0,animationObject.localScale.x*Mathf.Sin(Time.time),0); if (stopRequested == true && (animationObject.localPosition- Vector3.zero).magnitude <= 1e-2) { hasAnimationFinished = true; } }  Progress Indicatorの描画を実行  ステータスがCloseの場合スルー  後は好きな描画をする Updateメソッド
  29. 29. Progress Indicator ~ オリジナルを作る ~ 2020/7/15 Copyright © 2020 Takahiro Miyaura(@takabrz1) 呼出しの例 await indicator.AwaitTransitionAsync(); switch (indicator.State) { case ProgressIndicatorState.Closed: await indicator.OpenAsync(); indicator.Message = “メッセージ”; await Task.Yield(); await indicator.CloseAsync(); break; case ProgressIndicatorState.Open: await indicator.CloseAsync(); break; } 1. AwaitTransitionAsyncでIndicator実行中なら待つ 2. ステータスが閉じている場合 1. OpenAsyncを呼出す 2. メッセージなどを更新 3. Task.Yieldで反映 4. 閉じるときにCloseAsyncを呼出す 3. ステータスでIndicatorが開いていた場合 1. CloseAsyncを呼出す 基本は以下の手順
  30. 30. まとめ Mixed Reality Toolkit V2.4.0のProgress Indicator 2020/7/15 処理中をUXで表現 標準では3つ提供 カスタムも比較的簡単にデキル みんなも使ってみてね! Copyright © 2020 Takahiro Miyaura(@takabrz1)
  31. 31. 大阪駆動開発 関西を中心に、IT系のおもしろそうなことを楽しんでやるコミュニティ 2020/7/15 Copyright © 2020 Takahiro Miyaura(@takabrz1)

×