[2026/7/24]

[WEB App]VRM Thumbnail Editor - VRMファイルにサムネイル画像を追加・差し替えるツール

VRM Thumbnail Editor

VRMファイルにサムネイル画像を追加・差し替えるブラウザ完結型ツールです。

VRMモデルにサムネイルを埋め込むには従来Unityが必要でしたが、このツールはブラウザだけで完結します。glTF Binary（glB）を直接パースしてサムネイル画像を埋め込み、VRMファイルとして再組み立てします。

VRMファイルにサムネイル画像を追加・差し替えるブラウザ完結ツール。Unity不要、VRM 0.x/1.0両対応。

従来、VRMにサムネイルを埋め込むにはUnityとUniVRMが必要でした。このツールはブラウザのみで動作し、インストールも環境構築も不要です。

VRMファイルは一切サーバーに送信されません。glBバイナリのパースからサムネイル埋め込み、ファイル再組み立てまで全てブラウザ内で完結します。

VRM 0.x（extensions.VRM.meta.texture）と VRM 1.0（extensions.VRMC_vrm.meta.thumbnailImage）の両方のメタ構造に対応しています。

外部で画像を用意しなくても、ツール内の3Dプレビューから好きな角度でスクリーンショットを撮影し、そのままサムネイルとして設定できます。

タイトル・作者・ライセンス情報は読み取り表示のみです。編集できないため、著作権情報が意図せず改ざんされる心配がありません。

サムネイルを設定（2つの方法）
- 「画像を選択」→ PNG/JPEG/WebPファイルをアップロード
- 「3Dビューから撮影」→ プレビュー画面の現在の表示をキャプチャ

サムネイルがないVRMには新規追加、既にサムネイルがあるVRMには差し替えが行われます。

VRMモデルにサムネイルを追加する手段が限られていることに気づき開発しました。

「VRM サムネイル追加」で検索するとUnityを使う方法しか出てこず、ブラウザで完結するツールが存在しませんでした。VRMはglTF Binary（glB）ベースのフォーマットなので、バイナリ構造を理解すればJavaScriptだけでサムネイルの埋め込みが可能です。

glBのJSONチャンクにメタ情報を追加し、バイナリチャンクに画像データを結合するだけのシンプルな構造ですが、4バイトアライメントやVRM 0.x/1.0のメタ構造の違いなど、細かい注意点がありました。