WebGLでのクロスシミュレーションの実装

こちらは、2020年6月3日に公開された以下のドキュメントを翻訳したものとなります。
Implementing Cloth Simulation in WebGL

PlayCanvas WebGLゲームエンジンがammo.js (強力なBullet物理エンジンのJavaScript/WebAssemblyポート) と統合し、剛体物理シミュレーションを実現しました。弊社は現在、軟体シミュレーションを使用してPlayCanvasの機能を拡張する方法を探求しています。ディベロッパーの方々が、軟体ダイナミクスを使って簡単にキャラクターをセットアップできるようになることが目標です。

以下はPlayCanvasで実行する軟体クロスシミュレーションがある場合と、ない場合のキャラクターのサンプルです：

クリックしてデモをプレイ

 

どのようにして設定したか知りたいですか？ぜひ、以下をお読みください！

ステップ1：軟体ダイナミクスワールドを作成

デフォルトでは、PlayCanvasの剛体コンポーネントシステムはammo.jsダイナミクスワールドを作成し、このワールドは包括的な剛体のみをサポートします。クロスシミュレーションには軟体ダイナミクスワールド（btSoftRigidDynamicsWorld）が必要です。現状では、これをオーバーライドする簡単な方法はありません。そこで、以下の試みをおこなうために、新たにパラレルな軟体ダイナミクスワールドを作成し、アプリケーション自体によって管理します。今後、弊社は選択可能な内部ダイナミクスワールドの種類を作成したり、または複数のワールドの作成を認めるかもしれませんが、現時点では本記事に記載した内容がこのデモの構築方法です。

ステップ2：CPUスキニングの実装

PlayCanvasはGPU上のすべてのスキニングを実行します。ただし、キャラクターのアニメーションとマッチさせるための軟体アンカー（btSoftBody::Anchor）をアップデートするには、CPU上でスキニングされた位置が必要です。CPUスキニングは、PlayCanvasの今後のリリースでサポートされる見込みです。

ステップ3：シミュレーション済み、および未シミュレーションが混成したメッシュレンダリングをサポートするパッチシェーダー　

軟体メッシュはワールド空間で頂点位置と法線データを生成します。動的にシミュレーションしたキャラクターメッシュの（クロス）部分を正しくレンダリングするには、最新のPlayCanvas頂点変換シェーダー・チャンクのオーバーライドでパッチをおこなってサポートする必要があります。弊社はシミュレーション済み、および未シミュレーションが混成したメッシュレンダリングへの組み込みサポートを追加する予定ですので、最終的な実装ではパッチングは不要となります。

ステップ4：レンダリングメッシュを軟体メッシュ変換に実装

PlayCanvasのキャラクターメッシュは、軟体メッシュ作成機能（btSoftBodyHelpers::CreateFromTriMesh）で直接使用できないため、若干の変換が必要です。そこで、PlayCanvas頂点イテレーターを使って、メッシュデータへのアクセスと変換がおこなわれました。今後この変換は、PlayCanvasエディタへのアセットインポートによって実施される予定です。

ステップ5：ボーンごとのアタッチメントの実装

現在、PlayCanvasには特定のキャラクターのボーンにエディタでオブジェクトをアタッチする方法がありません（この機能は、今後数か月内の弊社のロードマップに含まれています！）。したがって、キャラクターの様々な部位に簡易化された剛体コライダーをアタッチするために、ボーンごとのアタッチメントが実装されました。これによって、クロスがキャラクターメッシュと交差しないようになりました。弊社は、完全にスキンされたキャラクターメッシュではなく、簡易化されたコライダーを使用しています。簡易化されたコライダーのほうが、はるかに速く作動するためです。

試してみたい！と思っている方は、ぜひ上記のサンプルのプロトタイプ・ソースコードを以下のPlayCanvasプロジェクトでご参照ください：

https://playcanvas.com/project/691109/overview/cloth-simulation-demo

これはプロトタイプの実装ですので、最終的な実装までに多くの点が変更される（一部については前述のとおりです）見込みです。

ご自分のキャラクターで軟体ダイナミクスを試してみたいですか？以下に手順を記載します：

ステップ１：PlayCanvasプロトタイププロジェクトをフォークします。

ステップ2：シミュレーションを実施したいキャラクターの部位に線を引きます：

これはキャラクターメッシュの頂点に色を塗ることで実施できますーサンプルのキャラクターはMixamoからダウンロードし、Blenderにインポートしました：

ステップ3:キャラクターをPlayCanvasエディタにインポートし、コリジョンを設定：

さて、次は？

今後数か月間でこの技術を開発するのが、非常に楽しみです。弊社は以下の点に注力していきます：

• プロトタイプから知見を得て、PlayCanvasの軟体ダイナミクスに適切なサポートを提供する
• PlayCanvasディベロッパーが軟体ダイナミクスでキャラクターをインポートおよびセットアップするための、使いやすいツールを作成する
• さらに最適化を実施し、クオリティを向上する

皆様からのご意見やフィードバックをお待ちしています。ぜひPlayCanvasフォーラムにご参加ください！