Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
8th Wall × Babylon.jsでhavok physics 【Babylon.js...
Search
さくたま
July 05, 2023
0
760
8th Wall × Babylon.jsでhavok physics 【Babylon.js ゆるほめLT会 vol.2】
https://babylonjs.connpass.com/event/285198/
さくたま
July 05, 2023
Tweet
Share
More Decks by さくたま
See All by さくたま
Unity Android XR入門
sakutama_11
0
250
AR×ドラムで切り拓く音楽表現【XRKaigi 2024】
sakutama_11
0
56
「ARドラム」の裏側 【Iwaken Lab. Tech Conference】
sakutama_11
1
2.2k
SwiftUIで作るvisionOS向けTabViewUIの知見
sakutama_11
1
420
【NeRF撮り方LT会】NeRFが空間を理解する仕組み
sakutama_11
1
1.6k
Featured
See All Featured
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
53k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
How STYLIGHT went responsive
nonsquared
100
5.6k
Unsuck your backbone
ammeep
671
58k
Producing Creativity
orderedlist
PRO
346
40k
KATA
mclloyd
29
14k
The Cost Of JavaScript in 2023
addyosmani
51
8.4k
For a Future-Friendly Web
brad_frost
179
9.8k
Practical Orchestrator
shlominoach
188
11k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.8k
Testing 201, or: Great Expectations
jmmastey
42
7.5k
Transcript
8th Wall × Babylon.jsで ドラムを作る さくたま
自己紹介 #M1 #慶應 #CG研 #IwakenLab #MESONインターン #NeRF #ドラム #ARステージ演出 #Adobeファン
#Nianticファン
作ったもの
モデルの準備 スタジオでLuma AI blenderでコライダーを作る
8th Wallに6.0.0以上のBabylon.jsを導入 metaタグのバージョンを変えるだけ! デフォルトだと5.23.0なので6.0.0以上にする Havok も読み込む 詳しくは: https://zenn.dev/sakutama_11/articles/19d294822bdc92
Havok pluginを有効化 & Physics Aggregateをつける サンプル通り
モデルを読み込む gltf loderでドラム&各パーツを読み込み PhysicsAggregateもつける 各パーツの音も読み込む
タップした方向に球が飛ぶようにする タップを検出 1. 球を生成 2. タップしたレイの方向に力を加える 簡単!
音が鳴った時のコールバックをつける 飛ばした球にコールバックをつける 当たった時の球の速さが一定以上でトリガー(静止時に連打されてしまう) パーツに当たったら音を再生
AR名刺にしたかったけど イメージターゲットはできる(サンプルないけど) 1. 8th Wallのプロジェクトページで画像を登録 2. XR8の設定にイメージターゲットの使用を追加 3. scene.onXrImage〇〇Observableでイベントを検出 4.
イベントからpositionなどを取得 5. オブジェクトに反映 詳しくは: https://zenn.dev/sakutama_11/articles/8931017767b9e3
AR名刺にしたかったけど Aggregateがイメージトラッキングに応じて更新されすぎるととても遅くなる そもそもAggregateの位置を動かすだけで面倒 scene全体の位置ごと動かしたいけどどうしたらいいか分からず ←Aggregateを一旦消す ←Meshを更新 ←Aggregateをもう一度つける
まとめ 8th WallでBabylon.js Havok Physicsは使える https://zenn.dev/sakutama_11/articles/19d294822bdc92 8th Wall × Babylon.jsでイメージターゲットもできる
https://zenn.dev/sakutama_11/articles/8931017767b9e3