FMB Viewer

Appearance

渲染质量与统计 ​

viewer.quality 管渲染质量(抗锯齿 / 环境光遮蔽 / 色调映射 / IBL 环境 / 质量档),viewer.stats 是只读统计视图(加载侧 + 渲染侧)。质量参数既可在 Viewer.create() 构造期经 ViewerOptions.quality 给初值,也可运行时逐项调整;统计随时拉取,适合做调试 HUD 或性能面板。

下面的 demo 是 LOD 诊断页,右上统计面板实时展示各网格的细节层级分布与加载状态:

可交互 demo · 右上为统计面板,底部可强制 LOD / 按 LOD 染色,点击零件看其网格详情,空格键 fit在新窗口打开 ↗

核心 API ​

ts
// 构造期:硬件 MSAA(构造后不可变)+ 质量初值
const viewer = await Viewer.create(canvas, {
  antialias: true, // 硬件 MSAA
  quality: { tier: "auto", toneMapping: "aces" },
});

// 运行时质量调整
viewer.quality.setAntialias(true); // SMAA 后处理(运行时可变)
viewer.quality.setAmbientOcclusion({ enabled: true }); // GTAO 默认关,须显式开
viewer.quality.setToneMapping("linear"); // 色彩精确模式
viewer.quality.setTier("high"); // 锁定质量档(关闭自适应)

// 统计:加载侧 + 渲染侧
const { chunks, bytes, decode } = viewer.stats.getLoader();
const { fps, frameMs, drawCalls, triangles } = viewer.stats.getRender();

行为要点 ​

  • 两个 antialias 不是一回事:ViewerOptions.antialias 是硬件 MSAA,传给 WebGL renderer,构造后不可变(默认 true);quality.antialias / viewer.quality.setAntialias() 是 SMAA 后处理,运行时可开关(默认 true)。两者独立叠加。
  • 环境光遮蔽(GTAO)默认关:GTAO 是每帧开销最大的 pass,需要时经 setAmbientOcclusion({ enabled: true, radius?, intensity? }) 显式开启;显式关闭后,自适应调档不会再替你打开它。
  • 色调映射与曝光:setToneMapping(mode, exposure?),"aces"(默认,filmic 压缩)适合视觉呈现;"linear" / "none" 为色彩精确模式(关闭 filmic 压缩),适合需要还原材质标称色的场景。默认曝光 0.7。
  • IBL 环境:setEnvironment(url) 加载 .hdr equirect HDRI 替换内置程序化环境(返回加载 Promise);setEnvironmentIntensity(x) 调环境光强度(默认 0.5)。
  • 质量档:setTier("auto" | "high" | "balanced" | "performance"),默认 "auto" 按帧时 EMA 自适应升降档;设显式档即锁定并关闭自适应。
  • stats.getLoader():加载侧统计——chunk 进度(total / loaded / loading / failed)、累计下载字节、几何解码耗时 p50 / p95(ms);未加载模型时各项为 0。
  • stats.getRender() 语义:fps / frameMs 来自真实帧计时;drawCalls / triangles 是 WebGL renderer 上一帧的提交计数——即本帧实际画了多少,受 LOD 与节点可见性影响,不是场景三角形总量。被动监听可订阅 render 事件(约每秒一次心跳,带 fps / frameMs)。
  • LOD:引擎按视距自动选择网格细节层级,切换经 lod-changed 事件可观测。

相关 API ​