Cesium 渲染优化之批量渲染 - Primitive

最新推荐文章于 2025-06-21 00:00:00 发布

原创

最新推荐文章于 2025-06-21 00:00:00 发布 · 1.1k 阅读

14 ·

CC 4.0 BY-SA版权

文章标签：

#网络

原文链接

注: 近期几篇关于三维渲染优化的文章只专注于 Primitive。关于 Model, Cesium3DTileset 的内容另作安排。

上一篇介绍了 GPU三维渲染优化 - 批量渲染

本篇来说说 Primitive 的批量渲染 (Batch Rendering)。

核心内容一部分在 BatchTable, 另一部分在 PrimitivePipeline.combineGeometry

由于BatchTable涉及到纹理相关内容, 准备另起一篇文章介绍。

PrimitivePipeline.combineGeometry(本函数属于同步加载部分, 异步加载的架构思想类似)里:

本篇先说PrimitivePipeline.combineGeometry部分(下面的可以粘贴复制定位到源代码里)

packages/engine/Source/Scene/PrimitivePipeline.js:326

直接定位到的是下面一行代码

geometries = geometryPipeline(parameters);

这个函数做了三件事:

将所有实例的几何数据(position, normal, st等)全都转换为世界坐标。
为每个实例的几何添加 Batch Id。
优化顶点缓存
将所有实例

最低0.47元/天解锁文章

200万优质内容无限畅学

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Freedomerr

关注关注

26
点赞
踩
14

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

Cesium反向遮罩指定区域挖空---Primitive、PolygonGeometry、PolylineGeometry实现

qq_37312180的博客

01-27

751

【代码】Cesium反向遮罩指定区域挖空---Primitive、PolygonGeometry、PolylineGeometry实现。

Cesium优化

wangwffgqeg的专栏

01-06

761

Cesium 优化

参与评论您还未登录，请先登录后发表或查看评论

cesium 性能优化

qq_42181155的博客

08-31

1192

cesium优化卡顿崩溃问题

CesiumJS性能优化绝杀技：10个技巧让3D地球加载速度提升

最新发布

贝格前端工场的博客

06-21

1173

在讨论如何优化之前，首先需要明确影响CesiumJS性能的主要因素。地形与影像数据量过大：全球范围内的高分辨率地形和卫星影像数据量巨大，直接导致加载时间延长。复杂的三维模型渲染：精细的城市建筑模型或地质构造增加了GPU负担。频繁的数据请求：动态更新的地图图层或实时监控信息频繁触发网络请求，造成阻塞。不当的资源管理：如未合理利用缓存机制，重复加载相同资源。通过对CesiumJS项目的深入理解和上述十个优化技巧的应用，即使是面对复杂的3D地球场景，我们也能够实现流畅且高效的渲染体验。

Cesium性能优化思路

不去想结果，一直在路上

06-28

4611

减少数据量：将数据量压缩至最小，使用合适的压缩算法、数据格式和分辨率，可以减小数据大小，加快数据加载和渲染速度。减小渲染负荷：减小渲染负荷可以提高渲染性能，如减小场景中的对象数、减小纹理尺寸、使用更简单的材质等。优化纹理加载：对纹理进行优化，如减小尺寸、使用 MIPMAP 等，可以减小纹理文件的大小，从而提高加载性能。预处理数据：对数据进行预处理，如优化模型、精简纹理、删除无用信息等，可以减小数据文件的大小，从而提高加载性能。基于GPU的渲染：使用基于 GPU 的渲染技术，可以提高渲染性能和用户体验。

cesium 倾斜模型优化

星空

06-21

682

【代码】cesium 倾斜模型优化。

cesium一些优化

06-06

2977

cesium一些优化

Cesium 渲染优化之批量渲染 - Cesium3DTileBatchTable(Cesium3DTileset部分)

xiaohujx的博客

02-13

696

3DTile 与前两张说的 Primitive 与 Model 部分不同了, BatchTable 与 BatchTexture都会使用到, 且不同类型的 3DTile 使用了不同的数据处理方案。在Cesium渲染引擎中, Primitive, Model 及 3DTile 作为主要的数据载体, 他们的应用场景不同, 因此他们对属性数据的管理与渲染都不太相同。这三个类处理的相关瓦片内容没有维护相关瓦片的”属性数据“。复合瓦片（可以包含多个不同的 3D Tiles 类型）这三个是如何处理瓦片属性数据的。

Cesium 渲染优化之批量渲染 - BatchTable (Primitive 部分)

xiaohujx的博客

02-11

826

在大规模 3D 数据渲染中，为了在批量合并几何体的同时支持对单个图元（feature）的交互与动态样式控制，3D Tiles 提出了 BatchTable 机制。

Cesium 渲染优化 - BatchTexture(Model 部分)

xiaohujx的博客

02-12

340

而 Model 部分的 BatchTexture 则更专注于管理颜色、显示和拾取等样式数据，针对 glTF 模型的需求进行了专门优化。在批量渲染时的数据的处理上, 虽然 Primitive 和 Model 的核心都是将属性纹理化, 但还是有一些不同的, 一个Primitive只会使用一张Texture去管理相关的实例属性, 但是一个 gltf/glb 可能需要多张Texture去管理结构化数据。本节就到这里, 下节会着重说说 3dtiles的 batchTable处理。来看一下处理属性数据的相关代码。

Cesium 实时点云性能优化

q865768338的博客

06-27

1174

Cesium 点云性能优化

Cesium 性能优化 - 学习笔记

梨子社区

03-27

2675

