Babylon.js7がリリースされたので最新機能をキャッチアップ

2.5K Views

May 16, 24

スライド概要

2024/4/18に実施されたHololab Conference 2024のセッションスライドです。

■セッションアーカイブはこちら
https://www.youtube.com/playlist?list=PLcIuMEVR3eYegP17SKG_UPgERmmGStEr_

ーーー
■公式HP
https://hololab.co.jp/

■公式Twitter
https://twitter.com/HoloLabInc

profile-image

ホロラボです Unityを使用したHoloLensのアプリ開発を中心にしています。 最近では建設業でのBIMデータ、製造業でのCAD データ、空間の3Dスキャン(点群データやメッシュデータ)も扱っています。 物理世界とデジタル世界をどのように連携するか。ということを日々考えています。

シェア

またはPlayer版

埋め込む »CMSなどでJSが使えない場合

関連スライド

各ページのテキスト
1.

Babylon.js 7がリリースされたので 最新機能をキャッチアップ! 株式会社ホロラボ 堤海斗 HoloLab Conerence 2024 Copyright© HoloLab Inc. All rights reserved 1

2.

はじめに Copyright© HoloLab Inc. All rights reserved 2

3.

自己紹介 堤海斗 / にー兄さん • 株式会社ホロラボ ソフトウェアエンジニア • 今月で入社2年目 • Unityを使ったAR開発をしています 趣味 • Babylon.js勉強会運営 • Babylon.jsやUnityを使った デモ・OSSライブラリの公開 • LT登壇・執筆活動 Copyright© HoloLab Inc. All rights reserved 3

4.

本日の話 • Web3Dレンダリングエンジン “Babylon.js” • 概要とその魅力、そして最新リリースについてご紹介 • 「Babylon.js面白いじゃん」「ちょっと使ってみたいな」 って思っていただけると嬉しいです Copyright© HoloLab Inc. All rights reserved 4

5.

アジェンダ 1. はじめに 2. Babylon.jsについて 3. Babylon.js 7のリリースを追う Copyright© HoloLab Inc. All rights reserved 5

6.

Babylon.jsについて Copyright© HoloLab Inc. All rights reserved 6

7.

Webブラウザでの3D表現 • 昨今の端末スペック向上やWebブラウザの進化により Web上でもリッチな3Dレンダリングが可能 • WebGPUのような新しいグラフィックAPIも登場 • 用途は様々 • ゲーム • バーチャルショールーム • メタバース • URLにアクセスしてすぐ体験できる手軽さが売り • インストール不要・リリース容易性 https://doc.babylonjs.com/setup/support/webGPUより • クロスプラットフォーム • 一部の機能はOS固有のものもある Copyright© HoloLab Inc. All rights reserved 7

8.

Web上で動く3Dアプリケーションを作るには • もっとも主流なのはWebGL(WebGPU)APIへ Canvas要素経由でアクセスする方法 • ラッパーライブラリを使うことが多い • Three.js • Babylon.js • Playcanvas • PixiJS • Unity Webビルドなど • etc… Copyright© HoloLab Inc. All rights reserved 8

9.

Web上で動く3Dアプリケーションを作るには • もっとも主流なのはWebGL(WebGPU)APIへ Canvas要素経由でアクセスする方法 • ラッパーライブラリを使うことが多い • Three.js • Babylon.js 本日の主役 • Playcanvas • PixiJS • Unity Webビルドなど • etc… Copyright© HoloLab Inc. All rights reserved 9

10.

Babylon.jsの概要 • "powerful, beautiful, simple, and open web rendering engines“ • Web3Dレンダリングエンジン(言い方は様々) • Microsoft社が中心となり一緒にコミュニティメンバー が開発しているOSSライブラリ • 公式サイト:https://babylonjs.com/ • GitHub:https://github.com/BabylonJS/Babylon.js Copyright© HoloLab Inc. All rights reserved 10

11.

ユーザ(開発者)から見た魅力 • フルTypeScriptサポートによる強力な型付け • 公式で提供されるツール群が豊富 • Playground • ノードベースツール(Material, Geometry) • GUI Editor • ドキュメントが充実 • 日本語文献はまだまだ少ない • 後方互換性がゴールデンルール • メンテナンス体制がしっかりしている • フォーラムが活発 Copyright© HoloLab Inc. All rights reserved 11

12.

Babylon.js 7のリリースを追う Copyright© HoloLab Inc. All rights reserved 12

13.

