[Web Tool] VRM MELT — VRM が粒子に溶けて、渦から組み上がる。トップページの切り替え演出にも
概要
VRM MELT は、VRM のモデルを、粒子に溶かして、また元の姿に戻す、ブラウザの中だけで動くアプリです。モデルの表面から、数万〜数十万の粒を取り出し、頭のほうから順に、粒子になって離れていきます。粒子は渦になり、スライダーを戻すと、同じ道を逆に通って、足元から組み上がります。
使い方は、2 つあります。
-
単体ページ: VRM をドロップして、
MELTのスライダーで、溶け具合を動かします。6 種類の渦の形を、選べます。 -
トップページの VRM 切り替え演出: メニューで VRM を替えるとき、今のモデルが足元の渦になって消え、次のモデルが、その渦から組み上がります。既定は OFF です。 メニューの
VRM_MELT_FXで、ON にします。 -
6 種類の渦: 銀河、ワープ、竜巻、蛇、塵、足元の渦(VORTEX)
-
表示の切り替え: 元のモデル(MESH)、ワイヤーフレーム(WIRE)
-
粒子数: 6 万、12 万、20 万、40 万個(単体ページ)
-
VRM のファイルは、アップロードされません: ブラウザの中だけで処理します
開く
インストールは不要です。下のリンクから、そのまま開けます。
VRM MELT
lain-lab.com の、VRM が粒子に溶けて、渦から組み上がるアプリ。VRM をドロップして、スライダーで動かせます。
lain-lab.comスタートメニューから起動
トップページのスタートメニューからも起動できます。
スクリーンショット
ワイヤーフレーム(WIRE)
溶けている途中(MELT 0.24)
頭のほうから、粒子になって、離れていきます。
渦になりきった状態(GALAXY)
トップページで、VRM を切り替えている途中(VORTEX)
足元で、渦を巻きます。
メニューの VRM_MELT_FX
SYS タブの中にあります。既定は OFF です。
動画
音は入っていません。
アプリの特徴
- VRM は、アップロードされません: 粒子の作成も描画も、ブラウザの中だけです。(画面を描く three.js は、読み込むときに、jsDelivr から取ります。)
- 状態を持たない作りです: 粒子の動きは、
MELT(0〜1)の 1 つの値だけで決まります。戻すのも、途中で止めるのも、スライダーを動かすだけです。 - アニメーション中の体に、粒子が付いていきます: 体を揺らしながら、溶かせます。
- ふだんの画面は、シンプル: 左下の小さなパネルだけです。
- 重ければ、粒子数を下げられます: 単体ページは、6 万個から選べます。
まず試す
単体ページ
- VRM MELT を開きます。
- VRM のファイルを、画面にドロップします(または、左下の
LOADを押します)。粒子を作るのに、少し時間がかかります。 - 作り終わると、モデルが自動で、溶けて、戻ります(
AUTO)。 MELTのスライダーを動かします。AUTOが止まって、動かした位置で、止まります。PATTERNで、渦の形を切り替えます。- ドラッグで回転、ホイールでズームします。
トップページ
- トップページで、メニューを開きます。
SYSタブ(VR はSYSTEMタブ)の、VRM_MELT_FXを、ON にします。AVATARタブで、別の VRM を選びます。- 少し待つと、今のモデルが溶けて、次のモデルが、渦から組み上がります。
画面の見方(単体ページ)
| 場所 | 内容 |
|---|---|
| 左下のパネル | すべての操作が、ここにあります |
| 画面の中央 | モデルと粒子。ファイルを入れるまでは、「VRM を、ここにドロップ」と出ます |
| 右下 | 操作のヒント(ドラッグ: 回転 / ホイール: ズーム / 右ドラッグ: 移動) |
| パネルの下の行 | 粒子数、身長、粒子の作成にかかった時間、捨てた点の数 |
使い方
1. 単体ページ
| 操作 | 内容 |
|---|---|
ファイルをドロップ / LOAD | VRM(.vrm、.glb、.gltf)を読み込みます |
MELT スライダー | 溶け具合。0 が元の姿、1 が、渦になりきった状態です |
AUTO | 溶けて戻るのを、繰り返します(待つ 1.2 秒 → 溶ける 4 秒 → 待つ 3.2 秒 → 戻る 4 秒)。MELT を動かすと、止まります |
MESH | 元のモデルを、表示 / 非表示します。消すと、粒子だけが見えます |
WIRE | ワイヤーフレームを、表示 / 非表示します。溶けた所から消えて、粒子になります |
A-POSE | 腕を下ろします(T ポーズのモデルを、見やすくします)。切り替えると、粒子を作り直します |
CAM | カメラを、モデルに合わせて、自動で追従させます。ドラッグで動かすと、切れます |
ANIM | 体を、ゆらゆら揺らします。粒子が、揺れる体に付いていきます |
PATTERN | 渦の形(下の表) |
TARGET | 行き先を、画面の右奥に出します(GALAXY、TORNADO、SNAKE)。WARP では、アバターが行き先へ移動します |
PARTICLES | 粒子数。6 万、12 万、20 万(初期値)、40 万個。変えると、粒子を作り直します |
SIZE | 粒の大きさ |
GALAXY | 渦の大きさ(身長の倍率。0.8〜3) |
TWIST | 渦のねじれ(0〜8) |
| ドラッグ / ホイール / 右ドラッグ | 回転 / ズーム / 移動 |
GALAXY と TWIST は、渦の形を変えます。どのくらい効くかは、パターンによって違います。
2. 渦の形(PATTERN)
| 形 | 内容 |
|---|---|
GALAXY | 渦巻き銀河。中心のふくらみと、3 本の腕 |
WARP | 細い光の束になって、上へ抜けます。TARGET を ON にすると、光の束の間に、アバターが行き先へ移ります |
TORNADO | 上が広がる、3 本のらせんの柱 |
SNAKE | うねりながら進み、行き先の周りに、コイルを巻きます |
DUST | 風で吹き飛ぶ塵になります。戻るときは、集まります |
VORTEX | 足元の床に沿った、薄い渦巻き。トップページの切り替え演出は、これです |
3. トップページの VRM 切り替え演出
メニューで VRM を替えたときの演出です。
- 次のモデルを、見えない状態で、先に準備します。今のモデルは、普通に見えたままです。
- 準備ができたら、今のモデルが、足元の渦になって消えます(約 2.6 秒)。
- 渦になりきったら、次のモデルが、その渦から組み上がります(約 3 秒)。
| 内容 | 値 |
|---|---|
| 既定 | OFF(ON にするまで、これまでどおり、すぐに入れ替わります) |
| ON / OFF の場所 | メニューの SYS タブ(VR は SYSTEM タブ)の VRM_MELT_FX |
| 設定の保存 | このブラウザに保存されます。次の VRM の切り替えから、効きます |
| 粒子数 | PC は 8 万個、VR は 4 万個(変えられません) |
| 渦の形 | VORTEX |
準備のあいだ、固まることがあります。 切り替えを選んでから、溶け始めるまでの間です。Quest 3 では、約 2 秒ほど固まりました。そのため、既定を OFF にしています。重いと感じたら、OFF に戻してください。
次の場合は、演出なしで、すぐに入れ替わります。
- 最初の表示のとき
- トップページの ROOM 以外のモードのとき
VRM_MELT_FXが OFF のとき- 粒子の読み込みや作成に失敗したとき
- 次のモデルの読み込みに失敗したとき
4. 重いとき
単体ページで、動きがカクカクするときは、次を試してください。
PARTICLESを、下げます(20 万 → 12 万 → 6 万)。SIZEを、小さくします。MESHとWIREを、切ります。
粒子数を変えたり、A-POSE を切り替えたりすると、粒子を作り直します。VRM によっては、数秒かかります。
5. URL パラメータ(単体ページ)
URL の最後に付けると、起動の設定を変えられます。
| パラメータ | 内容 |
|---|---|
?vrm=URL | 起動したときに、読み込む VRM の URL |
?auto=0 | AUTO を、オフにして始めます |
?anim=0 | ANIM(体の揺れ)を、オフにして始めます |
?ui=0 | 左下のパネルと、ヒントを隠します |
対応していないもの
| 内容 | 扱い |
|---|---|
| 表情(口や目の変形) | 粒子には入りません。粒子は、骨の動きにだけ付いていきます |
| 粒子だけの状態での、顔の目と口 | 見えないことがあります(暗い服の VRM で確認。原因は調べていません) |
| アクセサリー(トップページ) | 溶けません。切り替えの間、体から離れて見えることがあります |
| 走るなど、大きな動き | 確認していません(体を揺らす程度の確認です) |
| VRM 1.0 の VRM | 確認していません |
| Quest 3 での、単体ページの動作 | 確認していません(トップページの切り替え演出だけ、確認しました) |
| スマートフォン、Safari、Firefox | 確認していません |
| 粒子数の自動調整 | 入っていません |
| 音 | 出ません |
注意事項
- 動作の確認は、PC の Chrome と、Quest 3(トップページの切り替え演出のみ)で行いました。ほかの環境では、確認していません。
- VRM は、そのモデルの利用条件に従って、使ってください。このサイトには、確認用の VRM は、入っていません。
- 粒子数を上げると、GPU に大きな負荷がかかります。端末が熱くなったり、バッテリーを多く使ったりします。
- 単体ページは、設定を保存しません。開き直すと、初期の状態に戻ります。トップページの
VRM_MELT_FXは、保存されます。
よくある質問 (FAQ)
Q. VRM を、アップロードしていますか。
A. していません。ファイルは、ブラウザの中だけで、処理します。保存もしません。?vrm=URLを使ったときは、その URL から、読み込みます。
Q. 開いても、何も出ません。
A. VRM のファイルを入れるまでは、「VRM を、ここにドロップ」の文字だけが出ます。ファイルをドロップするか、左下のLOADを押してください。
Q. 粒子を作るのに、時間がかかります。
A. 粒子の作成は、モデルの大きさや、テクスチャの大きさによって、数百ミリ秒〜数秒かかります。下の行の「作成 ○ms」で、確かめられます。重ければ、PARTICLESを下げてください。
Q. トップページで、VRM を替えても、演出が出ません。
A.VRM_MELT_FXが、OFF の可能性があります(既定は OFF です)。メニューのSYSタブで、ON にしてください。ROOM 以外のモードのときや、最初の表示のときは、演出なしで入れ替わります。
Q. 切り替えのときに、固まります。
A. 次のモデルと粒子を、準備している間です。端末によっては、数秒かかります。重いときは、VRM_MELT_FXを OFF にしてください。
Q. 渦の形を、変えたいです。
A. 単体ページは、PATTERNで選べます。トップページの切り替え演出は、VORTEXです。ブラウザの開発者ツールのコンソールで、localStorage.setItem('wired_vrm_melt_pattern', 'galaxy')を実行すると、ほかの形に替えられます(localStorage.removeItem('wired_vrm_melt_pattern')で、戻ります)。
Q. 溶けたあとの、粒子の色は。
A. モデルのテクスチャの色を、そのまま使います。渦の色は、モデルの色の平均に近くなります。
Q. ゲームのキャラクターの演出に、使えますか。
A. 粒子化の本体(vrm-melt.js)は、ほかのファイルに依存しない形です。ワープ、竜巻、蛇のような動きの用意もあります。技術記事に、作り方があります。
技術記事
作り方(点の取り方、状態を持たないシェーダー、MToon への差し込み、トップページへの組み込み、Quest 3 での実測)は、技術記事にまとめています。
[Astro] #191 VRM が粒子になって溶け、別の VRM が渦から組み上がる — 切り替え演出の実装と実測
VRM の表面から点を取って粒子にし、足元の渦になって消え、次の VRM がその渦から組み上がる切り替え演出の実装記録です。
lain-lab.com更新履歴
| バージョン | 日付 | 内容 |
|---|---|---|
| v1.0 | 2026/10/25 | 初回公開(単体ページ: 6 種類の渦、MESH / WIRE、粒子数、URL パラメータ。トップページ: VRM 切り替え演出、VRM_MELT_FX で ON / OFF、既定は OFF) |
クレジット
- 描画は、Three.js(r170、jsDelivr から読み込み)の、
GLTFLoaderとOrbitControlsを使っています(MIT ライセンス) - トップページの VRM の読み込みは、@pixiv/three-vrm を使っています(MIT ライセンス)
- 粒子の取り方、渦の形、シェーダー、画面は、自作です
VRM MELT は、個人の制作物です。