Babylon.js の CSG で遊ぼう!

Babylon.js の CSG 機能を使ってGUIで3Dモデルを編集できるWebアプリを作成したお話。

より詳しい記事は、こちら
https://toranoana-lab.hatenablog.com/entry/2024/07/10/100000

Transcript

1. Copyright (C) 2023 Toranoana Lab Inc. All Rights Reserved. T O R A N O A N A L a b 2024 Babylon.js の CSG で遊ぼう! 2024/7/15 Babylon.js ゆるほめLT会 vol.3 虎の穴ラボ株式会社 奥谷 一陽
2. Copyright (C) 2023 Toranoana Lab Inc. All Rights Reserved. 2024 自己紹介 奥谷 一陽 所属：虎の穴ラボ株式会社 興味：Deno、TypeScript 興味があるBabylon.js機能：物理(Havok) X：@okutann88 github：Octo8080X
3. Copyright (C) 2023 Toranoana Lab Inc. All Rights Reserved. 2024 『CSG』使ってますか？ 

4. Copyright (C) 2023 Toranoana Lab Inc. All Rights Reserved. 2024 CSGって？ - Constructive Solid Geometry(構造的ソリッド形状) の略 - いくつかの物体の重ねあわせで、新しい形の物体を作り出す。
5. Copyright (C) 2023 Toranoana Lab Inc. All Rights Reserved. 2024 CSGって？ - Constructive Solid Geometry(構造的ソリッド形状) の略 - いくつかの物体の重ねあわせで、新しい形の物体を作り出す。 例えば、立方体 - 球体は？
6. Copyright (C) 2023 Toranoana Lab Inc. All Rights Reserved. 2024 CSGって？ - Constructive Solid Geometry(構造的ソリッド形状) の略 - いくつかの物体の重ねあわせで、新しい形の物体を作り出す。 例えば、立方体 - 球体は？ - =
7. Copyright (C) 2023 Toranoana Lab Inc. All Rights Reserved. 2024 CSGって？ - =
8. Copyright (C) 2023 Toranoana Lab Inc. All Rights Reserved. 2024 面白い機能なのだけど、 
 「ちょっと右」とかをやりずらい 

9. Copyright (C) 2023 Toranoana Lab Inc. All Rights Reserved. 2024 なので、アプリを作りました 

10. Copyright (C) 2023 Toranoana Lab Inc. All Rights Reserved. 2024 なので、アプリを作りました 
 https://pile-up.deno.dev/
11. Copyright (C) 2023 Toranoana Lab Inc. All Rights Reserved. 2024 Pile-Up - ホスト先: Deno Deploy - フレームワーク: Fresh Hono - ストレージ: Deno KV https://pile-up.deno.dev/
12. Copyright (C) 2023 Toranoana Lab Inc. All Rights Reserved. 2024 Pile-Up - GUI で物体を重ね合わせて CSGでの物体作成ができる
13. Copyright (C) 2023 Toranoana Lab Inc. All Rights Reserved. 2024 Pile-Up - GUI で物体を重ね合わせて CSGでの物体作成ができる - 作った「3Dモデル」をシェア
14. Copyright (C) 2023 Toranoana Lab Inc. All Rights Reserved. 2024 Pile-Up - GUI で物体を重ね合わせて CSGでの物体作成ができる - 作った「3Dモデル」をシェア - 3Dモデルを作成する 「ソースコード」をシェア
15. Copyright (C) 2023 Toranoana Lab Inc. All Rights Reserved. 2024 Pile-Up で3Dモデル作成
16. Copyright (C) 2023 Toranoana Lab Inc. All Rights Reserved. 2024 デモします 

17. Copyright (C) 2023 Toranoana Lab Inc. All Rights Reserved. 2024 実装にあたり困ったポイント - CSGの処理はそこそこ重い、そして最悪エラー発生 - アプリでは、編集画面動かすたびに結果画面を更新していま すが、負荷が高いです。 - 対策として、ポリゴン数を減らしています。 =>
18. Copyright (C) 2023 Toranoana Lab Inc. All Rights Reserved. 2024 まとめ - CSG を使った3Dモデルを作成できるWebアプリを作った - CSG 処理は少し重いので、工夫も必要 - 作ったモデルをシェアできるのでぜひ遊んで見てください - ソースコードをコピーで自分のアプリにも取り込みできます
19. Copyright (C) 2023 Toranoana Lab Inc. All Rights Reserved. 2024 ブログも見てね
20. Copyright (C) 2023 Toranoana Lab Inc. All Rights Reserved. 2024 ありがとうございました。