Slide 1
Slide 1 text
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
虎の穴ラボ株式会社 奥谷 一陽
Slide 2
Slide 2 text
Copyright (C) 2023 Toranoana Lab Inc. All Rights Reserved.
2024
自己紹介
奥谷 一陽
所属：虎の穴ラボ株式会社
興味：Deno、TypeScript
興味があるBabylon.js機能：物理(Havok)
X：@okutann88
github：Octo8080X
Slide 3
Slide 3 text
Copyright (C) 2023 Toranoana Lab Inc. All Rights Reserved.
2024
『CSG』使ってますか？
Slide 4
Slide 4 text
Copyright (C) 2023 Toranoana Lab Inc. All Rights Reserved.
2024
CSGって？
- Constructive Solid Geometry(構造的ソリッド形状) の略
- いくつかの物体の重ねあわせで、新しい形の物体を作り出す。
Slide 5
Slide 5 text
Copyright (C) 2023 Toranoana Lab Inc. All Rights Reserved.
2024
CSGって？
- Constructive Solid Geometry(構造的ソリッド形状) の略
- いくつかの物体の重ねあわせで、新しい形の物体を作り出す。
例えば、立方体 - 球体は？
Slide 6
Slide 6 text
Copyright (C) 2023 Toranoana Lab Inc. All Rights Reserved.
2024
CSGって？
- Constructive Solid Geometry(構造的ソリッド形状) の略
- いくつかの物体の重ねあわせで、新しい形の物体を作り出す。
例えば、立方体 - 球体は？
- =
Slide 7
Slide 7 text
Copyright (C) 2023 Toranoana Lab Inc. All Rights Reserved.
2024
CSGって？
- =
Slide 8
Slide 8 text
Copyright (C) 2023 Toranoana Lab Inc. All Rights Reserved.
2024
面白い機能なのだけど、
「ちょっと右」とかをやりずらい
Slide 9
Slide 9 text
Copyright (C) 2023 Toranoana Lab Inc. All Rights Reserved.
2024
なので、アプリを作りました
Slide 10
Slide 10 text
Copyright (C) 2023 Toranoana Lab Inc. All Rights Reserved.
2024
なので、アプリを作りました
https://pile-up.deno.dev/
Slide 11
Slide 11 text
Copyright (C) 2023 Toranoana Lab Inc. All Rights Reserved.
2024
Pile-Up
- ホスト先: Deno Deploy
- フレームワーク: Fresh Hono
- ストレージ: Deno KV
https://pile-up.deno.dev/
Slide 12
Slide 12 text
Copyright (C) 2023 Toranoana Lab Inc. All Rights Reserved.
2024
Pile-Up
- GUI で物体を重ね合わせて
CSGでの物体作成ができる
Slide 13
Slide 13 text
Copyright (C) 2023 Toranoana Lab Inc. All Rights Reserved.
2024
Pile-Up
- GUI で物体を重ね合わせて
CSGでの物体作成ができる
- 作った「3Dモデル」をシェア
Slide 14
Slide 14 text
Copyright (C) 2023 Toranoana Lab Inc. All Rights Reserved.
2024
Pile-Up
- GUI で物体を重ね合わせて
CSGでの物体作成ができる
- 作った「3Dモデル」をシェア
- 3Dモデルを作成する
「ソースコード」をシェア
Slide 15
Slide 15 text
Copyright (C) 2023 Toranoana Lab Inc. All Rights Reserved.
2024
Pile-Up で3Dモデル作成
Slide 16
Slide 16 text
Copyright (C) 2023 Toranoana Lab Inc. All Rights Reserved.
2024
デモします
Slide 17
Slide 17 text
Copyright (C) 2023 Toranoana Lab Inc. All Rights Reserved.
2024
実装にあたり困ったポイント
- CSGの処理はそこそこ重い、そして最悪エラー発生
- アプリでは、編集画面動かすたびに結果画面を更新していま
すが、負荷が高いです。
- 対策として、ポリゴン数を減らしています。
=>
Slide 18
Slide 18 text
Copyright (C) 2023 Toranoana Lab Inc. All Rights Reserved.
2024
まとめ
- CSG を使った3Dモデルを作成できるWebアプリを作った
- CSG 処理は少し重いので、工夫も必要
- 作ったモデルをシェアできるのでぜひ遊んで見てください
- ソースコードをコピーで自分のアプリにも取り込みできます
Slide 19
Slide 19 text
Copyright (C) 2023 Toranoana Lab Inc. All Rights Reserved.
2024
ブログも見てね
Slide 20
Slide 20 text
Copyright (C) 2023 Toranoana Lab Inc. All Rights Reserved.
2024
ありがとうございました。