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
820
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
310
AR×ドラムで切り拓く音楽表現【XRKaigi 2024】
sakutama_11
0
64
「ARドラム」の裏側 【Iwaken Lab. Tech Conference】
sakutama_11
1
2.3k
SwiftUIで作るvisionOS向けTabViewUIの知見
sakutama_11
1
440
【NeRF撮り方LT会】NeRFが空間を理解する仕組み
sakutama_11
1
1.6k
Featured
See All Featured
Statistics for Hackers
jakevdp
799
220k
Producing Creativity
orderedlist
PRO
347
40k
GraphQLとの向き合い方2022年版
quramy
49
14k
Raft: Consensus for Rubyists
vanstee
140
7.1k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.2k
Keith and Marios Guide to Fast Websites
keithpitt
411
23k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Embracing the Ebb and Flow
colly
88
4.9k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3.1k
How to Think Like a Performance Engineer
csswizardry
27
2.1k
Build your cross-platform service in a week with App Engine
jlugia
232
18k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.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