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

3.3K Views

May 16, 24

#holoconf24 #Babylon.js #Web3D #WebGL #WebGPU #3D開発

スライド概要

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

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

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

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

ホロラボ

@HoloLab

スライド一覧

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

またはPlayer版

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

ダウンロード

ダウンロード(pdf - 1.07MB)

関連スライド

3DモデルとPower BIの悪魔合体「建物みえるくん」をつくってみた！

holoconf23 bim

ホロラボ 34.6K

トヨタのxR活用事例ご紹介～ホロラボとの開発秘話を中心に (ホロラボカンファレンス 2022 トヨタ自動車株式会社栢野様発表スライド)

hololens mixed reality holoconf22

ホロラボ 32.1K

BIMから3次元モデルを消してみたら、意外に便利でした

holoconf23 bim

ホロラボ 30K

3DGS･フォトグラメトリ比較と最新事例

ホロテク24

ホロラボ 19.7K

三菱重工業との取り組み事例　～HoloLensなどを活用した現場向けコミュニケーションツールの開発～

holoconf22 hololens mixed reality

ホロラボ 18.3K

⽵中⼯務店の“建設DX”と “open BIM”と“xR” (ホロラボカンファレンス 2022 株式会社竹中工務店橋口様、川上様発表スライド)

hololens mixed reality holoconf22

ホロラボ 13.6K

各ページのテキスト

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

https://doc.babylonjs.com/setup/support/webGPU

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

Web上で動く３Dアプリケーションを作るには • もっとも主流なのは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.

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

https://github.com/BabylonJS/Babylon.js/releases/tag/7.0.0

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.

16.

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

https://doc.babylonjs.com/toolsAndResources/nge

17.

https://aka.ms/babylon7GIDoc

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

https://aka.ms/babylon7GSplatDoc

19.

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

https://twitter.com/babylonjs/status/1770133134949937177

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

https://twitter.com/babylonjs/status/1769770743414325324

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

https://playground.babylonjs.com/

23.

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