R3FXRでdepth sensing使えた！！

r3fxrのdepth sensing

半年前に公式のサンプルでWebXRのdepth sensingは触れたが、この記事の時点ではr3fのxrのライブラリはサポートしてなくて自分で実装することはあきらめた

bibinbaleo.hatenablog.com

そしてXRKaigiのセッションで、再びこれが紹介されて、そういえば今どうなったかな～とおもって調べたらなんとサポートしてた！！

記事書いた２か月後にサポートしてたのか～

github.com

ということで触ってみる！

ちなみにreact-three/xr公式のdepth sensingのサンプルはこれらしい。車どーん

https://pmndrs.github.io/xr/examples/stage/

実装

r3fxrのv6.2以上の環境を用意できればdepth sensingをオンにするのは簡単。

const store = createXRStore({

  depthSensing: true,

});

を書くだけ。デフォルトではfalseになっているので書く必要はある

Store - xr

handモデルもオフにすると手に対して何もモデルが出ないのですっきり。もしくは半透明のモデルとかを用意したほうがよさそう。

  hand: { teleportPointer: true, model: false },

v6の新しいプロジェクトを作るのに、いろいろ難航してすごい時間かかったが、最終的には以下のバージョンの組み合わせで作った・・・

  "dependencies": {

    "@react-three/fiber": "^9.0.0-alpha.8",

    "@react-three/xr": "^6.6.2",

    "next": "15.1.6",

    "react": "^19",

    "react-dom": "^19",

    "three": "^0.173.0"

  },

  "devDependencies": {

    "@eslint/eslintrc": "^3",

    "@types/node": "^20",

    "@types/react": "^19",

    "@types/react-dom": "^19",

    "eslint": "^9",

    "eslint-config-next": "15.1.6",

    "typescript": "^5"

  }

react19だとr3fが動かないから、react-three/fiber@alphaなるものを入れた

github.com

react18でやるといろいろエラーが出て解決できなかった；；

dreiはそこについてきてない？？でも-force legacyで動いた

github.com

動かす

Qeustだと動いた

ガビガビ

スマホAndroidChromeだと動かなかった。

公式のサポート表だとChrome for Android, 90はサポートして、それ以外はサポートしていないということになってる。R3FXRのdepth sensingとは違うのかな

immersiveweb.dev

90というのはChromeのバージョンのことだろうか

ぼかし

最初に試したサンプルはオクルージョンにぼかしがかかってていい感じだった。

コード。

github.com

パラメーターがgpu-optimizedなのはさすがに関係ないかな？

Geminiに聞いたけどいまいちどこでぼかしの処理をしているのかわからない。

なに作ろうかな～

r3fなどを作っている組織？がやっているgltfのマーケット

market.pmnd.rs

かわいいキャラも少しいるのでこの子たちとの記念写真ARとかにしようかな？

囲まれる感じ