以前はWeb上で３Dコンテンツを再生したい場合、AdobeのFlashが主流でした。Flashは終了して最近ではWebGLが発展しています。UnityとUnrealが慣れた人間はWebでの３Dアプリの開発は苦労してUnityと近いエディターが望まれるかもしれません。
そんな理由で今回は私がお勧めするWebで３Dアプリを作成するBabylonJSをご紹介したいと思います。
BabylonJSとは
BabylonJSはMicrosoftが開発したJavascriptまたはTypescriptを使用した3Dエンジンです。
最近、新しいアップデートがあって機能が大きく拡張されて人気になっております。
これによってWebXRへの対応が行われました。
BabylonJSとThreeJSの違い
現在の市場でWebGLのフレームワークがたくさんあります。最も有名な技術はThreeJSです。BabylonJSとThreeJSはどんな違いがあるか？なぜ、BabylonJSの方は話題になっているのか？をお話ししたいと思います。
ThreeJSは、WebGLを使用して３DCGをWeb上で表示するライブラリです。
BabylonJSは同じ機能を持っています。BabylonJSはWeb上３Dゲーム開発で主に利用されているようです。単なる３DCGを表示するライブラリだけでなくコライダーとシェーダーなどもサポートしています。
OculusをはじめいろいろなHMDと接続できます。WebXRを再生してHMDのコントローラーのinputもサポートしています。
BabylonJSのメリット
Web上のEditorがある。
フレームワークを使ってWeb開発する場合はnpmでライブラリをインストールして、ソースコードにライブラリの機能を呼び出すというイメージが多いです。
例えば：Reactライブラリを利用し、フロントエンドを開発する場合、まず、Terminalで「npm install react」コマンドでインストールすることが必要です。
次は「npm start」コマンドで開発したＵＩを確認します。
でも、３Ｄアプリの開発は違います。UnityとUnrealのSceneウィンドウズのようなものが必要です。
ThreeJSは画面のようなUIがないため、確認したい場合、ブラウザをリフレッシュする必要があります。３Dアプリはオブジェクトと色を設定することが多ので、すこし時間がかかります。
一方でBabylonJSはWeb上のEditorがあります。UnityユーザーまたはUnrealユーザーには馴染みのあるUIです。なにもインストールする必要はなくすぐにBabylonJSを体験できます。
ソースコードまたコンテンツを修正するとすぐに反映しますので、ブラウザのリフレッシュは必要なく便利です。
https://playground.babylonjs.com/
クロスプラットフォーム
WebアプリはPCとモバイルのブラウザはもちろん、HoloLens2とOculusもBabylonJSは対応します。
OculusはThreeJSとAframeも対応しているですが、HoloLens2はBabylonJSのみです。
HoloLens2とBabylonJSは両者ともMicrosoftなので、関連性が高いです。ハンドトラッキング、音声認識などというHoloLens2の機能をBabylonJSでも利用することができます。
下記のGithubではbabylonJSでHololens開発を体験できます。
https://github.com/iwaken71/babylon_hololens_piano
AWSのサポート
AWSのAR/VRのサービスはSumerianですが、2023年1月23日に終了することが発表されています。代わりにAWSはBabylonJSとAmplifyを連携してVR/ARアプリを開発できるようになるようです。
現在、AWSはBabylonJS用のライブラリを提供しています。AWS SDK for Javascriptといいます。
Sumerian Hosts in Babylon.js – Amazon Sumerian
３DモデルをAmazon S3に保存してBabylonJSから読み込んで３Dモデルを表示します。また、CloudFrontとRoute53を使って全世界に公開することも可能です。
また、AWSには無償で提供しているアバターがあります。BabylonJSはAWS Pollyサービスを使ってユーザーの声をレコードして、アバターの口のうごきやジェスチャーと声を自動的にを反映します。
AWS Pollyの反映です。
→WebアプリはAWSで運用することが多いです。BabylonJSはAWSの公式サポートがあり連携しやすくコストの管理も簡単になります。
Typescriptが利用できる。
大きなメリットではないかもしれませんが、他のフレームワークはJavascriptを使用することが多いです。TypescriptとJavascriptを比べてみると、Typescriptの方が分かりやすい言語です。
本記事はJavascriptとTypescriptの比較の詳細は記載しませんが、Typescriptがわかりやすい理由は変数のタイプがわかりやすく整理されていいます。基本的なタイプはInteger、StringだけでなくCamera、Sphere、Material、Lightなどがあってしっかりと定義されていますので管理がしやすいです。TypescriptはMicrosoftのものなので、連携性も高いでしょう。
一方でJavascriptは変数のタイプがないため、３Dのプログラミングのために覚えなくてはいけない新しいタイプとクラスが多いです。
結論
以前はWeb上で３Dコンテンツを再生したい場合、AdobeのFlashしかなかったのですが、
Flashプラグインをブラウザにインストールするのはすこし不便でした。モバイルブラウザではもっと不便を感じていました。レスポンシブの対応もできないのとセキュリティの問題も課題でした。
現在、Flashは終了しました。Flashの代わりに最近ではWebGLが発展しています。
BabylonJSは他のフレームワークに比べてまだ新しい技術です。同時にWebXRの技術や応用も発展しています。将来的にアプリは全部Web上で使うのではないでしょうか。
WebXRはまず3Dゲームから普及するのではないかと考えています。しかしこれからは5Gの時代なのでその他の色々な業界もWebXRが発展するのではないかと思います。
WebXRにはいくつかのライブラリがありますがBabylonJSはMicrosoftが力を入れているので、安定性も高いです。Microsoftは毎月ライブラリを更新して不具合修正などのアップデートをしています。また、他のサービス（Azure、AWS、Hololens2）を連携しやすいことも大きな利点です。Webの３Dアプリの開発はBabylonJSをお勧めします。
まとめ
今後、WebXRの需要は増えると考えられます。理由は安価で性能のいいVRデバイスやARグラスが普及するには、まだ時間がかかりそうだからです。
Web上で3D表現ができることは、今後注目されていくでしょう。
最初にWebXRについて勉強を始めるなら、A-Frameをおすすめします。そこからWebXRへの理解を深めて、three.jsなどの勉強を始めるといいでしょう。
しかし、WebXRの開発をどこから手をつけたらいいか分からないと困っている方もいるでしょう。ONETECHでは、数多くのVR・AR・MRでの制作実績があります。
ONETECHの3DCGを制作する3DモデラーからWeb上で3D表現を行なうWebGLを制作できるエンジニアまで揃っていることが強みです。
こちらのURLページは、ONETECHのXR（AR/VR/MR）の過去の開発実績をまとめたものです。ぜひ参考にしてください。
XR(AR/VR/MR) – ONETECH社の開発実績: https://onetech.jp/works-category/ar-vr-mr-jp
ほかにもONETECHはベトナムオフショア開発でAR/MR/VRソフトウェアの開発に力を入れています。AR/MR/VRソフトウェアの開発のご相談はぜひOne Technology Japanへお気軽にお問い合わせください。
■XR開発に特化したベトナムオフショア開発企業 ONETECH
ONETECHは、XRに特化した開発会社です。
VR/ARコンテンツ開発を始めさまざまなシステム開発、アプリ開発、ソフトウェア開発をベトナム オフショアで開発しています。ベトナムのXRトップ企業として紹介されています。
2015年の創業から上場企業からスタートアップ企業までお客様100社以上の300以上のプロジェクトに関わってきた豊富な開発実績があります。
ONETECHはUNITYでAR/VRアプリの開発
AR/VR/MR開発は２０１５年より取り組んでおります。UNITYの技術者育成に力を入れて取り組んでいます。
VR開発：ベトナムでのVR開発分野において最も開発実績のある企業の一つとなっています。
AR開発：ARkit、ARcoreなどを利用して多数のアプリ開発、Babylon.js、8thWallなどでのWebAR開発実績がございます。
UNITY開発：ONETECHはUNITYを利用し様々なVR開発、AR開発、アプリ開発をしています。HoloLens/Oculus/HTC VIVE/Pico/Nreal Lightなど最新のデバイスも取り揃えています。
ホロレンズ開発：ベトナムで最も多くのHoloLens開発実績のある企業の一社です。
WEBXR開発：WEBXRは、仮想現実（VR）、拡張現実（AR）および混合現実（MR）をWebブラウザで利用するための技術スタンダードです。ユーザーは、特別なアプリをダウンロードすることなく、多様なデバイスで豊かな3Dコンテンツを体験できます。
CG制作:製品やゲームのアセット、業務用の映像などの3DCGコンテンツの３DCG制作（モデリング・アニメーション・レンダリング）をエンジニアと連携しながらワンストップで受けることが可能です。
