glTF和glb格式与模型渲染，CesiumJS 中的 glTF 渲染系统以该类为核心

在下胡三汉

364人浏览 · 2026-04-05 10:08:16

在下胡三汉 · 2026-04-05 10:08:16 发布

CesiumJS 中的 glTF 渲染系统以该类为核心，该类为加载和渲染 3D 资产提供了高层次的抽象。该系统支持 glTF 2.0 规范，包括多种压缩、元数据和实例化的扩展。该架构采用模块化的“流水线阶段”设计，将 glTF 组件转换为 GPU 可用的绘制命令。Model

模型架构

该类是3D资产的主要入口，无论是独立文件还是内嵌的图块。它通过场景图来协调加载过程，并管理视觉状态。ModelCesium3DTilesetGltfLoader

模型：glTF资产的主要原语。它应通过以下方式构造Model.fromGltfAsync packages/engine/Source/Scene/Model/Model.js49-52
ModelSceneGraph：管理 glTF 中定义的节点、皮肤和动画的层级结构packages/engine/Source/Scene/Model/Model.js38
ModelRuntimePrimitive：表示单个可渲染单元（glTF 原语），并存储渲染所需的流水线阶段序列packages/engine/Source/Scene/Model/ModelRuntimePrimitive.js49-108

模型实体关系

下图展示了高层类与底层渲染原语及发送给的命令之间的关系。ModelContext

资料来源：packages/engine/Source/Scene/Model/Model.js38 packages/engine/Source/Scene/Model/ModelRuntimePrimitive.js49-108 packages/engine/Source/Renderer/Context.js41-71

渲染流水线阶段

CesiumJS 采用解耦流水线架构处理 glTF 数据。每个配置一个列表ModelRuntimePrimitivepipelineStages packages/engine/Source/Scene/Model/ModelRuntimePrimitive.js98这些阶段负责更新着色器的源代码、统一和顶点属性。

艺名	目的
GeometryPipelineStage	处理基本顶点属性（位置、法线、tex坐标）packages/engine/Source/Scene/Model/ModelRuntimePrimitive.js16
MaterialPipelineStage	处理 glTF PBR（物理基渲染）材料packages/engine/Source/Scene/Model/ModelRuntimePrimitive.js19
FeatureIdPipelineStage	摘录功能包含用于拣选和样式的 IDpackages/engine/Source/Scene/Model/ModelRuntimePrimitive.js15
SkinningPipelineStage	为动画角色应用GPU蒙皮packages/engine/Source/Scene/Model/ModelRuntimePrimitive.js30
DequantizationPipelineStage	用于解压压缩顶点数据的句柄KHR_mesh_quantizationpackages/engine/Source/Scene/Model/ModelRuntimePrimitive.js12

有关具体阶段和绘制命令生成的详细信息，请参见模型流水线。

着色器系统

模型着色器（和）通过从活跃流水线阶段拼接的片段动态生成。ModelVS.glslModelFS.glsl

顶点着色器（ModelVS）：处理坐标变换、变形、蒙皮以及将属性传递给片段着色器packages/engine/Source/Shaders/Model/ModelVS.glsl10-171
片段着色器（ModelFS）：处理材质、光照（PBR）和可见性效果，如裁剪平面packages/engine/Source/Shaders/Model/ModelFS.glsl43-155

着色器执行流程

下图展示了 glTF 片段着色器内的执行顺序。

资料来源：packages/engine/Source/Shaders/Model/ModelFS.glsl64-155

定制化与专业渲染

glTF 系统可扩展支持用户定义逻辑和专用数据格式：

自定义着色器：用户可以通过 API 向模型流水线注入 GLSL 代码。这允许自定义程序纹理、顶点位移和材质覆盖。详情请参见自定义着色器。CustomShader
高斯Splats：通过扩展支持高保真基于点的渲染。详情请参见高斯散块。KHR_gaussian_splatting
全景：将全景影像和街景服务整合进场景。详情请参见全景和街景。

选取与元数据

在 glTF 系统中，拨片由PickingPipelineStage packages/engine/Source/Scene/Model/ModelRuntimePrimitive.js24它会渲染独特的“选色”到PickFramebuffer packages/engine/Source/Scene/PickFramebuffer.js15-32系统还支持，允许着色器在EXT_structural_metadatametadataStage packages/engine/Source/Shaders/Model/ModelFS.glsl72-75