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

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

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

### 例１）auto
autoは`使用可能な形状から自動的に選択します。`
sphereが選択されるのでしょう。
![shape1.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423506/782f6ad6-f997-419b-222d-a92b45649d0c.gif)[demo](https://k38.github.io/aframe/physics-system/ball_shape_auto.html)
前回と差はなさそうですが、debugモードでワイヤーフレームも表示させて確認してみます。
![shape2.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423506/cb065f36-40bd-5724-9a54-0ed3e7b7bfef.gif)[demo](https://k38.github.io/aframe/physics-system/ball_shape_auto_debug.html)
sphereが選択されています。

### 例２）primitive
primitiveは`平面/円柱/球。対応するAフレームプリミティブで自動的に使用されます。`
こちらも自動的にsphereが選択されるのでしょう。
![shape1.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423506/d8c3a9aa-8ba4-8730-1ff2-7dc1a5789f9b.gif)[demo]()
やはりsphereでした。
autoと差はあるのでしょうか、もう少し複雑な形状で試すと違いがわかるかもしれません。
追々、ピンにも形状を設定して試してみたいと思います。

### 例３）sphere
sphereにsphereを設定してもsphereでしょうが、とりあえずやります。
![shape1.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423506/1d6049e3-7122-224f-c4fb-efcdefcfa615.gif)[demo](https://k38.github.io/aframe/physics-system/ball_shape_sphere_debug.html)
やはりsphereでした。
sphereの説明には、`boxを参照してください。sphereRadiusオプションを追加します。`とあります。
box云々はちょっと置いておいて、sphereRadiusを試してみましょう。
とりあえずsphereRadiusに1を設定してみます。
![shape1.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423506/57eea387-ce20-9061-e286-6b0a2b990f7c.gif)[demo](https://k38.github.io/aframe/physics-system/ball_shape_sphere_radius_20.html)
浮きました。
どういう事でしょうか、デバッグモードにしてみましょう。
![shape3.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423506/cb8921eb-7721-853e-462a-2d70d2859ea8.gif)[demo](https://k38.github.io/aframe/physics-system/ball_shape_sphere_radius_20_debug.html)
なるほど、本体の球よりも大きな球状の当たり判定ができているようです。
本体のsphereのradiusが0.2で、sphereRadiusが1なので、本体の5倍のサイズの当たり判定ができたようです。

### 例４）box
boxを試します。
`ハルまたはトリメッシュのシェイプと比較して優れたパフォーマンス。カスタムモデルに適合可能。`という事です。
よくわからないですが、やってみます。
![shape1.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423506/feb8176b-b660-1f5c-2d47-14f8f1e6a30e.gif)[demo](https://k38.github.io/aframe/physics-system/ball_shape_box_debug.html)
sphereの周辺にboxの当たり判定ができました。
同じ力を加えていますが、四角いので転がりにくくなりました。

### 例５）cylinder
cylinderを試します。
`boxを参照してください。cylinderAxisオプションを追加します。`
やってみます。
![shape1.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423506/25a60158-d8f8-a918-bffb-3351b32d4229.gif)[demo](https://k38.github.io/aframe/physics-system/ball_shape_cylinder_debug.html)
cylinderが飛んでいきました。
丸いところではなく、角ばったところで転がろうとしてしまっています。
きっとcylinderAxisを設定すれば、丸い側で転がるのでしょう。
cylinderAxisにzを設定してみます。
![shape2.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423506/08fd65d5-3045-215a-4f2f-8df6ebf2f634.gif)[demo](https://k38.github.io/aframe/physics-system/ball_shape_cylinder_rotate_debug.html)
丸い側で転がりましたが、sphereと比べて転がりが甘い感じがします。

### 例６）hull
hullを試します。
`シュリンクラップのようなモデルをラップします。凸形状は、Trimeshよりもパフォーマンスが高く、より適切にサポートされていますが、動的オブジェクトとして使用すると、パフォーマンスに多少の影響がある場合があります。`
説明はよくわからないですが、hullという単語には殻や外皮といった意味があるようです。
![shape1.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423506/3c56fb3d-664a-bbde-162e-aa44b91146c9.gif)[demo](https://k38.github.io/aframe/physics-system/ball_shape_hull_debug.html)
sphereより多くのポリゴンが使われていて、処理落ちがおこっています。
`パフォーマンスに多少の影響がある`という説明はこういう事なのでしょう。

### 例７）mesh
meshを試します。
`非推奨です。トリムッシュは、カスタムジオメトリ（a .OBJまたは.DAEfile）に適合するように適応しますが、サポートは非​​常にわずかです。任意のトリムシェイプは、JS物理エンジンでモデル化するのが難しく、特定の他のシェイプを「フォールスルー」し、パフォーマンスに重大な制限があります。`
![shape1.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423506/621e188b-6f64-aa5a-d7c6-a00a328af7d9.gif)[demo](https://k38.github.io/aframe/physics-system/ball_shape_mesh_debug.html)
ボールが消えました。
手前から奥に向かってはいるので力は加わったのでしょうが、レーンとの当たりは発生しないようです。
これも追々みていこうと思います。

### 例８）none
形状としてnoneです。
`衝突ジオメトリを追加しません。shapeコンポーネントまたはカスタムJavaScriptを使用して、衝突形状を手動で追加するときに使用します。`
通常はこのままでは利用しないもののようですが、どうなるか試してみます。
![shape2.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423506/42b70cf0-40d2-dee4-ef01-14e9dda89b12.gif)[demo](https://k38.github.io/aframe/physics-system/ball_shape_none_debug.html)
ボールが手前から奥にいかず、真下に落下しました。
球体はレンダリングされていますが、当たり判定をあらわすワイヤーフレームもレンダリングされていません。
物理的な影響を受けないという事のようですが、staticな物体とは異なり重力の影響は受けているようです。

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