HoloLens MRDesignLabs ToolTipsMovingTarget

こんにちは、ナレコム前川です!

今回は、MRDesignLabs_Unity の Common controls and examples の ToolTips_MovingTargetExamples について紹介していきます。

私が使用したツールのバージョンは以下の通りです。

  • Windows10 Home
  • OSビルド:16299.125
  • Unity 2017.2.0f3

導入方法については、コチラの記事をご覧ください。

ToolTipsMovingTarget

ToolTipsMovingTarget では、動いているオブジェクトに説明を入れるためのUIを示しています。

それでは、プロジェクトの中身についての説明を行っていきます。

[Project]パネルから [MRDL_ControlsExample] -> [Scenes] -> [ToolTips_MovingTargetExamples]シーンを開いてください。

次に、[Hierarchy]パネルから [HoloLens] を選択し、展開してください。
このオブジェクトは、HoloLens のカメラや音、カメラの焦点の管理などを行っています。
プレハブは、[MRDesignLab] -> [HUX] -> [Prefab] -> [Interface] 内にあります。

[MovingTargetExamples] を選択して、[Object Collection] を確認してください。
ここでは、オブジェクトの配置の設定を行っています。

続いて、[MovingTargetExamples] -> [MovingTargetExample1] の順に展開してください。
さらに [Mouse] を展開し、選択してください。

[Inspector] パネルから [Random Motion] を確認します。
ここでは、[Mouse] と [Cheese] のモーションの設定を行っていて、
今回は、チーズをめがけてネズミが移動するというモーションが設定されています。

次は、[ToolTipFollow] を選択してください。
このオブジェクトでは、ツールチップの追従について設定することができます。

[Inspector] パネルの [Tool Tip Connector] を確認してください。
ここでツールチップをどのように追従させるか設定しています。

[Follow Type] では、追従のタイプを4つ選択できます。
[Pivot Direction] は、旋回の方向を東西南北と八方位で指定することができます。
[Pivot Direction Orient] では、適応させる旋回の方向をカメラに行うのかオブジェクトに行うのか選択できます。

それでは、実行していきましょう。

配置とビルド

それでは、いつも通り配置とビルドを行います。
配置とビルドに関しては、HOLOLENS 5つのビルド方法を参照してください。

