8th Wall × Babylon.jsでhavok physics 【Babylon.js ゆるほめLT会 vol.2】

https://babylonjs.connpass.com/event/285198/

Transcript

1. 8th Wall × Babylon.jsで
   ドラムを作る
   さくたま
   

   View Slide

2. 自己紹介
   #M1 #慶應 #CG研 #IwakenLab
   #MESONインターン #NeRF
   #ドラム #ARステージ演出
   #Adobeファン #Nianticファン
   

   View Slide

3. 作ったもの
   

   View Slide

4. モデルの準備
   スタジオでLuma AI blenderでコライダーを作る
   

   View Slide

5. 8th Wallに6.0.0以上のBabylon.jsを導入
   metaタグのバージョンを変えるだけ！
   デフォルトだと5.23.0なので6.0.0以上にする
   Havok も読み込む
   詳しくは: https://zenn.dev/sakutama_11/articles/19d294822bdc92
   

   View Slide

6. Havok pluginを有効化 & Physics Aggregateをつける
   サンプル通り
   

   View Slide

7. モデルを読み込む
   gltf loderでドラム&各パーツを読み込み
   PhysicsAggregateもつける
   各パーツの音も読み込む
   

   View Slide

8. タップした方向に球が飛ぶようにする
   タップを検出
   1. 球を生成
   2. タップしたレイの方向に力を加える
   簡単！
   

   View Slide

9. 音が鳴った時のコールバックをつける
   飛ばした球にコールバックをつける
   当たった時の球の速さが一定以上でトリガー(静止時に連打されてしまう)
   パーツに当たったら音を再生
   

   View Slide

10. AR名刺にしたかったけど
    イメージターゲットはできる(サンプルないけど)
    1. 8th Wallのプロジェクトページで画像を登録
    2. XR8の設定にイメージターゲットの使用を追加
    3. scene.onXrImage〇〇Observableでイベントを検出
    4. イベントからpositionなどを取得
    5. オブジェクトに反映
    詳しくは: https://zenn.dev/sakutama_11/articles/8931017767b9e3
    

    View Slide

11. AR名刺にしたかったけど
    Aggregateがイメージトラッキングに応じて更新されすぎるととても遅くなる
    そもそもAggregateの位置を動かすだけで面倒
    scene全体の位置ごと動かしたいけどどうしたらいいか分からず
    ←Aggregateを一旦消す
    ←Meshを更新
    ←Aggregateをもう一度つける
    

    View Slide

12. まとめ
    8th WallでBabylon.js Havok Physicsは使える
    https://zenn.dev/sakutama_11/articles/19d294822bdc92
    8th Wall × Babylon.jsでイメージターゲットもできる
    https://zenn.dev/sakutama_11/articles/8931017767b9e3
    

    View Slide