[WEB App] FBX Viewer v1 — ブラウザ完結のFBXビューア＆テクスチャ修復・GLBエクスポートツール

FBX Viewer v1

FBXファイルをブラウザ上で直接開いて3Dプレビュー、テクスチャの修復・割り当て、GLB形式へのエクスポートまでを完結させるツールです。

FBX + テクスチャ（DDS / TGA / PNG等）をまとめたZIPをドロップするだけで、テクスチャの自動変換・適用が行われ、そのまま3Dビューで確認できます。テクスチャ参照が壊れたFBXでも、マテリアル単位で手動割り当てを行い、テクスチャ埋め込みのGLBとして書き出すことが可能です。

※現在ベータ版で一部のモデルデータの変換に不都合があります

ツール

FBX Viewer v1 — FBXビューア＆テクスチャ修復・GLBエクスポート

FBX/ZIPをドロップして3Dプレビュー。DDS/TGA自動変換、テクスチャ手動割り当て、GLBエクスポート。完全ローカル処理。

lain-lab.com

特徴

ZIP一括読み込み＆DDS/TGA自動変換

FBX単体はもちろん、テクスチャを同梱したZIPファイルにも対応。ZIP内のDDS（DXT1/DXT5）やTGAテクスチャをJavaScriptでソフトウェアデコードし、ブラウザ表示可能なPNGへリアルタイム変換します。ブラウザが直接扱えないゲームアセット系のテクスチャ形式でも、追加ソフトなしで表示できます。

マテリアル別テクスチャ手動割り当て

FBXのテクスチャ参照が壊れている場合（ファイル名のリネーム、パスの不整合など）でも、マテリアル一覧からセレクトボックスでテクスチャを手動割り当てできます。変更は3Dビューにリアルタイム反映されるため、どのテクスチャがどのパーツに対応するか視覚的に確認しながら作業できます。

FBX内部テクスチャ参照の解析

FBXバイナリを直接走査し、内部に記録されたテクスチャ参照ファイル名（Filename / RelativeFilename）を抽出・表示します。ゲーム抽出ツール（Noesis等）でリネームされたテクスチャとの不一致を一目で確認できます。

Mixamoモーションリターゲット

Mixamo形式のモーションFBXを追加ドロップすることで、ベースモデルにアニメーションを適用できます。ボーン名の正規化（mixamorig: / mixamorigHips 等の揺れ吸収）とリターゲット処理により、異なるFBX間でのモーション流用が可能です。

GLBエクスポート（テクスチャ埋め込み）

修復・割り当てしたテクスチャをそのまま埋め込んだGLB（glTF Binary）として書き出します。GLBは単一ファイルにすべてのデータを内包するため、テクスチャ参照切れが発生しません。Babylon.js Sandbox、Windows 3Dビューアー、各種3Dエンジンでそのまま利用できます。

完全ローカル処理

すべての処理（FBX解析、テクスチャ変換、3Dレンダリング、GLBエクスポート）がブラウザ内で完結します。ファイルが外部サーバーへ送信されることは一切ありません。

---

使い方

1. FBXファイル、またはFBX＋テクスチャを同梱したZIPをドロップゾーンにドロップ

2. 3Dビューでモデルを確認（DDS/TGAテクスチャは自動変換・適用）

3. テクスチャが正しく表示されない場合は、左パネルのMATERIALS欄でマテリアルごとにテクスチャを手動割り当て（リアルタイム反映）

4. 必要に応じてモーションFBXを右パネルにドロップしてアニメーション確認

5. EXPORT GLBでテクスチャ埋め込みのGLBファイルをダウンロード

対応フォーマット

入力

形式	説明
FBX (Binary)	Three.js FBXLoaderが対応するバイナリFBX
ZIP (FBX + Textures)	FBXとテクスチャファイルを同梱したZIP
DDS (DXT1 / DXT5 / 非圧縮BGRA)	ソフトウェアデコードでPNGに変換
TGA	Three.js TGALoaderでデコード
PNG / JPG / WebP / BMP / GIF	そのまま利用

出力

形式	説明
GLB (glTF Binary)	テクスチャ埋め込み、アニメーション付き

技術スタック

• Three.js r160 (FBXLoader / GLTFExporter / OrbitControls) — 3Dレンダリング＆FBX解析
• DDSLoader / TGALoader — ゲームアセット系テクスチャ読み込み
• カスタムDDS デコーダ — DXT1 / DXT5 ブロック圧縮のJSソフトウェア展開
• JSZip — ZIP展開・生成
• HTML / CSS / JavaScript — Astroページ組み込み、Cyberpunk風UI

処理パイプライン

[入力] FBX単体 or ZIP (FBX + DDS/TGA/PNG...)
→ JSZip展開（ZIP時）
→ DDS/TGAテクスチャ → ソフトウェアデコード → PNG Blob URL 生成
→ FBXバイナリ解析 → テクスチャ参照ファイル名抽出
→ Three.js FBXLoader → シーン構築
→ PhongMaterial → MeshStandardMaterial 変換
→ テクスチャ自動パッチ（force-assign）
→ [3Dプレビュー] マテリアル別テクスチャ手動割り当てUI
→ 壊れたテクスチャ掃除（null image除去）
→ GLTFExporter → [GLB出力]

開発の経緯

FBXファイルはAutodeskの独自フォーマットで、書き出し元（Blender、Maya、VRoid Studio、ゲーム抽出ツール等）によって内部構造やテクスチャ参照の形式がバラバラです。特にゲームアセットの抽出データでは、テクスチャがDDS/TGA形式で外部ファイルとして分離されていたり、ファイル名がリネームされてFBX内部の参照と一致しなくなるケースが頻発します。

Blenderではシェーダーノードで手動テクスチャ割り当てが可能ですが、3Dモデリング初心者には敷居が高く、「ちょっとFBXの中身を確認したい」だけの場面では大げさです。

そこで、FBXとテクスチャをZIPにまとめてドロップするだけで、テクスチャの自動変換・プレビュー・手動修復・GLBエクスポートまでをブラウザ内で完結できるツール「FBX Viewer」を開発しました。Blenderで行っていたテクスチャ貼り直し作業を、ブラウザ上でサクッとできるようにすることが目標です。

既知の制限事項

• ASCII FBXには非対応（Binary FBXのみ）
• FBXバイナリ内のテクスチャ参照パス自体の書き換え（修復）は未実装（v2予定）
• ゲーム抽出データ等でメッシュ構造が複雑に入り組んでいる場合、GLBエクスポート時に一部メッシュが欠落する可能性あり
• DDS形式はDXT1 / DXT5 / 非圧縮BGRAに対応（BC7等の新圧縮形式は未対応）

更新履歴

• [2026/08/10]: v1 公開 — FBX/ZIP読み込み、DDS/TGA自動変換、3Dプレビュー、マテリアル別テクスチャ手動割り当て、GLBエクスポート