Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

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

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

Bf0e54ea0d4ea19343ccfbe5d410a96b?s=128

Kenta Iwasaki

May 08, 2022
Tweet

More Decks by Kenta Iwasaki

Other Decks in Technology

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