ParameterTilesetValue 接口,通过 Parameter 配置 LOD、显存与并发控制。Definition: ParameterTilesetValue
以下是 ParameterTilesetValue 的 TypeScript 定义摘要:
export interface ParameterTilesetValue {
/** 屏幕空间误差阈值 (像素) */
maxScreenSpaceError: number;
/** 最大显存占用 (MB) */
maxMemoryUsage: number;
/** 最小几何误差 (精度上限锁) */
minGeometricError: number;
// ... 更多字段见下方配置表
}
LOD (Level of Detail) 是 3DTile 的核心机制。引擎不会一次性加载整个从宏观到微观的所有模型数据,而是根据相机位置动态计算每个瓦片的 屏幕空间误差 (SSE)。
SSE = (GeometricError / DistanceToCamera) * ScreenHeight。SSE > maxScreenSpaceError,说明当前瓦片在屏幕上看起来太粗糙(误差像素太大),需要分裂并加载下一级子瓦片;反之则停止细分。maxScreenSpaceError 会迫使引擎加载更深层级的瓦片,从而获得更清晰的细节,但也会急剧增加渲染三角形数量和显存占用。为了在浏览器有限的资源下渲染海量数据(如城市级倾斜摄影),3DTile 实现了基于 LRU (Least Recently Used) 的缓存淘汰机制和动态画质调整策略。
maxMemoryUsage 超限时,引擎会优先保留当前视锥体内的瓦片。视锥体外的、或者距离相机较远的瓦片会被优先释放。memoryAdjustedScreenSpaceError,引擎会以 maxMemoryUsage 为目标,实时调整 SSE。
maxMemoryUsage 设定的显存额度,不浪费资源。1.0 (极高画质) 到 maxScreenSpaceError (设定底线) 之间波动。目前所有的 ViewLayer 在底层都是一个 Tile3D 实例。它们各自拥有独立的:
maxScreenSpaceError, maxMemoryUsage 等参数互不干扰。注意: 即使是通过
file_url加载的单体模型(如.obj,.at3d),在 Five 内部也会被封装为Tile3D实例进行统一管理。
以下表格列出了控制 3DTile 加载与性能调度的所有可用参数。
| Parameter | Type | Default | Description |
|---|---|---|---|
maxScreenSpaceError |
number |
16 |
核心参数。屏幕空间误差阈值 (像素)。 值越小画质越高,性能开销越大。建议范围 8-32。 |
maxMemoryUsage |
number |
512 |
最大显存占用 (MB)。超限后自动触发 LRU 淘汰机制。 |
memoryAdjustedScreenSpaceError |
boolean |
false |
是否开启基于内存的动态 SSE 调整。 开启后引擎会自动调整 SSE 以尽量占满显存配额。 |
cameraCulling |
boolean |
true |
是否开启视锥体剔除 (不加载视野外的瓦片)。建议始终开启。 |
| Parameter | Type | Default | Description |
|---|---|---|---|
minGeometricError |
number |
0 |
最小几何误差 (精度上限锁)。 当瓦片误差小于此值时停止细分。可用于限制过高精度的加载。 |
maxGeometricError |
number |
10000 |
最大几何误差 (最低精度保证)。 强制细分直到误差小于此值。可用于避免模型过于模糊。 |
| Parameter | Type | Default | Description |
|---|---|---|---|
maxRequests |
number |
4 |
最大并发请求数。建议保持默认,避免网络拥堵。 |
requestOrder |
string |
'SCREEN_SPACE_ERROR' |
请求优先级策略。'SCREEN_SPACE_ERROR': 优先加载 SSE 大的瓦片;'SCREEN_LEVEL_VERTICAL': 优先加载垂直层级高的。 |
loadSiblings |
boolean |
true |
是否预加载兄弟节点。 |
skipLevelOfDetail |
boolean |
false |
是否允许跳级加载 (跳过中间层级直接加载高精瓦片)。 |
| Parameter | Type | Default | Description |
|---|---|---|---|
minLevelOfDetail |
number |
0 |
最小 LOD 层级 (Tree Depth)。建议使用 maxGeometricError 替代。 |
maxLevelOfDetail |
number |
20 |
最大 LOD 层级 (Tree Depth)。建议使用 minGeometricError 替代。 |
在移动端或性能受限设备上,建议适当降低画质以保证流畅度。
const parameter = five.modelScene.parameter;
// 1. 性能优先模式 (适用于低端设备)
// 增大 SSE 阈值,降低画质
parameter.set('maxScreenSpaceError', 16);
// 限制显存,防止 Crash
parameter.set('maxMemoryUsage', 256);
// 2. 画质优先模式 (适用于桌面端/截图)
// 减小 SSE 阈值,提升细节
parameter.set('maxScreenSpaceError', 4);
// 允许更多显存占用
parameter.set('maxMemoryUsage', 1024);
// 3. 重置为默认
parameter.reset('maxScreenSpaceError', 'maxMemoryUsage');
在对比查看或多楼层场景中,通常存在多个 ViewLayer。为了避免资源竞争,建议对非焦点的 ViewLayer 进行降级处理。
// 假设 viewLayerA 是当前主要查看的模型,viewLayerB 是背景参考
// 聚焦 ViewLayerA: 正常画质
viewLayerA.parameter.reset('maxScreenSpaceError');
// 降级 ViewLayerB: 仅显示轮廓,节省资源
viewLayerB.parameter.set('maxScreenSpaceError', 48); // 极低画质
viewLayerB.parameter.set('maxMemoryUsage', 128); // 极低显存配额
在开发过程中,可以通过访问 ViewLayer 内部的 tileset 对象来实时监控渲染状态。
// 假设已获取 viewLayer 实例
const tileset = viewLayer.tileset;
// 1. 查看当前加载的瓦片数量
console.log(tileset.loadedTiles.size);
// 2. 查看当前实际生效的 SSE (如果开启了动态调整,此值会波动)
console.log(tileset.currentMaxScreenSpaceError);
// 3. 查看显存占用 (近似值,单位字节)
// 注意: 这是内部私有属性,仅供调试参考
console.log((tileset as any).cacheMemoryUsageInBytes / 1024 / 1024 + ' MB');
minGeometricError 和 maxGeometricError 是全局硬约束,不随相机距离变化。
maxGeometricError 设得极小)会强制全场景所有瓦片(哪怕是远处的背景)都加载到极高精度。maxScreenSpaceError: 设置过小(如 < 4)可能导致每帧需要加载和渲染的三角形数量指数级上升,瞬间撑爆显存或导致掉帧。cameraCulling: 默认应该开启。如果手动关闭视锥体剔除,引擎将尝试加载全场景数据,极易导致崩溃。maxMemoryUsage 等参数的修改会触发缓存整理,高频修改可能导致卡顿。tags: [大场景, 瓦片, 显存, 画质, 性能优化, 流式加载, 3dtile, viewLayer, performance, lod, optimization, tile-loading, memory, sse, screen-space-error]