【準備編】OculusQuest/HoloLens2対応WebXR開発

1.2K Views

November 17, 21

スライド概要

2021/11/17に開催したハンズオン資料

profile-image

可視化技術や人間計測/空間計測技術を活用した問題解決に関する研究開発。 ARコンテンツ作成勉強会(AR_Fukuoka)を主催。

シェア

埋め込む »CMSなどでJSが使えない場合

関連スライド

各ページのテキスト
1.

準備編 HoloLens2とOculusQuestではじめるWebXR

2.

自己紹介 氏名:吉永崇(Takashi Yoshinaga) 専門:ARを用いた医療支援や運動計測 Volumetric Video (3Dビデオ) コミュニティ:ARコンテンツ作成勉強会 主催

3.

ARコンテンツ作成勉強会の紹介  2013年5月に勉強会をスタート。  ARコンテンツの作り方をハンズオン形式で学ぶ  人数は5~10名程度の少人数で実施  参加条件はAR/VRに興味がある人(知識不要)  各地で開催 (福岡、熊本、宮崎、長崎、大分、 鹿児島、山口、広島、札幌、関東)

4.

Twitterと勉強会ページで情報を発信しています @AR_Fukuoka Googleで「AR勉強会」で検索

5.

ハッシュタグ #AR_Fukuoka

6.

本題に入ります

7.

Today’s Goal (HoloLens2) 今日はA-Frameの使い方を勉強しつつ手のCGをリアルタイムに表示します

8.

ブラウザの設定(Oculus Quest) Quest chrome://flags Webブラウザのアドレスバーにchrome://flagsと入力

9.

ブラウザの設定(Oculus Quest) 詳細設定ページが表示される handで検索 WebXR experiences with hand and joints tracking をEnabledに変更

10.

ブラウザの設定(HoloLens2) Quest chrome://flags Webブラウザのアドレスバーにchrome://flagsと入力

11.

ブラウザの設定(HoloLens2) 詳細設定ページが表示される handで検索 WebXR Hand Input をEnabledに変更

12.

デモコンテンツのURL https://webxr-hand.glitch.me

13.

実機で動作確認 HoloLens2 URLを入力 Quest URLを入力 VRボタン ARボタン WebブラウザのアドレスバーにコンテンツのURLを入力後、AR/VRボタンをクリック

14.

動作の様子 (HoloLens2)

15.

開発ツール:A-Frameの概要  Webブラウザ上でVRなどの3D表現を簡単に実現するフレームワーク  HTMLのタグを書くだけで3Dオブジェクトを配置できる  Firefox、Chrome、Edgeなど主要なブラウザがWebVR対応を表明  HoloLens2やOculus Quest、HTC Viveなどの各種HMDに対応  上記Webブラウザやデバイスで動くのでコンテンツの公開・共有が容易

16.

まずは体験 A-Frameのページにアクセス (https://aframe.io/)

17.

まずは体験 ページの左側にサンプルがあります サンプル

18.

まずは体験 基本サンプル Hello WebVRをクリック Hello WebVR

19.

まずは体験 基本サンプル Hello WebVRをクリック 画面をクリック  回転:マウスでドラッグ  左右:[A][D]キー  前後:[W][S]キー ※前後左右は自分がどちらに動くかで考える

20.

まずは体験 360°Imageをクリックして全天球コンテンツを表示 360°Image RICOH Theta

21.

A-Frameで何か作ってみよう GET STARTED

22.

必要なもの  Webブラウザ → コンテンツの体験や動作確認  テキストエディタ → HTMLやjavascriptの記述  Webサーバー → コンテンツの公開 サーバーに関して今回は・・・  Glitchを利用 https://glitch.com/ ◆ FacebookかGitHubのアカウントがあればOK ◆ サーバーとエディタの両方を無料で提供 この資料ではGlitch使用を前提に説明します

23.

基本サンプルのコード Hello WebVRのコードを取得 GET STARTED

24.

基本サンプルのコードの複製 Hello WebVR Hello WebVRに関する記述 (たったこれだけ!)

25.

基本サンプルのコードの複製 Glitchユーザーはremix the starter example on Glitchをクリック ※通常はHello WebVRの記述をコピーし、自作のHTMLファイルにペースト Click

26.

基本サンプルのコードの複製 Remix your ownをクリック Click

27.

基本サンプルのコードの確認 index.htmlをクリックし、コードが表示されることを確認 Click

28.
[beta]
ソースの確認
<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>の間に描画に関する記述をする

29.

ソースの確認 <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の詳細)

30.

動作確認 Show

31.

動作確認 Next to The Code

32.

動作確認 on PC

33.

アレンジしよう (まだやらなくてOK) タグ内の各パラメータを編集してCGの見た目を調整  position(位置):x y zの順にスペースで区切って指定 位置 x y z座標 (0 1.25 -5) 回転 色

34.

アレンジしよう (まだやらなくてOK) タグ内の各パラメータを編集してCGの見た目を調整  position(位置):x y zの順にスペースで区切って指定  rotation(傾き):各軸を中心とした回転で表現  color(色):カラーコード等で指定  他にも図形によって各種設定項目がある (0 1.25 -5) Y Z 原点 X 【設定項目の例】 radius(半径) width(幅) height(高さ) depth(奥行) src (画像など)

35.

とりあえず習うより慣れろ ということで自由にいじってみましょう

36.

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では削除

37.

HoloLens2やOculus Questで動作確認 の前に。。。

38.

コンテンツ名(URL)の変更 画面左上の文字列(コンテンツ名)をクリック ここをクリック

39.

コンテンツ名(URL)の変更 文字列を各自、分かりやすい名称(半角英数)に変更 シンプルで分かり易く変更

40.

URLの確認 プレビュー画面の上方にある[Change URL]からURLを確認 Change URL これがURL ※実機での動作確認に使用

41.

実機で動作確認 HoloLens2 URLを入力 Quest URLを入力 VRボタン ARボタン WebブラウザのアドレスバーにコンテンツのURLを入力後、AR/VRボタンをクリック

42.

動作の様子 (HoloLens2)

43.
[beta]
手のオブジェクトを表示
<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

44.

実機で動作確認 再読み込み 再読み込み 必ず再読み込みボタンをクリック

45.

動作確認

46.

今日はここまで!