Babylon.js 7注目機能を 軽率にまとめてみる/whats-new-in-babylonjs-v7

Babylon.js 勉強会 vol3で発表した資料です

Transcript

1. Babylon.js 7注目機能を 軽率にまとめてみる にー兄さん@ninisan_drumath Babylon.js勉強会 vol.3
2. にー兄さん(@ninisan_drumath) 株式会社ホロラボ ソフトウェアエンジニア Iwaken Lab. / Babylon.js勉強会運営 お仕事ではUnityを使ったxR開発がメイン 趣味ではBabylon.jsをよく触る うちの猫たち→
3. 本日の話 対象者はBabylon.jsに興味がある皆様 普段からBabylon.jsで開発をしているBabylonians Babylon.js気になるな......って方 Babylon.js v7のリリース内容をキャッチアップしましょう 「こんな機能あるんだ、使ってみたい！」 と思ってもらえると嬉しいです
4. アジェンダ 1. はじめに 2. Babylon.js v7 リリース 3. Babylon.js v7注目機能 4. おわりに
5. Babylon.js v7リリース
6. Babylon.js v7、触りました。。。？ 私はちょっとだけさわさわしてみました まだ自作ライブラリに組み込めてない これから新規PJを作成する際にはv7でいいかなって思ってます
7. Babylon.js v7リリース！🎉🎉🎉 3月28 日（日本時間）に7.0 リリース！ 新機能や新ツールなどが発表された GitHubリリースページ https://github.com/BabylonJS/Babylon.js/releases/tag/7.0.0 ちなみに • リリース周期5.0以降は年に1 回の Major リリース • MinorリリースやHotfix は1 週間弱間隔 • 3日前にv7.4.0出てました
8. かっこいいリリースビデオも発表されましたね
9. 公式から注目機能一覧が発表
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
11. Babylon.js v7注目機能
12. Procedural Geometry (NGE) Node Geometry Editor ノードを使ってプロシージャルに 3D形状を作成できるWebツール プロジェクトファイルの保存、コードのエ クスポート、 GLBファイルの出力に対応 https://nge.babylonjs.com/ docs: https://doc.babylonjs.com/toolsAndResource s/nge
13. Global illumination リアルタイムGI 間接光を考慮したライティングを実現 Reflective Shadow Maps というアルゴリズムで簡易的なGI を実装 Doc：https://aka.ms/babylon7GIDoc
14. Gaussian Splatting 3D Gaussian Splatting のデータを読み込み・表示できる機能 公式フォーラムで投稿された実装が元となり コミュニティメンバーによって実装 実験的機能として6.33.0 から存在したが、 正式版として7.0 で発表された .ply/.splat形式の両方に対応 PG: https://playground.babylonjs.com/#45KYTJ#8 Doc：https://aka.ms/babylon7GSplatDoc
15. Ragdoll physics ラグドールについての機能 ボーンおよびSkinnedMeshに 物理挙動を付与できる メッシュ読み込み時に得られるボーン情報から configを作成して実行可能 const ragdoll = new BABYLON.Ragdoll(skeleton, newMeshes[0], config); RG: https://playground.babylonjs.com/#DLPNQT#0 Docs: https://aka.ms/babylon7RagdollDoc
16. WebXR機能追加 公式ツイートで紹介されていた項目 VRHMD向けの機能が拡充 • フルスクリーンGUI • Touchable UI Elements • ワールドスケール • ハンドとコントローラの同時使用 https://twitter.com/babylonjs/status/1770133134949937177
17. Apple VisionPro 対応 Apple VisionPro でも動くデモが 公開されている Safari on visionOS ではWebXRの VR モードが動作しハンドトラッキングが動く SafariではデフォルトでWebXR 機能はは無 効になっているので有効化する必要あり https://twitter.com/babylonjs/status/1769770743414325324
18. Advanced animation system updates おそらくMasking animations in a groupの ことを指しているっぽい AnimationGroupに対して実行したいアニ メーションを選択制御できる PG: https://playground.babylonjs.com/#56LX6L#9 Doc: https://doc.babylonjs.com/features/featuresDeepDive/animation/groupAnimations#masking-animations-in-a-group
19. Greased Line 空間に線（LineLine）を描画する機能 頂点を登録すれば線を描画でき、 幅や色などのプロパティを変更可能 インスタンシングやLazy モードがあり、 大量の描画も想定 内部的にはMesh として扱われる PG: https://playground.babylonjs.com/#H1LRZ3#52 https://aka.ms/babylon7GLDoc
20. Advanced Ground Projection Skyboxの機能の一部 Cubeマップを貼るCubeの底面を 架空の地面のように見せることができる PG: https://playground.babylonjs.com/#25JK74#0 Doc: https://aka.ms/babylon7GProjDoc
21. Seamless texture decals Decal（メッシュに対して模様を描画する 仕組み）の一部機能 Decal機能自体はｎ年前にあったが 異なるUVの境界を横切って配置された Decalで発生するアーティファクトが発生してい た問題を解決（v6.33.1~） Doc:https://aka.ms/babylon7SeamTsDoc
22. MMD Support PMX形式のモデルファイルと、VMD 形式のモーショ ンファイルの読み込みに対応 専用のマテリアルや音楽との同期機能も追加 3DGSと同様にフォーラムの投稿がキッカケでコミュ ニティの実装が元となって機能追加 公式から音楽に合わせてダンスを踊らせているサン プルが公開されているのが印象的 PG: https://playground.babylonjs.com/#028YR6#18 Docs: https://aka.ms/babylon7MMDDoc
23. おわりに
24. まとめと所感 先月末にv7がリリースされ、魅力的な機能追加が発表された 全く新しい機能から一部機能の強化など粒度は様々 注目機能一覧が出るの、いいね👍 実はv6から徐々にアプデしてるので、 突然使えるようになったわけではない機能ばかり これからのBabylon.jsにも期待！ BabylonXの話もありますね……
25. 参考文献 GitHubのリリース https://github.com/BabylonJS/Babylon.js/releases/tag/7.0.0 リリースポスト https://twitter.com/babylonjs/status/1773416605919383622 What's new / Babylon.js Documents https://doc.babylonjs.com/whats-new#700 Introducing Babylon.js 7.0! https://forum.babylonjs.com/t/introducing-babylon-js-7-0/49132 Introducing Babylon.js 7.0 (Medium) https://babylonjs.medium.com/introducing-babylon-js-7-0-a141cd7ede0d 公式サイト https://babylonjs.com/