1. 誰よ
1.1. Twitter
1.1.1. okd.sh(undbn)
1.1.2. 会社員だったりフリーランスだったりHABって会社やってたり
1.2. 仕事
1.2.1. ちょっと前
1.2.1.1. ITシステムの運用・保守
1.2.1.2. IA系の仮想化基盤とか
1.2.1.3. オンプレの商用UNIXとかデータベースとかストレージサブシステム
1.2.2. わりと最近
1.2.2.1. サービスの設計とか
1.2.2.2. PoC
1.2.2.2.1. BIMとかUE4とかWeb的なやつ
1.2.2.3. クラウドインフラ
1.2.2.3.1. フルマネージドとかFaaSが好き
1.2.2.3.2. DaaSでのクリエイティブ用途のVDIとか興味ある
1.2.2.4. 開発
1.2.2.4.1. Web
1.2.2.4.2. iOS
1.2.2.5. 情シス的な雑用のような何か
1.2.2.6. サービスの監視・保守
1.3. 最近の趣味
1.3.1. 自作PC
1.3.1.1. 長らくmacbookあれば生きてけると思ってた
1.3.1.1.1. WebとiOSやってるだけなら今でもそう思う
1.3.1.1.2. ゲームエンジンとかCGで作業したらしんどかった
2. WebGL
2.1. ブラウザでGPU使ってレンダリングためのAPI
2.1.1. アプリのインストール不要でリッチな3Dコンテンツを体験できる
2.1.2. 3Dや高解像度の画像は処理負荷が高い
2.1.2.1. 目標
2.1.2.1.1. 60FPSくらい出したい
2.1.2.2. 何で処理するか
2.1.2.2.1. 使える計算リソース
2.1.2.3. どう処理するか
2.1.2.3.1. クロック数
2.1.2.3.2. コア数
2.1.2.3.3. スループット
2.1.2.3.4. 処理の分担
2.1.3. できればGPUに処理をオフロードしたい
2.1.3.1. モバイル事情
2.1.3.1.1. SoCにGPUが実装されてるのでCPU負荷を下げるためにもGPUに最適化するとよさげ
2.1.3.2. CPUはクロック上がらんし、メニーコア対応も制約がある
2.1.3.2.1. おっさんはいっぱい居る
2.1.3.3. 将来的な話
2.1.3.3.1. 推論コアとかレイトレーシングコアみたいな次世代のハードウェアを使うためにもCPU外で処理していきたい
2.2. GLSL書くの辛い
2.2.1. 現状唯一の手段
2.2.1.1. ラッパーライブラリとかフレームワーク使ってマイルドに扱う
2.3. 主なライブラリ
2.3.1. Three.js
2.3.1.1. 2010年～
2.3.1.2. OSSプロジェクト
2.3.1.3. 採用実績多い
2.3.1.4. ノウハウも多い
2.3.2. babylon.js
2.3.2.1. 2013年～
2.3.2.2. MicrosoftのOSSプロジェクト
2.3.2.3. 開発も盛んで最近気になる存在
2.3.2.4. 公式のチュートリアルとか学習リソースしっかりしてる
3. Babylon.js
3.1. 動機
3.1.1. Three.jsでもよかったけどTypeScript勉強したくて、同じMSだしよゆーよゆーなんていう安直な理由
3.2. 特徴
3.2.1. 強力で美しくシンプルなWebレンダリングエンジン
3.2.2. 最適化されてて高速に動作する
3.2.3. OSSで無料
3.2.4. クロスプラットフォームサポート
3.2.4.1. 各種ブラウザ
3.2.4.1.1. PC
3.2.4.1.2. モバイル
3.2.4.2. ネイティブ開発はプレビュー版
3.2.5. WebXRサポート
3.2.6. 扱えるオブジェクト
3.2.6.1. ライト
3.2.6.2. カメラ
3.2.6.3. アニメーション
3.2.6.4. マテリアル
3.2.6.4.1. PBRサポート
3.2.6.5. メッシュ
3.2.6.6. オーディオ
3.2.6.7. アクション
3.2.7. ファイル形式
3.2.7.1. import
3.2.7.1.1. glTF
3.2.7.1.2. STL
3.2.7.1.3. OBJ
3.2.7.1.4. Babylon
3.2.7.2. export
3.2.7.2.1. glTF
3.2.7.2.2. OBJ
3.2.7.2.3. Babylon
3.2.8. 座標系
3.2.8.1. 右手系のYup(多分)
3.2.9. 単位
3.2.9.1. メートル
3.3. ツール
3.3.1. プレイグラウンド
3.3.2. ノードマテリアルエディタ
3.3.3. サンドボックス
3.4. 本当に完全に理解した人向け
3.4.1. 学習リソース
3.4.1.1. BABYLON101
3.4.1.2. HOW TO
3.4.1.3. EXAMPLES
4. RevitからBabylonへのワークフロー
4.1. rvtから最終的にはglTFに変換する
4.1.1. Revit
4.1.1.1. .rvt
4.1.2. Twinmotion Direct Link Plugin
4.1.2.1. .fbx
4.1.3. Blender
4.1.3.1. .glb
4.1.3.2. .gltf
5. glTFって何よ
5.1. JSONによって3Dモデルやシーンを表現するフォーマット
5.2. フォーマット
5.2.1. .glb
5.2.1.1. バイナリにJSONと外部テクスチャが含まれてる
5.2.2. .gltf
5.2.2.1. JSON + 埋め込みテクスチャ
5.2.2.2. JSON + 外部テクスチャ
5.3. カスタムプロパティも持ってける
5.4. サンドボックスでプレビューしてみる
6. やってみる
6.1. デモプロジェクト
6.2. 作業環境
6.2.1. VS Code
6.2.2. Node.js 12
6.3. お品書き
6.3.1. FBXをBlenderで開いてみる
6.3.1.1. 後の工程のためにカスタムプロパティの追加とカメラのポジションを置いとく
6.3.1.1.1. glbでexport
6.3.2. プロジェクトをgit clone
6.3.2.1. 依存関係の解消
6.3.2.1.1. npm install
6.3.3. プロジェクトのアウトライン
6.3.3.1. src
6.3.3.1.1. index.js
6.3.3.1.2. App.js
6.3.3.1.3. BabylonComponent.jsx
6.3.3.1.4. BabylonCanvas.jsx
6.3.3.2. public
6.3.3.2.1. index.html
6.3.3.2.2. gltf
6.3.3.2.3. textures
6.3.3.3. build
6.3.3.3.1. 公開用にsrcとpublicがマージされるフォルダ
6.3.4. step1: 球メッシュとスカイライト
6.3.4.1. とりあえず実行してみる
6.3.4.1.1. git checkout step1
6.3.4.1.2. Chrome Dev Toolの説明
6.3.4.2. ソースの解説
6.3.4.2.1. BabylonComponent.jsx
6.3.4.3. シーングラフとAPIの説明
6.3.4.3.1. scene
6.3.5. step2: 球メッシュにPBRマテリアル設定してみる
6.3.5.1. PBR
6.3.6. step3: forでx,y,zに球を並べてみる
6.3.7. step4: glbロードしてみる
6.3.7.1. glbをpublicフォルダに格納
6.3.7.1.1. glbのデータの中身みてみる
6.3.7.2. scene.meshesでmeshにアクセス
6.3.7.2.1. 配列の捜査
6.3.7.2.2. idで参照
6.3.7.2.3. meshの操作
6.3.7.2.4. カメラ操作
6.3.8. step5: canvas外のUIから操作してみる
6.3.8.1. ボタンおいてみる
6.3.8.2. FPS表示してみる
6.3.8.2.1. engine.getFps().toFixed()
6.3.8.3. ダサいUIなんとかしたい
6.3.8.3.1. Material-UI
7. なにするの
7.1. 「Revit完全に理解できる講習」で作成したモデルをWebでみれるインタラクティブコンテンツにしてみたい
7.1.1. の入口までやってみる