Babylon.jsで3DViewerを作ってみた！！！

このスライドはBabylon.js勉強会のLTセッションで登壇したときの資料です。
https://babylonjs.connpass.com/event/246064/

Babylon.js初めての方に、Babylon.jsの面白さや便利さを伝えるべく作りました。

作った3DViewer体験Webページはこちら
https://iwaken71.github.io/BabylonJS3DViewerBasics/

Transcript

1. 🗾 Babylon.js User Community in Japan . #BabylonJS #BabylonJS勉強会 Babylon.jsで3DViewer を作ってみた！！！ 株式会社サイバーエージェント Microsoft MVP イワケン/岩﨑謙汰 Twitter: @iwaken71
2. 🗾 Babylon.js User Community in Japan . #BabylonJS #BabylonJS勉強会 ちょまどさんのスライドから引用
3. 🗾 Babylon.js User Community in Japan . #BabylonJS #BabylonJS勉強会 アジェンダ 1. 自己紹介 2. 作ってみた3DViewer 3. Babylon.js開発でテンションが上がった3選 4. まとめ
4. 🗾 Babylon.js User Community in Japan . #BabylonJS #BabylonJS勉強会 イワケン/岩﨑謙汰/iwaken71 o 4つのXRコミュニティリーダー o withAR, IwakenLab, HoloLensMeetUp, Babylon.js勉強会 New! o 株式会社サイバーエージェント o CG・XR・メタバースのR&D o Babylon.js歴4か月で布教中 o 元々はUnityとARが好き
5. 🗾 Babylon.js User Community in Japan . #BabylonJS #BabylonJS勉強会 今日の私のLTのゴール 1年前まで Web開発苦手でした… UnityやCG関心勢が 「Babylon.js面白そう！」 と思って100人がBabylon.jsを始める Unityに触れた時の感 動の再来を
6. 🗾 Babylon.js User Community in Japan . #BabylonJS #BabylonJS勉強会 今日私が話すこと・話さないこと 話します o 作ってみた3DViewerのデモ o Babylon.js開発でテンションが上がった3選 話しません o 細かいコード解説 → コード公開&共有します o 実装で詰まったところ → 今後ブログ記事化していきます
7. 🗾 Babylon.js User Community in Japan . #BabylonJS #BabylonJS勉強会 アジェンダ 1. 自己紹介 2. 作ってみた3DViewer 3. Babylon.js開発でテンションが上がった3選 4. まとめ
8. 🗾 Babylon.js User Community in Japan . #BabylonJS #BabylonJS勉強会 作ってみた (Github Pagesに公開中) https://iwaken71.github.io/BabylonJS3DViewerBasics/
9. 🗾 Babylon.js User Community in Japan . #BabylonJS #BabylonJS勉強会 今回目指した3DViewerの要件 Sketchfab (Web3DViewerで人気) を参考に要件決め o glb/glTFモデルを読み込む o 環境マップの反映 o 回り込みカメラ操作 / クリック場所に寄ってくカメラ操作
10. 🗾 Babylon.js User Community in Japan . #BabylonJS #BabylonJS勉強会 アジェンダ 1. 自己紹介 2. 作ってみた3DViewer 3. Babylon.js開発でテンションが上がった3選 4. まとめ
11. 🗾 Babylon.js User Community in Japan . #BabylonJS #BabylonJS勉強会 テンション上がった3選 1. PlayGround機能でコード&プレビュー共有 2. Inspector機能で3Dモデルの微調整 3. 10秒で環境マップ変換
12. 🗾 Babylon.js User Community in Japan . #BabylonJS #BabylonJS勉強会 テンション上がった3選 1. PlayGround機能でコード&プレビュー共有 2. Inspector機能で3Dモデルの微調整 3. 10秒で環境マップ変換
13. 🗾 Babylon.js User Community in Japan . #BabylonJS #BabylonJS勉強会 ① PlayGround機能 o 今回のコードをPlayGroundで再現 o https://playground.babylonjs.com/#XNR46Q#11 o 環境構築なしでコードとプレビューどちらも共有できる！ o えっ、サーバー費 無料なんですか？！？！ o 保存ごとにバージョン更新されてリンク発行される！ o PlayGroundしばりのBabylon.jsハッカソンできるじゃん
14. 🗾 Babylon.js User Community in Japan . #BabylonJS #BabylonJS勉強会 テンション上がった3選 1. PlayGround機能でコード&プレビュー共有 2. Inspector機能で3Dモデルの微調整 3. 10秒で環境マップ変換
15. 🗾 Babylon.js User Community in Japan . #BabylonJS #BabylonJS勉強会 ② Inspector機能で3Dモデルの微調整 実際に起きたSketchfabからダウンロードしたオリジナルの3Dモデルの2つの問題 o テクスチャサイズが4Kで大きすぎるので1Kに圧縮したい o スケールが100倍大きいので小さくしたい 本来ならば他のDCCツール (例:Blender) などで再調整… (面倒)
16. 🗾 Babylon.js User Community in Japan . #BabylonJS #BabylonJS勉強会 ② Inspector機能で3Dモデルの微調整 実際に起きたSketchfabからダウンロードしたオリジナルの3Dモデルの2つの問題 o テクスチャサイズが4Kで大きすぎるので1Kに圧縮したい o スケールが100倍大きいので小さくしたい 本来ならば他のDCCツール (例:Blender) などで再調整… (面倒) Babylon.jsのInspector機能ですぐ解決できた！！！
17. 🗾 Babylon.js User Community in Japan . #BabylonJS #BabylonJS勉強会
18. 🗾 Babylon.js User Community in Japan . #BabylonJS #BabylonJS勉強会 Inspector機能はどこからでも出てくる o 今のはSandboxというツール。3DモデルをD&Dで楽ちん o https://sandbox.babylonjs.com/ o PlayGround機能にもInspector機能がワンポチで登場 o 普通のコーディング時でも可能 o scene.debugLayer.show(); と1行書けばよい
19. 🗾 Babylon.js User Community in Japan . #BabylonJS #BabylonJS勉強会 テンション上がった3選 1. PlayGround機能でコード&プレビュー共有 2. Inspector機能で3Dモデルの微調整 3. 10秒で環境マップ変換
20. 🗾 Babylon.js User Community in Japan . #BabylonJS #BabylonJS勉強会 環境マッピングとは o 環境マッピングとは金属などの表面に周囲の 環境が映り込む様子を擬似的に表現する方法。 o 今回はPBR向けHDR環境 o 定番のレンダリング手法の1つ o Babylon.jsではプレフィルタリングされた MipMapsを持つCubeTextureを含む HDR対応ファイル (dds or env形式) を推奨 o むずそう… HDRIを切り替えるDemo 反射に注目
21. 🗾 Babylon.js User Community in Japan . #BabylonJS #BabylonJS勉強会 10秒で環境マップ変換
22. 🗾 Babylon.js User Community in Japan . #BabylonJS #BabylonJS勉強会 o Poly Havenなどから hdrファイルを準備 o IBL Texture Toolに突っ込む o https://www.babylonjs.com/tools/ibl/ o .envファイル完成 o これが10秒で終わった 環境マップの準備の仕方 参考: Babylon.jsでPBR向けHDR環境の扱い方をご紹介 【ドキュメント和訳+α】
23. 🗾 Babylon.js User Community in Japan . #BabylonJS #BabylonJS勉強会 アジェンダ 1. 自己紹介 2. 作ってみた3DViewer 3. Babylon.js開発でテンションが上がった3選 4. まとめ
24. 🗾 Babylon.js User Community in Japan . #BabylonJS #BabylonJS勉強会 まとめ o Web開発初心者のUnityエンジニアが テンション上がるBabylon.js機能をご紹介しました！ o 今後とも、実装の詰まりポイントを ブログ記事に上げていきます！
25. 🗾 Babylon.js User Community in Japan . #BabylonJS #BabylonJS勉強会 見てね！ o イワケンのTwitterフォロー (@iwaken71) o 今回の3DViewer体験Webページ o https://iwaken71.github.io/BabylonJS3DViewerBasics/ o Babylon.jsのブログ記事をZennに書いてます！ o https://zenn.dev/iwaken71 o 今回のコード:Github o https://github.com/iwaken71/BabylonJS3DViewerBasics