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