[Unity C# Projects] にチェックを入れることができない場合は、
[Player Settings] から[Inspector] パネル内の [Other Settings] にて
[scripting Backend] を[.NET] に変更してください。

実行すると、5つのステージが表示されます。
それぞれのステージでねずみの動き方が変わります。

それぞれチーズの配置の仕方が違うことを確認してください。

実行時の動画はコチラです。

https://youtu.be/qqeIeh3V4js

以上です。
お疲れ様でした。


「Tokyo HoloLens ミートアップ vol.7」に参加してきました!

はじめに

2018年2月18日に日本マイクロソフトで行われました、
「Tokyo HoloLens ミートアップ vol.7」に参加してきたレポートになります。
昨年から始まったHoloLens ミートアップも第七回目となりました!
この記事では主にセミナーで共有頂いた技術情報をまとめていきます。

[イベントURL]
https://hololens.connpass.com/event/76212/

セミナーのアジェンダ

当日のアジェンダ
13:00- 前説、自己紹介Time(Holoとわたし)

13:15 「HoloLens製カートゲームHADO KARTを現場に導入した話」
株式会社meleap 増田博志さん

14:15 「HoloLensで高品質なグラフィックスを実現する」
株式会社ドワンゴ マルチメディア企画開発部
先端演出技術開発セクション セクションマネージャ 岩城進之介さん

15:15 「Unityを使わずHoloLensアプリを作ってみた」
株式会社ハニカムラボ 代表取締役 河原田清和さん

16:15 Holo ショートセッション <第一部>
HoloLensで音声認識をする方法を色々試してみた。
HoloLensオブジェクトの現実空間での表示サイズ検証
HoloLensで派手なエフェクトを作って遊ぶ
ものづくりに響くHoloLensデモを目指す

16:45 Holo ショートセッション <第二部>
遅延の少ないライブプレビューについて
DataMesh本社の最新事例
普段Webやってる人間が開発文化の違いに戸惑っている話

17:30 Holo ショートセッション <第三部>
学生でもここから始めよう HoloLensでLT
ホロレンズのジェスチャーでものを飛ばす試み
Microsoftのすごさ、HoloLensの未来

18:00 懇親会(フリータイム)
18:30 Wrap up、記念撮影

セッション1「HoloLens製カートゲームHADO KARTを現場に導入した話」

株式会社meleap 増田博志さんがHADO KARTというゲームアプリを実装し、アミューズメント施設で提供している中で起こったノウハウを惜しげもなく披露してくださいました!

以下聴講メモになります。

■HADOとは?
ヘッドマウントディスプレイとセンサーを利用してボールをぶつけ合うテクノスポーツ

■HADO KARTとは
Luggieというカートに乗ってHoloをかぶってコインを集めゲーム。現在は横浜本店地下鉄ブルーラインセンター北駅ノースポート6Fにて提供されている。

■誕生秘話
渋谷Fabcafeで行われた超人スポーツカフェのハッカソンで誕生
アジャイル型で実際に乗ってすぐプロトタイピングを行う
Androidでビューフォリアのマーカーに珠を打ち合う
デバイスをつけて乗り物に乗ると中二心が満たされる
プロトタイプ評価(酔う、片手運転は危ない、けどなんか楽しい)

■早速MOCを実施し、Holoの利用を検討
HADOシステム+Crazy Cart絶対酔う。Holoは光学シースルーなので酔わない 視野が狭いHoloに合わせたシステムを考える (ex.視野が狭い→視野にないものは探索要素と考える)

■現場で発生したトラブル・ノウハウ
ヘッドバンド破損問題(すぐ切れる)
→自社開発マジックテープバンドで対応

充電出来ない・追いつかない問題
→純正以外のアダプターケーブルが使われていた →(対策)実際に測ると全力充電のときは1.5A以上出ている。 →Ap◯le社の充電器の場合は0.5A以下しか出ない(相性?) 純正がおすすめ

HADO KARTフル回転で稼働時間は3h程度
→稼働台数の2倍のHoloLensを用意して対応 3人プレイなら6台用意している
→モバイルベッテリーの出力1A程度で容量10,000mAh程度あれば1営業日は持つ
(Holo側は徐々に減るが10時間以上は持つとのこと)

Space情報が崩壊する
→1週間ほど運用して様子を観に行くとSpace情報が崩壊している端末があった
→該当端末は整地しなおしても綺麗にならない
→定期的なSpace情報のRemoveが必要
→キオスクモードが使えない
→OSレベルの操作を解放するためアプリ削除が起こる事故が発生 (インストールも覚えてもらう)
※オペレータの方の教育コストが高くなりがち

HoloLens壊れる問題
→保険に入れる (大手の保険屋さんに相談したとのこと)

■HADO KARTのシステム構成


観戦用の仕組みは元々作っていた
パソコンはH/W corei5で回せている

■H/W構成

サーバ
WindowsノートPC1台 ・イベントサーバ(Node) ・ゲームサーバ(Scala) ・Webサーバ(Node)
レスポンス問題があるのでLANでやっている

クライアント
Unityバージョン 初回リリース 5.6

■主なライブラリ
UniRx - Object Pool
BestHTTP -
LeanTween - UWP
Vuforia - WorldAnchor

■クライアント(iPhone)
iPhone6s → iPhone8 (ARきっと対応) Unityバージョン 初回5.6 次回リリース 2017.2

■主なライブラリ (iPhone)
UniRx - Object Pool
BestHTTP - Socket
LeanTween - UWP
Vuforia - WorldAnchor

■端末間で世界を共有する仕組み
世界を共有する=原点を共有する
HoloLensの起動位置、全員で共有する (Unity世界の原点) →同じ場所の一斉起動は難しい
どうやって実現しているか?
→ WorldAnchorを物理的に配置する
→ 2点を指定して精度をあげている
→ 更に深化させて Vuforiaマーカを使ってオブジェクトを置く
※スペーシャルマッピングが崩れる場合に有効 デメリット Vuforiaで捉えられる範囲でしか表示させられない

クライアント側の仕組み
→ ARKit + QRCode版 ARkitの撮っている画像をQRCode用のVisionフレームワークに渡してQRコードの4点座標を2Dで出して床座標を取る メリット どこでもおける デメリット 画質が難しい (次のARKitで解決する)

■おまけ
Unity2017.2注意点・ハマりどころ
・注意すべき挙動
MainCameraにVuforiaBehaviourが自動的に付く
シーン遷移時の挙動が不安定?
シーン遷移後に Vuforiaを使うのであればアップデートをしない方が良い?

資料はこちらになります。

セッション2「HoloLensで高品質なグラフィックスを実現する」

株式会社ドワンゴ マルチメディア企画開発部 先端演出技術開発セクション セクションマネージャ 岩城進之介さんが登壇されました。HoloLens上でハイクオリティなグラフィックを魅せるためのテクニックをこれでもかと披露してくださいました!

以下聴講メモになります。

■なぜドワンゴがHoloLensをやっているか
ドワンゴはネットとリアルの境界線を崩すチャレンジを行っている会社
<例>
・N高等学校入学式 2016年はVR入学式。2017年はHoloLensで入学式
・ニコニコ超会議、VRライブハウス「ニコファーレ」を運営など)
・リアルタイムにネット視聴者とライブハウスを接続する仕掛
・紅白歌合戦におけるリアルタイムコメント反映
・VR/AR技術の活用例

■今までの実現方法
・VRを利用して初音ミクさんのようなキャラクターに出演してもらう場合は透過ディスプレイを使う
・ズレが派生するのでAR合成をしている
・ARキャラクターライブ(2011)、透過スクリーン×ARX360度放送(2015)

■目標とゴール
こういうライブをHoloLensで見せたい
さらなるブラッシュアップへ
※斜めから見えるミクさんはAR合成を使っている
このクオリティをHoloLensでやりたい!
17万ポリゴンあるデータをHoloLens上で60fpsで動くようにチャレンジ!

■家の動きを再現するために着物に大量のボーンがある
舞台の上で動いているものはリアルタイムにレンダリングしている (GTX1080Ti使用で30fps処理している)
これをHoloLensに持ち込みたい

