Babylon.jsでやるWebAR開発の学習
泡沫京水WebARがやりたい
みんなに使ってもらいやすい環境でARがしたい！
って思ったらWebARに行きつきました
使うライブラリ
Babylon.js
元々、Web上で3DCGを扱うためのライブラリ（Three.jsとかの類似）。
それに加えてxRに対応している（Web xR Device APIのラッパー関数がある）
現段階では、AR機能はAndroidのChromeのみ対応しており、所持している実機のPixel 6aを使って
実際の動作確認を行うよ
泡沫京水使用する技術について
TypeScript
JavaScriptのスーパーセットと呼ばれているもの、動的型付言語のJavaScriptを静的型付言語として扱えるようにする技術
Babylon.js
前述したので省略
Bun
Zig言語で記述されたパッケージマネージャ、トランスパイラなどの機能をもつツールキット
Node.jsやDenoなどのパッケージマネージャの後発で、
前述の2つと比べてパッケージのインストールが早かったり、トランスパイル・テストまで可能なので
ツールキットと公式は呼称している
泡沫京水今回実現するARアプリについて
イラストがカメラの画角の中に入ると、そのイラストの関連情報をテキストで表示するARアプリ
やること
- イラストをARマーカとして保存し利用する
- ベースのARプログラムを書く。（ARを利用するセッションを呼び出すプログラム）
- マーカを読み込むプログラムを書く（AR内でマーカを認識させ、任意の処理を発生させるプログラム）
泡沫京水使うイラスト
アイコンにしてある画像を使います。
これの関連情報として、「自分が好む雰囲気の画像がなかったので、自分でCanvaで作成したもの」
というテキスト情報を与えます
泡沫京水環境構築
この方の環境構築方法を参照します。
泡沫京水
これを参考にしてARプログラムを書く。
「Image Tracking」がいわゆるマーカーベースARに相当するARになるので
これを参考にする
泡沫京水いったんボールだけ出してみたのがこのリポジトリ
泡沫京水ARする前に、そもそもそのブラウザがAR対応しているかどうかを検証する必要がある。
if ("xr" in window.navigator) {
navigator.xr.isSessionSupported("immersive-ar").then((isSupport) => {
if(!isSupport){
throw new Error("AR非対応です")
}
})
} else {
throw new Error("xRが非対応です")
}
まあ、現時点でAndroidのChromeしか対応してないということを踏まえると、そもそも
Androidで開いていて、かつブラウザがChromeであるかどうかを検証した方が早い
といわれるとなんともいえなくなる