Babylon.js 7注目機能を 軽率にまとめてみる にー兄さん@ninisan_drumath Babylon.js勉強会 vol.3

にー兄さん(@ninisan_drumath) 株式会社ホロラボ ソフトウェアエンジニア Iwaken Lab. / Babylon.js勉強会運営 お仕事ではUnityを使ったxR開発がメイン 趣味ではBabylon.jsをよく触る うちの猫たち→

本日の話 対象者はBabylon.jsに興味がある皆様 普段からBabylon.jsで開発をしているBabylonians Babylon.js気になるな......って方 Babylon.js v7のリリース内容をキャッチアップしましょう 「こんな機能あるんだ、使ってみたい！」 と思ってもらえると嬉しいです

アジェンダ 1. はじめに 2. Babylon.js v7 リリース 3. Babylon.js v7注目機能 4. おわりに

Babylon.js v7リリース

Babylon.js v7、触りました。。。？ 私はちょっとだけさわさわしてみました まだ自作ライブラリに組み込めてない これから新規PJを作成する際にはv7でいいかなって思ってます

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出てました

かっこいいリリースビデオも発表されましたね

公式から注目機能一覧が発表

公式から注目機能一覧が発表 ● 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

Babylon.js v7注目機能

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

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

Gaussian Splatting 3D Gaussian Splatting のデータを読み込み・表示できる機能 公式フォーラムで投稿された実装が元となり コミュニティメンバーによって実装 実験的機能として6.33.0 から存在したが、 正式版として7.0 で発表された .ply/.splat形式の両方に対応 PG: https://playground.babylonjs.com/#45KYTJ#8 Doc：https://aka.ms/babylon7GSplatDoc

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

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

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

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

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

Advanced Ground Projection Skyboxの機能の一部 Cubeマップを貼るCubeの底面を 架空の地面のように見せることができる PG: https://playground.babylonjs.com/#25JK74#0 Doc: https://aka.ms/babylon7GProjDoc

Seamless texture decals Decal（メッシュに対して模様を描画する 仕組み）の一部機能 Decal機能自体はｎ年前にあったが 異なるUVの境界を横切って配置された Decalで発生するアーティファクトが発生してい た問題を解決（v6.33.1~） Doc:https://aka.ms/babylon7SeamTsDoc

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

おわりに

まとめと所感 先月末にv7がリリースされ、魅力的な機能追加が発表された 全く新しい機能から一部機能の強化など粒度は様々 注目機能一覧が出るの、いいね👍 実はv6から徐々にアプデしてるので、 突然使えるようになったわけではない機能ばかり これからのBabylon.jsにも期待！ BabylonXの話もありますね……

参考文献 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/