【イベント内容】
WebXR開発の第一歩を踏み出すための基本的な手順を体験しみようというハンズオンを開催します。Babylon.jsを使った3D表示や、HoloLens 2やMeta Questを用いた基本的なハンド・インタラクションを実装してみます。

イベント内容
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)

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

③ Glitchのアカウント作成(必須)
Glitchを使うためにFacebookかGitHubのアカウントが必要になります。
https://glitch.com

会場
・オフライン:エンジニアカフェ
・オンライン:どこでもOK

時間
13:00～16:30

【タイムテーブル】
13:00-16:00 ハンズオン
16:00 検証

進捗に合わせて適宜デバイス側のサポートを入れます