見出し画像

Three.js r110とAmmo.jsを併用して物理演算してみるテストその他

Three.jsとAmmo.jsについて、その他に試したこと&調べたことについてのメモです。

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

まず、Three.jsとAmmo.jsでTerrainを使いこなすことを目指して失敗した自分のダメダメだったコードを三つほど。 いつかの未来のリベンジを目指しての記録。。。 

Three.js r110とAmmo.js(20200314時点)によるTerrain表示その01


Three.js r110とAmmo.js(20200314時点)によるTerrain表示その02

画像1


Three.js r110とAmmo.js(20200314時点)によるTerrain表示その03


■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

次に、Three.jsとAmmo.jsによるイケてるデモ x 3です。 今回、越えられない、というか近づくこともできなかったデモ達です。 いちおうコードの中にTerrainという言葉が出てくるものもありますが、製作者の方がTerrain機能を自分でバリバリ実装されてる様な気が(←コードもまともに追うことができなかったので中途半端な理解。。。)。

■その壱 ドライビングデモその1
 3Dで車を操作できるすごいデモ。 もうゲームになってる。 自分にはコードを追って理解することができなかったです。。。 必要なくなったAmmo.jsのオブジェクトを開放しているコードなんかもしっかりと書かれているようでした(←雰囲気理解)。 以下となります。


紹介しているサイト Driving Demo using Ammo.js より

Link to the Driving Demo となります。 10Mほどデータをローディングしてからスタートします。 

■その弐 ドライビングデモその2
 「その壱」と同じように3Dで車の操作ができるデモです。 原発のある荒野みたいな設定のところを走ることができます。 コード中にTerrainという記述もありました。 コードはインデントがある分「その壱」よりは読みやすいかもしれないです。 例によってあまり理解はできていないのですが。。。 スタート前のローディングのバー(プログレスバー)をしっかり表示する機能なんかもつけられています。 以下となります。

Take a drive around a nuclear wasteland の紹介より
https://alteredqualia.com/xg/examples/animation_physics_level.html

にデモがあります。


また、同じ人(会社?)が作成されているのか、デモをいろいろ紹介している Mozillaのサイト より

Animation Physics
3D rendering of terrain and cars, using ammo.js for the physics calculations.

という砂漠の平地をシンプルに走るデモもありました。


上記で紹介されているデモも含めて置いてあるサイトがありました。 製作者(会社?)さんのサイトでしょうか? その AlteredQualia にはWeGLのすごそうなデモがいろいろ置いてあるようです。

ドライビングデモについては上記2つのデモに加えて、Three.jsとAmmo.jsを使ったまた別の ドライビングデモ もありました。


■その参 RPG風
最後にRPG風のフィールドを少し歩き回れるデモへのリンクを張り付けておきます。 コードはインデントされていないので読みづらい感じになっていました。
HTML5 Physics Test Engine - Typescript - Three.js


■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

次にThree.jsとAmmo.jsの作業中に見つけた、基礎的な?デモをいくつか記録しておきます。 以下です。

■その壱■
Ammo.js本家サイトのGithubにデモへのリンクがいくつかあります。 Githubの画面のすこし下がったところの「Demos」項目にリスト化されています。


■その弐■
次はいろんなことをやっているデモです。 パッと見た目、Ammo.jsのコードなのかよくわからなかったですが、URLにAmmoという文字が含まれていてサイト名がAmmo.labとあったのでAmmo.jsを使用したデモサイトと自分は認識しています。 どのようにAmmo.jsが使用されているのかコードからは読み取れなかったのですが。。。 Ammo.jsのラッパーのようなものを使用しているのでしょうか? このデモサイトではかなりいろいろなことをしていて、コードを理解して使えるようになれば、けっこうなことができそうです。

掲示板の Demo with Ammo.js Physics Engine で紹介されていた

Threejs demos with Ammo がそのデモへのリンクとなります。


■その参■
もう1つ基礎的なデモのサイトへのリンクを貼り付けておきます
ammo.js-demos by schteppe


■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

他にも、Ammo.jsには(車とかでない)人型?3Dモデルを操作するためのCharacterControllerや、btKinematicCharacterControllerといったものがあるようでしたが、調べきれませんでした。 ちょっと触ろうとしたら、Ammo.js生成元のBulletには存在するのにAmmo.jsには存在しないような機能がありそうだったので、また長い道のりになりそうなのであきらめました。

C、C++でかかれたBulletから自動生成されたらしいAmmo.jsはその生成方法のためか変数名もテキトーっぽく、インデントもほとんどされていないような状態のコードだったので、C、C++でかかれたBulletのほうのコードを追って比較しながらAmmo.jsの機能を解析・改修してみようかと試みましたが、自分の知識ではハードル高そうだったので。

自分が知らないだけでどこかに見やすいAmmo.jsコードもあるのかもしれませんが、このあたりで自分は挫折して作業終了としました。

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

参考まとめ
Three.js r110 CodePen投稿コードまとめ

この記事が気に入ったらサポートをしてみませんか?