Babylon.jsで始めるHoloLens2/Quet対応WebXR

機能改善領収データ発行機能にてインボイス制度の書式での出力に対応しました。詳しくはこちらをご覧ください。

新機能参加者によるイベント出席機能をリリースしました。今までは主催者による出席管理機能はありましたが、大規模イベント等での受付処理が大変とのフィードバックをいただいてました。今後はイベント作成時に発行される「出席コード」を会場現地や配信で共有してもらうことで、参加者自身でイベント出席登録を行うことができるようになります。これにより受付処理が容易になりますので、イベント主催者の皆様はぜひご活用ください。詳しくはこちらをご確認ください。

Feb

11
Babylon.jsで始めるHoloLens2/Quet対応WebXR
ハンズオン形式の勉強会です

Organizing : ARコンテンツ作成勉強会

Hashtag ：#AR_Fukuoka

Registration info	オフライン枠(エンジニアカフェ) Free Standard (Lottery Finished) 2/10 オンライン枠 Free Standard (Lottery Finished) 22/20 ブログ執筆枠 Free Standard (Lottery Finished) 1/2
参加者への情報	(参加者と発表者のみに公開されます)

Description

イベント内容

HoloLens2のアップデートによりWebブラウザのEdgeでWebXRを体験できるようになりました。また同様にVRのMetaQuestのウェブブラウザでもWebXRを体験でき、AR/VRの両面からWebXRが活用できる環境が整ってきました。
そこで今回はWebXR開発の第一歩を踏み出すための基本的な手順を体験しみようというハンズオンを開催します。
具体的には、WebXR 開発ツールのBabylon.jsを使った3D表示や、HoloLens 2やMeta Questを用いた基本的なハンド・インタラクションを実装してみます。

今回作るコンテンツのイメージ(クリックで動画再生)

※コンテンツは変更になる可能性があります。

対象者

・WebAR/VRに興味のある人。(初心者OK！)
・HoloLens2/Meta Quest対応のコンテンツを作る手順を知りたい人
・手を動かすのが好きな人

※今回はプログラミング要素が大きいのでjavascriptの基礎の基礎を知っているとベター(必須ではありません)

事前準備

勉強会参加にあたり下記URLを参考に事前準備をお願いいたします。

① 機材の準備

(1) HMD (HoloLens2またはOculus Quest1,2)
いずれの機器もOSのアップデートをお願いします。
(2) 開発用PC (Win/MacどちらもOK)

② Hand Trackingの有効化(必須)

(1) HoloLens2
  - Windowsアップデートで最新版に更新
  - Edgeを起動
  - アドレスバーに edge://flags と入力して検索
  - webxrで検索
  - WebXR IncubationsをEnabledに変更

(2) OculusQuest2
  - 最新版にアップデート
  - ハンドトラッキング機能をON (参考： https://apicodes.hatenablog.com/entry/oculus-handtracking )
  - Webブラウザを起動
  - アドレスバーに chrome://flags と入力して検索
  - handで検索
  - WebXR experiences with hand and joints trackingをEnabledに変更

(3)共通
・HoloLensまたはQuestで下記にアクセスし、画面右下のゴーグルマークをタップして没入モードにし、手のCGが表示されることを確認。(カメラへのアクセスの許可を求めてきますので許可してください。)
   https://babylonjs-test.glitch.me

  動作の様子(HoloLens2)
   https://youtu.be/vViWxu1QKNs

・AR/VRモードからホーム画面に戻る方法について確認
  Quest: コントローラのメニューボタンから戻る
  HoloLens 2: ホームメニュー表示後(手首タップ)、ホームボタンをタップ