1
配置器模型的切法主車加每個部位一支檔，靠零件名稱綁定
(案例) 摺疊自行車・Polish 3D
選配組合多到型錄放不下，顧客於進店前完成配置
摺疊車的線上 3D 配置器。顧客於進入門市前完成選配，確認尺寸與適配，再將配置帶往經銷商。
同樣做法適用於可客製的高單價產品：自行車、電動機車、家具、精品配件與戶外裝備。
15個可替換部位
15種車架顏色
2個正式站
6種語言
(挑戰)
組合數量超出型錄的表達範圍
H6 車款有 15 個可替換部位、15 種車架顏色，另有 Pro、Ultra 兩個等級與四種風格，任何一張型錄照都只呈現其中一種組合。
顧客下單前最常確認三件事：換裝後的外觀、折疊後的尺寸、騎乘時的合身程度。這三件事原本在門市確認，專案希望讓顧客進店前就能在線上完成。
(做法)
常駐的 3D 整車場景，搭配透明的選配介面
畫面底層常駐完整的 3D 整車場景，上方疊加透明的選配介面，任何選項變更都即時反映於車體。
手機效能列為前提。常見壓縮法會使 3D 模型解開後的形狀資料多佔近一倍顯示記憶體，因此改為先精簡資料、再壓縮：下載量較原格式減少約兩成，記憶體用量未增加。
桌機
款式一鍵切換，底色同步變更
款式列排出 Pro、Ultra 兩個等級與多種風格，點選後車架、輪圈與背景色一起更換；配色模式可逐一換上不同的車架顏色。
每一層的做法，另寫成完整文章。
第一層
第二層
第三層
第四層
配置器
2
配置器規則的攔截裝不上的組合先說明原因，再切成可行的組合
3
配置器資料的來源規格以後端資料庫為準，前端不寫死
4
配置器配置的帶走方式配置卡、QR 碼、規格 PDF
手機效能列為前提，因此選量化後再壓縮，下載與記憶體兼顧。
下載量解碼後 GPU 幾何
- 26.32MBmeshopt52.18MB
- 21.18MBqdraco定案約 52MB
- 16.31MB純 draco96.86MB
首屏 7 支模型檔。GPU 幾何由模型檔內容估算，不含貼圖。
(關鍵設計)
三項關鍵設計
換裝
逐件客製時，每個選項旁標示參考重量。無法安裝的組合會說明原因並自動切換，避免配出無法生產的車。
避免配出無法生產的車。
點選
攔下
說明
確認
切換
客人
配置器
1
客人點到裝不上的零件
2
配置器規則表攔下裝不上的組合先擋住
3
配置器說明原因
4
客人確認
5
配置器自動切換例：E-Bike 只能裝在 Pro
適配
依身高、腿長與臂長驅動 3D 騎士，標示膝、髖關節角度與前後輪重量分配。照片僅於裝置上處理，不上傳也不儲存。
桌機
適配分析，滑桿即時更新
適配分析以 3D 騎士呈現膝、髖關節角度、座椅高度與前後輪重量分配。拖動身高滑桿，身形與數值即時更新。
帶走
完成後產生專屬配置卡：三視角整車圖、逐件規格與重量、QR 碼與規格 PDF，並可依位置搜尋附近授權經銷商。
(手機版)
手機瀏覽器完整運作，免下載 App。
手機
手機直接操作，免下載
同一個配置器於手機瀏覽器完整運作，免下載 App。款式列可左右滑動，配色模式逐一換上不同的車架顏色。
手機
適配分析，手機同樣即時
適配分析在手機上同樣以 3D 騎士顯示。拖動身高滑桿，關節角度與前後輪重量分配隨之更新。
(成果)
兩個正式站與六種語言，由同一份程式碼產出
國際站與中國站由同一份程式碼產出，介面涵蓋繁中、簡中、英、德、日、韓。中國站另行處理自架字型、追蹤調整、圖片站內供應與 3D 模型 CDN。
六種語言與兩個正式站，共用一份規格資料。
資料來源
- 後端資料庫規格以此為準，含六語欄位
- 靜態備援另放一份
規格
前端
- 同一份程式碼介面有六種語言
依資料產出
站台與客人帶走的文件
- 國際站
- 中國站
- 配置卡
- 規格 PDF
抽不到時配置卡的速別、齒數顯示「—」，不拿預設值頂替。
(工程紀錄)
做法與實測，逐張可展開
摺疊車 3D 配置器的開發拆解
去掉可推導的前綴後，網址從超過 1,000 字元縮到約 120 字元
- JSON 加 base64超過 1,000 字元QR 碼密到手機拍不動
- 去掉可推導的前綴
- 緊湊字串約 120 字元
3D 模型優化前後對照表：下載量與記憶體的實測數字
降像素密度只在瓶頸是像素時才有用 相關做法
- 想降像素密度互動時暫時降低
- 先量瓶頸像素、draw call、三角形數
- 瓶頸在像素可以降降像素密度才有用
- 瓶頸不在像素不要動來回切換是額外成本
前後對照表
| 指標 | 前 | 後 | 量測方式 |
|---|---|---|---|
| 下載量 | meshopt 26.32MB | qdraco 21.18MB（少 19.5%） | 三種編碼都從原始檔重壓。純 draco 為 16.31MB |
| GPU 幾何（解碼後，不含貼圖） | meshopt 52.18MB | qdraco 約 52MB；純 draco 96.86MB | 解析 GLB 內容估算 |
Web 3D 效能工程：從量測、預算到驗收的完整流程
兩輪盤點讓首屏下載量從約 57 MB 降到約 37 MB，每輪只動執行期用不到的資料
- 盤點前約 57 MB首屏下載量
- 第一輪約 14 MB三項調整，皆為執行期用不到的資料
- 第一輪後約 43 MB首屏下載量
- 第二輪約 6 MB資產端三項調整
- 第二輪後約 37 MB首屏下載量
同一款車；建置後在 headless 瀏覽器讀取資源請求，依副檔名分類
GLB 檔太大：先看貼圖，再看幾何
主體色貼圖降階後，GPU 佔用掉了約 150 MB，後續驗證不再改變大小 相關做法
- 原始貼圖約 160 MB14 張 4096，其中 12 張是純色
- 降階時丟掉的像素約 150 MB畫面沒有損失
- 降到 1024約 10 MB雙色貼圖升回全解析度，與原圖的差為 0
- 解碼回來全量比對約 10 MB14 張逐張驗，不抽樣
同一批 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，逐通道含 alpha
- 計算標準差
- 標準差為 0縮成 4×4純色，畫面不變
- 標準差大，含透明高品質 UASTC鏤空邊緣才不會破碎
- 標準差大，不含透明低位元率 ETC1S解碼比對，發灰的改 UASTC 重編
外包 3D 模型的進件、重現與驗收流程
整檔重寫 GLB，檔案大小膨脹到原本的約 1.4 至 2.9 倍 相關做法
原檔大小整檔重寫後的大小
- 約 5.0 MB模型一整檔重寫約 9.1 MB
- 約 4.8 MB模型二整檔重寫約 14.1 MB
- 約 6.6 MB模型三整檔重寫約 9.3 MB
三支 GLB 以圖形庫整檔讀寫前後的檔案大小，數字取約略值
逐項排除之後，畫面問題會落在素材或管線其中一邊 相關做法
- 壓縮版與完整版各看一次兩個版本都出現，就不是壓縮編碼造成
- 貼圖單獨顯示、單獨關閉排除貼圖
- 切到背面顯示模式能看見另一側，代表該處沒有面，是幾何破洞
- 用 Blender 直接讀來源檔排除開發團隊自己的處理流程
- 同款不同配色的同名部位互比確認問題是否只出現在其中一個配色
- 來源檔直接讀取就有同樣現象判為素材問題附上部位與數量，退回建模方
- 來源檔正常，只有上架檔異常判為管線問題由開發團隊從來源重新產出，再比對
- 壓縮後的顏色與來源不同先查壓縮，不先責怪素材解碼回來，與來源逐張比對
素材的缺陷歸建模方，上架檔的重現與驗收歸開發團隊
進件
重現與修復
驗收
建模方
開發團隊
客戶
1
建模方提供來源檔與匯出設定來源檔是上架檔能重現的前提
2
建模方補件或重出針對退回清單中的缺面、重複與多餘節點
3
開發團隊逐項比對缺面、重複、多餘節點；畫面有問題時判素材或管線
4
開發團隊重現上架檔記錄來源、產出與參數；蒙皮零件不二次量化
5
開發團隊附數字的驗收世界座標差、可見網格數、骨架位移
6
客戶提供現有模型或 CAD並列出要換的部位
7
客戶決定是否重建建模方不提供來源檔時
8
客戶對照驗收表確認每一項都看得到證據
本文所述流程的分工
3D 商品展示網站的費用由什麼決定：看懂報價與範圍
進件結果與互動深度，把同一份需求分成不同的報價路線
- 確認模型來源有沒有能重現上線版的來源檔
- 進件逐項排除分出是素材壞，還是上線處理壞
- 確認互動深度檢視、配置、依序拆解
- 來源齊全，無缺面，互動限於檢視與配置報價主體是輕量化、上線與裝置調校最單純的一條路線
- 來源齊全，客戶另有 CAD 爆炸序列加上序列對應，動工前列出不會對應的部分能做到哪裡是算出來的
- 進件發現缺面、重複或多餘節點修復單獨成項，其餘項目寫成有條件先分清楚是素材問題
- 來源說不清，或缺損大到無法修補模型重做另計，其餘項目待模型定案再算重做是獨立的建模工作
範圍、上限與清單，都在規格階段就要定下來
規格
製作
驗收
客戶
開發團隊
1
客戶訂手機上限，確認範圍聲明記憶體上限與貼圖分級由業主決定
2
開發團隊進件逐項排除，列出不會對應的部分並逐項換算手機預算
3
客戶新需求另行提出超出範圍者另行報價，不併入原範圍
4
開發團隊上線檔可由來源重現功能留手機或只給桌機，以量測決定
5
客戶依範圍聲明逐項核對所載即為完整範圍
6
開發團隊對照事前清單說明差異不會對應的部分不在驗收時才出現
只示意分工，不代表期間
(聯絡)
Start a project.
三個步驟，取得可判斷的做法與預算區間。
- 01預約第一場會議：選擇時段，不需要完整規格。
- 02線上諮詢 15 至 30 分鐘：取得做法方向、預算區間與時程草案。
- 03檢視素材後，約 3 至 5 個工作天提供報價單暨交付規格明細表。
- 信箱
- hello@polish-design.com.tw
- 通訊地址
- (104) 台北市中山區植福路191-1號3F
