8
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

Babylon.jsAdvent Calendar 2023

Day 9

Babylon.jsでglTF Physics拡張を体験してみよう

Last updated at Posted at 2023-12-10

この記事はBabylon.js Advent Calendar 2023の9日目の記事です。

はじめに

glTF(GL Transmission Format)は、3Dモデルやシーンを表現するためのファイルフォーマットの1つです。glTF にはコア仕様と拡張仕様があり、用途に応じて様々な拡張が提案されています。

その拡張の1つとして glTF Physics 拡張のドラフト仕様が提案されているようなので、どのような仕様なのか少し調べてみました。

glTF Physics 拡張とは?

簡単に言うと、3Dモデルに物理演算の仕様を組み込んだものです。
現状でも3Dライブラリと物理演算ライブラリを組み合わせてglTFモデルに物理シミュレーション機能を組み込むことは可能ですが、プログラミングが必要になります。
glTF Physics 拡張を使用すると、3D空間にモデルを配置するだけで物理シミュレーションを開始できます。
例えば、ARでその場にドミノを配置すれば、すぐにドミノ倒しを楽しむことができます。

glTF Physics 拡張の主な機能

glTF Physics 拡張は主に次の2つの拡張が用意されており、これらを組み合わせて使うようになっています。

KHR_collision_shapes (衝突シェイプ)で物理形状を指定します。sphereboxcapsulecylinderconvextrimesh が指定できます。

KHR_physics_rigid_bodies(剛体)でノードに質量、慣性、速度、ジョイント、制約といった物理特定を指定します。

実行結果

以下は glTF Physics 拡張の開発メンバーの一人である Eoin Mcloughlin さんのリポジトリのサンプルの実行結果になります。

Babylon.jsにてglTF Physics拡張に対応したglTF Loaderを用いて様々な物理シミュレーションが体験できます。

Basic shapes(基本形状の例)
説明:凸凹のある坂道にモデルを落下させることにより形状ごとに異なった動きをしているのが分かります。
image.png

Filtering(衝突フィルターの例)
説明:衝突フィルターを設定することにより、物理シミュレーションを行う対象とそうでないものを設定することが可能です。
image.png

Joints(ジョイントの例)
説明:各種ジョイントが設定できます。
image.png

Materials - Friction(摩擦の例)
説明:この例では石鹸はツルツルしているのに対し蜂蜜はネバネバしているというのを表しています。
image.png

Materials - Restitution(反発係数の例)
説明:バスケットボールとボーリングの玉を落下した場合の例です。バスケットボールは良く跳ねますが、ボーリングは跳ねません。
image.png

Motion properties(モーションプロパティの例)
説明:物体の移動に必要な特性(質量、慣性、重心、初速度)の設定例です。
image.png

Water Wheel(水車の例)
説明:複雑なアセットの例です。複数の物理機能が使われています。
image.png

Robot(ロボットの例)
説明:ゼンマイ式のロボットの例です。
image.png

おわりに

本当は実際にサンプルを作るところまで試したかったのですが時間の都合上間に合いませんでした。
時間ができたらドミノ倒しのサンプルでも作ってみたいと思います。

ちなみに、glTF Physics拡張ですが、WebinarのYouTubeの動画を見た感じだと仕様の完成目標としては2024年のQ1~2を予定しているようです。
参考情報のところ参考になりそうなリンクを集めてみましたので興味がある方は確認してみてください。

参考情報

■ SIGGRAPH 2023 - Let's Get Moving: Adding Physics to glTF
https://www.khronos.org/assets/uploads/developers/presentations/Physics_BOF.pdf
■ Khronos Webinar - Let's Get Moving: Adding Physics to glTF
https://www.khronos.org/events/lets-get-moving-adding-physics-to-gltf
https://www.youtube.com/watch?v=sstdRXYbZrI
■ glTF に剛体拡張機能を追加するための提案
https://github.com/eoineoineoin/glTF_Physics
■ glTF ファイルをエクスポートするときに剛体情報のエクスポートを有効にする Blender 用プラグイン
https://github.com/eoineoineoin/glTF_Physics_Blender_Exporter
■ 剛体情報を含む glTF ファイルを Babylon.js にロードするためのインポーター
https://github.com/eoineoineoin/glTF_Physics_Babylon
■ Babylon.js フォーラム - glTF + Physics + Babylon
https://forum.babylonjs.com/t/gltf-physics-babylon/43923

8
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
8
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?