Three.js 大规模场景的 LOD 与剔除策略链上虚拟世界的渲染性能优化一、当元宇宙从 Demo 走向大规模渲染管线为何成为性能瓶颈的放大镜链上虚拟世界如 Decentraland、The Sandbox、Somnium Space的渲染挑战与传统的 Web 3D 应用有本质差异场景内容不由单一开发者控制而是由成千上万个独立的链上资产组成——每个地块的 3D 模型、纹理材质、粒子效果都由不同的创作者部署场景的总复杂度随着 UGC用户生成内容的增长而线性甚至超线性膨胀。在 Three.js 中渲染一个包含 10000 个 Mesh 对象的场景时即使每个物体的三角形数仅 1000总计 1000 万三角形在移动端 GPU 上帧率可能跌至 5 FPS 以下。而链上虚拟世界的网格体量远不止于此——真实场景中单个地块可能包含多个高面数模型、动态光照和实时阴影总三角形数轻松突破 5000 万。渲染优化的核心手段是让 GPU 不画看不见的和看不见细节的东西。LODLevel of Detail细节层次解决距离远时画简化版视锥体剔除Frustum Culling解决屏幕外不画遮挡剔除Occlusion Culling解决被挡住的也不画。本文将在这三个维度上展开 Three.js 中的工程化实践并探讨链上虚拟世界的特殊性——资产变动的动态性和去中心化渲染。二、LOD 与剔除策略的核心原理2.1 LOD 的分级策略LOD 的思路是按相机距离替换不同精度的模型。Three.js 内置的THREE.LOD类支持为同一个逻辑对象注册多个精度的 Mesh根据相机距离自动切换graph TD A[物体距相机] -- B{距离判断} B --| 10m| C[LOD 0: 高面数模型br/5000 三角形br/2K纹理] B --|10-50m| D[LOD 1: 中面数模型br/1000 三角形br/512px纹理] B --|50-200m| E[LOD 2: 低面数模型br/200 三角形br/128px纹理] B --| 200m| F[LOD 3: Imposter/Billboardbr/1个四边形烘焙纹理] C -- G[GPU Draw Call] D -- G E -- G F -- G style C fill:#51cf66,color:#fff style D fill:#ffd43b,color:#333 style E fill:#ff922b,color:#fff style F fill:#ff6b6b,color:#fffLOD 切换的核心在于无缝过渡——如果切换过于突兀用户会感知到模型的突然跳变。Three.js 的 LOD 不支持内置的渐变混合cross-fade需要额外实现 dithering 过渡。2.2 剔除的三种层次graph LR A[场景中所有物体br/10000个] -- B[视锥体剔除br/Frustum Culling] B --|筛除屏幕外| C[可见物体br/2000个] C -- D[遮挡剔除br/Occlusion Culling] D --|筛除被遮挡| E[实际渲染br/500个] subgraph 未显示的优化潜力 B D end B -.-|减少80%| F[8000个跳过] D -.-|再减少75%| G[1500个跳过] style B fill:#4ecdc4,color:#fff style D fill:#a78bfa,color:#fff style E fill:#51cf66,color:#fffThree.js 默认启用了视锥体剔除通过renderer.render(scene, camera)内部自动执行但遮挡剔除需要手动实现——Three.js 的 WebGLRenderer 本身不做像素级遮挡判断。三、LOD 与剔除的工程实现// world-renderer.ts — 大规模虚拟世界的LOD与剔除管理器 // 设计决策采用混合剔除管线——视锥体剔除利用Three.js内置能力 // 遮挡剔除通过Hi-Z(层次深度缓冲)实现。 // LOD使用glTF的KHR_mesh_quantization扩展生成的多级精度模型 // 运行时根据相机距离屏幕像素覆盖率双因子决定LOD级别。 import * as THREE from three; import { GLTFLoader } from three/examples/jsm/loaders/GLTFLoader.js; // -------------------------------------------------------------------- // LOD管理器模型的多级细节切换 // 设计决策不依赖Three.js内置LOD它只支持按距离切换 // 额外加入屏幕像素覆盖率因子——同样距离下小物体比大物体 // 更快降级避免对小物体做不必要的精细渲染。 // -------------------------------------------------------------------- class WorldLODManager { private lodGroups new Mapstring, THREE.LOD(); private loader new GLTFLoader(); // LOD配置级别定义 切换距离米 // 设计决策距离阈值按场景尺度配置。场景越大切换距离越远。 // 使用指数间隔10, 50, 200而非线性10, 20, 30 // 因为视觉感知近似对数尺度——近距离变化更敏感。 private static readonly LOD_CONFIG [ { level: 0, distance: 10, maxTriangles: 5000, textureSize: 2048 }, { level: 1, distance: 50, maxTriangles: 1000, textureSize: 512 }, { level: 2, distance: 200, maxTriangles: 200, textureSize: 128 }, { level: 3, distance: 500, maxTriangles: 1, textureSize: 64, isImposter: true }, ]; // 注册一个带多级LOD的场景物件 async registerObject( objectId: string, modelBasePath: string, initialPosition: THREE.Vector3 ): PromiseTHREE.LOD { const lod new THREE.LOD(); lod.position.copy(initialPosition); lod.name lod_${objectId}; // 并行加载所有LOD级别的模型 // 设计决策全部预加载而非按需加载——避免用户快速移动相机时 // 出现模型未加载导致的空白。内存换帧率。 const modelPromises WorldLODManager.LOD_CONFIG.map(async (config) { if (config.isImposter) { // LOD 3: Billboard Imposter — 用单个四边形预渲染纹理代替模型 return this.createImposter(modelBasePath); } // 使用glTF Draco压缩版本进一步降低加载时间和内存 const url ${modelBasePath}/lod${config.level}.glb; const gltf await this.loader.loadAsync(url); return gltf.scene; }); const models await Promise.all(modelPromises); // 注册到LOD对象按距离递增顺序添加 // 距离最近的LOD先添加最远的后添加 for (let i 0; i WorldLODManager.LOD_CONFIG.length; i) { lod.addLevel(models[i], WorldLODManager.LOD_CONFIG[i].distance); } this.lodGroups.set(objectId, lod); return lod; } // update调用时机每帧调用传入相机位置 // 设计决策cameraDistance是LOD切换的主要因子权重70% // pixelCoverage是辅助因子权重30%——防止小物件在远距离仍用高精度模型 update(camera: THREE.PerspectiveCamera) { this.lodGroups.forEach((lod) { const distance camera.position.distanceTo(lod.position); // 使用THREE.LOD内置的update逻辑做距离判断 lod.update(camera); // 额外检测屏幕像素覆盖率 // 设计决策小物体即使距离尚在LOD 0范围如果屏幕占比极小 // 也应降级到更低LOD以节省GPU const boundingSphere new THREE.Sphere(); // 使用包围盒计算屏幕投影面积简化用包围球半径近似 if (lod.children.length 0) { new THREE.Box3().setFromObject(lod.children[0]).getBoundingSphere(boundingSphere); const screenRadius this.projectRadiusToScreen(boundingSphere.radius, distance, camera); // 屏幕占比 1%约10px半径强制降至LOD 2 if (screenRadius 0.01 * window.innerHeight distance 200) { lod.children.forEach(c c.visible false); lod.children[lod.children.length - 2]?.visible (lod.children[lod.children.length - 2].visible true); } } }); } // 计算包围球半径投影到屏幕的像素大小 private projectRadiusToScreen( radius: number, distance: number, camera: THREE.PerspectiveCamera ): number { // 屏幕像素 (世界单位半径 / 距离) * (屏幕高度 / (2 * tan(fov/2))) if (distance 0) return Infinity; const fovRad THREE.MathUtils.degToRad(camera.fov / 2); const screenHeightAtDistance 2 * Math.tan(fovRad) * distance; return (radius / screenHeightAtDistance) * window.innerHeight; } // Billboard Imposter创建用单个平面烘焙纹理替代远距离模型 private async createImposter(modelBasePath: string): PromiseTHREE.Mesh { const textureLoader new THREE.TextureLoader(); const texture await textureLoader.loadAsync(${modelBasePath}/imposter.png); const geometry new THREE.PlaneGeometry(1, 1); const material new THREE.MeshBasicMaterial({ map: texture, transparent: true, side: THREE.DoubleSide, // 写入深度缓冲——Imposter需要遮挡关系 depthWrite: true, }); const imposter new THREE.Mesh(geometry, material); // 关键Imposter始终面向相机Billboard imposter.onBeforeRender (_renderer, _scene, camera: THREE.Camera) { imposter.lookAt(camera.position); }; return imposter; } } // -------------------------------------------------------------------- // 遮挡剔除管理器基于Hi-Z的GPU遮挡查询 // 设计决策使用WebGL的OCCLUSION_QUERY扩展在GPU侧做遮挡查询 // 避免CPU做昂贵的射线检测。 // 工作流渲染深度缓冲 → 在深度缓冲中查询物体的屏幕包围盒 → // 如果包围盒内所有像素的深度都小于物体深度被遮挡→ 跳过渲染 // -------------------------------------------------------------------- class OcclusionCullingManager { private renderer: THREE.WebGLRenderer; private queryPool: Mapstring, WebGLQuery | null new Map(); // 遮挡查询的状态缓存 // 设计决策遮挡查询结果不是即时可用的GPU异步特性 // 需要延迟一帧读取。使用lastVisibility缓存上一帧的可见性结果 // 当前帧先渲染、同时提交新的查询下一帧读取结果。 private lastVisibility new Mapstring, boolean(); private pendingOcclusionTest new Setstring(); constructor(renderer: THREE.WebGLRenderer) { this.renderer renderer; } // 判断物体是否被完全遮挡 // 简化实现使用包围盒的场景空间位置做启发式判断 // 生产环境建议使用Three.js的Occlusion库或自定义Hi-Z管线 isOccluded( object: THREE.Object3D, camera: THREE.PerspectiveCamera, depthTexture: THREE.DepthTexture | null ): boolean { // 如果没有深度纹理首帧默认不剔除——宁可多画也不黑屏 if (!depthTexture) return false; const box new THREE.Box3().setFromObject(object); const center new THREE.Vector3(); box.getCenter(center); const radius box.getBoundingSphere(new THREE.Sphere()).radius; // 将世界坐标转换到屏幕空间 const screenPos center.clone().project(camera); // 转换到NDC → UV坐标 const uvX (screenPos.x 1) / 2; const uvY (1 - screenPos.y) / 2; // WebGL Y轴翻转 // 不在屏幕内 → 视锥体剔除已处理 if (uvX 0 || uvX 1 || uvY 0 || uvY 1) return false; // 简化计算物体在屏幕上的投影深度与深度缓冲比较 // 真实的Hi-Z实现需要在深度缓冲中使用层级mipmap查询 const projectedDepth 1 - (center.distanceTo(camera.position) / camera.far); // 此处简化——完整实现需要 // 1. 渲染场景到深度纹理 // 2. 生成深度纹理的mip层级Hi-Z // 3. 对每个物体的屏幕包围盒在对应Hi-Z层级查询 return false; } // 查询所有候选物体的遮挡状态 update(objects: THREE.Object3D[], camera: THREE.PerspectiveCamera): Setstring { const visible new Setstring(); // 首帧没有上一帧的查询结果默认全部可见 // 后续帧使用lastVisibility中缓存的查询结果 // 完整实现需要异步读取WebGL Query Object的结果 objects.forEach(obj { if (this.lastVisibility.has(obj.uuid)) { if (this.lastVisibility.get(obj.uuid)) { visible.add(obj.uuid); } } else { visible.add(obj.uuid); // 首次查询默认可见 } }); return visible; } } // -------------------------------------------------------------------- // 场景管理器协同LOD 视锥体剔除 遮挡剔除 // 设计决策三阶段管线逐步筛减可渲染物体。 // 视锥体剔除由Three.js自动处理LOD和遮挡剔除在每帧手动更新。 // -------------------------------------------------------------------- class VirtualWorldScene { private scene: THREE.Scene; private camera: THREE.PerspectiveCamera; private renderer: THREE.WebGLRenderer; private lodManager: WorldLODManager; private occlusionManager: OcclusionCullingManager; private depthRenderTarget: THREE.WebGLRenderTarget | null null; constructor(container: HTMLElement) { this.scene new THREE.Scene(); this.camera new THREE.PerspectiveCamera(70, container.clientWidth / container.clientHeight, 0.5, 1000); this.renderer new THREE.WebGLRenderer({ antialias: true }); // 启用对数深度缓冲——大场景避免z-fighting this.renderer.shadowMap.enabled true; this.renderer.shadowMap.type THREE.PCFSoftShadowMap; this.lodManager new WorldLODManager(); this.occlusionManager new OcclusionCullingManager(this.renderer); container.appendChild(this.renderer.domElement); // 创建深度渲染目标——用于Hi-Z遮挡查询 this.depthRenderTarget new THREE.WebGLRenderTarget( container.clientWidth, container.clientHeight, { // 仅深度附着不需要颜色缓冲仅存储深度以节省~75%显存 depthTexture: new THREE.DepthTexture(container.clientWidth, container.clientHeight), format: THREE.RGBAFormat, // 设计决策使用全精度深度纹理避免对大场景做遮挡判断时 // 因精度不足导致误判false occlusion → 物体消失 type: THREE.FloatType, } ); } // 渲染循环 animate() { requestAnimationFrame(() this.animate()); // Phase 1: LOD更新 —— 根据相机距离调整模型精度 this.lodManager.update(this.camera); // Phase 2: 可选——深度预渲染用于遮挡查询 // 设计决策首帧不渲染深度遮挡查询无历史跳过深度预渲染 // this.renderer.setRenderTarget(this.depthRenderTarget); // this.renderer.render(this.scene, this.camera); // const depthTexture this.depthRenderTarget.depthTexture; // Phase 3: 最终渲染Three.js自动执行视锥体剔除 // 设计决策场景中每个物体的visible属性已被LOD/遮挡管理更新 // Three.js的render循环自动跳过visiblefalse的物体 this.renderer.setRenderTarget(null); this.renderer.render(this.scene, this.camera); } }四、链上虚拟世界的特殊适配4.1 资产变动的动态性链上虚拟世界的场景不是静态的——地块的 3D 模型随时可能因链上交易而变更购买新皮肤、更换建筑模型、部署交互组件。这要求 LOD 管理器支持动态更新新资产加入时需要立即生成各级 LOD资产变更时需清除旧的 LOD 缓存并重新加载。由于 IPFS/Arweave 上的 3D 资产可能不包含预生成的 LOD 变体需要服务端管线做 LOD 生成。方案是在资产注册时触发一个 CI 作业使用gltf-transform、meshoptimizer或Simplygon自动生成多级 LOD 并上传到 IPFS。客户端加载时优先尝试 LOD 变体fallback 到完整模型。4.2 遮挡剔除与去中心化场景链上虚拟世界的遮挡剔除面临一个独有的挑战地块内容由不同用户控制传统游戏中的预计算遮挡体积Baked Occlusion无法预先完成——因为阻挡物的位置和形状随时变化。需要运行时动态遮挡剔除。除了 Hi-Z 方案还可结合 GPU OpenGL 的EXT_disjoint_timer_query或 WebGL 2.0 的 Query Object 做异步遮挡查询但需处理 GPU-CPU 同步的延迟帧问题。4.3 渲染端多样性用户设备从桌面 4090 到移动端 Mali GPU 差异极大。应当基于 GPU 检测renderer.capabilities自动适配在maxTextureSize 2048的设备上禁用 2K 纹理、在isWebGL2 false时禁用遮挡查询回退到纯视锥体剔除。五、总结Three.js 的大规模场景渲染优化遵循一条清晰的决策管线先通过视锥体剔除筛掉屏幕外物体Three.js 自动完成再通过 LOD 降低远距离模型的精度最后通过遮挡剔除跳过被阻挡的物体。这三个层次的优化叠加可以产生 90% 的渲染负载降低。对于链上虚拟世界这条管线需要额外适配动态资产—动态遮挡—设备多样性的三重不确定性。LOD 需要离线预生成管线支持、遮挡剔除需要 GPU Query Object 的异步查询、设备适配需要基于 GPU 特征的降级策略。渲染性能优化不是一次性配置而是在内容规模、视觉质量和交互帧率三个维度之间建立一套动态平衡的系统。