WebXR Plane Detectionを試してみる その１
はじめに
Chrome 91 から様々な機能が追加されている。
https://developers-jp.googleblog.com/2021/05/chrome-91-webxr.html
その中で XR 関係でいうと、WebXR Plane Detection API の実験的な実装です。
今までの WebXR は平面検知はできるが、扱えるのは真ん中一点のみだった（おそらく）
これからは、ある平面を一度に認識できるようになる。
具体的には、おそらくタッチした画面の位置に応じた平面の位置を検出できるだろう。
実際に作成したものは以下の通り
これから何回かに分けて実装方法を記載していきます。
# 05/24時点でChrome91はChrome Devで確認できる。
# もちろんWebXR Device API対応のため、ARCoreが使えるAndroid端末限定です。
オリジントライアル登録
WebXR Plane Detectionはまだ実験段階のため、利用するためにはトライアル登録を行う必要がある。
https://developer.chrome.com/origintrials/#/view_trial/1154047404513689601
登録すると、API-KEY が発行される。
さて、この API をどうやって使うのかだが、meta タグ内に"origin-trial"として API-KEY を埋め込むようだ。
https://github.com/GoogleChrome/OriginTrials/blob/gh-pages/developer-guide.md
有効期限は 約６週間です。フィードバックを登録すると６週間延長できるらしい。
https://github.com/GoogleChrome/OriginTrials/blob/gh-pages/developer-guide.md#valid-until-feedback
実装方法
Plane Detection API の実装方法は以下のとおり
https://github.com/immersive-web/real-world-geometry/blob/main/plane-detection-explainer.md
three.jsベース
どうやるのが一番やりやすいのかわからないけど、Three.jsだったら対応しているだろうと思ったので使ってみる。
ExamplesからXRに対応したソースを取得して、index.htmlに貼り付ける。
https://github.com/mrdoob/three.js/blob/dev/examples/webxr_ar_hittest.html
これをベースに、以下４点を追加修正する。
metaタグにAPIを追加
Trialを有効にするため、以下のmetaタグを追加する。
<meta http-equiv="origin-trial" content="Av6Ffg7c6C73JHnU5uvNwLa0pkYAGXec+zM5a25FnibNo/fsqYxU3tTACBgb3CuC・・・・・・・6dHJ1ZX0=">ライブラリを取得
以下から利用するライブラリを取得して設定する。
https://github.com/mrdoob/three.js
requiredFeaturesの設定
plane-detectionを使うため、requiredFeaturesを設定する。
document.body.appendChild( ARButton.createButton( renderer, { requiredFeatures: [ 'hit-test', 'plane-detection' ] } ) );
plane情報の取得
setAnimationLoop 処理内にplaneの取得処理を追記する。
とりあえずログ出力のみ。
// ここからPlane Detection APIの実装を追加する
const detectedPlanes = frame.detectedPlanes;
let planePoseArray = [];
let planeVerticesArray = [];
detectedPlanes.forEach(plane => {
const planePose = frame.getPose(plane.planeSpace, referenceSpace);
const planeVertices = plane.polygon;
planePoseArray.push(planePose);
planeVerticesArray.push(planeVertices);
})
if (planePoseArray.length > 0) {
console.log(planePoseArray);
console.log(planeVerticesArray);
}
まとめ
これだけで、Chromeブラウザのconsole上にずらずらとplaneの情報っぽいものを取得することができた。
verticesが取れているので、次回はこのmeshを作成して表示してみよう。