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

準備編
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)
chrome://flags
Quest
Webブラウザのアドレスバーにchrome://flagsと入力

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

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

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

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

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

開発ツール：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の詳細)
位置回転色

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

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

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

[編集例]
<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>
HTML編集に慣れよう
角度
高さ
HoloLensでは削除
色

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

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

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

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

手のオブジェクトを表示
<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

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

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

More Related Content

What's hot

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

More from Takashi Yoshinaga

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