■どうやったか?
1. まずはポリゴンを減らす。
→ デザイナー「無理です」
→ 着物クロスシュミレーション結果が大変繊細でポリゴンのリダクションを行うと裏地や肌の突き抜けが起こる。
→ 着物には触らないでポリゴン削減を行う (髪飾りなどを消して7.7万ポリゴンまで) ※元のデータの質が高かったため重たいスキニングの計算をやめる
→モーションをを全部焼き込む。事前にスキニング計算を終わらせて頂点情報を予め持たせた。フレーム全長点の情報を焼きこんで出力
→Alembic ImporterはUWP非対応
→Unity上でSinned meshを1フレームずつコマ送りしてファイルイン頂点情報を書き出すツールを制作 (Alembic以外でもメッシュの焼き込みができる)
→ファイルサイズが超でかくなった 8.8GB

2. 超デカいファイルをなんとかする
→ 30fpsで8.8GB。アニメーションは60FPSでやりたい (現実的ではないので補完)
→ IndexとUVは全フレーム共通なのでまとめる
→ PositionとNormalだけがアニメーションをするように
→ floatではなく固定小数(-2.0f~2.0fをUlnt16Maxで分割)
→ 8.8GBが2.5GBまで圧縮
→ 頂点圧縮はCPUコストがかかるので諦める
→ 着物の箔押し部分を表現するためMetallic Smoothnessマップに対応
→ リアルタイムシャドウはかなり重たいのAmbientOcclusionマップに対応
→ 内部はLinearで計算、最終段でGammaに変換
→ XRenderViewportScaleを対象物との距離、描画面積などによって値を調整し、60fpsを実現

3. 細かい実装をがんばる
きちんとCPUを使ってあげる。
→メインスレッドをなるべく使わないように別スレッドに分割、キューを引いて複数スレッドに連携
→ガベージコレクションが発生しないようにバッファは再利用する
→new Vecr3()とかVector3.Lerpとかは重たいからやらない
→ガベージコレクションが上がるとスパイクが出るので取り除く処理が基本

4. レンダリング解像度を動的に落とす①
HoloLens最大の敵は「Pixel fill rate」塗りつぶす量が増えると処理が急激に落ちる
→「寄ったときはレンダリング解像度を落とす」が効果的
→XR.renderViewportScale
→GPUの処理負荷に合わせて解像度を落とすようにして欲しい(願望)

5. 最後のキモは演出!!
HoloLensは「外の景色も含めてコンテンツ」
セットづくりも考えて「実在感を出していく」
照明を現実世界に配置し証明のコントロール情報も利用
外向けに表示しているモニタは「全力のPCレンダリング」映像を見せる
その印象で引っ張ってHoloLens側表示が簡略化されていることを見せられる

セッション3 「Unityを使わずHoloLensアプリを作ってみた」

株式会社ハニカムラボ 代表取締役 河原田清和さんがエンジニアとして胸を張れるようUnityを利用しないHoloLens アプリの開発手法を語って頂きました。

資料にて作業手順及びハマりポイントの迂回方法が説明されております。

結論としてはUnreal Engine 4での利用はまだ現実的ではなく、DirectXはチューニングを出来ることから使い込めば速度があげられるかも、という内容でした。やはりUnityを使うのが現実解なのでしょう。

まとめ

今回は「Tokyo HoloLens ミートアップ vol.7」のセッションレポートをまとめました。その後も懇親会やLTなどが行われ改めてHoloLensの熱を肌で感じることが出来ました。今回は特に初めての参加者の方も多かった印象があります、セッションの内容も回を重ねる毎に濃くなっており今後も非常に楽しみです!

いかがでしたでしょうか。次回もお楽しみに!


HoloLens MRDesignLabs ToolTips

こんにちは、ナレコム前川です!

今回は、MRDesignLabs_Unity の Common controls and examples の ToolTips_Examples について紹介していきます。

私が使用したツールのバージョンは以下の通りです。

  • Windows10 Home
  • OSビルド:16299.125
  • Unity 2017.2.0f3

導入方法については、コチラの記事をご覧ください。

ToolTips

ToolTips では、オブジェクトの簡潔な説明などを記載するためのUIについて示しています。

それでは、プロジェクトの中身についての説明を行っていきます。

[Project]パネルから [MRDL_ControlsExample] -> [Scenes] -> [ToolTips_Examples]シーンを開いてください。

次に、[Hierarchy]パネルから [HoloLens] を選択し、展開してください。
このオブジェクトは、HoloLens のカメラや音、カメラの焦点の管理などを行っています。
プレハブは、[MRDesignLab] -> [HUX] -> [Prefab] -> [Interface] 内にあります。

[ExamplesCollection] を選択してください。
ここでは、今回のシーンで使われているオブジェクトが格納されています。
[Inspector] パネルの [Object Collection] からオブジェクトの配置を設定しています。

それでは、[ExamplesCollection] -> [Basic] の順に展開してください。
ここには、アプリで表示されるオブジェクトが格納されています。
[ToolTipPlated_A] を選択してください。

[Inspector] パネルから [Tool Tip] を確認してください。
ここでは、ToolTip のテキストの設定やラインの配置設定を行っています。

続いて、[Spawning] -> [CoffeeCup] の順に展開して、[CoffeeLayer1] を選択してください。
ここでは、1つのオブジェクトに階層をつけることで階層ごとに表示するToolTip を変える方法を示しています。
今回は、コーヒーカップの視線を当てる場所によって表示されるToolTip が変わるようになっています。