获取或设置呈现分辨率的比例因子。小于 1.0 的值可以提高功能较弱的设备的性能，而大于 1.0 的值将以更高的分辨率呈现，然后按比例缩小，从而提高视觉保真度。例如，如果构件的布局大小为 640x480，则将此值设置为 0.5 将导致场景以 320x240 渲染，然后在将其设置为 2.0 时放大将导致场景以 1280x960 渲染，然后按比例缩小。图上渲染内容多的时候，我的cpu会疯狂的转，声音特别大，在测试提高帧率的时候，发现了参数requestRenderMode；3D Tiles 相关配置。

Cesium 加载实景三维模型优化建议

01-25

7144

关于通过谷歌浏览器通过Cesium底层添加实景三维都会存在，谷歌浏览器内存回收机制，这个问题官方一直没有解决了。我可以根据一些参数进行调整一下，我这套方案，本人亲测有效，加载模型速度快，而且当你相机视角达到某个高度的时候或者移走的时候，他会自动回收，一点不占内存建议用异步方式和设置一些官方参数加载模型： var tileset = new Cesium.Cesium3DTileset({ url:url, skipLevelOfDetail: true,

Cesium海量数据的管理优化

qq_44305130的博客

03-14

518

通过上述方法，可在Cesium中高效管理大规模点数据的显示与隐藏，同时保持应用的流畅性。根据数据特性（动态/静态、规模大小）选择最合适的技术组合。在Cesium中管理大量车辆和人员等点数据的显示与隐藏时，需兼顾灵活性和性能。适用于超大规模静态数据集（如城市级人员分布）。通过UI按钮控制不同组别显示，并实现区域筛选。适合频繁位置更新的实体（如实时车辆）。按类型分组管理实体，便于批量控制。处理静态大规模数据时，使用。属性批量切换可见性。

优化cesium里的热力图

2301_76406308的博客

02-18

142

最近要优化cesium里的热力图效果，浏览了网络上的各种方法，发现大多是贴在影像上的。这么做好是好，但是会被自生添加的模型或者其他数据给遮盖。其次是网上的方法大多数是截取成一个矩形。不能自定义的截取自己所需要的。经过尝试，决定修改下cesium heatmap，让他达到我们需要的要求。首先先下载 cesium heatmap包。其中我们可以看到也是通过叠加entity达到添加canvas的方法绘制到地图上。我们先把这一段代码注释} else {} };

优化 cesium 界面广告牌（billboard）数据量大于 10w ＋时，地图加载缓慢、卡顿、加载完成后浏览器严重卡顿甚至崩溃问题

热门推荐

weixin_42508580的博客

09-19

1万+

项目之前的设计，billboard 广告牌是绑在 entityCollection 集合下的，为了能够在获取单个实体（entity）时能够获取更多数据信息（entity 能够注入除了它本身的属性之外的属性信息）entityCollection 集合加上集群聚合功能，数据量临界点在 3w~4w 左右，就会出现界面卡顿。fps 低于 20 并且波动很大，延迟保持在 100ms 左右。数据量低于临界点时，entity 的方式呈现页面还是比较奈斯的。

cesium-Web页面优化总结

孙霸天的专栏

04-26

8010

cesium-Web页面优化总结介绍在介绍如何优化之前，我们先要了解一下cesium需要优化的几种情况（目前我遇到的一些情况）直接加载cesium的时候就开始卡顿不流畅（还未加载大量数据） cesium在vue等单页面应用中使用的时候，刚开始加载还正常，但随着刷新、数据交互等操作后开始卡顿 cesium在加载3dtiles（这里主要是说倾斜摄影模型）时，随着加载的数据多了后开始明显卡顿这三种是我目前遇到的问题，后面有其他的问题我再更新进来，欢迎大家一起探讨解决步骤问题一针对第一个问题，这个

Cesium渲染优化思路

u012435198的博客

09-16

2098

使用过Cesium的朋友们都知道，Cesium引擎存在很多需要优化的地方,如HLOD（跨层级别加载）、显示模糊优化、遮挡剔除、渲染精细度等方面。本文主要从HLOD、遮挡剔除、渲染精细程度方面展开介绍。

cesium primitive实时渲染

07-13

在Cesium中，要实现实时渲染，你可以使用`Cesium.Primitive`对象和自定义的渲染函数来更新渲染的几何体或实体。以下是一个简单的示例，展示如何使用`Cesium.Primitive`来实现实时渲染： ```javascript // 创建一个自定义的Primitive var customPrimitive = new Cesium.Primitive({ geometryInstances: new Cesium.GeometryInstance({ geometry: new Cesium.PrimitiveGeometry({ // 这里可以指定你的几何体类型和属性 // 例如: new Cesium.RectangleGeometry({ ... }) }), attributes: { // 这里可以设置几何体的属性 // 例如: color: Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.RED) } }), appearance: new Cesium.MaterialAppearance({ // 这里可以设置材质外观 // 例如: material: new Cesium.Material({ ... }) }) }); // 添加自定义Primitive到场景中 viewer.scene.primitives.add(customPrimitive); // 定义一个更新函数，用于实时更新几何体或属性 function updateCustomPrimitive() { // 更新几何体的属性 // 例如: customPrimitive.geometryInstances.attributes.color = ...; // 刷新场景 viewer.scene.requestRender(); // 循环调用更新函数实现实时渲染 requestAnimationFrame(updateCustomPrimitive); } // 启动实时渲染 updateCustomPrimitive(); ``` 在以上代码中，我们创建了一个自定义的`Cesium.Primitive`对象，并将其添加到场景中。然后，我们定义了一个更新函数`updateCustomPrimitive()`，在该函数中可以更新几何体的属性，并使用`viewer.scene.requestRender()`方法刷新场景。最后，我们通过`requestAnimationFrame()`函数循环调用更新函数，实现实时渲染。你可以根据自己的需求，根据几何体和属性的不同，自定义渲染函数以实现实时渲染。