1
コンフィギュレーターモデルの分割方法メイン車体と部位ごとのファイル（部品名で紐付け）
(事例) 折りたたみ自転車・Polish 3D
カタログに載せきれないほどの組み合わせ。顧客は来店前に構成を完了
折りたたみ自転車のオンライン3Dコンフィギュレーター。顧客は来店前にカスタマイズを済ませ、サイズとフィット感を確認したうえで、その構成を販売店に持ち込みます。
同じ手法は、カスタマイズ可能な高単価製品にも適用できます：自転車、電動バイク、家具、高級アクセサリー、アウトドア用品。
15か所の交換可能パーツ
15色のフレームカラー
2つの本番サイト
6言語
(課題)
組み合わせの数が、カタログの表現範囲を超えている
H6モデルには、交換可能な15のパーツと15色のフレームカラーがあり、さらにProとUltraの二つのグレードと四つのスタイルが加わります。カタログの写真は、どれも組み合わせの一つしか表現できません。
顧客が注文前に確認したいのは、主に三点です：パーツ交換後の外観、折りたたみ時のサイズ、乗車時のフィット感。これらは従来、店頭で確認していましたが、プロジェクトでは、来店前にオンラインで済ませられるようにすることを目指しました。
(アプローチ)
常駐する3Dの完成車シーンと、透明な選択パネル
画面の最下層に完成車の3Dシーンを常駐させ、その上に透明なカスタマイズUIを重ねています。どの選択肢を変えても、車体に即座に反映されます。
スマートフォンでの性能を前提条件としました。一般的な圧縮方式では、3Dモデルを展開した後の形状データがビデオメモリをほぼ倍消費します。そこで、先にデータを軽量化してから圧縮する方式に改めました：ダウンロード量は元の形式より約二割減り、メモリ使用量は増えていません。
デスクトップ
スタイルをワンクリックで切り替え、背景色も連動
スタイルバーにはProとUltraの2グレードと複数のスタイルが並び、選ぶとフレーム、ホイール、背景色が一緒に切り替わります。配色モードでは、フレームの色を順に入れ替えられます。
各レイヤーの手法は、別記事で詳しく解説しています。
第1層
第2層
第三層
第四層
コンフィギュレーター
2
コンフィギュレータールールによる遮断取り付けられない組み合わせは、まず理由を説明してから、実現可能な組み合わせに切り替えます。
3
コンフィギュレーターデータソース仕様はバックエンドのデータベースを正とし、フロントエンドにはハードコードしません。
4
コンフィギュレーター構成の持ち帰り方式構成カード、QRコード、仕様PDF
スマホの性能を前提とし、量子化してから圧縮する方式を選び、ダウンロードとメモリの両立を図っています。
ダウンロード量デコード後のGPUジオメトリ
- 26.32MBmeshopt52.18MB
- 21.18MBqdraco確定約 52MB
- 16.31MBdraco のみ96.86MB
ファーストビューのモデルファイルは7つです。GPUジオメトリはモデルファイルの内容から推定しており、テクスチャは含みません。
(設計の要点)
三つの設計ポイント
パーツ交換
パーツを一点ずつカスタマイズする際、各選択肢の横に参考重量を表示します。取り付けられない組み合わせは理由を示したうえで自動的に切り替わり、製造できない車体が構成されるのを防ぎます。
製造できない車の組み合わせを防ぎます。
選択
遮断
説明
確認
切り替え
ゲスト
コンフィギュレーター
1
ゲスト取り付けられない部品をクリック
2
コンフィギュレータールール表で遮断取り付けられない組み合わせは、まず遮断します
3
コンフィギュレーター理由を説明
4
ゲスト確認
5
コンフィギュレーター自動切り替え例：E-Bikeは Proにのみ取り付け可能
フィッティング
身長、脚の長さ、腕の長さに応じて3Dライダーが動き、膝と股関節の角度、前後輪の荷重配分を表示します。写真は端末上だけで処理し、アップロードも保存もしません。
デスクトップ
適合分析、スライダーに合わせて即時更新
適合分析は3Dライダーで、膝と股関節の角度、シート高、前後輪の重量配分を表示します。身長スライダーを動かすと、体型と数値が即座に更新されます。
持ち帰り
完了後には専用の構成カードが生成されます：三面図の完成車画像、パーツごとの仕様と重量、QRコード、仕様PDF。位置情報から近隣の認定販売店を検索することもできます。
オプションが複雑で単価の高い製品は、モデルと仕様表を用意して初回ミーティングで話し合うのが適しています。
(スマホ版)
スマホのブラウザで完全に動作し、アプリのダウンロードは不要です。
スマートフォン
スマートフォンでそのまま操作、ダウンロード不要
同じコンフィギュレーターがスマートフォンのブラウザで完全に動作し、アプリのダウンロードは不要です。スタイルバーは左右にスワイプでき、配色モードでフレームの色を順に入れ替えられます。
スマートフォン
適合分析、スマートフォンでも即時反映
適合分析はスマートフォンでも同じ3Dライダーで表示されます。身長スライダーを動かすと、関節角度と前後輪の重量配分が更新されます。
(成果)
本番サイト二つと六言語を、一つのコードベースから出力
国際サイトと中国サイトは同一のコードから生成し、UIは繁体字中国語、簡体字中国語、英語、ドイツ語、日本語、韓国語に対応しています。中国サイトでは、セルフホストのフォント、トラッキングの調整、画像の自サイト配信、3DモデルのCDNを別途整備しました。
6言語と2つの正式サイトが、同じ仕様データを共有しています。
データソース
- バックエンドのデータベース仕様はこれを正とし、六言語分のフィールドを含みます
- 静的バックアップ別途一式を保管
仕様
フロントエンド
- 同一のプログラムコードインターフェースは六言語に対応しています。
データに応じて生成
サイトと顧客が持ち帰る書類
- 国際サイト
- 中国サイト
- 構成カード
- 仕様PDF
取得できない場合構成カードの変速段数と歯数は「—」と表示し、既定値で代替しません。
(工程記録)
手法と実測、カードごとに展開
3Dコンフィギュレーターの四層アーキテクチャ：折りたたみ自転車の開発記録
推測可能な接頭辞を除くと、URLは1,000文字超から約120文字に短縮
- JSON + base641,000文字超QRコードが密になりスマートフォンで読み取れない
- 推測可能な接頭辞を除去
- コンパクトな文字列約120文字
3Dモデル最適化の前後比較：ダウンロード量とメモリの実測
ピクセル密度を下げるのは、ボトルネックがピクセルの場合にのみ効果があります。 関連する手法
- ピクセル密度を下げたい操作中は一時的に下げる
- まずボトルネックを計測ピクセル、draw call、三角形数
- ボトルネックがピクセル下げてよいピクセル密度を下げると効果あり
- ボトルネックがピクセルでない変更しない行き来の切り替えは余分なコスト
前後比較表
| 指標 | 前 | 後 | 計測方法 |
|---|---|---|---|
| ダウンロード量 | meshopt 26.32MB | qdraco 21.18MB（19.5%少ない） | 3種類のエンコードはすべて元ファイルから再圧縮。純粋なdracoは16.31MB |
| GPUジオメトリ（デコード後、テクスチャを除く） | meshopt 52.18MB | qdraco 約52MB；純粋なdraco 96.86MB | GLBの内容を解析して推定 |
Web 3Dパフォーマンスエンジニアリング：計測・予算設定から検収までの全工程
2回の棚卸しにより、ファーストビューのダウンロード量は約57 MBから約37 MBに減り、各回で実行時に使われないデータのみを対象としました。
- 棚卸し前約57 MBファーストビューのダウンロード量
- 1回目約14 MB3項目の調整。いずれも実行時には使われないデータです。
- 1回目の後約43 MBファーストビューのダウンロード量
- 2回目約6 MBアセット側の3項目の調整
- 2回目の後約37 MBファーストビューのダウンロード量
同じ車種。ビルド後にヘッドレスブラウザでリソースリクエストを読み取り、拡張子で分類
GLB ファイルが大きすぎるとき：ジオメトリより先にテクスチャを見る
主要色のテクスチャを縮小後、GPUメモリ使用量は約150 MBを占め、以降の検証でサイズは変わらなかった 関連する手法
- 元のテクスチャ約160 MB14枚 4096、うち12枚は単色
- 解像度を下げた際に失われたピクセル約150 MB画面の劣化はなし
- 1024まで縮小約10 MB2色のテクスチャは全解像度に戻し、元画像との差は0
- デコードして全量比較約10 MB14枚を1枚ずつ検証し、抜き取りは行わない
同じ14枚の主要色テクスチャ。数値は概算値です。
圧縮後約1 KBの単色テクスチャが、8本のGLBで合計約43 MBのGPUを無駄に占有
ファイルサイズGPU使用量
- 約1 KB単色テクスチャ、元は2048²無駄なGPU占有約43 MB
- ファイルサイズは変わらず同じものを4×4に縮めた後画面は変わらずほぼゼロ
同じ2048²の単色テクスチャを8本のGLBに入れると、GPU使用量は8本分の合計になる。4×4に縮めるのはその場での書き換えで、各GLBのファイルサイズは変わらない。
テクスチャはデコード後の標準偏差を確認してから、4×4に縮小するかKTX2に圧縮するかを決定
- 全解像度にデコードRGBA32で読み込み、各チャンネルにアルファを含む
- 標準偏差を計算
- 標準偏差が04×4に縮小単色、画面は変わらず
- 標準偏差が大きく、透明部分あり高品質 UASTCくり抜きの縁が崩れないようにするため
- 標準偏差が大きく、透明部分なし低ビットレート ETC1Sデコードして比較し、くすんだものはUASTCで再エンコード
外注3Dモデルの受け入れ・再現・検収フロー
GLBをファイル全体で書き直すと、ファイルサイズは元の約1.4〜2.9倍に膨らむ 関連する手法
元のファイルサイズ書き直し後のサイズ
- 約5.0 MBモデル1全体を書き直し約9.1 MB
- 約4.8 MBモデル2全体を書き直し約14.1 MB
- 約6.6 MBモデル3全体を書き直し約9.3 MB
3本のGLBをグラフィックライブラリでファイル全体を読み書きした前後のファイルサイズ。数値は概算値
項目ごとに除外していくと、画面の問題は素材かパイプラインのどちらかに絞られます。 関連する手法
- 圧縮版と完全版をそれぞれ確認両方のバージョンで現れれば、圧縮エンコードが原因ではありません。
- テクスチャを単独で表示、単独で非表示テクスチャを除外
- 背面表示モードに切り替え反対側が見えれば、その箇所に面がなく、ジオメトリの穴であることを示します。
- Blenderでソースファイルを直接読み込み開発チーム独自の処理フローを除外
- 同じモデルで配色違いの同名部位同士を比較問題が一方の配色だけで発生しているかを確認
- ソースファイルを直接読み込んでも同じ現象が出る素材の問題と判定部位と数量を添えて、モデリング担当に差し戻し
- ソースファイルは正常で、公開用ファイルのみ異常パイプラインの問題と判定開発チームがソースから再生成し、比較する
- 圧縮後の色がソースと異なるまず圧縮を確認し、素材を先に疑わないデコードして、ソースと1枚ずつ比較
素材の欠陥はモデリング担当、公開用ファイルの再現と検収は開発チームが担当
受付
再現と修正
検収
モデリング担当
開発チーム
顧客
1
モデリング担当ソースファイルと書き出し設定を提供ソースファイルは公開用ファイルを再現するための前提です。
2
モデリング担当追加提出または再出力差し戻しリストにある欠損面、重複、余剰ノードへの対応
3
開発チーム項目ごとに比較欠けた面、重複、余剰ノード。画面に問題がある場合は素材かパイプラインかを判定
4
開発チーム公開用ファイルを再現ソース、出力、パラメータを記録。スキニングパーツは再量子化しない
5
開発チーム数値を伴う検収ワールド座標の差、可視メッシュ数、スケルトンの移動量
6
顧客既存のモデルまたはCADを提供差し替える部位を列挙
7
顧客再構築の要否を決定モデリング担当がソースファイルを提供しない場合
8
顧客検収表と照合して確認各項目の根拠を確認できる
本記事で述べる流れの分担
3D商品展示サイトの費用は何で決まるか：見積と範囲の読み方
受付結果とインタラクションの深さに応じて、同じ要件を異なる見積ルートに分ける
- モデルの出所を確認本番版を再現できるソースファイルがあるか
- 受付時に項目ごとに除外素材の欠陥か、本番処理の欠陥かを切り分け
- インタラクションの深さを確認閲覧、配置、順次分解
- ソースが揃い、欠損面なし、インタラクションは閲覧と配置のみ見積の中心は軽量化、本番化、デバイス別の調整最もシンプルなルート
- ソースは揃っており、顧客はCADの分解シーケンスを別途保有シーケンスの対応付けを追加し、着工前に対応しない箇所を列挙どこまで対応できるかは計算で決まる
- 受付時に欠けた面、重複、余剰ノードを発見修復は独立した項目とし、ほかの項目は条件付きで記載まず素材の問題かどうかを切り分ける
- ソースの出所が不明、または欠損が大きく修復不可能モデルの作り直しは別途見積もり、ほかの項目はモデル確定後に算出作り直しは独立したモデリング作業
範囲、上限、リストは仕様段階で確定させる必要がある
仕様
制作
検収
顧客
開発チーム
1
顧客スマートフォンの上限を設定し、範囲の明記を確認メモリ上限とテクスチャの等級は委託元が決定
2
開発チーム受付時に項目ごとに除外し、対応しない箇所を列挙スマートフォンの予算を項目ごとに換算
3
顧客新たな要件は別途提出範囲外は別途見積もり、元の範囲には含めない
4
開発チーム本番ファイルはソースから再現可能機能をスマートフォンに残すか、PCのみにするかは計測で決定
5
顧客範囲の明記に従い項目ごとに照合記載されている内容が完全な範囲
6
開発チーム事前のリストと照合し、差異を説明対応しない箇所を検収の段階で初めて表面化させない
分担の例示であり、期間を示すものではありません。
初回ミーティング（15〜30分）で、手法の方向性、予算帯、スケジュール案を確認できます。
(お問い合わせ)
Start a project.
三つのステップで、判断に足る進め方と予算帯が得られます。
- 01最初の打ち合わせを予約：時間を選びます。完全な仕様は不要です。
- 02オンライン相談（15〜30分）：進め方の方向性、予算帯、スケジュール案を提示。
- 03素材を確認したうえで、約3〜5営業日で見積書兼納品仕様明細書を提出します。
- メール
- hello@polish-design.com.tw
- 郵送先住所
- (104) 台湾 台北市 中山区 植福路191-1号 3F