Babylon.js 7のリリース! • 3月29日(日本時間)に7.0リリース! • 新機能や新ツールなどが発表された • GitHubリリースページ https://github.com/BabylonJS/Babylon.js/release s/tag/7.0.0 • リリース周期 • 5.0以降は年に1回のMajorリリース • MinorリリースやHotfixは1週間弱間隔 Copyright© HoloLab Inc. All rights reserved 13

14.

注目機能一覧 • 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 Copyright© HoloLab Inc. All rights reserved 14

15.

注目機能一覧 • 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 Copyright© HoloLab Inc. All rights reserved 15

16.

Procedural Geometry (NGE) • Node Geometry Editor • ノードを使ってプロシージャルに 3D形状を作成できる Webツール • プロジェクトファイルの保存、 コードのエクスポート、 GLBファイルの出力に対応 • https://doc.babylonjs.com/toolsAndResources /nge Copyright© HoloLab Inc. All rights reserved 16

17.

Global illumination • リアルタイムGI • 間接光を考慮したライティングを実現 • Reflective Shadow Mapsというア ルゴリズムで簡易的なGIを実装 • Doc: https://aka.ms/babylon7GIDoc Copyright© HoloLab Inc. All rights reserved 17

18.

Gaussian Splatting • 3D Gaussian Splattingのデータを 読み込み・表示できる機能 • 公式フォーラムで投稿された実装が 元となりコミュニティメンバーによって実装 • 実験的機能として6.33.0から存在したが、 正式版として7.0で発表された • .ply/.splat形式の両方に対応 • Doc: https://aka.ms/babylon7GSplatDoc .splatデータをBabylon.js Sandboxで動かしている様子 Copyright© HoloLab Inc. All rights reserved 18

19.

WebXR機能追加 • 公式ツイートで紹介されていた項目 • VRHMD向けの機能が拡充 • フルスクリーンGUI • Touchable UI Elements • ワールドスケール • ハンドとコントローラの同時使用 https://twitter.com/babylonjs/status/1770133134949937177 Copyright© HoloLab Inc. All rights reserved 19

20.

Apple VisionPro対応 • Apple VisionProでも動くデモが公開 されている • Safari on visionOSではWebXRの VRモードが動作しハンドトラッキングが 動く • SafariではデフォルトでWebXR機能はは 無効になっているので有効化する必要あり https://twitter.com/babylonjs/status/1769770743414325324 Copyright© HoloLab Inc. All rights reserved 20

21.

Greased Line • 空間に線(Line)を描画する機能 • 頂点を登録すれば線を描画でき、 幅や色などのプロパティを変更可能 • インスタンシングやLazyモードがあり、 大量の描画も想定 • 内部的にはMeshとして扱われる • Doc: https://aka.ms/babylon7GLDoc https://playground.babylonjs.com/#H1LRZ3#52 Copyright© HoloLab Inc. All rights reserved 21

22.

MMD Support • PMX形式のモデルファイルと、 VMD形式のモーションファイルの 読み込みに対応 • 専用のマテリアルや音楽との同期機能も追加 • 3DGSと同様にフォーラムの投稿がキッカケで コミュニティの実装が元となって機能追加 • 公式から音楽に合わせてダンスを踊らせてい るサンプルが公開されているのが印象的 https://playground.babylonjs.com/#028YR6#18 Copyright© HoloLab Inc. All rights reserved 22

23.

おわりに Copyright© HoloLab Inc. All rights reserved 23

24.

まとめ • Babylon.jsはWeb上で3Dアプリケーションを構築するためのエン ジン • 7.0がリリースされ魅力的な機能群が追加された Copyright© HoloLab Inc. All rights reserved 24

25.

参考文献 • Introducing Babylon.js 7.0 https://babylonjs.medium.com/introducing-babylon-js-7-0-a141cd7ede0d • GitHub Release – Babylon.js 7.0.0 https://github.com/BabylonJS/Babylon.js/releases/tag/7.0.0 • 公式サイト https://babylonjs.com/ • 各新機能のドキュメントリンク https://doc.babylonjs.com/toolsAndResources/nge https://aka.ms/babylon7GIDoc https://aka.ms/babylon7GSplatDoc https://aka.ms/babylon7RagdollDoc https://aka.ms/babylon7AnimMaskDoc https://aka.ms/babylon7GLDoc https://aka.ms/babylon7GProjDoc https://aka.ms/babylon7SeamTsDoc https://aka.ms/babylon7MMDDoc Copyright© HoloLab Inc. All rights reserved 25