share facebook facebook twitter menu hatena pocket slack

2019.12.09 MON

A-FRAME: 物理演算でボーリングっぽい動きを実現してみる2(ボールの形状)

松本 勝年

WRITTEN BY 松本 勝年

A-Frameをつかって物理演算ができるようにしてみます。
今回はボールの形状を検証します。

ボールは球体なのでsphereなのですが、変更したらどうなるのか試してみます。

例1)auto

autoは使用可能な形状から自動的に選択します。
sphereが選択されるのでしょう。

demo
前回と差はなさそうですが、debugモードでワイヤーフレームも表示させて確認してみます。


   
demo
sphereが選択されています。

例2)primitive

primitiveは平面/円柱/球。対応するAフレームプリミティブで自動的に使用されます。
こちらも自動的にsphereが選択されるのでしょう。

demo
やはりsphereでした。
autoと差はあるのでしょうか、もう少し複雑な形状で試すと違いがわかるかもしれません。
追々、ピンにも形状を設定して試してみたいと思います。

例3)sphere

sphereにsphereを設定してもsphereでしょうが、とりあえずやります。

demo
やはりsphereでした。
sphereの説明には、boxを参照してください。sphereRadiusオプションを追加します。とあります。
box云々はちょっと置いておいて、sphereRadiusを試してみましょう。
とりあえずsphereRadiusに1を設定してみます。

demo
浮きました。
どういう事でしょうか、デバッグモードにしてみましょう。

demo
なるほど、本体の球よりも大きな球状の当たり判定ができているようです。
本体のsphereのradiusが0.2で、sphereRadiusが1なので、本体の5倍のサイズの当たり判定ができたようです。

例4)box

boxを試します。
ハルまたはトリメッシュのシェイプと比較して優れたパフォーマンス。カスタムモデルに適合可能。という事です。
よくわからないですが、やってみます。

demo
sphereの周辺にboxの当たり判定ができました。
同じ力を加えていますが、四角いので転がりにくくなりました。

例5)cylinder

cylinderを試します。
boxを参照してください。cylinderAxisオプションを追加します。
やってみます。

demo
cylinderが飛んでいきました。
丸いところではなく、角ばったところで転がろうとしてしまっています。
きっとcylinderAxisを設定すれば、丸い側で転がるのでしょう。
cylinderAxisにzを設定してみます。

demo
丸い側で転がりましたが、sphereと比べて転がりが甘い感じがします。

例6)hull

hullを試します。
シュリンクラップのようなモデルをラップします。凸形状は、Trimeshよりもパフォーマンスが高く、より適切にサポートされていますが、動的オブジェクトとして使用すると、パフォーマンスに多少の影響がある場合があります。
説明はよくわからないですが、hullという単語には殻や外皮といった意味があるようです。

demo
sphereより多くのポリゴンが使われていて、処理落ちがおこっています。
パフォーマンスに多少の影響があるという説明はこういう事なのでしょう。

例7)mesh

meshを試します。
非推奨です。トリムッシュは、カスタムジオメトリ(a .OBJまたは.DAEfile)に適合するように適応しますが、サポートは非​​常にわずかです。任意のトリムシェイプは、JS物理エンジンでモデル化するのが難しく、特定の他のシェイプを「フォールスルー」し、パフォーマンスに重大な制限があります。


 
demo
ボールが消えました。
手前から奥に向かってはいるので力は加わったのでしょうが、レーンとの当たりは発生しないようです。
これも追々みていこうと思います。

例8)none

形状としてnoneです。
衝突ジオメトリを追加しません。shapeコンポーネントまたはカスタムJavaScriptを使用して、衝突形状を手動で追加するときに使用します。
通常はこのままでは利用しないもののようですが、どうなるか試してみます。

demo
ボールが手前から奥にいかず、真下に落下しました。
球体はレンダリングされていますが、当たり判定をあらわすワイヤーフレームもレンダリングされていません。
物理的な影響を受けないという事のようですが、staticな物体とは異なり重力の影響は受けているようです。

まとめ

ボールは元々sphereを使っているので、あらためて物理演算用の形状を指定する必要はなさそうです。
今後はピンにも物理演算用に形状を設定してみて、どのように形状が自動設定されるかを確認してみます。

元記事はこちら

A-FRAME: 物理演算でボーリングっぽい動きを実現してみる2(ボールの形状)

                                

松本 勝年

松本 勝年

フロントエンドに興味があるエンジニア

cloudpack

cloudpackは、Amazon EC2やAmazon S3をはじめとするAWSの各種プロダクトを利用する際の、導入・設計から運用保守を含んだフルマネージドのサービスを提供し、バックアップや24時間365日の監視/障害対応、技術的な問い合わせに対するサポートなどを行っております。
AWS上のインフラ構築およびAWSを活用したシステム開発など、案件のご相談はcloudpack.jpよりご連絡ください。