Install
openclaw skills install high-precision-3d-web-optimizeOptimize high-precision .glb/.gltf models for Web 3D and digital twin delivery. Use when preparing Three.js or Babylon.js assets that need UV-safe simplification, slot-based texture compression (Normal/ORM → UASTC, BaseColor/Emissive → ETC1S), differentiated LOD × slot resolution, Draco compression, LOD generation, manifest outputs, and browser-friendly loading performance without breaking UVs, materials, or texture appearance. Avoid destructive remesh or re-topology unless the user explicitly requests editable low-poly assets.
openclaw skills install high-precision-3d-web-optimize将高精度 GLB/GLTF 模型优化为适合 Web 3D 与数字孪生平台交付的轻量化资产,重点是 保护 UV、保护材质与贴图表现、降低文件体积与浏览器渲染压力,并输出可直接接入的 LOD 结果。
optimized.glb、lod0.glb、lod1.glb、lod2.glb 和 manifest.json。lod0、lod1、lod2(按 LOD 级别对不同 slot 差异化分辨率与编码)manifest.json(含纹理格式、KTX2 参数、slot 级别压缩映射).glb size / 文件体积异常大output/
└─ model-name/
├─ model-name.optimized.glb
├─ model-name.lod0.glb
├─ model-name.lod1.glb
├─ model-name.lod2.glb
└─ manifest.json
{
"lod0": 1.0,
"lod1": 0.55,
"lod2": 0.25,
"textureSize": 2048,
"geometryCompression": "draco",
"textureCompression": "webp",
"ktx2Options": {
"etc1sQuality": 128,
"uastcQuality": 2,
"mipmapMode": "generate",
"supercompression": "zstd"
},
"textureSlotGroups": {
"normal": { "ktx2Mode": "uastc", "colorSpace": "linear", "webpQuality": 90 },
"orm": { "ktx2Mode": "uastc", "colorSpace": "linear", "webpQuality": 90 },
"baseColor": { "ktx2Mode": "etc1s", "colorSpace": "srgb", "webpQuality": 80 },
"emissive": { "ktx2Mode": "etc1s", "colorSpace": "srgb", "webpQuality": 75 }
},
"lodSlotTextureSizes": {
"lod0": { "baseColor": 2048, "normal": 2048, "orm": 1024, "emissive": 2048 },
"lod1": { "baseColor": 1024, "normal": 1024, "orm": 512, "emissive": 1024 },
"lod2": { "baseColor": 512, "normal": 256, "orm": 256, "emissive": 512 }
}
}
textureCompression:"webp" | "ktx2",默认 "webp"。ktx2Options:仅在 textureCompression === "ktx2" 时生效。textureSlotGroups:定义每个纹理 slot 的编码策略(KTX2 模式 / 色空间 / WebP 质量)。lodSlotTextureSizes:LOD 级别 × slot 的差异化分辨率映射,远景 slot 可更激进降级。Applying identical compression to all textures either bloats size (over-preserving unimportant slots) or over-compresses critical slots. Slot-based logic differentiates by texture semantics:
| Slot | KTX2 Mode | Color Space | WebP Quality | Notes |
|---|---|---|---|---|
| Normal | UASTC | Linear | 90 | Normal maps are precision-sensitive; block artifacts cause lighting jitter |
| ORM | UASTC | Linear | 90 | Data textures; channel precision affects material appearance |
| BaseColor | ETC1S | sRGB | 80 | Color textures tolerate compression; high ratio preferred |
| Emissive | ETC1S | sRGB | 75 | Usually small area; can compress more aggressively |
LOD × Slot resolution / LOD × Slot 分辨率映射:
| LOD | BaseColor | Normal | ORM | Emissive |
|---|---|---|---|---|
| lod0 | 2048 | 2048 | 1024 | 2048 |
| lod1 | 1024 | 1024 | 512 | 1024 |
| lod2 | 512 | 256 | 256 | 512 |
Front-end loaders can read slotCompressionMap from manifest.json to make per-slot lazy-loading decisions.
gltf-transform textureCompress does not support switching ETC1S/UASTC per texture in a single call. The current implementation works around this by grouping textures via the slots parameter and calling textureCompress separately per group. Once gltf-transform adds a mode parameter, per-texture encoding can be controlled more precisely.
| Metric | Recommended value |
|---|---|
| Single model size | < 10 MB |
| Mobile single model size | < 5 MB |
| Single model triangle budget | < 100k |
| Main scene total triangle budget | < 2M |
| First screen load time | < 3 s |
textureSize,如 1024 -> 2048lod0lod1 and lod2 more aggressivelod0 closer to original geometry| Issue | Cause | Fix |
|---|---|---|
| Normal map rendering jitter | ETC1S block artifacts destroy normal precision | Force UASTC encoding for Normal textures |
| BaseColor color shift | Wrong color space label (Linear treated as sRGB or vice versa) | Mark BaseColor/Emissive as sRGB; Normal/ORM/AO as Linear |
| Larger file size than expected | UASTC without supercompression | Enable Zstd supercompression (ktx2Options.supercompression: "zstd") |
| Black screen after loading | KTX2Loader.detectSupport(renderer) not called | Pass renderer when creating the loader |
| HDR environment map blown out | Color gamut truncation losing brightness | Use UASTC + Zstd encoding with HDR pipeline |
| Mipmap flickering | Poor implicit mipmap quality from encoder | Pre-generate mipmaps (mipmapMode: "generate") and control filter mode |
仅当用户明确需要以下目标时,才切换到 Retopo + UV + Bake:
要明确提醒:这是重制流程,不是简单压缩,成本显著更高。
references/optimize-glb.mjs: automation template for batch optimization, LOD generation, and manifest output;适合自动化处理与批量生成结果。references/threejs-load-lod.js: Three.js loading example for DRACO + LOD integration;适合前端接入与加载代码生成。references/package-template.json: minimal Node project template for running the optimization flow;适合初始化最小可运行工程。