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
   

   View Slide

2. 🗾 Babylon.js User Community in Japan .
   #BabylonJS #BabylonJS勉強会
   ちょまどさんのスライドから引用
   

   View Slide

3. 🗾 Babylon.js User Community in Japan .
   #BabylonJS #BabylonJS勉強会
   アジェンダ
   1. 自己紹介
   2. 作ってみた3DViewer
   3. Babylon.js開発でテンションが上がった3選
   4. まとめ
   

   View Slide

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が好き
   

   View Slide

5. 🗾 Babylon.js User Community in Japan .
   #BabylonJS #BabylonJS勉強会
   今日の私のLTのゴール
   1年前まで
   Web開発苦手でした…
   UnityやCG関心勢が
   「Babylon.js面白そう！」
   と思って100人がBabylon.jsを始める
   Unityに触れた時の感
   動の再来を
   

   View Slide

6. 🗾 Babylon.js User Community in Japan .
   #BabylonJS #BabylonJS勉強会
   今日私が話すこと・話さないこと
   話します
   o 作ってみた3DViewerのデモ
   o Babylon.js開発でテンションが上がった3選
   話しません
   o 細かいコード解説 → コード公開&共有します
   o 実装で詰まったところ → 今後ブログ記事化していきます
   

   View Slide

7. 🗾 Babylon.js User Community in Japan .
   #BabylonJS #BabylonJS勉強会
   アジェンダ
   1. 自己紹介
   2. 作ってみた3DViewer
   3. Babylon.js開発でテンションが上がった3選
   4. まとめ
   

   View Slide

8. 🗾 Babylon.js User Community in Japan .
   #BabylonJS #BabylonJS勉強会
   作ってみた (Github Pagesに公開中)
   https://iwaken71.github.io/BabylonJS3DViewerBasics/
   

   View Slide

9. 🗾 Babylon.js User Community in Japan .
   #BabylonJS #BabylonJS勉強会
   今回目指した3DViewerの要件
   Sketchfab (Web3DViewerで人気) を参考に要件決め
   o glb/glTFモデルを読み込む
   o 環境マップの反映
   o 回り込みカメラ操作 / クリック場所に寄ってくカメラ操作
   

   View Slide

10. 🗾 Babylon.js User Community in Japan .
    #BabylonJS #BabylonJS勉強会
    アジェンダ
    1. 自己紹介
    2. 作ってみた3DViewer
    3. Babylon.js開発でテンションが上がった3選
    4. まとめ
    

    View Slide

11. 🗾 Babylon.js User Community in Japan .
    #BabylonJS #BabylonJS勉強会
    テンション上がった3選
    1. PlayGround機能でコード&プレビュー共有
    2. Inspector機能で3Dモデルの微調整
    3. 10秒で環境マップ変換
    

    View Slide

12. 🗾 Babylon.js User Community in Japan .
    #BabylonJS #BabylonJS勉強会
    テンション上がった3選
    1. PlayGround機能でコード&プレビュー共有
    2. Inspector機能で3Dモデルの微調整
    3. 10秒で環境マップ変換
    

    View Slide

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ハッカソンできるじゃん
    

    View Slide

14. 🗾 Babylon.js User Community in Japan .
    #BabylonJS #BabylonJS勉強会
    テンション上がった3選
    1. PlayGround機能でコード&プレビュー共有
    2. Inspector機能で3Dモデルの微調整
    3. 10秒で環境マップ変換
    

    View Slide

15. 🗾 Babylon.js User Community in Japan .
    #BabylonJS #BabylonJS勉強会
    ② Inspector機能で3Dモデルの微調整
    実際に起きたSketchfabからダウンロードしたオリジナルの3Dモデルの2つの問題
    o テクスチャサイズが4Kで大きすぎるので1Kに圧縮したい
    o スケールが100倍大きいので小さくしたい
    本来ならば他のDCCツール (例:Blender) などで再調整… (面倒)
    

    View Slide

16. 🗾 Babylon.js User Community in Japan .
    #BabylonJS #BabylonJS勉強会
    ② Inspector機能で3Dモデルの微調整
    実際に起きたSketchfabからダウンロードしたオリジナルの3Dモデルの2つの問題
    o テクスチャサイズが4Kで大きすぎるので1Kに圧縮したい
    o スケールが100倍大きいので小さくしたい
    本来ならば他のDCCツール (例:Blender) などで再調整… (面倒)
    Babylon.jsのInspector機能ですぐ解決できた！！！
    

    View Slide

17. 🗾 Babylon.js User Community in Japan .
    #BabylonJS #BabylonJS勉強会
    

    View Slide

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行書けばよい
    

    View Slide

19. 🗾 Babylon.js User Community in Japan .
    #BabylonJS #BabylonJS勉強会
    テンション上がった3選
    1. PlayGround機能でコード&プレビュー共有
    2. Inspector機能で3Dモデルの微調整
    3. 10秒で環境マップ変換
    

    View Slide

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
    反射に注目
    

    View Slide

21. 🗾 Babylon.js User Community in Japan .
    #BabylonJS #BabylonJS勉強会
    10秒で環境マップ変換
    

    View Slide

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環境の扱い方をご紹介 【ドキュメント和訳+α】
    

    View Slide

23. 🗾 Babylon.js User Community in Japan .
    #BabylonJS #BabylonJS勉強会
    アジェンダ
    1. 自己紹介
    2. 作ってみた3DViewer
    3. Babylon.js開発でテンションが上がった3選
    4. まとめ
    

    View Slide

24. 🗾 Babylon.js User Community in Japan .
    #BabylonJS #BabylonJS勉強会
    まとめ
    o Web開発初心者のUnityエンジニアが
    テンション上がるBabylon.js機能をご紹介しました！
    o 今後とも、実装の詰まりポイントを
    ブログ記事に上げていきます！
    

    View Slide

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
    

    View Slide