A-Frameで始めるWebXRとハンドトラッキング (HoloLens2/Oculus Quest対応)

ARコンテンツ作成勉強会
HoloLens2とOculusQuestではじめるWebXR

サンプルのダウンロード
http://arfukuoka.lolipop.jp/WebXR2021/Sample.zip

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

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

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

#AR_Fukuoka
ハッシュタグ

本日のゴール
HoloLens2やOculus Questを使ったハンドトラッキングをWebXRでやってみよう
https://youtu.be/y4WD2wgzKYQ

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

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

テンプレートコードの複製
https://glitch.com/~webxr-hand-template
GET STARTED

下にスクロール

Remix Your Own

テンプレートの確認
index.htmlをクリックし、コードが表示されることを確認
index.html

index.htmlをクリックし、コードが表示されることを確認
エディタプレビュー

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

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

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

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

動作の様子 (HoloLens2)
今回はこれを編集しながらハンドトラッキングを用いたコンテンツを作っていきます

ハンズオンの手順
1.サンプルの概要を解説
2.ハンドトラッキング機能を追加 (手の表示)
3.javascriptでハンドトラッキングと連携する準備
4.右手のアクションを記述
a) ピンチ(つまみ操作)開始時のオブジェクト追加
b) ピンチしながらの移動に追従してオブジェクト追加
c) ピンチ終了時に次回追加するオブジェクトの色を設定
5.左手のアクションを記述
a) ピンチ開始時に全てのオブジェクトを削除
6.おまけ
a) 常に人差し指の位置を追跡

Lesson01

A-Frameの読み込み
3D空間に描画する内容を記述

<a-scene background="color: #ECECEC">
<a-box position="0 1.5 -2" scale="0.5 0.5 0.5" rotation="0 45 0"
color="#4CC3D9" shadow></a-box>
</a-scene>
a-box
position
0 1.5 -2
位置大きさ色
向き

手の挙動に
ついて記述(予定)

手のオブジェクトを表示
ここを編集

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

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

javascriptで手の情報を使用する準備
ここを編集

var scene; //描画する3D空間
var rightHand; //右手の情報を保持する変数
var leftHand; //左手の情報を保持する変数
};
};
}; Lesson03

javascriptで3D空間を操作する準備
var rightHand; //右手
var leftHand; //左手
//3D空間を変数として保持
scene = document.querySelector('a-scene');
};
};
function initLeftHand(){ }; Lesson04

右手の操作で空間にオブジェクトを生成
};
};
function initLeftHand(){ };
ここを編集

右手の操作で空間にオブジェクトを生成
//右手のオブジェクト(id=rightHand)を取得
rightHand = document.getElementById("rightHand");
//ピンチ開始
rightHand.addEventListener('pinchstarted', function (e) {
});
//ピンチ終了
rightHand.addEventListener('pinchended', function (e) {
});
//ピンチしながら手を移動
rightHand.addEventListener('pinchmoved', function (e) {
});
}; Lesson05

ピンチ開始の取得
//ピンチ開始
});
//ピンチ終了
});
});
};
ここを編集

ピンチ開始の取得
//ピンチ開始
var position = e.detail.position;
//BOX生成関数を呼び出す (次のページ以降で解説)
addBox(position);
});
//ピンチ終了
});
});
}; Lesson06

Boxの生成
ここに関数を追加

Boxの生成
};
function addBox(position){
//a-boxという要素を作る
var box = document.createElement('a-box');
//位置や大きさ、色を設定
box.setAttribute('position', position);
box.setAttribute('scale', '0.02 0.02 0.02');
box.setAttribute('color', '#0062C6');
//あとで一括削除しやすいようにクラス名設定
box.setAttribute('class', 'box');
//3次元空間にboxを追加
scene.appendChild(box);
}
</script>
Lesson07

手の移動に追従
//ピンチ開始
/*中略*/
});
//ピンチ終了
});
});
};
ここを編集

手の移動に追従
//ピンチ開始
/*中略*/
});
//ピンチ終了
});
//BOXを生成
addBox(position);
}); Lesson08

問題点
あまり密にboxを生成するとすぐにメモリを消費して動きが遅くなる

描画するBoxを間引く(1/6)
<script>
var prev;//最後にBox置いた位置を記憶する変数
};
/*以下省略*/
Lesson09

var prev;//最後にBox置いた位置を記憶
/*省略*/
};
/*省略*/
};
};
//Boxの追加を行う関数
}
ここを編集

box.setAttribute('scale', '0.02 0.02 0.02');
//あとで一括削除するためにクラス名設定
//最後にBox置いた位置を記憶
prev=box.object3D.position;
}
Lesson09

/*省略*/
};
/*省略*/
};
};
}
ここを編集

