3D数字孪生项目 LCP 优化指南

LCP（Largest Contentful Paint，最大内容绘制时间）是衡量页面加载体验的核心指标，在 3D 开发项目中尤为关键。

与传统网页不同，3D 数字孪生系统的 LCP 问题往往是CPU + GPU + 网络 + 资源 + 主线程 共同阻塞的结果，必须采用系统化的优化策略。

一、 理解3d项目中的LCP

有些人认为 LCP 就是 <canvas> 元素，从而试图避免首屏出现 canvas。

实际上，canvas 完全可以成为 LCP 元素 ------ 只要能在 1 秒内加载并渲染出一个轻量级 3D 场景，就不会因此扣分。关键在于加载速度，而非元素类型。

如何定位LCP元素 ?

1. 打开 Performance 面板

2. 勾选 Screenshots

3. 开始录制，并执行页面加载操作

4. 录制结束后，时间轴上会标记 LCP 标识

5. 点击 LCP 标识，即可查看该元素的类型及其 DOM 节点信息

二、正确架构原则

先显示，再加载 ------ 而不是加载完才显示

• 首屏应尽快呈现占位画面、加载进度或简化版 3D 场景

• 复杂模型、纹理、特效等资源按需或延迟加载

• 避免让用户长时间面对白屏或空白 canvas

三、具体的优化步骤

3.1 Draco 压缩模型（收益巨大）

Draco 是 Google 推出的 3D 模型压缩算法，可大幅减小 glTF/GLB 文件体积，同时保留几何体与节点的原始结构。

1️⃣ 使用 gltf-transform 进行压缩（推荐）

推荐使用 gltf-transform 工具，它能在压缩的同时保留原有节点名称与层级结构。

npm install -g @gltf-pipeline/cli  



gltf-pipeline -i "D:\new test\vr\demo\iot-admin\cold2.gltf" -o "D:\new test\vr\demo\iot-admin\cold_draco2.gltf" -d

npm install -g @gltf-transform/cli  


gltf-transform optimize cold2.gltf cold-opt.glb --compress draco --no-join --no-instance --no-flatten   // 注意 只要这样才能保留对应的节点名称,300MB->2.5MB


gltf-transform optimize cold2.gltf cold-opt.glb --compress draco  // 会丢失节点名称,300MB->4MB

2️⃣ 放置 Draco 解码器

将 Three.js 提供的 Draco 解码文件复制到项目的 public/draco/ 目录下：

• 源文件位置：node_modules/three/examples/jsm/libs/draco/

• 需要复制以下三个文件：

  • draco_decoder.js

  • draco_wasm_wrapper.js

  • draco_decoder.wasm

3️⃣配置DRACOLoader

最后在对应的ModelLoader(如果你已经封装了该文件, 下述代码仅做参考, 以你的ModelLoader为主)中

import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader'

export default class ModelLoader {
	constructor() {
		// gltf
		this.gltfLoader = new GLTFLoader()

		// draco
		this.dracoLoader = new DRACOLoader()

		// decoder 路径
		this.dracoLoader.setDecoderPath('/draco/')

		// 绑定 draco
		this.gltfLoader.setDRACOLoader(this.dracoLoader)
	}

	loadModel(url) {
		return new Promise((resolve, reject) => {
			this.gltfLoader.load(
				url,
				gltf => {
					resolve(gltf.scene)
				},
				xhr => {
					console.log(
						'加载进度:',
						((xhr.loaded / xhr.total) * 100).toFixed(2) + '%'
					)
				},
				error => {
					console.error('模型加载失败', error)
					reject(error)
				}
			)
		})
	}
}

3.2 KTX2 压缩纹理（收益巨大）

普通纹理（PNG/JPG）的加载流程：
下载 → CPU 解压 → 上传 GPU → GPU 再压缩（耗时且占用主线程）

KTX2 是一种 GPU 原生支持的纹理格式，优势明显：

• 文件体积更小（比同等质量的 JPG/PNG 小 30%~70%）

• 上传 GPU 速度更快（减少CPU参与）

• 显存占用更低（直接以 GPU 压缩格式存储）

1️⃣ 使用gltf-transform 进行压缩(推荐) 需先下载Khronos 官方工具

