Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

軍艦島のガンショーくん MR 開発知見苦労話★濃縮★大公開!

717 views

Published on

軍艦島デジタルミュージアム内
MRアトラクション
「軍艦島のガンショーくん
 ~かがやくブラックダイヤモンドをさがせ~」
の開発知見話です。
HoloLensミートアップVol.11 忘年会スペシャル! にて公開された内容です。

※2018/12/21 一部表記修正
---------------------------
軍艦島デジタルミュージアム
https://www.gunkanjima-museum.jp/

〇制作
株式会社ユニバーサルワーカーズ

〇企画・開発
株式会社MuuMu
https://muumu.co.jp

Published in: Engineering
  • Be the first to comment

軍艦島のガンショーくん MR 開発知見苦労話★濃縮★大公開!

  1. 1. 開発知見苦労話★濃縮★大公開!Tokyo HoloLens ミートアップ vol.11 忘年会スペシャル! ©ユニバーサルワーカーズ 2018/12/15改
  2. 2. ところで、、 Webや皆さんから頂いた情報で、 ほんと大変助かりました。。 情報貰ってばっかりで、 ぜんぜん発信できなくて すみませんでした。。 ということで… 今回は……
  3. 3. お話する内容 1. 自己紹介 2. アトラクション概要 3. アトラクション説明 4. アテンド機能 5. エンジニアリングの要点 6. プロジェクト構成 7. 神様の話
  4. 4. 1.自己紹介
  5. 5. 川口 肇 デザイン統括 長崎市在住 @haldime ・20年のエンターテイメント業界経験 ・デザイン業務から企画、マネージメント、 デザインセクション統括を経験。 ・ゲーム、遊技機、VR、ARなどを中心に コンテンツを制作。 ・2016年にIターンしフリーランスを経て起業 株式会社MuuMu 共同代表取締役 蔵岡 恒一郎 エンジニアリング統括 東京都在住 @koichi3 ・ゲーム開発会社で プログラマー/プロジェクトリーダーを経験 ・家庭用ゲーム、アミューズメント、スマフォアプリなど 15 年間ゲーム開発に携わる。 ・大手CGプロダクションにて、モーションキャプチャの支 援ソフト開発等を行う。 ・フリーランスを経て起業
  6. 6. 株式会社 MuuMu muumu.co.jp 2017年7月創業 業務 ・XRコンテンツの企画・開発 ・ゲームソフト・スマートフォン向けのアプリの企画・開発 ・3D CG デザイン制作 ・地域振興、観光PR事業 実績紹介 ・MRアトラクション 軍艦島のガンショーくん ~かがやくブラックダイヤモンドを探せ~ ・ARアプリ おさんぽガンショーくん ・近代史研究会 ドローン8K 360度動画企画制作 ・大手建築会社 VRコンテンツ ・大手電機メーカーVRデバイスデモコンテンツ ・XR関係コンサルティング
  7. 7. 2.アトラクション概要
  8. 8. 2015年7月に世界遺産登録された 長崎市の西方の沖合に浮かぶ島。 正式名称 端島。炭鉱業で栄え、日本で最初の 高層鉄筋アパートが建造された。 炭鉱閉山後は、無人島となった異様な姿が、世界で 有数の廃墟として知られる。 外観が軍艦に似ていることから軍艦島と呼ばれる。 世界遺産 軍艦島
  9. 9. 軍艦島デジタルミュージアム とは 軍艦島 を、巨大スクリーンや、プロジェクショ ンマッピング、VRデバイスなどを使って体感で きる 長崎県長崎市にある博物館 運営 株式会社 ユニバーサルワーカーズ 軍艦島デジタルミュージアム
  10. 10. 軍艦島デジタルミュージアム とは ガンショーくん ©ユニバーサルワーカーズ
  11. 11. 軍艦島デジタルミュージアム とは ガンショーくん ©ユニバーサルワーカーズ
  12. 12. 2018年 4月リリース ちんどん屋 広告チラシ 宣伝
  13. 13. 宣伝
  14. 14. 宣伝
  15. 15. テレビCM (長崎ローカル) ©ユニバーサルワーカーズ 宣伝
  16. 16. 体験後アンケート 5段階評価 4 以上 直近100件
  17. 17. 3.アトラクション説明
  18. 18. 体験者登録 機能説明 1.体験者登録 ・予約番号入力 と言語設定 ・瞳孔間距離測定 ・ニックネーム入力
  19. 19. 機能説明 1.体験者登録 〇ハード ・Windows PCに 2つのディスプレイ 上は 瞳孔間距離測定用 下は タッチパネル型ディスプレイ ・XBox Kinect One 〇アプリ ・上 KinectIPD改 ※のちほど説明 ・下 体験者登録アプリ (Unity) ★体験者登録 構成
  20. 20. 機能説明 1.体験者登録 瞳孔間距離測定
  21. 21. 機能説明 1.体験者登録 〇ハード・ソフト ・Xbox One Kinect ※販売終了 ・GitHub Microsoft/MixedRealityCompanionKit/KinectIPD を一部 改変して使用。 言語対応・計測結果を 体験者登録アプリに連動 〇実行 ・測定結果は、体験開始時に HoloLensへ送信反映 ★瞳孔間距離測定の実装
  22. 22. ★瞳孔間距離測定 KinectIPDの調整 機能説明 1.体験者登録 ・調整しないと認識率が非常によくない。。 ・X/Spaceキーで、調整モードに切り替わる 〇認識率の向上 ・映像の明るさ調整 瞳孔と周辺の輪郭が認識しやすいように 明るめの設定が吉 ・設置場所の照明などに左右される為 現地調整必須 ・画像解析でGPU負荷がかかる。内蔵GPUだとFPSが低下し認識率が悪い 外部GPUがおすすめ OK! 明るめ NG 白すぎる NG 暗すぎる 調整箇所
  23. 23. ニックネーム 入力 機能説明 1.体験者登録
  24. 24. 装着感・手ぬぐい・手袋 機能説明 2.体験衣装 装着 〇手ぬぐい 〇手袋
  25. 25. ★試行錯誤 手ぬぐい・手袋 機能説明 2.体験衣装 装着 〇HoloLensの装着のしやすさ ・マジックテープを試して良さそうだったが、 坊主頭だと生々しかった。。 汗対策など衛生面を考慮した結果、 手ぬぐいに落ち着いた。 炭鉱員の衣装として見た目もGood! 〇HoloLensの重量 579gの壁 手ぬぐいを使うことで、 HoloLensの重量が頭全体に分散され、 長時間利用でも疲労度が軽減! ※体験時間のうち45分は装着したまま 〇手袋の話はスライドの後ろで・・ Web記事情報 Thanx! 高橋忍さん
  26. 26. ウエストバッグを装着 機能説明 2.体験衣装 装着
  27. 27. 機能説明 2.体験衣装 装着 〇HoloLensの連続使用対策 ・充電なしだと 最大2時間 ・HoloLensのサスペンドは、WebAPI でOFFに ・1日中使用だとバッテリーは必須. ・QuickCharge3.0のモバイルバッテリーを使用 急速充電でないと電力消費に追いつかけない ★モバイルバッテリー入りウエストバッグ Web情報 Thanx! 高橋忍さん
  28. 28. 体験者へムービーでの説明 機能説明 3.動画でゲーム内容説明
  29. 29. 機能説明 4.HoloLensを装着
  30. 30. コントローラ 機能説明 5.コントローラ説明
  31. 31. ★試行錯誤 コントローラー機材の選択 ・HoloLens Clicker クリック操作のみなので、今回の企画には適さず。。 ・Wii リモコン 中古のみ。Bluetoothペアリングの認証でつまずく。 ・XBOX One コントローラ 館内移動があるので片手持ちに向かない形状。 ボタンも多いので、ご年配には厳しそう。 ◎Google Daydreamコントローラ メイン操作のボタン数は3つ。初めてでも操作しやすい。 加速度・ジャイロセンサーがとれる。 そしてUnityAssetがある! Web情報 Thanx! ゆーじさん ※コントローラーの操作検知 FPSが低めで少々遅延あり だが、ギリギリ運用レベル 機能説明 5.コントローラ説明
  32. 32. ★館内ガイド 館内モデル と 経路探索 機能説明 6.館内探索 ・館内モデルデータを内部で保持 ・館内モデルデータ内に 展示オブジェクトや、ギミックを丸ごと配置 ・World Anchor に応じて 館内モデルの ルートの位置・向きが変化するようなイメージ ・Unityの NavMeshで経路探索. ※World Anchor、位置ずれ、ロスト対策の話は、 スライドの後ろで・・
  33. 33. ★館内モデルの現実位置合わせ QRコードでVuforia認識 機能説明 6.館内探索 UnityEditor 現実
  34. 34. 機能説明 6.館内探索 ・レーザー距離計で計測 ・HoloLensでスキャンした、SpatialMapを 引っ張ってきてモデル制作のあたりに使用 ・古い建物なので図面と現場の寸法が合わない。 ※改築などの情報が更新されていない。 ・時間的・体力的にも、すごく大変だった。 360度3Dレーザースキャナー が絶対おすすめ! ★館内モデル制作 館内を計測
  35. 35. 神社と龍 機能説明 6.館内探索
  36. 36. ★神社鈴紐 アプリ 機能説明 6.館内探索 ・鈴紐の中に スマートフォン ・振動検知して、HoloLensへ送信 ・振動検知アプリは Unityで作成 ・WebAPIでやりとり ・スマフォ側の通信待ち受けには、 HttpListener を使用 (とっても便利!)
  37. 37. ・館内モデルに Fragmentsなメッシュ エフェクト ・歩くと足元に 波紋エフェクト。空間ごとにエフェクトが変わる 空間エフェクト 機能説明 6.館内探索
  38. 38. 体験者の名前が一目でわかる 機能説明
  39. 39. ★外部スピーカー制御 機能説明 7.MRエレベーター移動 ・MRエレベーター移動演出のサウンドは、 音の立体感・臨場感を出す為に、 部屋内に上下・左右設置された 4つのスピーカーから出力 ・サウンド再生用のPCを用意 ・サウンド再生用ソフトはUnityで作成 ・ナビタブレットからWebAPIで再生リクエスト ※ナビタブレットは後で説明 ・通信の待ち受けには、HttpListener を使用 (HttpListener とっても便利!)
  40. 40. ゲームランキングの表示 機能説明 8.採掘ゲーム
  41. 41. 全員集合写真撮影 機能説明 9.写真撮影
  42. 42. SNS投稿 機能説明 10.SNS投稿 〇Twitterへ自動投稿 ・体験者がHoloLensで撮影した画像は自動でTwitterへ投稿 〇1日1回 ・体験の1日の終了時には、累計の採掘石炭量を自動投稿
  43. 43. MR撮影写真や、採掘結果などの体験結果を、 印刷してお土産としてお渡し MR炭鉱員認定証を印刷してお渡し 機能説明 11.MR炭鉱員認定 証
  44. 44. ・印刷リクエストは UnityAssetを使用 ・オフスクリーン レンダリングで印刷画像を生成 ・QRコードはZxingを使用 ・印刷に時間がかかる 1枚20秒だと、 10枚で3分少々。 お客様を待たせないように、 体験終了前までに印刷を開始 ★印刷処理 機能説明 11.MR炭鉱員認定 証
  45. 45. おさんぽガンショーくん 機能説明 連動スマートフォンアプリ ・2018年 4月リリース 無料 ・iOS専用 ARKit 1.5 ・コレクションAR 撮影アプリ
  46. 46. MR体験で獲得したアイテムが増える スマフォアプリでMR炭鉱員認定証をスキャン 機能説明 連動スマートフォンアプリ
  47. 47. 4.アテンド機能
  48. 48. アテンド用タブレットアプリ 〇機能 ・受付状態表示 ・体験の進行 ・館内GPS表示 ・メッセージ送信 ・採掘ゲーム状況の表示 ・印刷リクエスト ・エラー情報表示 4.アテンド機能
  49. 49. 受付状態確認 館内GPS 4.アテンド機能 アテンド用タブレットアプリ
  50. 50. 体験者へメッセージ送信 体験の進行 4.アテンド機能 アテンド用タブレットアプリ
  51. 51. アテンド用HoloLens 館内GPS表示 4.アテンド機能
  52. 52. 通信
  53. 53. ★HoloLens・タブレット間通信 通信 〇uNet LLAPI (Low Level API) ・マッチング、移動・アニメ同期、リトライ処理などガリガリ書いた ・通信処理の自由度が高くて良い! ・そしてuNetはお亡くなりに。。 ※UDP直送信に変更を検討 〇通信の最適化 ・パケットデータのバイナリ圧縮 ・同期情報の削減 位置情報がとにかく多い 移動量により、送信間隔を変えて通信量を削減
  54. 54. 電波に大苦戦!
  55. 55. ・端末が電波の弱いWIFIを掴んだまま通信不能になる ・AP切り替え時に 5~15秒程度 通信できない ・階、フロア移動時に頻繁に発生 ・各APで、送信電波の強さ や 端末と切断する電波強度など、 かなり時間をかけて調整したが、うまくいかず。。 メッシュWIFIを導入 ・複数個のAPどうしが連携し、さくさくAPが切り替わる! ・通信の途切れはまったく感じないレベル ・お勧め NETGEAR Orbi シリーズ. ・APどうしの連携接続は、無線と有線 の2方式. 有線接続だと 通信速度低下が防止できる ★複数WIFI APの切り替わりで通信が切れる問題 電波に大苦戦! 電波・通信機器情報 Thanx! (株)ユースフル AP1 AP2 どっちのAPに つながる?
  56. 56. ★通信 電波干渉 WIFI 2.4Ghz帯 と 5Ghz帯 電波に大苦戦! 〇2.4Ghz帯 メリット 電波が回り込みに強い。障害物に強い WIFI APの設置数が少なくて済む デメリット 電波干渉しやすい。電子レンジなんかにも影響を受ける (理論上 2.4Ghzは 4つ使用までならOK) ※大人数・イベント・大舞台で干渉する確率が高い トラブル発生 絶対注意! 〇5Ghz帯 メリット :電波干渉がおこりづらい デメリット:電波が直線的で、障害物に弱い WIFI APの設置数が多く必要 大人数いるところは 5Ghz帯を使うしか選択肢が無い!
  57. 57. ★5Ghz も干渉? DFS ・気象レーダー ・船舶・外国船 ・潜水艦? 実は 5Ghzを使っている電波はいろいろある 5GHzの Wifi APが、レーダー波を受信すると、 WIFIチャンネルの切り替えが発生し、 通信が一時的に切れることがある ※詳しくは DFSで検索 電波に大苦戦!
  58. 58. 〇チャナライザー ・電波状態の可視化 ・2.4Ghz / 5Ghz 電波干渉をチェック ・PC接続で24時間モニタリング・ログ ★電波干渉 調査 電波に大苦戦!
  59. 59. ・WIFI APの設置位置を検証 ・WIFIアナライザー アプリで調べられる ★WIFI AP 電波強度 測定 電波に大苦戦!
  60. 60. ★無線のヘッドフォンでノイズ 現象 ・HoloLensが近づくと 無線のヘッドフォンがブツブツ鳴る 原因 ・赤外線を使用しているヘッドフォンで発生 ・HoloLensも赤外線を飛ばしており干渉 対応 ・赤外線のヘッドフォンを別のに変更して頂いた 電波に大苦戦!
  61. 61. 電波・通信機器の問題は、 プログラマの対応領域を 超えることが多い! 専門家・業者に相談するが吉! エンジニアリングの要点
  62. 62. 空間ロスト・位置ずれ対策
  63. 63. 空間ロスト ★空間ロスト ・位置ずれの原因 ・特徴点が少ない ・暗い ・黒に弱い ・鏡面反射・マットな質感 ・上下階の空間形状が同じ ミュージアムはすべて該当・・・ ・開発当初 頻繁に ロストしまくり。。 上下階に瞬間移動することもしばしば
  64. 64. Spatial Mapが張られない 空間ロスト
  65. 65. 空間ロスト ★空間ロスト・位置ずれ 対策 〇丁寧な空間学習(週1回) 参考情報 Tokyo HoloLensミートアップ vol.7 Thanx! Meleep さん 1.Remove all holograms で空間情報を削除 2.ロストしないように、ゆっくり館内を見てまわる 3.特徴がある箇所を念入りに見る ※まさに職人技の領域 〇壁などに特徴点を設置 ・クライミングホールドを壁に配置 ※色の特徴はさほど効果なし。物理形状の特徴点が良い 〇部分的に明るくする ロストしやすい箇所だけ照明をいれる。 LEDテープで床を照らす。 ※既存の展示物を配慮した調整 かなり改善! それでも どうしても発生する・・
  66. 66. 〇まず 位置ずれ が発生しているかを判断 ・体験者が 位置ずれが起きていることを認識できるようにする ・階段の踊り場など、 位置ずれが認識できる表示物を配置 ・頭上に表示している名前がずれているかチェック ・アテンドアプリの館内GPSで、体験者の位置をおかしくないかチェック 〇復旧 ・空間認識のQRコードを館内に複数設置. ・付き添いのアテンドが発見したら、位置合わせをさせてもらう ・コントローラーの特定ボタンを押しながら QRコードを見る 空間ロスト ★位置ずれ発生後の復旧
  67. 67. ★プロジェクターの映像スクロールにひっぱられる 空間ロスト
  68. 68. ブルーム対策
  69. 69. ★ブルーム 苦肉の策 黒手袋 コントローラを持っている逆の手で、 意図せずブルームが発生することがある・・ 対策 黒手袋をはめるとブルームが反発見! 材質が大事! 反射率が影響 ・園芸用手袋(内側ゴム点点) →OK ・防寒用手袋 →NG ・ドライビング用の手袋 →NG DAISOで買えます。 炭鉱衣装との兼ね合いもGOOD!
  70. 70. バックグラウンド移行を検知と復旧 1.ブルームなどで、アプリがバックグラウンド移行すると void OnApplicationFocus(bool) が呼び出される。 2.このメソッド内で、ブルームされたことを、 通信でアテンドの端末に通知 3.アテンド端末どの端末で発生したか表示される 4.アテンドが該当HoloLensを手動で復旧させる ※RS4以前だと、アプリが閉じたことに気づかないことも。。 RS5は、メニューが出るので体験者 自身でわかる! ★ブルームを検知する ブルーム対策
  71. 71. 最適化
  72. 72. ★最適化 最適化 開発中に30FPSを切っていた箇所も..最適化で60FPSへ 1マテリアルで多く描画 ・テクスチャ1枚になるだけまとめる. 4K ・効果 絶大! 〇LOD対応 〇ライティング影響、描画Quality設定の調整 〇オクルージョンカリング ・館内モデル位置がWorldAnchorで変化するため、 うまく使えなかった。。
  73. 73. 6.プロジェクト構成
  74. 74. ★期間・人員 プロジェクト概要 ■期間 ・企画 2017年3月~ ・第1次開発 2017年7月~ 2018年4月 10カ月 ■人員 〇エンジニア ・アトラクション開発 3人 10カ月 ・スマートフォンアプリ開発 1人 4カ月 〇グラフィックデザイン ・全般 2D/3D 1名 10カ月 ※HoloLensの開発は全員初めてだった ■エンジニアリング 協力会社・人員 ・株式会社 ユースフル 長崎県 ・株式会社 WBCompany 和歌山県 ・ハトムネ @hadoumune 東京 その他
  75. 75. 自社MRライブラリを 提供&導入サポート予定
  76. 76. 7.神様の話
  77. 77. 軍艦島デジタルミュージアム プロデューサー 久遠裕子さん 今回 企画・仕様・新規提案 快く採用してくれました! とっても 感謝!!
  78. 78. 企画・仕様を任せてもらえる! 最高!! すげー提案がドンドン受け入れてもらえる!! やったーー!!!!! ・んん??? なんだ?? ・・聞こえる。 ・・・声が聞こえるよ。。
  79. 79. 新しい体験が実現できるんじゃない? 面白いは最高だろ! こんなのでお客さんが満足するの? できるかぎりやっちゃえよ!!
  80. 80. 声の主は クリエイティブの神さま 神さまはクリエイターの心の中にいる。 神さまには逆らえない。 そして 削る…削るよ…身を削る。 睡眠時間を!休日を!プライベートを! 圧倒的サービス精神!
  81. 81. 結果・・ 当初企画から 物量 1.5倍 以上 やりすぎた。。
  82. 82. クリエイティヴ精神の恐ろしいところ 自由を与えられると、 勝手に限界までやっちゃう… やっちゃった…自ら首を絞める…
  83. 83. 初めてのMRアトラクション開発 勝手に仕様てんこ盛り 現地でしか発生しないトラブル多数・・ MRアトラクションの初めてのバランス調整・・ 結果... 1年間で長崎への 出張が100日超え
  84. 84. 長崎滞在 100日。長崎の良いところ発見! ・食べ物・お魚うまい! ・観光は見どころ沢山! ☆世界遺産 軍艦島、教会群 ☆島・船・海・釣り ☆お祭り 中華街 歴史 夜景 ☆温泉 ・2018年9月から格安航空が就航 お安く行けます!
  85. 85. そんなわけで! 宣伝
  86. 86. MuuMuでは 全国で人材を募集しています! 一緒に面白いものを つくりましょう!
  87. 87. 開発者のみなさん ぜひ情報交換 させてください!

×