[Inspector] パネルで [Tool Tip Spawner] を確認します。
ここで、どのようなアクションをしたらToolTip が表示されるようにするかを設定したり
表示させるテキストやプレハブの設定を行ったりしています。

[Styles] を展開し、[ToolTipSimple] を選択してください。
このオブジェクトは、[MRDesignLab] -> [HUX] -> [Prefabs] -> [ToolTip] 内の
[ToolTipSimple]プレハブを持ってきています。

残りのToolTip は、[MRDL_ControlsExample] -> [Prefabs] 内のプレハブを使っています。

[ToolTipBalloon] を選択し、[Distorter Wiggly] を確認してください。

ここでは、風船の紐が揺れ動くアニメーションの設定を行っています。

次に、[ToolTipCubist] を選択し、[Inspector] パネルから [Tool Tip Background Corners] を確認してください。

[Styles] では、これまで見てきたToolTip とは異なるデザインをしていますが、
確認してもらった [Tool Tip Background Corners] はデザインを変える設定項目の一つです。
この設定項目では、ToolTip の角にデコレーションできるようになっています。

[ToolTipModern] にもこの項目があるので確認してみてください。

それでは、実行していきましょう。

配置とビルド

それでは、いつも通り配置とビルドを行います。
配置とビルドに関しては、HOLOLENS 5つのビルド方法を参照してください。

