[Web Tool] RAGDOLL — 人形を落として、掴んで、投げる。(VRM・WebXR対応)
概要
RAGDOLL は、関節でつながった人形(ラグドール)を落として、マウスで掴んで、投げて遊ぶアプリです。人形は、頭・胴・腕・脚の部品に分かれていて、物理エンジンが、重力・衝突・関節を計算します。
VRM のファイルをドロップすると、そのモデルが人形になります。
- 操作: 人形を掴んで引っ張る、離して投げる、視点を回す
- ボタン: DROP(落とし直す)、BLAST(爆風)、ADD(人形を増やす)、RESET
- 小道具: ボール、箱
- 場面: 坂、階段(6 段)、低い壁
- 調整: STIFFNESS(姿勢を戻す力)、TIME(スロー)
- VRM: ドロップで読み込み。BODIES で、物理の部品を見られます
- ガラス: GLASS ボタンで、人形・VRM・ボール・箱が、ガラスになります
- VR: VR 対応の機器では、ENTER VR で入れます。コントローラーのレーザーで掴みます
- VRM のファイルは、アップロードされません: ブラウザの中だけで動きます
開く
インストールは不要です。下のリンクから、そのまま開けます。
RAGDOLL
lain-lab.com の、関節でつながった人形を落として、掴んで、投げるブラウザアプリ。VRM も人形にできます。
lain-lab.comスタートメニューから起動
トップページのスタートメニューからも起動できます。
スクリーンショット
階段と小道具
人形は、階段や坂の上でも、ぐにゃぐにゃに転がります。
箱の人形
ガラスの人形
動画(PC)
人体モデルでやると心無い事をやってるように見えますが、モデル制作者様などへの悪意はないです。
あくまでこういう事が出来るという実験で動かしてるだけなのでご了承ください。
WebXR
アプリの特徴
- 掴んで投げられます: 人形のどの部品でも、ドラッグで掴めます。離すと、勢いが残って、投げになります。ボールと箱も、同じように掴めます
- VRM が人形になります: VRM をドロップすると、ボーンの位置から、体の部品の大きさと位置を、自動で決めます。髪や服は、VRM 自身の揺れで動きます
- 関節に制限があります: 肘は前にだけ、膝は後ろにだけ曲がります。首・肩・腰・股は、向きの制限がありません
- ふだんの画面は、シンプル: 操作は、左のボタンとスライダーです。キーは、F1(ヘルプ)と Esc(閉じる)だけです
- 設定は、保存されます: STIFFNESS と TIME は、次に開いたときも同じです
まず試す
- RAGDOLL を開きます。人形が、上から落ちます。
- 人形をドラッグして、掴みます。持ち上げて、離します。
BLASTを押します。人形が、吹き飛びます。BALLやCRATEを押して、上から落とします。- VRM のファイルを、画面にドロップします(または、左の
VRM …で選びます)。
画面の見方
| 場所 | 内容 |
|---|---|
左 ACTIONS | DROP、BLAST、ADD、RESET |
左 PROPS | BALL、CRATE、CLEAR PROPS |
左 MODEL | VRM …(ファイルを選ぶ)、BOX(箱の人形)、BODIES(物理の部品を見る) |
左 TUNE | STIFFNESS、TIME |
左 INFO | Model、Figures(人形の数)、Bodies(物理の体の数)、FPS、Physics(1 ステップの時間)、Moving(最大の速さ)、Holding(掴んでいる部品) |
| 中央 | 3D 画面。下に、操作のヒントが出ます |
使い方
1. マウス
| 操作 | 内容 |
|---|---|
| 人形・ボール・箱をドラッグ | その場所を掴んで、引っ張ります。離すと、投げられます |
| 何もない所をドラッグ | 視点を回します |
| ホイール | ズーム |
| 右ドラッグ | 画面の移動 |
2. ボタン
| ボタン | 内容 |
|---|---|
DROP | 人形を、高い所から落とし直します(VRM は、読み直しません) |
BLAST | 人形の足元で爆発させて、吹き飛ばします。4m 以内のボール・箱も飛びます |
ADD | 人形を 1 体増やします(箱は最大 12 体、VRM は最大 6 体。VR 中の VRM は 3 体まで) |
RESET | 人形を 1 体に戻して、落とし直します |
BALL / CRATE | ボール・箱を、上から落とします(最大 12 個。多いと、古いものから消えます) |
CLEAR PROPS | ボール・箱を、全部消します |
3. 調整
| スライダー | 内容 |
|---|---|
STIFFNESS | 力の入り具合。0 は、完全にぐにゃぐにゃ。大きいほど、首・肩・腰・股の関節が、まっすぐな姿勢に戻ろうとします。人形が立つことは、ありません |
TIME | 動きの速さ(0.1〜1.5)。小さくすると、スローになります |
4. VRM
| 操作 | 内容 |
|---|---|
画面に .vrm をドロップ / VRM … | その VRM が、人形になります |
BOX | 箱の人形に戻します |
BODIES | VRM の中の、物理の部品(球・カプセル・箱)を、半透明で見せます。掴むときは、見えていなくても、この部品が当たり判定です |
VRM は、頭・胴・腕・脚のボーンが必要です(欠けていると、エラーが出て、読み込みません)。VRM 0.x と 1.0 に対応しています。
5. ガラス
| 操作 | 内容 |
|---|---|
GLASS | 箱の人形・VRM・ボール・箱を、ガラス(背後が屈折して透ける材質)にします。もう一度押すと、元に戻ります |
- ガラスの間は、床を明るく、グリッドを薄くします(背景が暗いと、透けて見えず、黒く見えるためです)
- ガラスは、描画が重くなります。FPS が下がるときは、OFF にします
- 色は、薄い青の一色です
6. VR
VR に対応した機器のブラウザで開くと、MODEL に ENTER VR が出ます。出ないときは、その機器・ブラウザが、VR(WebXR)に対応していません。
| 操作 | 内容 |
|---|---|
| コントローラーの線を人形に向けて、トリガーを引く | 引いている間、掴めます。手首をひねると、一緒に振れます。離すと、投げられます |
| 左のパネルの、ボタンに線を向けて、トリガー | DROP、BLAST、ADD、RESET、BALL、CRATE、CLEAR PROPS、GLASS、EXIT VR |
- VR では、VRM は 3 体までです
- GLASS は、VR に入るときに OFF になります。パネルの GLASS で入れられます
- STIFFNESS と TIME は、パネルにありません(PC で決めた値を使います)
動かないとき・うまくいかないとき
| 症状 | 見分け方・対処 |
|---|---|
| VRM が読み込めない | 画面の中央に、理由が出ます。.vrm 以外(GLB など)は、未対応です。ボーンが欠けた VRM も、読み込めません |
| 部品と VRM の形が合わない | BODIES を押して、物理の部品を見てください。デフォルメの強い体型(大きな頭、短い手足)は、合わないことがあります |
| 重い | 人形・小道具の数を減らします。VRM は、1 体ごとにファイルを読み直すので、重いファイルは、読み込みに時間がかかります |
| 人形が、床の外へ落ちた | 自動で落とし直します(小道具は、消えます) |
制限
- 首、手首、足首、指は、曲がりません(親の動きに従います)
- 髪・服は、物理の対象ではありません。スカートが、体にめり込むことがあります
- GLB(VRM 以外のボーン付きモデル)と、四足の動物は、未対応です
- スマートフォン、Safari、Firefox は、未確認です
- VR は、1 台の VR ヘッドセットで確認しました。ほかの機種は、未確認です
よくある質問
Q. VRM のファイルは、アップロードされますか? されません。読み込みも計算も、ブラウザの中だけです。
Q. 人形を立たせられますか? できません。STIFFNESS は、関節をまっすぐな姿勢へ戻そうとする力で、バランスを取る仕組みではありません。
Q. 最初から、VRM が出ています。
このサイトの VRM(lain05.vrm)を、起動時に自動で読んでいます。BOX で、箱の人形に戻せます。
Q. VR で、何体まで出せますか? VRM は 3 体までです(PC は 6 体)。箱の人形は、PC と同じです。
Q. ガラスで重いときは? GLASS を OFF にします。VR では、入るときに OFF になります。
Q. 設定は、保存されますか? STIFFNESS と TIME だけ、このブラウザに保存されます。
クレジット
- 物理エンジン: Rapier(Apache-2.0)
- 描画: three.js(MIT)
- VRM: @pixiv/three-vrm(MIT)
関連
実装の詳細は、技術記事にまとめています。
[Astro] #194 RAGDOLL に VR 対応とガラス表現を足す(WebXR・transmission・レーザーで掴む)
ガラスの材質設定、VRM の材質の差し替え、WebXR のセッション、コントローラーのレーザーで掴む仕組み、VR 内パネルを解説。
lain-lab.com
[Astro] #193 Rapier と three.js で作る物理ラグドール「RAGDOLL」の実装(VRM 対応)
Rapier 0.21 の球関節にモーターが無い問題と自前の PD トルク、掴む仕組み、VRM のボーンから部品を作って正規化ボーンへ書き込む手順を解説。
lain-lab.com