【準備編】OculusQuest/HoloLens2対応WebXR開発
1.5K Views
November 17, 21
スライド概要
2021/11/17に開催したハンズオン資料
可視化技術や人間計測/空間計測技術を活用した問題解決に関する研究開発。 ARコンテンツ作成勉強会(tryAR)を主催。
関連スライド
各ページのテキスト
準備編 HoloLens2とOculusQuestではじめるWebXR
自己紹介 氏名：吉永崇(Takashi Yoshinaga) 専門：ARを用いた医療支援や運動計測 Volumetric Video (3Dビデオ) コミュニティ：ARコンテンツ作成勉強会 主催
ARコンテンツ作成勉強会の紹介 2013年5月に勉強会をスタート。 ARコンテンツの作り方をハンズオン形式で学ぶ 人数は5~10名程度の少人数で実施 参加条件はAR/VRに興味がある人(知識不要) 各地で開催 (福岡、熊本、宮崎、長崎、大分、 鹿児島、山口、広島、札幌、関東)
Twitterと勉強会ページで情報を発信しています @AR_Fukuoka Googleで「AR勉強会」で検索
ハッシュタグ #AR_Fukuoka
本題に入ります
Today’s Goal (HoloLens2) 今日はA-Frameの使い方を勉強しつつ手のCGをリアルタイムに表示します
ブラウザの設定(Oculus Quest) Quest chrome://flags Webブラウザのアドレスバーにchrome://flagsと入力
ブラウザの設定(Oculus Quest) 詳細設定ページが表示される handで検索 WebXR experiences with hand and joints tracking をEnabledに変更
ブラウザの設定(HoloLens2) Quest chrome://flags Webブラウザのアドレスバーにchrome://flagsと入力
ブラウザの設定(HoloLens2) 詳細設定ページが表示される handで検索 WebXR Hand Input をEnabledに変更
デモコンテンツのURL https://webxr-hand.glitch.me
実機で動作確認 HoloLens2 URLを入力 Quest URLを入力 VRボタン ARボタン WebブラウザのアドレスバーにコンテンツのURLを入力後、AR/VRボタンをクリック
動作の様子 (HoloLens2)
開発ツール：A-Frameの概要 Webブラウザ上でVRなどの3D表現を簡単に実現するフレームワーク HTMLのタグを書くだけで3Dオブジェクトを配置できる Firefox、Chrome、Edgeなど主要なブラウザがWebVR対応を表明 HoloLens2やOculus Quest、HTC Viveなどの各種HMDに対応 上記Webブラウザやデバイスで動くのでコンテンツの公開・共有が容易
まずは体験 A-Frameのページにアクセス (https://aframe.io/)
まずは体験 ページの左側にサンプルがあります サンプル
まずは体験 基本サンプル Hello WebVRをクリック Hello WebVR
まずは体験 基本サンプル Hello WebVRをクリック 画面をクリック 回転：マウスでドラッグ 左右：[A][D]キー 前後：[W][S]キー ※前後左右は自分がどちらに動くかで考える
まずは体験 360°Imageをクリックして全天球コンテンツを表示 360°Image RICOH Theta
A-Frameで何か作ってみよう GET STARTED
必要なもの Webブラウザ → コンテンツの体験や動作確認 テキストエディタ → HTMLやjavascriptの記述 Webサーバー → コンテンツの公開 サーバーに関して今回は・・・ Glitchを利用 https://glitch.com/ ◆ FacebookかGitHubのアカウントがあればOK ◆ サーバーとエディタの両方を無料で提供 この資料ではGlitch使用を前提に説明します
基本サンプルのコード Hello WebVRのコードを取得 GET STARTED
基本サンプルのコードの複製 Hello WebVR Hello WebVRに関する記述 (たったこれだけ！)
基本サンプルのコードの複製 Glitchユーザーはremix the starter example on Glitchをクリック ※通常はHello WebVRの記述をコピーし、自作のHTMLファイルにペースト Click
基本サンプルのコードの複製 Remix your ownをクリック Click
基本サンプルのコードの確認 index.htmlをクリックし、コードが表示されることを確認 Click
ソースの確認
<html>
<head>
<title>Hello, WebVR! - A-Frame</title>
<meta name="description" content="Hello, WebVR! - A-Frame">
<script src="https://aframe.io/releases/1.2.0/aframe.min.js">
</script>
</head>
<body>
<a-scene>
表示するオブジェクトや背景の設定をここに記述
</a-scene>
</body>
</html>
ヘッダー部でA-Frameの機能を提供するライブラリを取り込む
<a-scene>と</a-scene>の間に描画に関する記述をする
ソースの確認 <a-scene> 位置 回転 色 <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"> </a-box> <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"> </a-sphere> <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder> <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane> </a-scene> 基本図形はa-xxxタグで提供されている https://aframe.io/docs/1.2.0/primi tives/a-box.html (例：a-boxの詳細)
動作確認 Show
動作確認 Next to The Code
動作確認 on PC
アレンジしよう (まだやらなくてOK) タグ内の各パラメータを編集してCGの見た目を調整 position(位置)：x y zの順にスペースで区切って指定 位置 x y z座標 (0 1.25 -5) 回転 色
アレンジしよう (まだやらなくてOK) タグ内の各パラメータを編集してCGの見た目を調整 position(位置)：x y zの順にスペースで区切って指定 rotation(傾き)：各軸を中心とした回転で表現 color(色)：カラーコード等で指定 他にも図形によって各種設定項目がある (0 1.25 -5) Y Z 原点 X 【設定項目の例】 radius(半径) width(幅) height(高さ) depth(奥行) src (画像など)
とりあえず習うより慣れろ ということで自由にいじってみましょう
HTML編集に慣れよう [編集例] <a-scene> 角度 <a-box position="-1 0.5 -3" rotation="0 45 45" color="#4CC3D9"> </a-box> 色 <a-sphere position="0 1.25 -5" radius="1.25" color="#00FFFF"> </a-sphere> 高さ <a-cylinder position="1 0.75 -3" radius="0.5" height="0.2" color="#FFC65D"></a-cylinder> <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane> <a-sky color="#ECECEC"></a-sky> </a-scene> HoloLensでは削除
HoloLens2やOculus Questで動作確認 の前に。。。
コンテンツ名(URL)の変更 画面左上の文字列(コンテンツ名)をクリック ここをクリック
コンテンツ名(URL)の変更 文字列を各自、分かりやすい名称(半角英数)に変更 シンプルで分かり易く変更
URLの確認 プレビュー画面の上方にある[Change URL]からURLを確認 Change URL これがURL ※実機での動作確認に使用
実機で動作確認 HoloLens2 URLを入力 Quest URLを入力 VRボタン ARボタン WebブラウザのアドレスバーにコンテンツのURLを入力後、AR/VRボタンをクリック
動作の様子 (HoloLens2)
手のオブジェクトを表示
<a-scene>
<a-box position="0 1.5 -2" scale="0.5 0.5 0.5" rotation="0 45 0"
color="#4CC3D9" shadow></a-box>
<!--左手の描画-->
<a-entity id="leftHand"
hand-tracking-controls="hand: left; modelStyle: dots;"></a-entity>
<!--右手の描画-->
<a-entity id="rightHand"
hand-tracking-controls="hand: right; modelStyle: dots;"></a-entity>
</a-scene>
【hand-tracking-controlsの詳細]】
hand: left または right
modelStyle: mesh または dots
(meshはうまく働かず)
modelColor: 手のモデルの色
(今回はデフォルト色)
Lesson02
実機で動作確認 再読み込み 再読み込み 必ず再読み込みボタンをクリック
動作確認
今日はここまで！