Babylonjsレシピ集 vol.7に寄稿してみた

この記事は、Babylon.js Advent Calendar 2025の12/12分の記事になります。

こんばんは、かーでぃです。Babylon.jsとはBabylon.js勉強会が立ち上がった初回イベントから参加させて頂いており、技術書典にも今のところ、フル参加させてもらっております。

が、JavaScriptはレガシーなところしかしらず、モダンなJavaScriptに色々と苦しめられております💦

なぜ「ARチェアリング」を作ったのか？

「作りたかったから」

単純に言えばそーなんですが……もうちょっと深掘りします（笑）

Babylonjsレシピ集も今回でvol.7です。多種多様なコードの掲載と解説が特徴のシリーズですが、VRについての記事はあってもARについての記事はこれまでありませんでした（なかったハズです）。
ということで、ちょっと自分としてもARに興味があったので、調べつつ書いてみた、という感じです。

そもそもチェアリングとは？

チェアリングとは、大自然に抱かれながら日常を忘れ、アウトドアでリラックスするレクリエーションの一つです。

👆こんな感じにアウトドア用のチェアを広げて、リラックスしながらコーヒーを飲む…☕
贅沢な時間ですよね♪
毎週末、だいたい近所の河辺や海辺に出かけて、こんな感じでコーヒー淹れてますｗ
「大自然の中心で～シリーズ」も執筆しておりますので、よかったら是非♪

ARチェアリング

こちらの黒いチェア。
実は実態がありません。ARで重ね合わせたチェアになります。

このように、ARチェアリングでは、実際のスペースにチェアを置いたらどうなるか…どんな景色が楽しめるのか、というのをチェアを置く前に調べることのできるツールです。

こちらのQRを読み込んで貰えれば動きます。

https://playground.babylonjs.com/#B9OCCI#3

が、実はこちらのコード、Android端末の一部の機種しか動きません💦

ARチェアリングの仕組み

ARチェアリングは、WebXR（immersive-ar）を使っています。そして、こちらのライブラリが、iOSでは未対応。iPhoneでは動かせません。。。
そして、Androidでも一部の端末しか動かないという、なかなかニッチなコードだったりします。

ちなみにチェアについては、手持ちのチェアをスキャンしようとしたのですが、自分のiPhoneがボロすぎてスキャンできず……結局、CX20さんに提供してもらったチェアをそのまま活用させてもらっています（感謝！）

WebXRのキモ

Babylon.jsでARを実現するうえで、重要となるのが WebXR の仕組みです。特にARモードの起動と、モデルを地面に置くためのヒットテスト（Hit Test）は、理解しておくと実装が一気にラクになります。

まずはXR環境を生成します。

const xr = await scene.createDefaultXRExperienceAsync({
    uiOptions: {sessionMode:"immersive-ar",referenceSpaceType:"local-floor"}
});

これだけで、スマホのカメラ映像を背景にしたAR空間が立ち上がります。続いて、平面検出に必要なヒットテスト機能を有効にします。

const hitTest = await xr.baseExperience.featuresManager.enableFeature(
  BABYLON.WebXRHitTest.Name,
  "latest"
);

ヒットテストの結果はフレームごとに取得でき、例えば次のように「置ける場所」にチェアモデルを追従させられます。

const fm = xr.baseExperience.featuresManager;
const hitTest = fm.enableFeature(BABYLON.WebXRHitTest.Name, "latest",
    { enableTransientHitTest: true }
);
const reticle = BABYLON.MeshBuilder.CreateCylinder("ret",
    { diameter: 0.2, height: 0.002 }, scene
);
reticle.rotationQuaternion = new BABYLON.Quaternion();
reticle.isVisible = false;

タップした瞬間に追従を止めれば“その場に置く”操作が完成します。複雑なAR処理を意識しなくても、Babylon.jsがWebXRを上手く抽象化してくれるおかげで、ブラウザだけで「そこにある感じのチェア」を簡単に実現できます。

scene.onPointerDown = () => {
    if (!latestHit) return;
    const box = BABYLON.MeshBuilder.CreateBox("box", { size: 0.15 }, scene);
    box.position.copyFrom(latestHit.position);
    box.rotationQuaternion = latestHit.rotationQuaternion?.clone() || BABYLON.Quaternion.Identity();
};

スマホがWebXRに対応していれば、これだけでARが実装できます🙌

最後に

詳細はぜひ、こちらの「Babylonjsレシピ集 vol.7」を手に取ってみてください🙇
ARに配置するだけではなく、リアルっぽさを出すためのテクニックなども掲載しております。