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
690
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
170
AR×ドラムで切り拓く音楽表現【XRKaigi 2024】
sakutama_11
0
20
「ARドラム」の裏側 【Iwaken Lab. Tech Conference】
sakutama_11
1
2.1k
SwiftUIで作るvisionOS向けTabViewUIの知見
sakutama_11
1
400
【NeRF撮り方LT会】NeRFが空間を理解する仕組み
sakutama_11
1
1.4k
Featured
See All Featured
Large-scale JavaScript Application Architecture
addyosmani
511
110k
4 Signs Your Business is Dying
shpigford
182
22k
Java REST API Framework Comparison - PWX 2021
mraible
28
8.4k
The Language of Interfaces
destraynor
156
24k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
Embracing the Ebb and Flow
colly
84
4.6k
Being A Developer After 40
akosma
89
590k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
193
16k
Unsuck your backbone
ammeep
669
57k
Measuring & Analyzing Core Web Vitals
bluesmoon
6
250
Music & Morning Musume
bryan
46
6.4k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
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