20230401_Babylon.jsMeetup_Vol.2.pdf

2023/4/1に開催された「Babylon.js 勉強会 vol.2 ~Babylon.js v6 リリース記念~」での発表資料です。

https://babylonjs.connpass.com/event/276698/

Transcript

1. 🗾 Babylon.js User Community in Japan . #BabylonJS #BabylonJS勉強会 Babylon.js 6.0の 新機能紹介 2023/4/1 Limes (Microsoft MVP for Mixed Reality) 2023/4/3 WebGPU の記載を変更しました。
2. 🗾 Babylon.js User Community in Japan . #BabylonJS #BabylonJS勉強会 アジェンダ 1. ⾃⼰紹介 2. Babylon.jsの歴史を簡単に 3. Babylon.js v6.0 代表機能を紹介 4. まとめ
3. 🗾 Babylon.js User Community in Japan . #BabylonJS #BabylonJS勉強会 ⾃⼰紹介 o UnityとVRを中⼼に活動。2018年頃から Babylon.jsを知って情報発信を継続。最近は Babylon.js+WebXR関連で活動中 o Babylon.js勉強会の共同主催者 o 2児の⽗で休⽇は公園や図書館に⾏くことが 多い o Blog : Cross Road https://www.crossroad-tech.com/ Development Technologies (Unity) : 2016/10-2018/7 Windows Development (Windows Mixed Reality) : 2018/7-2022/8 Mixed Reality (MR Development) : 2022/9-
4. 🗾 Babylon.js User Community in Japan . #BabylonJS #BabylonJS勉強会 Limesの名前について ライムの複数形 「ライムス」 Oculus Riftの”Rift”と同じく「境界」 や「境⽬」を意味するラテン語の 「リーマス」に由来しています。 現実空間 仮想空間 境界 ではないです。
5. 🗾 Babylon.js User Community in Japan . #BabylonJS #BabylonJS勉強会 こんなことをやってます Babylon.js Forumで相談や情報発信 Profile - Limes2018 - Babylon.js (babylonjs.com) 技術書典13の執筆&代表→書籍化
6. 🗾 Babylon.js User Community in Japan . #BabylonJS #BabylonJS勉強会 こんなことをやってます Babylon.js Editorの情報発信 →公式Docsに記事が掲載 GUI Adventureコンテストで⼊賞→Core Contributorサイン⼊り本をもらいました Getting Started with the Editor | Babylon.js Documentation (babylonjs.com)
7. 🗾 Babylon.js User Community in Japan . #BabylonJS #BabylonJS勉強会 o 2013年より公開。作者はMicrosoftのDavid Catuheさん o 2013/8/17にv1.2.1がリリースし、約2年おきにメジャー バージョンアップ。2022/4にv5.0.0がリリース o 2023/3/30にv6.0.0がリリース o 2023/4/20にv6.0.0がリリース Babylon.jsの歴史を簡単に
8. 🗾 Babylon.js User Community in Japan . #BabylonJS #BabylonJS勉強会 今⽇の紹介内容 本⽇はGitHub上のBabylon.js、Babylon.js Documentationの履歴から、v6.0で 正式公開されると思われる機能を紹介します。 4/20までに追加発表が出る可能性があります。あくまで4/1時点の 可能性であることをご了承いただければと思います。
9. 🗾 Babylon.js User Community in Japan . #BabylonJS #BabylonJS勉強会 4/1時点で公開されているv6.0情報 ttps://www.khronos.org/assets/uploads/developers/presentations/Babylon.js_-_WebGL_WebGPU_Meetup_.pdf KhronosのミートアップでBabylon.js v6.0 について紹介されていました。 @cx20さん、情報提供ありがとうござ います！
10. 🗾 Babylon.js User Community in Japan . #BabylonJS #BabylonJS勉強会 今⽇の紹介内容 ・WebGPUによるパフォーマンス最適化 ・GUI Editor + Playground連携 ・液体表現 (Fluid Renderer) ・Scene内オブジェクトの読み上げ機能 (Screen Reader) ・オブジェクトへのお絵かき機能 (Texture Decal) ・反射表現( Screen Space Reflections (SSR) Rendering Pipeline) 2023/4/4 修正
11. 🗾 Babylon.js User Community in Japan . #BabylonJS #BabylonJS勉強会 WebGPUによるパフォーマンス最適化 ttps://playground.babylonjs.com/#6HWS9M 数⾏の追加で、パフォーマンスを 劇的に⾼速化！ 例 500個の動くsphere, 50個のPBRマテリ アルを表⽰。 Optimizationあり： 90fps前後をキープ Optimizationなし：表⽰個数で50-70fps (MacBook Pro M1) https://doc.babylonjs.com/features/featuresDeepDive/scene/optimize_your_sce ne#performance-priority-modes 2023/4/4 修正： WebCPUが適切でした。失礼しました。
12. 🗾 Babylon.js User Community in Japan . #BabylonJS #BabylonJS勉強会 GUI EditorとPlaygroundの連携 https://twitter.com/babylonjs/status/1635324850633052160 Babylon.js v5.0で登場したGUI Editorは プレビュー表⽰ができなかった。 V6.0ではPlaygroundと連動したプレビュー 表⽰が可能に！？
13. 🗾 Babylon.js User Community in Japan . #BabylonJS #BabylonJS勉強会 液体表現 これまでもWater shaderなどで⽔⾯の表現は可能 V6.0では、⽔の弾性、⽔しぶきなども表現可能に！ https://twitter.com/babylonjs/status/1633165615560298497 https://doc.babylonjs.com/features/featuresDeepDive/particles/fluid_rend erer/fluid_demos こちらのドキュメントで詳細、デモが確認できます
14. 🗾 Babylon.js User Community in Japan . #BabylonJS #BabylonJS勉強会 Scene内オブジェクトを読み上げ 多くのブラウザに搭載されているスクリーンリー ダー(画⾯に表⽰された内容を⾳声で読み上げ) に 対応。シーン内のオブジェクトを読み上げ こちらのドキュメントで詳細、デモが確認できます https://babylonjs.medium.com/canvas-accessibility- and-gui-animations-with-babylon-js-8001378a1509 A small box on the left of the egg A bigger box below the egg An easter egg, click to toggle boxes. A small box on the right of the egg ttps://playground.babylonjs.com/#C9GZTF#12 Scene
15. 🗾 Babylon.js User Community in Japan . #BabylonJS #BabylonJS勉強会 マテリアルの⾼さ変更をつけて、 オブジェクトへのお絵描き マウス操作でheightmapの値を変更 →オブジェクトに⽂字や絵を描くことが可能に！ こちらのドキュメントで詳細、デモが確認できます https://playground.babylonjs.com/#TFWHZ0#4 https://babylonjs.medium.com/poc-the-potato-optimized-carver-9305cb274bf9
16. 🗾 Babylon.js User Community in Japan . #BabylonJS #BabylonJS勉強会 反射表現の⽅式が変更 反射について、 Screen Space Reflections (SSR) Post Processから Screen Space Reflections (SSR) Render Pipelineへ 変更とのこと こちらのドキュメントで詳細、デモが確認できます https://playground.babylonjs.com/#PIZ1GK#1052 https://doc.babylonjs.com/features/featuresDeepDive/post Processes/SSRRenderingPipeline
17. 🗾 Babylon.js User Community in Japan . #BabylonJS #BabylonJS勉強会 おまけ︓桜が咲く公園を作成 Screen Space Reflection、Post Process、WaterMaterial、LensFlareを使って作りました
18. 🗾 Babylon.js User Community in Japan . #BabylonJS #BabylonJS勉強会 使⽤させていただいたモデル https://www.turbosquid.com/ja/3d-models/3d-model-semi-realistic-city-1371935 https://www.turbosquid.com/ja/3d-models/playground-model-1810941 https://www.turbosquid.com/ja/3d-models/3d-model-train-playground-1822405
19. 🗾 Babylon.js User Community in Japan . #BabylonJS #BabylonJS勉強会 まとめ ・Babylon.js v6の新機能を５つ紹介 ・4/20の正式発表で追加情報が出たときは、ブログや 別の勉強会で紹介予定です。