[Unity C# Projects] にチェックを入れることができない場合は、
[Player Settings] から[Inspector] パネル内の [Other Settings] にて
[scripting Backend] を[.NET] に変更してください。

アプリケーションを実行すると、複数のオブジェクトが表示されます。
左に表示されるものは一番基本的なToolTip です。
真ん中に表示されるコーヒーカップでは、カップに合わせる視線の位置で表示される ToolTip が変わります。
右に表示される ToolTip は、スタイルを他のものと変えていてユニークな ToolTip になっています。

実行時の動画はコチラです。

https://youtu.be/CgvAzLGHVyk

以上です。
お疲れ様でした。


HoloLens MRDesignLabs SimpleDialog

こんにちは、ナレコム前川です!

今回は、MRDesignLabs_Unity の Common controls and examples の SimpleDialog_Examples について紹介していきます。

私が使用したツールのバージョンは以下の通りです。

  • Windows10 Home
  • OSビルド:16299.125
  • Unity 2017.2.0f3

導入方法については、コチラの記事をご覧ください。

SimpleDialog

SimpleDialog では、ユーザーへの通知や承認などの際に使われるダイアログのUIを示しています。

それでは、プロジェクトの中身についての説明を行っていきます。

[Project]パネルから [MRDL_ControlsExample] -> [Scenes] -> [SimpleDialog_Examples]シーンを開いてください。

次に、[Hierarchy]パネルから [HoloLens] を選択し、展開してください。
このオブジェクトは、HoloLens のカメラや音、カメラの焦点の管理などを行っています。
プレハブは、[MRDesignLab] -> [HUX] -> [Prefab] -> [Interface] 内にあります。

[Result] を選択してください。
ここでは、ダイアログでタップしたボタンの結果をテキストとして表示するための設定をしています。

続いて、[DialogAndMenuExample] を選択、展開してください。
ここには、ダイアログとメニューの例となるオブジェクトが格納されています。
[Inspector] パネルを確認してください。

[Dialog And Menu Example] では、ダイアログの処理や表示させるテキストの設定などを行っています。
[Object Collection] では、メニューボタンの配置を設定しています。

[Dialog1] を選択、展開して確認してください。
このオブジェクトは、[MRDL_ControlsExample] -> [Prefabs]内の[ButtonHolographic] が
元になっているボタンのオブジェクトです。

また、[UIButtonSquare] では、アイコンの設定やテキストの配置などを行っています。
これらは、[MRDesignLab] -> [HUX] -> [Resources] -> [Buttons] 内にあります。

それでは、実行していきましょう。

配置とビルド

それでは、いつも通り配置とビルドを行います。
配置とビルドに関しては、HOLOLENS 5つのビルド方法を参照してください。

[Unity C# Projects] にチェックを入れることができない場合は、
[Player Settings] から[Inspector] パネル内の [Other Settings] にて
[scripting Backend] を[.NET] に変更してください。

実行すると、2つのボタンが表示されます。
それぞれのボタンをタップすると2種類のダイアログが表示されます。
1つは閉じるボタンだけがあるダイアログともう1つはYes/No ボタンがあるダイアログです。

ボタンを押してダイアログを閉じるとメニュー画面のテキストにどのボタンを押したのか表示されます。

実行時の動画はコチラです。

https://youtu.be/zik7wEH27CY

以上です。
お疲れ様でした。


HoloLens MRDesignLabs Progress

こんにちは、ナレコム前川です!

今回は、MRDesignLabs_Unity の Common controls and examples の Progress_Examples について紹介していきます。

私が使用したツールのバージョンは以下の通りです。

  • Windows10 Home
  • OSビルド:16299.125
  • Unity 2017.2.0f3

導入方法については、コチラの記事をご覧ください。

Progress

Progress では、読み込みの際の進捗を表すオブジェクトの例を示しています。

それでは、プロジェクトの中身についての説明を行っていきます。

[Project]パネルから [MRDL_ControlsExample] -> [Scenes] -> [Progress_Examples]シーンを開いてください。

次に、[Hierarchy]パネルから [HoloLens] を選択し、展開してください。
このオブジェクトは、HoloLens のカメラや音、カメラの焦点の管理などを行っています。
プレハブは、[MRDesignLab] -> [HUX] -> [Prefab] -> [Interface] 内にあります。

[Progress] を選択して、展開してください。
このオブジェクトは、[MRDesignLab] -> [HUX] -> [Prefabs] -> [Dialogs] 内から持ってきてあります。
これは、読み込み状況をユーザーに伝えるためのオブジェクトが格納されています。

続いて、[SceneObject] を選択、展開してください。
ここに格納されているオブジェクトは、[MRDL_ControlsExample] -> [Prefabs]内の
[ButtonHolographic] が元になっているボタンのオブジェクトです。

配置やスケールについては、[Inspector] パネルの [Object Collection] から設定しています。

また、[SceneObject] 内の [ButtonCollection] から [ButtonLoadOrbs] を選択してください。
選択したら、[Inspector] パネルから [Compound Button Anim] という設定項目を見つけます。
ここで、ボタンが押されたときに表示するアニメーションの設定を行っています。

それでは、読み込みの各ボタンのアニメーションについて説明していきます。

  • ButtonLoadOrbs
  • ― 白い点が円を描いて回るアニメーションです。よく見るやつです。

  • ButtonLoadProgress
  • ― パーセンテージで読み込み状況を提示するアニメーションが表示されます。

  • ButtonLoadPrefab
  • ― プレハブがくるくる回るアニメーションが表示されます。

  • ButtonLoadIcon
  • ― アイコンが表示されるだけのアニメーションです。

  • ButtonLoadMessage
  • ― メッセージのみで読み込み状況を伝えるアニメーションが表示されます。

  • ButtonLoadProgressBar
  • ― 読み込みのバーが表示され、左から右に色が変わることで読み込み状況が分かるアニメーションになっています。

最後に、[LoadingIndicatorTest] を選択してください。
このオブジェクトの [Inspector]パネルでは、
読み込みを行うときの読み込み時間や表示させるテキストの設定などを行っています。

それでは、実行していきましょう。

配置とビルド

それでは、いつも通り配置とビルドを行います。
配置とビルドに関しては、HOLOLENS 5つのビルド方法を参照してください。

[Unity C# Projects] にチェックを入れることができない場合は、
[Player Settings] から[Inspector] パネル内の [Other Settings] にて
[scripting Backend] を[.NET] に変更してください。

実行すると、6つのボタンが表示されます。
それぞれのボタンをタップすると読み込みを開始します。
ボタンによって読み込み方が異なるので試してみてください。

実行時の動画はコチラです。

https://youtu.be/qBYZ6ardlCM

以上です。
お疲れ様でした。


HoloLens MRDesignLabs ObjectCollection

こんにちは、ナレコム前川です!

今回は、MRDesignLabs_Unity の Common controls and examples の ObjectCollection_Examples について紹介していきます。

私が使用したツールのバージョンは以下の通りです。

  • Windows10 Home
  • OSビルド:16299.125
  • Unity 2017.2.0f3

導入方法については、コチラの記事をご覧ください。

ObjectCollection

ObjectCollection では、複数のオブジェクトを規則正しく配置する方法について示しています。

それでは、プロジェクトの中身についての説明を行っていきます。

[Project]パネルから [MRDL_ControlsExample] -> [Scenes] -> [ObjectCollection_Examples]シーンを開いてください。

次に、[Hierarchy]パネルから [HoloLens] を選択し、展開してください。
このオブジェクトは、HoloLens のカメラや音、カメラの焦点の管理などを行っています。
プレハブは、[MRDesignLab] -> [HUX] -> [Prefab] -> [Interface] 内にあります。

[Fitbox] を選択して、展開してください。
このオブジェクトは、[MRDesignLab] -> [HUX] -> [Prefabs] -> [Dialogs] 内から持ってきてあります。
これは、アプリ起動して初めに表示されるパネルです。

続いて、[ObjectCollection_Buttons_Grid] を選択、展開してください。
ここに格納されているオブジェクトは、[MRDL_ControlsExample] -> [Prefabs]内の
[ButtonHolographic] が元になっています。

配置やスケールについては、[Inspector] パネルの [Object Collection] から設定しています。

[ObjectCollection_Buttons_List] を選択、展開してください。
このオブジェクトでは、[MRDL_ControlsExample] -> [Prefabs]内の [ButtonTraditional] を
元として子要素に格納しています。

また、ObjectCollection_Buttons_Grid 同様に、配置は[Inspector] パネルの [Object Collection] から設定しています。
※配置については、すべて同様に行っています。

[ObjectCollection_CoffeeCups] を選択、展開してください。
オブジェクトは、[MRDL_ControlsExample] -> [Prefabs]内から持ってきてあります。

続いて、[ObjectCollection_Objects] を選択、展開してください。
ここに格納されているオブジェクトは、[MRDL_ControlsExample] -> [Models] と [Prefabs] にあります。

次に、[ObjectCollection_Balloons] を選択し、展開してください。
ここでの子要素であるオブジェクトも[MRDL_ControlsExample] -> [Prefabs]内にあります。

[ObjectCollection_Images] を選択、展開してください。
このオブジェクトは、[MRDL_ControlsExample] -> [Materials] 内にあります。

[ObjectCollection_Primitives] を選択し、展開してください。
このオブジェクトでは、配置を [Object Collection] から行い、
子要素に持ってくることで配置されるように設定しています。

最後に配置を変える方法について私が実行してみたものをもとに説明していきます。
変えたのは、コーヒーカップの配置で[Surface Type] と [Rows]をいじりました。

まず、変更したいオブジェクトを選択し、[Inspector]パネルの [ObjectCollection]から設定を行います。
オブジェクトは、[Surface Type] で設定されている図形の形状に配置されるので
ここを変更することで配置を変えられます。
今回は、[Cylinder] ⇒ [Plane] に変更しました。
そうすることで、コーヒーカップが横一列にキレイに並びました。


変更を確定する場合は、[Update Collection] をクリックしてください。

次に、一列に並んでいるコーヒーカップを二列に変えてみました。
列を変える場合は、[Rows] から数字指定することで変更できます。
変更を確定する場合は、上記同様に [Update Collection] をクリックしてください。

それでは、実行していきましょう。

配置とビルド

それでは、いつも通り配置とビルドを行います。
配置とビルドに関しては、HOLOLENS 5つのビルド方法を参照してください。

[Unity C# Projects] にチェックを入れることができない場合は、
[Player Settings] から[Inspector] パネル内の [Other Settings] にて
[scripting Backend] を[.NET] に変更してください。

実行すると、初めにパネルが表示されるのでそれをタップしします。
オブジェクトがきちんと配置されていることを確認してください。

オブジェクトによってはタップして動作するものと視線をオブジェクトに合わせるだけで動作するものがあります。
それらを確認してみてください。

実行時の動画はコチラです。

https://youtu.be/3qH-u9T5FoM

以上です。
お疲れ様でした。


HoloLens MRDesignLabs ManipulationGizmo

こんにちは、ナレコム前川です!

今回は、MRDesignLabs_Unity の Common controls and examples の ManipulationGizmo_Examples について紹介していきます。

私が使用したツールのバージョンは以下の通りです。

  • Windows10 Home
  • OSビルド:16299.125
  • Unity 2017.2.0f3

導入方法については、コチラの記事をご覧ください。

ManipulationGizmo

ManipulationGizmo では、Bounding Box についてとその操作方法について示しています。

それでは、プロジェクトの中身についての説明を行っていきます。

[Project]パネルから [MRDL_ControlsExample] -> [Scenes] -> [ManipulationGizmo_Examples]シーンを開いてください。

次に、[Hierarchy]パネルから [HoloLens] を選択し、展開してください。
このオブジェクトは、HoloLens のカメラや音、カメラの焦点の管理などを行っています。
プレハブは、[MRDesignLab] -> [HUX] -> [Prefab] -> [Interface] 内にあります。

[ObjectCollection] を選択して、展開してください。
このオブジェクトの子要素には、アプリ起動時に表示されるオブジェクトが格納されています。

上で示しているオブジェクトは拡大・縮小などの操作ができるものです。

操作の設定については、[Inspector] パネルの [Bounding Box Target] から行えます。
ここで、配置の変更や拡大縮小、角度の変更などの操作が行えるように設定できます。

続いて、もう一つの [ObjectCollection] を選択、展開してください。
ここに格納されているオブジェクトは操作ができないようになっているものです。

[Inspector] パネルを見ていただければ分かると思いますが、上で説明した [Bouding Box Target] がなく、
操作設定がされていないため、オブジェクトの操作ができないようになっています。

[BasicBoundingBoxes] を選択、展開してください。
このオブジェクトでは、操作できない方の [ObjectCollection] に [Bounding Box] をつける方法を示しています。


ここに格納されているオブジェクトのプレハブは、[MRDesignLab] -> [HUX] -> [Prefabs] -> [Dialogs] 内から
持ってきてあります。

それでは、実行していきましょう。

配置とビルド

それでは、いつも通り配置とビルドを行います。
配置とビルドに関しては、HOLOLENS 5つのビルド方法を参照してください。

[Unity C# Projects] にチェックを入れることができない場合は、
[Player Settings] から[Inspector] パネル内の [Other Settings] にて
[scripting Backend] を[.NET] に変更してください。

実行すると、操作ができるオブジェクトとできないオブジェクトに分かれて表示されます。
操作できないオブジェクトについては、設定したBouding Box が初めから表示されていました。
操作できる方のオブジェクトでは、視線を合わせてタップするとメニューが表示され、
メニューからオブジェクトの編集・削除が行えるようになっています。

アニメーションが付いているオブジェクトはメニューと Bounding Box もアニメーションに連動して動くので
とても操作がしにくかったです(笑)
また、オブジェクトをタップしたときに表示されるメニューが視野範囲内に表示されなかったため、
気づくのに少し時間がかかりました。

実行時の動画はコチラです。

https://youtu.be/E4YEgQM2Inc

以上です。
お疲れ様でした。


HoloLens MRDesignLabs InteractableObject

こんにちは、ナレコム前川です!

今回は、MRDesignLabs_Unity の Common controls and examples について紹介していきます。

私が使用したツールのバージョンは以下の通りです。

  • Windows10 Home
  • OSビルド:16299.125
  • Unity 2017.2.0f3

説明していくのは以下の7つです。

  • InteractableObject
  • ManipulationGizmo
  • ObjectCollection
  • Progress
  • SimpleDialog
  • ToolTips
  • ToolTips_MovingTarget

その中でも今回は「InteractableObject」を説明していきます。

導入方法

まずは、コチラを開いてください。
次に、ファイルをクローンしていきます。
私は ”Git CMD” というgit用のコマンドプロンプトを使ってクローンとその他設定を行いました。

クローンの方法とその他設定(サブモジュールのアップデート)について説明していきます。

①クローン方法
”Git CMD”を開き、任意のフォルダに移動、下記のコマンドを実行します。
$ git clone https://github.com/Microsoft/MRDesignLabs_Unity.git

URLは、GitHub のページの [Clone or Download] からコピーできます。

クローンが完了したらサブモジュールのアップデートを行っていきます。

②サブモジュールアップデート方法
サブモジュールをアップデートするために、下記コマンドを実行します。
$ cd MRDesignLabs_Unity
$ git submodule init
$ git submodule update

すべてが完了したら、Unity を起動します。
Unity を起動したら、[New] をクリックし、名前をつけて [Create Project] で新規プロジェクトを作成してください。

続いて、先ほどクローンしたファイルの [DesignLabs_Unity_Examples] -> [Assets] の配下にあるファイルを
すべて [Project] パネルにドラッグ&ドロップしてください。

これで、導入は完了です。

導入したらいくつかのエラーが出てきます。
バージョンが合っていないというエラーなのでVisual Studio でcsファイルを開き、エラー個所を編集してください。

InteractableObject

InteractableObject では、ボタンやツールバーなどアプリで使うオブジェクトの
使い方・設定の仕方について示しています。

それでは、プロジェクトの中身についての説明を行っていきます。

[Project]パネルから [MRDL_ControlsExample] -> [Scenes] -> [InteractableObject_Examples]シーンを開いてください。
次に、[Hierarchy]パネルから [HoloLens] を選択し、展開してください。

このオブジェクトは、HoloLens のカメラや音、カメラの焦点の管理などを行っています。

続いて、[ButtonCheese] を選択して、展開してください。
このオブジェクトの子要素には、[Cheese] と [Mouse] があります。
[ButtonCheese] では、視線をオブジェクトに合わせたりタップしたりすることで
アニメーションが再生されるようになっています。

それでは、[ButtonBalloon] を選択、展開してください。
このオブジェクトでもユーザーのアクションでオブジェクトの状態が変わるようになっています。

[ButtonTraditional] を選択、展開してください。
ボタンのオブジェクトについては、[MRDesignLab] -> [HUX] -> [Prefabs] -> [Buttons] にプレハブがたくさんあります。
このオブジェクトでは、もともとある UI の Button を使用しています。

次に、[ButtonHolographic]を選択、展開してください。
このボタンは、[MRDesignLab] -> [HUX] -> [Prefabs] -> [Buttons]内の [SquareButton] をもとに使用しています。

[ButtonMeshBucky] を選択、展開してください。
ここでは、[MRDesignLab] -> [HUX] -> [Prefabs] -> [Buttons]内の [MeshButton] をもとに使用しています。

同様に、[ButtonMeshIcosa] と[ButtonMeshPrimitive] も[MeshButton] を用いて作られています。

[ButtonCoffeeCup] を選択、展開してください。
このオブジェクトは、[MRDL_ControlsExample] -> [Prefabs] 内から持ってきています。
他のオブジェクトも同様に、このフォルダ内から持ってくることができます。

[ButtonPush] を選択、展開してください。
このオブジェクトは、[MRDesignLab] -> [HUX] -> [Prefabs] -> [Buttons]内の [CircleButton]を
もとに作成されています。

[ToolBar] を選択し、展開してください。
このオブジェクトは、[MRDesignLab] -> [HUX] -> [Prefabs] -> [Buttons]内の [SquareButton]を
複数横に並べることで作成されています。
[MRDL_ControlsExample] -> [Prefabs] 内からこのプレハブを持ってくることができます。

[Reflection Probe] を選択してください。
このオブジェクトは、周囲のオブジェクトの反射を自然にするような効果があります。
これは、[create] -> [Light] から追加することができます。

最後に、[StateText] と [Receivers] について説明します。
[StateText] は、オブジェクトに対してユーザーがどのようなアクションをしているのか可視化するものです。
各オブジェクトに視線を当てたりタップしたりすると、
どのオブジェクトにどのようなアクションがされているか表示されます。

その [StateText] を制御しているのが [Receivers] です。

それでは、実行していきましょう。

配置とビルド

それでは、いつも通り配置とビルドを行います。
配置とビルドに関しては、HOLOLENS 5つのビルド方法を参照してください。

[Unity C# Projects] にチェックを入れることができない場合は、
[Player Settings] から[Inspector] パネル内の [Other Settings] にて
[scripting Backend] を[.NET] に変更してください。

実行すると、10個のオブジェクトが表示されます。
視線を当てるとどのオブジェクトに視線が当たっているのかテキストで表示されます。
また、タップやホールドをした際にも同様にそのアクションに合わせたテキストが表示されます。

実行時の動画はコチラです。

https://youtu.be/Nu1mfhLifH4

以上です。
お疲れ様でした。
 


HoloLens MRDesignLabs LunarModule

こんにちは、ナレコム前川です!

今回は、MRDesignLabs_Unity の LunarModule について紹介していきます。

私が使用したツールのバージョンは以下の通りです。

  • Windows10 Home
  • OSビルド:16299.125
  • Unity 2017.1.2f1

※Unity 2017.1.0f3 がサポートされていると公式には記載されていますが
Unity 2017.1.2f1 でも実行できました。

導入方法

まずは、コチラからファイルをダウンロードしてください。
[Branch] が [master] になっていることを確認して
[Clone or download] -> [Download ZIP] をクリックします。

ダウンロードが完了したら、Unity を起動してください。
Unity を起動したら、[Open] をクリックし、先ほどのファイルを選択して[フォルダを選択]をクリックしてください。

これで、導入は完了です。

Lunar Module

Lunar Module では、両手を使ったハンドトラッキングとXboxコントローラーによる入力や
オブジェクトからの平面検出、シンプルなメニューシステムの例を示しています。

それでは、プロジェクトの中身についての説明を行っていきます。

はじめに、フォントがありませんと表示される場合があります。

その際には、[Don't show again] にチェックして
[Click here to download font] をクリックしてください。

それでは、[MRDesignLab_LunarModule] -> [Scenes] -> [Main] シーンを開いてください。

次に、オブジェクトの説明をしていきます。
はじめに、[Hololens] を選択して、展開してください。
ここでは、カメラの管理やユーザーからの入力の管理、音の管理などを行っています。

続いて、[Lander] を選択、展開してください。
ここでは、表示される気球や煙などのオブジェクトのアニメーションやBGMなどの設定を行っています。

[Program] を選択し、展開してください。
このオブジェクトは、チュートリアルで使用するバーや空間認識などのゲームを進行するために
必要なオブジェクトを管理し、格納しています。

次に、[Screens And Buttons] を選択してください。
このオブジェクトは、メインメニューやボタンなどの管理や配置設定をしています。

[Environment] を選択し、展開してください。
このオブジェクトには、背景やライトなどといったアプリ内の世界観を作り出す要素が格納されています。

実行していきましょう。

配置とビルド

それでは、いつも通り配置とビルドを行います。
配置とビルドに関しては、HOLOLENS 5つのビルド方法を参照してください。

実行すると、メインメニューが表示されます。
メニューと指示に従って操作を行ってください。
ジェスチャーに対するオブジェクトの反応はとても良かったのですが、
とにかくクリアするのは難しいゲームでした(笑)

実行時の動画はコチラです。

https://youtu.be/YYqJLizDs7E

以上です。
お疲れ様でした。
 


HoloLens MRDesignLabs PeriodicTable

こんにちは、ナレコム前川です!

今回は、MRDesignLabs_Unity の Periodic Table of the Elements について説明していきます。

私が使用したツールのバージョンは以下の通りです。

  • Windows10 Home
  • OSビルド:16299.125
  • Github commit:be6202d
  • Unity 2017.2.0.0f3

導入方法

まず、コチラにアクセスしてファイルをダウンロードします。
アクセスしたら [Branch] が [master] になっていることを確認して
[Clone or download] -> [Download ZIP] をクリックしてください。

ダウンロードが完了したら、Unity を起動してください。
Unity を起動したら、[New] をクリックし、プロジェクト名を入れて [Create Project] をクリックしてください。
今回、私はプロジェクト名を「MRDesignlabPeriodicSample」にしました。

プロジェクトを作成したら、先ほどダウンロードしたファイルを開き
[Assets] を選択して開きます。
[Assets] 内の [HoloToolkit] と[MRDL_PeriodicTable] フォルダを選択して
Unity の[Project] パネルにドラッグ&ドロップしてください。

二つがきちんと [Project] パネルに入ったら準備完了です。

Periodic Table of the Elements

それでは、[MRDL_PeriodicTable] -> [Scene] -> [Main] シーンを開いてください。

次に、オブジェクトの説明をしていきます。
はじめに、[SpaceBackground] を選択して、展開してください。
ここでは、アプリを起動したときの背景の設定を行っています。

続いて、[SceneObject] を選択、展開してください。
この子要素は、アプリを起動した際に表示される元素表や文字、ボタンなどのオブジェクトです。

[MixedRealityCameraParent] を選択し、展開してください。
このオブジェクトは、HoloLens やWindowsMR のカメラを制御するものです。

子要素の [MixedRealityCamera] はMRデバイスのカメラを管理します。
[MotionControllers] は、WindowsMR のモーションコントローラーを可視化するオブジェクトです。

次に、[InputManager] を選択してください。
このオブジェクトは、ジェスチャーやコントローラーからの入力を処理するオブジェクトです。
これは、HoloToolkit のInput に入っています。

[DefaultCursor] を選択し、展開してください。
このオブジェクトは、視線の先に表示されるカーソルの処理を行っています。

最後に、[DeviceTypeManager] を選択してください。
これは、使用するデバイスが HoloLens かWindowsMR かで処理を切り替える役割をします。

それでは、実行していきましょう。

配置とビルド

それでは、いつも通り配置とビルドを行います。
配置とビルドに関しては、HOLOLENS 5つのビルド方法を参照してください。

実行すると、元素表が表示されます。
今回私は HoloLens で実行しましたが、HoloLens の場合は好きな元素をタップするとその元素の説明が表示されます。

英語で表示されますが、融点や沸点、元素の重さなども記されていました。

実行時の動画はコチラです。

https://youtu.be/T17Q46U2QR8

以上です。
お疲れ様でした。