//ピンチ開始
/*中略*/
});
//ピンチ終了
});
});
};
ここを編集

//最後にboxを置いた位置と現在の手の位置との距離
var length= prev.distanceTo(position);
//一定距離以上ならboxを置く
if(length>=0.02){
//BOXを生成
addBox(position);
}
});
Lesson10
prev
position
一定距離以上

色を切り替える
//Cubeに割り当てる色の配列
var colors = ['#0062C6', '#00AB00', '#FFCF00', '#7F00FF',
'#FFFFFF', '#FF2000', '#F52394', '#593110'];
//利用する色の番号
var index=0;
}; Lesson11

//ピンチ開始
/*中略*/
});
//ピンチ終了
});
/*中略*/
});
};
ここを編集

//ピンチ開始
//BOX生成関数を呼び出す
addBox(position);
});
//ピンチ終了
//色の番号を加算して、あとでboxの色に反映
index++;
index%=colors.length;
}); Lesson12

/*省略*/
};
/*省略*/
};
};
}
ここを編集

box.setAttribute('scale', '0.02 0.02 0.02’);
box.setAttribute('color', colors[index]);
//あとで一括削除するためにクラス名設定
//最後にBox置いた位置を記憶
prev=box.object3D.position;
} Lesson13

描画したBoxを削除
/*省略*/
};
/*省略*/
};
};
/*省略*/
}
ここを編集

描画したBoxを削除
//左手のオブジェクトを取得
leftHand = document.getElementById("leftHand");
//ピンチ開始時の挙動
leftHand.addEventListener('pinchstarted', function (e) {
//boxクラスが割り当てられているオブジェクトを全て取得
var els = document.querySelectorAll('.box’);
//一つ一つ削除していく
for (var i = 0; i < els.length; i++) {
els[i].parentNode.removeChild(els[i]);
}
});
};
Lesson14

指の先の位置を取得する方法
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-sphere id="tip" position="0 0 0" radius="0.015"
color="#0062C6"></a-sphere>
</a-scene>
Lesson15

Javascript
の記述に戻る

//Cubeに割り当てる色の配列
var colors = ['#0062C6', '#00AB00', '#FFCF00', '#7F00FF',
'#FFFFFF', '#FF2000', '#F52394', '#593110'];
//利用する色の番号
var index=0;
//指の先端を表す球
var tip;
//指先の位置を表す球を取得
tip = document.getElementById("tip");
};
Lesson16

/*省略*/
};
/*省略*/
};
/*省略*/
};
/*省略*/
}
ここを編集

//リアルタイムに指の先端を追跡(この後記述)
tipTracking(rightHand.components['hand-tracking-controls']);
//ピンチ開始
/*省略*/
});
//ピンチ終了
/*省略*/
});
Lesson17

/*省略*/
};
/*省略(右手の初期化を行う関数)*/
};
/*省略(左手の初期化を行う関数)*/
};
/*省略(Boxの追加を行う関数)*/
}
ここに指の位置追跡の
関数を追加

/*省略(左手の初期化を行う関数)*/
};
/*省略(Boxの追加を行う関数)*/
}
function tipTracking(ctrl){
//指の先端の位置
var position = ctrl.indexTipPosition;
//指の位置を球に反映
tip.setAttribute('position', position);
//30ms後にtipTrackingを再度呼ぶ
setTimeout(function(){tipTracking(ctrl);}, 30);
}; Lesson18

次のBoxの色を指先の球に反映
//ピンチ開始
/*中略*/
});
//ピンチ終了
});
/*中略*/
});
};
ここを編集

次のBoxの色を指先の球に反映
//ピンチ開始
//BOX生成関数を呼び出す
addBox(position);
});
//ピンチ終了
//色の番号を加算してboxの色に反映
index++;
index%=colors.length;
//指の先端の球にも色を反映
tip.setAttribute('color', colors[index]);
});
Lesson19

参考資料
• A-Frame公式
https://aframe.io
• A-Frameハンズオン
https://www.slideshare.net/ssuserc0d7fb/arframe-
x-arjs
• WebVRハンズオン
https://www.slideshare.net/ssuserc0d7fb/oculus-
quest-12-with-aframe-webvr-239362153
• A-Frameでハンドトラッキング
https://www.jyuko49.com/entry/2020/12/14/2147
15

A-Frameで始めるWebXRとハンドトラッキング (HoloLens2/Oculus Quest対応)

More Related Content

What's hot

Similar to A-Frameで始めるWebXRとハンドトラッキング (HoloLens2/Oculus Quest対応)

More from Takashi Yoshinaga

Recently uploaded

A-Frameで始めるWebXRとハンドトラッキング (HoloLens2/Oculus Quest対応)