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
770
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
58
「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
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.5k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
17
950
The Straight Up "How To Draw Better" Workshop
denniskardys
234
140k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
Designing for humans not robots
tammielis
253
25k
Automating Front-end Workflow
addyosmani
1370
200k
GitHub's CSS Performance
jonrohan
1031
460k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
Statistics for Hackers
jakevdp
799
220k
Balancing Empowerment & Direction
lara
1
400
Reflections from 52 weeks, 52 projects
jeffersonlam
351
20k
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