🦋

Babylon.jsでWebARコンテンツを作成する

2022/09/08に公開

Web

Babylon.js

tech

概要

WebGLレンダリングライブラリであるBabylon.jsですが、AR機能も備わっています
簡単な導入方法とImage Tracking機能について紹介します
2022年9月現在、WebAR機能はAndroidのChromeのみサポートされています

サンプルを触ってみる

空間にSphereが表示されるサンプルです

URLにアクセスするとSphereが表示されます
右下のアイコンをタップするとARモードに切り替わります

カメラアクセスを許可すると
自分のやや前方にShereが表示されます

デプロイする

次にサンプルを自前のサーバで動かします
まず、先ほどのデモ画面でダウンロードボタンを押しリソースをダウンロードします

ダウンロードしたzipの中にあるindex.htmlを自前のサーバにデプロイします
私はnetlifyを使用しました

サンプルと同じものが動いているのを確認できます

createSceneの関数の中身を編集すれば表示したいものを変更できます

var createScene = async function () {
        
    var scene = new BABYLON.Scene(engine);
    var camera = new BABYLON.FreeCamera("camera1", new BABYLON.Vector3(0, 5, -10), scene);
    camera.setTarget(BABYLON.Vector3.Zero());
    camera.attachControl(canvas, true);
    var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene);
    light.intensity = 0.7;
    var sphere = BABYLON.Mesh.CreateSphere("sphere1", 16, 2, scene);
    sphere.position.y = 2;
    sphere.position.z = 5;

    const xr = await scene.createDefaultXRExperienceAsync({
	uiOptions: {
	    sessionMode: 'immersive-ar'
	}
    });

    return scene;
};

Image Tracking機能

Image Tracking機能のサンプルはこちらにあります

先ほどと同じようにリソースをダウンロードし、自前のサーバにデプロイすればサンプルを動かすことができます。
Image Trackingする画像は下記の部分を書き換えることで変更できます

// Get the Feature Manager and from it the image tracking feature
const fm = xr.baseExperience.featuresManager;
const imageTracking = fm.enableFeature(BABYLON.WebXRFeatureName.IMAGE_TRACKING, 'latest', {
images: [
    {
	//ここのURLを書き換える
	src: 'https://www.oreilly.co.jp/books/images/picture_large978-4-87311-565-8.jpeg',
	estimatedRealWorldWidth: 0.15
    }
]
});

終わりに

Babylon.jsのWebAR機能には他にもHitTestやLight estimationが実装されています。ぜひ試してみてください

概要

サンプルを触ってみる

デプロイする

Image Tracking機能

終わりに

Discussion