cesium 绘制primitive流程（三）执行渲染命令过程

我们从下面图片去观察cesium是怎样执行primitive的渲染命令的

1，初始化cesium场景时候会默认执行CesiumWidget类里面的startRenderLoop方法，该方法的作用是

调用浏览器requestAnimationFrame方法循环执行widget.render方法进行渲染，我们再看看

CesiumWidget里面的rander方法，这个方法调用了scene.initializeFrame()进行初始化一帧，Clock.tick()方法触发时钟更新当前时间，Scene.render方法进行渲染。我们再看看Scene.render方法

该方法大致做了以下几件事，更新帧数，预先更新3dtiles数据，预先更新相机飞行的3dtiles数据，调用render方法等

我们看看Scene.render方法，该方法内部调用Scene.updateAndExecuteCommands方法

Scene.prototype.updateAndExecuteCommands方法根据frameState.mode变量判断是否是3d场景然后执行executeCommandsInViewport方法渲染视口内的图元，

调用Scene类里的executeCommands方法执行绘制命令

executeCommands方法内先执行和环境相关的，例如天空盒，太阳，月亮等渲染指令。

接着根据遍历视锥体数组，依次执行单个视锥体的渲染命令。

先Pass.GLOBE（椭球体），接着Pass.TERRAIN_CLASSIFICATION（贴地形），接着Pass.CESIUM_3D_TILE（3dtiles),Pass.CESIUM_3D_TILE_CLASSIFICATION(贴着3dtiles),接着Pass.CESIUM_3D_TILE_CLASSIFICATION_IGNORE_SHOW,接着Pass.OPAQUE(不透明的），Pass.TRANSLUCENT(透明的），Pass.OVERLAY(遮盖物)

然后会触发DrawCommand.prototype.execute方法

进入Centext.draw方法

该方法先设置帧缓冲区，渲染状态，uniform变量，然后调用beginDraw方法

在beginDraw方法绑定帧缓冲区，应用渲染状态（例如开启深度测试，模板测试，混合等），绑定着色程序，并限制最大纹理单元数量。

然后执行continueDraw方法

设置模型矩阵，设置uniform变量，绑定顶点数组，根据绘制的实例数量和是否有顶点索引来决定使用context._gl.drawElements，context.glDrawElementsInstanced，context._gl.drawArrays，context.glDrawArraysInstanced其中一种方法

   去年就一直有一个想法，把cesium引擎用opengl重新实现一遍，当时考虑的跨平台路线是通过Emscripten把桌面语言编译成js然后在浏览器运行。为啥会想到做这个呢？就是考虑到cesium在前端加载的性能和效果，基于OpenGL底层的话会有更好的性能，不受浏览器性能限制种种...

   基本把cesium功能都搬进来了，除了GIS球部分，还有影像、地形服务，有3dtiles数据加载，也有cesium的billboard，polyline，label等API。

    底层基于OpenGL4.5，和浏览器单线程不同，这套桌面引擎也用上了多线程

    但是有一个问题，虽然有一个性能很强的桌面端引擎，但是现在主流需求都是浏览器加载。之前也用到了跨平台技术Emscripten转成js，但是性能毕竟也不理想。没法和桌面性能和效果相比。后面就考虑了走云渲染路线也实现一套跨平台。后面也成功实现了。

    也就是可以包含cesium所有的功能，而且还有桌面的性能和效果。个人觉得比现在市面上一些云渲染要好一点，比如51world基于UE4，虽然效果很好，但是底层是商业引擎，也没有数字地球。

    

    

 

    

服务端渲染 ：DOM树在服务端生成，然后返回给前端。

客户端渲染 （SSR）：前端去后端取数据生成DOM树。

服务端渲染的优点 ：

1、尽量不占用前端的资源，前端这块耗时少，速度快。

2、有利于SEO优化，因为在后端有完整的html页面，所以爬虫更容易爬取信息。

服务端渲染的缺点 ：

1、不利于前后端分离，开发的效率降低了。

2、对html的解析，对前端来说加快了速度，但是加大了服务器的压力。

客户端渲染的优点 ：

1、前后端分离，开发效率高。

2、用户体验更好，我们将网站做成SPA（单页面应用）或者部分内容做成SPA，当用户点击时，不会形成频繁的跳转。

客户端渲染的缺点 ：

1、前端响应速度慢，特别是首屏，这样用户是受不了的。

2、不利于SEO优化，因为爬虫不认识SPA，所以它只是记录了一个页面。

服务端和客户端渲染的区别 ：

1、二者本质的区别：是谁来完成了html的完整拼接，服务端渲染是在服务端生成DOM树，客户端渲染是在客户端生成DOM树。

2、响应速度：服务端渲染会加快页面的响应速度，客户端渲染页面的响应速度慢。

3、SEO优化：服务端渲染因为是多个页面，更有利于爬虫爬取信息，客户端渲染不利于SEO优化。

4、开发效率：服务端渲染逻辑分离的不好，不利于前后端分离，开发效率低，客户端渲染是采用前后端分离的方式开发，效率更高，也是大部分业务采取的渲染方式。

直观的区分服务端渲染和客户端渲染：

源码里如果能找到前端页面中的内容文字，那就是在服务端构建的DOM，就是服务端渲染，反之是客户端渲染。

应该使用服务端渲染还是客户端渲染：

我们要根据业务场景去选择渲染的方式。

如果是企业级网站，主要功能是页面展示，它没有复杂的交互，并且需要良好的SEO，那我们应该使用服务端渲染。

如果是后台管理页面，交互性很强，它不需要考虑到SEO，那我们应该使用客户端渲染。

具体使用哪种渲染方式也不是绝对的，现在很多网站使用 服务端渲染和客户端渲染结合 的方式：首屏使用服务端渲染，其他页面使用客户端渲染。这样可以保证首屏的加载速度，也完成了前后端分离。

---