Khronos 下载地址 https://github.com/KhronosGroup/KTX-Software/releases?utm_source=chatgpt.com

配置bin路径到环境变量 , 在终端执行 ktx --version

然后

npm install -g @gltf-transform/cli

gltf-transform uastc input.glb output.glb  // 高质量、GPU友好

gltf-transform etc1s input.glb output.glb  // 体积极小、质量一般

2️⃣ 放置解码器文件

KTX2 需要借助 Basis Universal 解码器才能在 Web 中解析。

复制以下文件到项目的 public/basis/ 目录下：

源位置：node_modules/three/examples/jsm/libs/basis/

需复制文件：

basis_transcoder.js

basis_transcoder.wasm

3️⃣配置DRACOLoader

最后在对应的ModelLoader(如果你已经封装了该文件, 下述代码仅做参考, 以你的ModelLoader为主)中

import { KTX2Loader } from 'three/examples/jsm/loaders/KTX2Loader';

const ktx2Loader = new KTX2Loader();
ktx2Loader.setTranscoderPath('/basis/');    // 存放 basis_transcoder.js 和 wasm
ktx2Loader.detectSupport(renderer);

// 将 KTX2Loader 传递给 GLTFLoader
gltfLoader.setKTX2Loader(ktx2Loader);

KTX2 的核心价值不只是"压缩文件大小"，而是：

🚀 减少 CPU 解码压力 + 提升 GPU 上传效率 + 降低显存占用

3.3 延迟初始化重型效果

在 3D 数字孪生项目中，LCP（最大内容绘制时间）的优化不能只盯着模型体积或纹理压缩。很多时候，首屏卡死的元凶是那些"默认启动"的重型渲染特性------例如后期特效（泛光、FXAA、描边）、高精度阴影映射、环境光遮蔽等。这些特性虽然最终能让画面更炫酷，但如果一上来就全量初始化，主线程会被严重阻塞，canvas 内容迟迟无法呈现在用户眼前。

1️⃣ 后期处理（EffectComposer）绝不首屏加载

EffectComposer 及其内部的 OutlinePass、BloomPass、FXAA 等通道需要额外的渲染目标、纹理采样和着色器编译，对 LCP 的影响非常大。

在代码中，我们在初始化 Viewer 时显式关闭后期处理：

// 在初始化 Viewer 时显式关闭后期处理
const init = () => {
   viewer = new Viewer('container', { postprocessing: false }); 
}



// 等模型加载完以后

requestIdleCallback(() => {
    viewer.startPostProcessing();
});

2️⃣ 阴影映射先禁用，再按需开启

阴影映射（Shadow Map）需要渲染多张深度纹理，对 GPU 和内存都有不小的压力。

// 初始化时先关闭：
viewer.renderer.shadowMap.enabled = false;

// 等到模型加载完成、用户已经看到画面 2 秒后，再温和地开启：
setTimeout(() => {
    viewer.renderer.shadowMap.enabled = true;
}, 2000);

3️⃣ 重型动画与辅助效果延后注册

风扇旋转、管道流光、设备标签等并不是首屏必须的，我们选择在模型加载完成、loading 消失后的下一个宏任务中再初始化这些逻辑，避免在关键渲染路径上做多余的计算。

四、优化前后对比

五、总结

首先需要明确一点：**模型压缩和纹理压缩的顺序是有讲究的，一定要先进行 Draco 模型压缩，再进行 KTX2 纹理压缩，两者顺序不能反。**这样才能保证资源结构稳定，同时避免重复处理或无效压缩。

其次要正确理解 KTX2 的作用：它优化的是长期 GPU 渲染性能（显存占用、上传效率、整体帧率稳定性） ，但在部分场景下，可能会带来一定的首屏 LCP 开销增加，尤其是在首次解码和纹理上传阶段。

因此，在实际工程中，更合理的做法是将其与加载策略结合使用，比如：

• 使用加载进度条提升用户感知
• 采用分阶段渲染（先出模型，再加载高清纹理）
• 延迟初始化重型效果（后期处理、Shader 动画等）

通过这种方式，可以在不牺牲视觉质量的前提下，逐步优化 LCP，让首屏更快"可见"，整体体验更平滑。