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
160
AR×ドラムで切り拓く音楽表現【XRKaigi 2024】
sakutama_11
0
16
「ARドラム」の裏側 【Iwaken Lab. Tech Conference】
sakutama_11
1
2.1k
SwiftUIで作るvisionOS向けTabViewUIの知見
sakutama_11
1
390
【NeRF撮り方LT会】NeRFが空間を理解する仕組み
sakutama_11
1
1.4k
Featured
See All Featured
A Modern Web Designer's Workflow
chriscoyier
693
190k
BBQ
matthewcrist
87
9.5k
Fashionably flexible responsive web design (full day workshop)
malarkey
406
66k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
Building a Scalable Design System with Sketch
lauravandoore
461
33k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.4k
The Pragmatic Product Professional
lauravandoore
32
6.4k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
Why You Should Never Use an ORM
jnunemaker
PRO
55
9.2k
Visualization
eitanlees
146
15k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
100
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