[WEB App] VRM Texture Replacer - VRMテクスチャの確認・差し替えツール
概要
VRM ファイルのテクスチャをブラウザ上で確認・差し替えできるツール。 Blender や VRoid Studio を起動するまでもない軽作業 —— ちょっとテクスチャの色を変えたい、別の画像に差し替えたい —— を、ブラウザだけで完結させる。
既存の VRM テクスチャ差し替えツールは Unity 製の Windows アプリのみで、Webブラウザで動作するものは世界初。
ファイルはローカル環境(ブラウザ内)で処理され、外部サーバーには送信されません。
🔗 ツールを開く: VRM Texture Replacer
[WEB App] VRM Texture Replacer
PROTOCOL.LAIN // VRMテクスチャの確認・差し替えツール
lain-lab.com
使い方
1. VRM を読み込む
画面左側のプレビューエリアからモデルを読み込む。
- ドラッグ&ドロップ — .vrm ファイルをプレビューエリアにドロップ
- クリックで選択 — 「SELECT FILE」をクリックしてファイル選択ダイアログから選ぶ
読み込みが完了すると、左側に3Dプレビュー(マウス操作でカメラ回転・ズーム可能)、右側にテクスチャ一覧が表示される。
2. テクスチャ一覧の確認
右パネルにモデルが持つ全テクスチャが一覧表示される。
| 表示項目 | 内容 |
|---|---|
| サムネイル | テクスチャの縮小プレビュー |
| テクスチャ名 | VRM内部のテクスチャ名 |
| 解像度 | 幅 x 高さ(px) |
| メッシュ名 | テクスチャが使われているパーツ名(Face, Body, Hair等) |
テクスチャをクリックすると、下部に拡大プレビューと操作ボタンが表示される。
3. テクスチャのエクスポート
選択したテクスチャの EXPORT PNG ボタンをクリックすると、テクスチャがPNG画像としてダウンロードされる。
ダウンロードした画像を好きなペイントツール(Photoshop、GIMP、Krita、ペイントソフト等)で編集する。
4. 編集済みテクスチャのインポート
編集が終わったら、IMPORT ボタンから編集済み画像を選択する。
- リロードなしで3Dモデルにリアルタイム反映される
- 差し替え済みテクスチャには緑色の REPLACED バッジが表示される
- カメラを自由に回転・ズームして、差し替え結果をあらゆる角度から確認できる
5. VRM のダウンロード
テクスチャを差し替えると、パネル上部に ⬇ DOWNLOAD VRM ボタンが表示される。 クリックすると、差し替え済みテクスチャを含むVRMファイルがダウンロードされる。
| 項目 | 内容 |
|---|---|
| ファイル名 | [元のファイル名]_modified.vrm |
| メタデータ | タイトル・作者・ライセンス・ボーン設定等、全て保持 |
| Spring Bone | 揺れもの設定も保持 |
| 表情 | ブレンドシェイプ設定も保持 |
VRM固有のメタデータはGLBバイナリレベルで保持されるため、差し替え後のVRMはVRoid Hub・VRChat等にそのままアップロード可能。
ワークフロー
典型的な使い方は以下の通り。
- VRM Texture Replacer にVRMをドロップ
- 気になるテクスチャを EXPORT PNG で保存
- 好きなペイントツールで編集(色変更、模様追加、テクスチャ差し替え等)
- 編集済み画像を IMPORT でリアルタイム確認
- 問題なければ DOWNLOAD VRM で保存
Blender や Unity を起動する必要がないため、軽微な修正が数分で完了する。
既存ツールとの違い
| 項目 | Unity製ツール(BOOTH等) | VRM Texture Replacer |
|---|---|---|
| 動作環境 | Windows + Unity | Webブラウザ(OS問わず) |
| インストール | 必要 | 不要 |
| 3Dプレビュー | あり | あり(カメラ自由操作) |
| リアルタイム反映 | あり | あり |
| メタデータ保持 | あり | あり(バイナリレベル) |
| 価格 | 無料〜有料 | 無料 |
技術仕様
| 項目 | 内容 |
|---|---|
| レンダリング | Three.js (WebGL) |
| VRM パース | @pixiv/three-vrm |
| カメラ操作 | OrbitControls |
| VRM再エクスポート | GLBバイナリ直接操作(メタデータ完全保持) |
| フレームワーク | Astro + React (TSX) |
| データ処理 | 全てブラウザ内、サーバー通信なし |
対応ブラウザ
WebGL 対応のモダンブラウザ(Chrome / Edge / Firefox / Safari)。 VRMファイルのパースとテクスチャ操作をブラウザ内で行うため、PC環境での利用を推奨。