[WEB App] VRM Texture Replacer - VRMテクスチャの確認・差し替えツール

[WEB App] VRM Texture Replacer - VRMテクスチャの確認・差し替えツール

概要

VRM ファイルのテクスチャをブラウザ上で確認・差し替えできるツール。 Blender や VRoid Studio を起動するまでもない軽作業 —— ちょっとテクスチャの色を変えたい、別の画像に差し替えたい —— を、ブラウザだけで完結させる。

既存の VRM テクスチャ差し替えツールは Unity 製の Windows アプリのみで、Webブラウザで動作するものは世界初。

ファイルはローカル環境(ブラウザ内)で処理され、外部サーバーには送信されません。

🔗 ツールを開く: VRM Texture Replacer

VRM Texture Replacer - VRMテクスチャの確認・差し替えツール

使い方

1. VRM を読み込む

画面左側のプレビューエリアからモデルを読み込む。

  • ドラッグ&ドロップ — .vrm ファイルをプレビューエリアにドロップ
  • クリックで選択 — 「SELECT FILE」をクリックしてファイル選択ダイアログから選ぶ

読み込みが完了すると、左側に3Dプレビュー(マウス操作でカメラ回転・ズーム可能)、右側にテクスチャ一覧が表示される。

VRM Texture Replacer - 1. VRM を読み込む

2. テクスチャ一覧の確認

右パネルにモデルが持つ全テクスチャが一覧表示される。

表示項目内容
サムネイルテクスチャの縮小プレビュー
テクスチャ名VRM内部のテクスチャ名
解像度幅 x 高さ(px)
メッシュ名テクスチャが使われているパーツ名(Face, Body, Hair等)

テクスチャをクリックすると、下部に拡大プレビューと操作ボタンが表示される。

VRM Texture Replacer - 2. テクスチャ一覧の確認

3. テクスチャのエクスポート

選択したテクスチャの EXPORT PNG ボタンをクリックすると、テクスチャがPNG画像としてダウンロードされる。

ダウンロードした画像を好きなペイントツール(Photoshop、GIMP、Krita、ペイントソフト等)で編集する。

VRM Texture Replacer - 3. テクスチャのエクスポート

4. 編集済みテクスチャのインポート

編集が終わったら、IMPORT ボタンから編集済み画像を選択する。

  • リロードなしで3Dモデルにリアルタイム反映される
  • 差し替え済みテクスチャには緑色の REPLACED バッジが表示される
  • カメラを自由に回転・ズームして、差し替え結果をあらゆる角度から確認できる
VRM Texture Replacer - 4. 編集済みテクスチャのインポート

5. VRM のダウンロード

テクスチャを差し替えると、パネル上部に ⬇ DOWNLOAD VRM ボタンが表示される。 クリックすると、差し替え済みテクスチャを含むVRMファイルがダウンロードされる。

項目内容
ファイル名[元のファイル名]_modified.vrm
メタデータタイトル・作者・ライセンス・ボーン設定等、全て保持
Spring Bone揺れもの設定も保持
表情ブレンドシェイプ設定も保持

VRM固有のメタデータはGLBバイナリレベルで保持されるため、差し替え後のVRMはVRoid Hub・VRChat等にそのままアップロード可能。

VRM Texture Replacer - 5. VRM のダウンロード

ワークフロー

典型的な使い方は以下の通り。

  1. VRM Texture Replacer にVRMをドロップ
  2. 気になるテクスチャを EXPORT PNG で保存
  3. 好きなペイントツールで編集(色変更、模様追加、テクスチャ差し替え等)
  4. 編集済み画像を IMPORT でリアルタイム確認
  5. 問題なければ DOWNLOAD VRM で保存

Blender や Unity を起動する必要がないため、軽微な修正が数分で完了する。

既存ツールとの違い

項目Unity製ツール(BOOTH等)VRM Texture Replacer
動作環境Windows + UnityWebブラウザ(OS問わず)
インストール必要不要
3Dプレビューありあり(カメラ自由操作)
リアルタイム反映ありあり
メタデータ保持ありあり(バイナリレベル)
価格無料〜有料無料

技術仕様

項目内容
レンダリングThree.js (WebGL)
VRM パース@pixiv/three-vrm
カメラ操作OrbitControls
VRM再エクスポートGLBバイナリ直接操作(メタデータ完全保持)
フレームワークAstro + React (TSX)
データ処理全てブラウザ内、サーバー通信なし

対応ブラウザ

WebGL 対応のモダンブラウザ(Chrome / Edge / Firefox / Safari)。 VRMファイルのパースとテクスチャ操作をブラウザ内で行うため、PC環境での利用を推奨。