夜風のMixedReality

xRと出会って変わった人生と出会った技術を書き残すためのGeekなHoloRangerの居場所

Babylon.jsとは? HoloLensで体験してみた。

今年に入ってからBabylon.jsと呼ばれる新しいWeb用の開発環境を耳にするようになりました。

今回はざっとBabylon.jsが何かをまとめていきます。

〇Babylon.jsとは?

Babylon.jsはMicrosoftが開発したJavascriptを使用したリアルタイム3Dエンジンです。

初版自体は9年前の2013年には登場しておりHLSLを介したブラウザ上での3Dグラフィクスの表示を行うことができるようです。

techcommunity.microsoft.com www.babylonjs.com

最近になって新しいバージョンであるBabylon.js 5.0がリリースされ機能が大きく拡張されたことで大きく話題になっているようです。

これによってクロスプラットフォームへの対応とWebXRへの対応が行われました。

〇Three.jsなどとの違い

 WebXRといわれると筆者はThree.jsを少しだけ触ったことがあります。

 Three.jsはwebGLを使用した3DグラフィックをWeb上で表示するAPIです。

 この辺りはBabylon.jsと同じですが、Babylon.jsは最初からWeb上で動く3Dゲームを意識して開発されているようであり、3Dモデルを表示するだけではなくコライダーなどの物理挙動に加え3人称視点のカメラビュー(3rdパーソンビュー)や重力をサポートしているようです。

docs.microsoft.com

 また近年のアップデートによりOculus などのVR機器を接続したWebXRに対応しておりコントローラーなどのInputも提供されているようです。

〇HoloLens で動かす。

 WebXRに対応しているブラウザ(Microsoft Edge)ではHoloLensでアプリケーションとして体験することができます。

 今回はBabylon.jsのコミュニティを立ち上げたHoloRangerの先輩であるイワケンさんの公開されているGitHubのサンプルを使用してHoloLensで動かします。

github.com

HoloLens 2でGitHubリポジトリを開き、Aboutに記載されているでもページを開きます。

youtu.be

最初の時点では2Dウィンドウにタッチ操作でオブジェクトを回転させますがWindows MixedRealityマークを選択することで没入型アプリでホログラム表示されます。

 HandTrackingとAirTapによる入力が確認できました。

 またテレポートの機能もあるようです。

 今回はざっと触ってみましたが、チュートリアルもあるようなのでいずれ筆者も触っていきたいです。