GLB Texture Editor:ブラウザ上で3Dモデルのテクスチャとマテリアルをリアルタイム編集

3D、AR/VR、Digital Twin、あるいはECプラットフォーム向けのアプリケーション開発では、3Dモデルのマテリアルやテクスチャを調整するために、Blender、Maya、3ds Maxといった専用ソフトウェアを使用することが一般的です。しかし、この方法はワークフローを複雑化させるだけでなく、関係者間のコラボレーションも難しくする要因となります。
こうした課題を解決するために、私たちは GLB Texture Editor を開発しました。これは、ソフトウェアのインストールを必要とせず、ブラウザ上でGLBモデルのテクスチャやマテリアルを直接編集できるオンラインツールです。
GLB Texture Editorとは?
GLB Texture Editorは、GLB形式の3Dモデルをアップロードし、色、マテリアル、テクスチャ、その他の表示プロパティをリアルタイムで変更できるWebベースのプラットフォームです。
変更内容は即座に3Dモデルへ反映されるため、ユーザーは結果を確認しながら効率的に調整を行うことができます。
Demo: https://innovation-lab.vitalify.asia/en/gallery/glb-texture-editor

主な機能
リアルタイムプレビュー
テクスチャやマテリアルを編集すると、その結果が即座にモデルへ反映されます。
これにより、以下のメリットが得られます。
- 試行錯誤にかかる時間を短縮
- デザイン作業の効率化
- モデルの再エクスポートや再インポート作業を削減

カラーとマテリアルの編集
以下のような主要なマテリアルパラメータを変更できます。
- Base Color(ベースカラー)
- Roughness(粗さ)
- Metalness(金属感)
- Transparency(透明度)
- その他の表示パラメータ
これにより、同じ製品やモデルの複数バリエーションを短時間で作成できます。

テクスチャの差し替えと更新
新しいテクスチャをアップロードし、そのままモデルへ適用できます。
デザインの更新や素材変更の確認を迅速に行えるため、制作プロセスを大幅に効率化します。

柔軟なテクスチャマッピング制御
GLB Texture Editorでは、テクスチャやマテリアルの変更だけでなく、テクスチャの貼り付け方法も細かく調整できます。
ユーザーは以下の項目を簡単に操作できます。
- Position(位置)テクスチャをモデル表面上で移動し、希望する表示位置へ調整できます。
- Rotation(回転)テクスチャを任意の角度で回転させ、デザインに最適な見た目を実現できます。
- Scale・UV Mapping テクスチャの展開方法を調整し、歪みや不要な繰り返しを防ぐことができます。

Projection Mappingに対応
GLB Texture Editorは複数のテクスチャ投影方式(Projection Mapping)をサポートしています。
Sphere Projection
球体を基準としてテクスチャを投影する方式です。
以下のような曲面を持つオブジェクトに適しています。
- 地球儀
- ボール
- ボトル
- 有機的な形状のオブジェクト

Box Projection
モデルを囲むボックスの各面からテクスチャを投影する方式です。
複雑な形状でもテクスチャの引き伸ばしを抑えられるため、以下のようなモデルに適しています。
- 建築物
- 家具
- 産業機械
- 建築・BIMモデル

Position、Rotation、Projection Mappingをリアルタイムで調整できるため、ユーザーは3D制作ソフトへ戻ることなく、さまざまな表示パターンを素早く試すことができます。
特に以下の用途で効果を発揮します。
- 製品デザインの比較検討
- ブランドデザインの更新
- マテリアルパターンの評価
- 3Dモデルのバリエーション作成
完全Webベース
重いグラフィックソフトウェアをインストールする必要はありません。
ブラウザだけで以下の操作が可能です。
- モデルのアップロード
- マテリアル編集
- プレビュー確認
- 更新済みデータのエクスポート
モダンなGLBフォーマットをサポート
GLBはglTF標準をベースとした3Dフォーマットであり、ジオメトリ、テクスチャ、マテリアルを単一ファイルに格納できます。
そのため、さまざまなプラットフォーム間での共有や表示が容易になります。
なぜオンラインのテクスチャ編集ツールが必要なのか?
実際のプロジェクトでは、モデルの色やマテリアルを変更するために、必ずしもフルスケールの3D制作工程を経る必要はありません。
例えば、
- マーケティング担当者が複数の製品バリエーションを試したい
- 顧客が異なるマテリアルオプションを確認したい
- デザイナーが新しいテクスチャを素早く検証したい
- 開発チームがコラボレーションを効率化したい
といったケースがあります。
GLB Texture Editorは、基本的な編集機能をWeb上で提供することで、デザイン担当者と運用担当者の間のギャップを埋めます。
活用シーン
3D Eコマース
購入前に、顧客が製品の色や素材をカスタマイズできます。
建築・インテリア
建物や室内空間に対して、異なるマテリアルパターンを比較・検証できます。
Digital Twin
デジタル空間上のオブジェクトの外観や状態を迅速に更新できます。
ゲーム・XR開発
Unity、Unreal Engine、XRプラットフォームへ導入する前に、マテリアルやテクスチャを素早く確認できます。
より柔軟な3Dワークフローへ
Webベースの3Dアプリケーションが普及するにつれて、デジタルアセットを迅速かつ効率的に管理・編集するニーズも高まっています。
GLB Texture Editorは、3Dモデルのカスタマイズをよりシンプルで直感的なものにし、開発者だけでなくエンドユーザーにとっても扱いやすい環境を提供することを目指しています。
ぜひデモを体験し、ブラウザ上でのテクスチャ・マテリアル編集が、あなたの3Dワークフローをどのように効率化できるかをご確認ください。
「XR & 3D Web」の関連記事

大規模IFCモデルに対応した高性能BIMビューアのデモバージョン
大規模なBIM(IFCファイル)をWebブラウザで快適に動かす。GLB分割アプローチで表示性能を劇的に改善したビューアのデモを公開しました。

Web流体シミュレーションの実装:WebGLとWebGPUの可能性
ブラウザ上で液体の動きをリアルタイムに再現する「流体シミュレーション」。WebGL/WebGPUのGPU演算から物理アルゴリズム(SPH・FLIP)の仕組み、XRやゲームへの応用まで徹底解説します。

次世代の製品カタログ:URDFが変える「動く」Web展示の可能性
ロボット設計図「URDF」をWebブラウザで滑らかに動かす技術ショーケースを公開。CADデータから「触れる製品カタログ」への転換が、製造業のプロモーションをどう変えるのか。ゲーム開発の知見を用いたリアルな可動表現の可能性を解説します。