目次
はじめに
本書を手に取っていただき、誠にありがとうございます。
本書は、Babylon.js勉強会の活動の一環として、Babylon.jsをもっと広めたいという有志の熱意から生まれ、2024年5月の「技術書典16」で発売した「Babylon.js レシピ集 Vol.4」をもとに、加筆修正されました。今回はBabylon.js 7.0の各種機能紹介、グラフ構造、Re:Earth連携などの可視化表示機能の拡張への応用、新しい空間コンピューティングデバイスApple Vision ProとWebXRなど、多方面のコンテンツが詰まっています。もしご興味をもっていただけたら、ぜひBabylon.js勉強会1にも参加してみてください。
Babylon.js レシピ集 vol.4 著者代表 / 藤原貴之
免責事項
本書に記載された内容は、情報の提供のみを目的としています。したがって、本書を用いた開発、製作、運用は、必ずご自身の責任と判断によって行ってください。これらの情報による開発、製作、運用の結果について、著者はいかなる責任も負いません。
Babylon.jsの基本的な情報について
本書では、Babylon.jsの基本的な説明について一部省略することがあります。公式ドキュメント2や「Babylon.js レシピ集 Vol.1」3をご覧いただければ幸いです。
用語定義
本書では、3次元形状をもつ図形について、以下のように定義しています。
・メッシュ：テクスチャや色はついておらず、単に形状がわかるもの（例：直方体、球）
・3Dモデル：メッシュにテクスチャや色がついていて、客観的に何かを認識できる
また、Playgroundを既知の情報として扱います。Playgroundとは、ブラウザで表示されるサイトです。
Babylon.jsのコードを記述すると、動作確認ができます。
Playground上で保存された情報は公開されるので、誰でも確認できます。
表記関係について
本書に記載されている会社名、製品名などは、一般に各社の登録商標または商標、商品名です。会社名、製品名については、本文中では©、®、™マークなどは表示していません。
第1章 Babylon.js 7.0の注目機能をキャッチアップ！
2024年3月末に、ついにBabylon.js 7.0がリリースされましたね。みなさんはもう使ってみましたか？本章では、4月28日に行われたBabylon.js勉強会 vol.3でお話しした内容をもとに、Babylon.js 7.0の新機能をまとめてみるという内容です。
1.1 はじめに
1.1.1 著者紹介
にー兄さん1と申します。普段は株式会社ホロラボというところで、ソフトウェアエンジニアとしてARアプリケーション開発をしています。UnityやWebが好きで、とくに趣味活動ではBabylon.jsを使った個人開発としてOSSライブラリや技術デモを作っています。また、Babylon.jsの日本ユーザーグループである「Babylon.js勉強会」の運営もしています。
1.1.2 本章の概要と対象読者
本章は、2024年4月末に行われたBabylon.js勉強会～Babylon.js v7リリース記念～2にて、筆者が発表した内容を文章化したもの（を目指して作ったもの）です。
1.1.3 スライド資料
本章の元となったスライド資料はSpeakerDeckにアップしていますので、ご参考ください。
・https://speakerdeck.com/drumath2237/whats-new-in-babylonjs-v7
1.2 Babylon.js 7.0のリリースについて
GitHub上でのリリース3は日本時間で3月28日、リリースを告知するXのポスト4は日本時間の3月29日に行われました。その前にも徐々に公式から7.0で発表される予定の機能がいくつかポストされており、筆者はワクワクしながらこの日を待っていました。また、恒例となったメジャーバージョンのリリースビデオ5も公開されました。かっこいいですね。
Babylon.jsのメジャーバージョンは、5.0からは1年周期で春にリリースされています。対して、マイナーバージョンやホットフィックスは1週間弱の間隔でリリースされるため、比較的アップデート頻度が高いと言えるでしょう。
そんなこともあり、Babylon.jsのメジャーリリースの際にはちょっとしたお祭りのような雰囲気があり、公式フォーラムでも盛り上がりを見せていました。また、同時期に「BabylonX」という新しいプロジェクトも始動したらしく、今後の動向に注目が集まっています。
1.3 Babylon.js 7.0の注目機能総ざらい
今回の7.0のリリースの際には、注目機能として、次に示す10個の項目が発表されました。
・Procedural Geometry (NGE)
・Global illumination
・Gaussian Splatting
・Ragdoll physics
・WebXR improvements and Apple Vision Pro support
・Advanced animation system updates
・Greased Line
・Advanced Ground Projection
・Seamless texture decals
・MMD Support
これらの項目について、簡単にではありますが、ひとつひとつ紹介いたします。
1.3.1 Procedural Geometry (NGE)
こちらは、Node Geometry Editor6というツールのことを指しています。元々Babylon.jsには公式から提供されるノードベースのツールはいくつか存在しており、今回はそのツールがひとつ新しく発表された流れになります。ちなみに、既存ツールではマテリアル(シェーダ)、パーティクル、プロシージャルテクスチャなどをノードベースで構築できます。
NGEでは、ノードを組み合わせて3D形状を作成できます。たとえば、複数のGeometryをブーリアン演算で結合したり、複製したりできるみたいですね(図1.1参照)。
そして、作成したNGEのプロジェクトはローカルに保存・読み込みができるようになり、またBabylon.jsのコードとして読み込んだり、glTF形式に保存したりできます。結構高機能ですよね。
1.3.2 Global Illumination
次に、Global Illuminationについて紹介します。いわゆるリアルタイムGIの機能を指しており、シーン中の間接光をレンダリングに反映できるため、図1.2のように、自然界で発生する光の照り返しのような表現が可能になります。
公式ドキュメント7によると、Reflective Shadow Mapというアルゴリズムを用いているらしいです。簡易的な実装なためクオリティは多少犠牲になりますが、軽量に動作するとのことです。
1.3.3 Gaussian Splatting
みなさんは、3D Gaussian Splatting（以下3DGS）という技術をご存知でしょうか。3DGSは複数の画像を学習して、そこから未知の画角で撮影された場合の画像を生成する、いわゆる自由視点画像生成技術です。似たような手法にNeRFというニューラルネットワークを用いて表現するものがありますが、3DGSはガウシアンというスケールと色を保持した点群のようなものによって、自由視点画像を表現します。
3DGSは一般的なフォトグラメトリやLiDARスキャンで得られるようなデータ形式ではないものの、撮影された対象物を高クオリティで3次元的にレンダリングし、リアルタイムに描画できるため、話題になりました。
1.3.4 Ragdoll Physics
Ragdoll Physicsは、ボーンやSkinnedMeshへ物理挙動を付与できる機能です。これは実際に動いているものを見たほうが早いので、公式が出しているPlayground8をチェックしてみてください。Playgroundでは、ragdoll機能をオンにすると、床にだらっと人形や人のモデルが横たわるようなものが公開されていました。
1.3.5 WebXR機能追加とApple Vision Pro対応
WebXRについては、公式ページに明言されているわけではなく、Playgroundが公開されていました。そして、公式Xアカウントからのポスト9を見ると、どうやら次の機能が目玉のようです。
・フルスクリーンGUI
・Touchable UI Elements
・ワールドスケール
・ハンドとコントローラの同時使用
また、話題になっているAppleの新HMDデバイスであるApple Vision Proでも、Babylon.jsのWebXR機能は動作します。といっても、これはBabylon.jsが対応したというよりは、Apple Vision Proに搭載されているSafari on visionOSというブラウザがWebXRに対応しているため、動きますよという感じです。
しかし注意なのが、Safari on visionOSではデフォルトでWebXR機能は無効になっているため、設定からフラグを有効化しないと使えない点です。またフラグを有効化しても、WebARの機能は現状使用できず、VRモードでのみ試すことができます。
WebXRの各種機能については第3章、Apple Vision ProとWebXRについては第8章もあわせてご覧ください。
1.3.6 Advanced Animation System Updates
公式の発表ではAdvanced Animation System Updatesとなっていましたが、ドキュメントへのリンクを見ると、おそらくAnimation Group Maskのことを指しています。Babylon.jsにはAnimationGroupという、複数のオブジェクトにまとめてアニメーションを適用するなどができる機能があります。そのAnimationGroupに対して、オブジェクトの名前によってそのアニメーションを適用する範囲を制限(マスク)できるのが、Animation Group Maskということですね。
AnimationGroupMaskを生成する際に、コンストラクタにはオブジェクトの名前の配列とオプションとしてそれらを「含めた」マスクにするのか、「除いた」マスクにするのかを指定できます。
AnimationGroupMaskの生成
new BABYLON.AnimationGroupMask(
[sphereA.name, sphereB.name],
BABYLON.AnimationGroupMaskMode.Include
);
new BABYLON.AnimationGroupMask(
[sphereA.name, sphereB.name],
BABYLON.AnimationGroupMaskMode.Exclude
);1.3.7 Greased Line
Greased Lineは、線（Line）を描画するための機能です。実態としてはMeshなのですが、Meshを線のように描画するためのAPIが色々加わっているような感じです。
詳細はドキュメント10を参照してもらえると嬉しいですが、色や幅・描画方法などを設定して頂点を追加していくことで線が描画されます。また、インスタンシングやLazyモードなどがあり、大量描画を想定した使い方もできそうですね。
1.3.8 Advanced Ground Projection
Ground Projectionは、Skyboxの機能のひとつです。Babylon.jsのSkyboxは、大きなCubeオブジェクトを作成し、それに対してCubeMapを貼り付けてバックカリングを無効化するという方法をとります。つまり、背景全体が大きなCubeオブジェクトなわけですね。
Ground Projectionでは、そのCubeの底面をY座標0の高さに合わせることで疑似的にSkyboxに合った地面を作る機能です。試してみると結構感動するので、ぜひPlayground11を見てみてください。
1.3.9 Seamless Texture Decals
Seamless Texture DecalsはDecal機能の性能向上を指しているようでした。Babylon.jsには以前からDecalが使えます。Decalとは、メッシュに対してテクスチャを模様として貼り付ける機能です。シールを貼るような感覚に近いですね。
Decalは複数のUV座標を扱う機能ゆえに、Babylon.jsではUVの境界を跨いだDecalの描画にはアーティファクトが発生していたようでした。そのアーティファクトが7.0からは発生しないように修正されており、それが今回のSeamless Texture Decalsの内容のようです。
1.3.10 MMD Support
MMD（MikuMikuDance）というソフトでサポートされているPMX形式のモデルファイルと、VMD形式のモーションファイルを読み込んで表示できる機能です。Babylon.js勉強会でもLT登壇されたnonameさんが実装され、強力な機能やフォーマットの最適化・パフォーマンス最適化のための仕組みが色々組み込まれています。
機能の全容は、公式ドキュメント12をご覧ください。また、Playground13には初音ミクのモデルを躍らせているものが公開されており、とても新鮮に感じましたね。
1.4 おわりに
Babylon.js 7.0のリリースで色々機能追加がありましたね。Babylon.jsの開発が活発であることがうかがえる内容だったと感じています。筆者もまだ全然追い切れていないですが、これから徐々に7.0を使って慣れていければと思っています。