CesiumJS 中的 glTF 渲染系统以该类为核心,该类为加载和渲染 3D 资产提供了高层次的抽象。该系统支持 glTF 2.0 规范,包括多种压缩、元数据和实例化的扩展。该架构采用模块化的“流水线阶段”设计,将 glTF 组件转换为 GPU 可用的绘制命令。Model
模型架构
该类是3D资产的主要入口,无论是独立文件还是内嵌的图块。它通过场景图来协调加载过程,并管理视觉状态。ModelCesium3DTilesetGltfLoader
模型:glTF资产的主要原语。它应通过以下方式构造Model.fromGltfAsyncpackages/engine/Source/Scene/Model/Model.js49-52ModelSceneGraph:管理 glTF 中定义的节点、皮肤和动画的层级结构packages/engine/Source/Scene/Model/Model.js38ModelRuntimePrimitive:表示单个可渲染单元(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