cesium着色器学习系列6- scene的render函数渲染调度

最新推荐文章于 2026-06-21 12:36:02 发布

原创最新推荐文章于 2026-06-21 12:36:02 发布 · 3.2k 阅读

5 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

cesium

本文深入解析Cesium中render函数的核心作用与实现流程，从updateAndExecuteCommands调度到四叉树格网渲染，再到endFrame函数的具体操作，如切片加载、高度更新及状态跟踪。

render函数是cesium最核心的模块。scene.js中的Scene.prototype.render 3316行

参照法克鸡丝大神的博客，文中讲到的updateAndExecuteCommands 和 scene.globe.endFrame函数

https://www.cnblogs.com/fuckgiser/p/5744509.html

前者负责调度，后者负责执行渲染。

调度实现过程，博主给了一个简单的关系调度图，但断断续续差不多花了半天才理清楚。

入口updateAndExecuteCommands

通常会进入 executeCommandsInViewport函数

第二步：调用渲染primitive函数，由于四叉树格网也是一个primitive，因此会被首先创建

第三布：调用globe中的render函数，注意前面的primitive.update函数，其实也涉及很多逻辑，最开始走弯路去这里面了。

第四步：调用_surface中的render函数，这个_surface实际上就是一个四叉树格网类，这个地方后文也会用到

第五步：庐山真面目，调用四叉树格网的render函数

第六步：依次调用

selectTilesForRendering(this, frameState);
createRenderCommandsForSelectedTiles(this, frameState);

tileProvider.endUpdate(frameState);

至此，终于完成了图中的调度逻辑。后面深入理解每个函数中的实现逻辑

调度的逻辑太过抽象，暂时未能理解，先来看看渲染实现，endframe

调用endframe函数，实际调用了globe._surface.endFrame(frameState);

看看_surface可以发现，其实surface是一个四叉树primitive类，那么实则调用了四叉树类的endframe函数

来看看QuadtreePrimitive是什么呢？

先看构造函数的参数说明：

QuadtreeTileProvider：可理解为一个切片，该对象管理该切片的数据加载渲染和计算与其他切片的距离

其他两个参数先不用管

再来看看该类的endframe函数，调用了三个函数,注释是做这几件事

// Load/create resources for terrain and imagery. Prepare texture re-projections for the next frame.

processTileLoadQueue(this, frameState);//处理切片加载队列
updateHeights(this, frameState);//更新高度值
updateTileLoadProgress(this, frameState);//更新切片处理进程状态

可以看出，所有函数都是以帧状态为参数

首先来看processTileLoadQueue 函数

里面分了三层，高中低队列的切片 //目前还未理解，后续连贯了再来补充

var tileLoadQueueHigh = primitive._tileLoadQueueHigh;
var tileLoadQueueMedium = primitive._tileLoadQueueMedium;
var tileLoadQueueLow = primitive._tileLoadQueueLow;

如果这三个队列都为空，则表明没有要渲染的切片，否则，需要移除超过限制的帧

primitive._tileReplacementQueue.trimTiles(primitive.tileCacheSize);//通过过卸载最近最少使用的队列，将队列大小减少到指定的大小切片。上一帧使用的Tiles将不会被卸载，即使这样会产生数字超过指定最大值的块。

最后根据切片的优先级别依次加载

var didSomeLoading = processSinglePriorityLoadQueue(primitive, frameState, tileProvider, endTime, tileLoadQueueHigh, false);
didSomeLoading = processSinglePriorityLoadQueue(primitive, frameState, tileProvider, endTime, tileLoadQueueMedium, didSomeLoading);
processSinglePriorityLoadQueue(primitive, frameState, tileProvider, endTime, tileLoadQueueLow, didSomeLoading);

第二个逻辑是：更新高度信息updateHeights

最后更新切片处理进程的状态updateTileLoadProgress

检查加载的切片长度是否变化了，如果变化了，那么就要进行事件提升将下一个事件压入栈内。