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

Slide 1

Slide 1 text

🗾 Babylon.js User Community in Japan . #BabylonJS #BabylonJS勉強会 Babylon.jsで3DViewer を作ってみた！！！株式会社サイバーエージェント Microsoft MVP イワケン/岩﨑謙汰 Twitter: @iwaken71

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

🗾 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