Cesium 高性能扩展之DrawCommand（一）：入门

DrawCommand 是 Cesium 渲染器的核心类，常用的接口 Entity、Primitive、Cesium3DTileSet，以及地形和影像的渲染等等，底层都是一个个 DrawCommand 完成的。在进行扩展开发、视觉特效提升、性能优化、渲染到纹理（RTT），甚至基于 Cesium 封装自己的开发框架，定义独家数据格式等等，都需要开发人员对 DrawCommand 熟练掌握。而这部分接口，Cesium 官方文档没有公开，网上的相关资料也比较少，学习起来比较困难，所以接下来我们用几期文章，由浅入深，实用为主，力求全面地介绍 DrawCommand 及相关类的运用。

简单列个计划吧，可能部分内容合为一期来介绍：

入门；
显隐控制；
支持 pick；
阴影（shadows）；
实例化（instance）；
支持 Entity 的贴地属性；
解决抖动问题（RTC）；
支持BatchTable。
本期我们先从一个简单的示例来介绍 DrawCommand 基本属性，通过这个示例，大家可以自己基于 DrawCommand 创建一个最基本的可用的 Primitive。

1、创建 DrawCommand

一个基本的 DrawCommand 至少包含：

• vertexArray ：顶点数组，向 GPU 传递顶点属性、索引（可选的）数组等几何信息；
• shaderProgram ：着色器程序对象，负责编译、链接顶点着色器（vertexShader）、片元着色器（fragmentShader）；
• renderState ：渲染状态对象，封装如深度测试（depthTest）、剔除（cull）、混合（blending）等状态类型的参数设置；
• pass ：渲染通道，Cesium 提供的常用渲染通道（封装在Cesium.Pass）有：
  ENVIRONMENT：环境，如天空盒（星空背景）
  COMPUTE ：用于并行加速计算
  GLOBE ：地形瓦片等
  TERRAIN_CLASSIFICATION ：地形分类
  CESIUM_3D_TILE ：3D Tiles 瓦片
  CESIUM_3D_TILE_CLASSIFICATION ：3D Tiles 分类（单体化）
  OPAQUE ：不透明物体
  TRANSLUCENT ：半透明物体

不是必须但是常用的属性：

• modelMatrix：模型变换矩阵，用于指定所绘制物体的参考系，包括位置、旋转、缩放三方面参数。如果不设置，则参考系为世界坐标系，原点在地球球心；
• uniformMap ：用于传递 uniform 具体的值，是一个回调函数字典对象，key 是 uniform 变量名，value 是回调函数，回调函数的返回值可以是：
• number ：数字类型，或者数字数组；
  boolean ：布尔类型，true 或者 false，或者数组；
  Cartesian2 ：二维向量；
  Cartesian3 ：三维向量；
  Cartesian4 ：四维向量；
  Color ：颜色，本身也是四维向量；
  Matrix2 ：2x2 矩阵；
  Matrix3 ：3x3 矩阵，一般可以传法线矩阵（normalMatrix）；
  Matrix4 ：4x4 矩阵，如 modelMatrix、viewMatrix、projectionMatrix 等等都是这个类型；
  Texture ：二维贴图；
  CubeMap ：立方体贴图。

2、使用 DrawCommand

DrawCommand的使用需要通过实现Primitive接口来完成，具体代码如下（已经省去创建DrawCommand部分）

3、基本属性详解

下面详细介绍各个基本属性及其创建方法。

3.1、modelMatrix

模型变换矩阵，用于指定所绘制物体的参考系，包括位置、旋转、缩放三方面参数。Cesium 提供现成的一组方法（封装在Cesium.Transforms）可以快速创建几种常见的站心坐标系，最常用莫过于 ENU 坐标系了。

3.2、vertexArray

顶点数组的创建有多种方法，通常可以将几何数据用Cesium.Geometry来表达，然后用Cesium.VertexArray.fromGeometry可以用更少代码量完成创建。关键参数：

• attributeLocations ：顶点属性索引，key 为属性名称，value 为顶点属性缓冲区在同一个着色器程序中的索引，相当于将 js 中的顶点数组，传递到 shader 中的 attribute 变量。在后面创建shaderProgram时还需要用到；
• ontext：从Primitive.update方法的frameState参数中获取；
• geometry：Cesium.Geometry，Cesium 自带的几何类型都提供一个静态方法createGeometry来生成这个类型的几何对象。
  
  3.3、shaderProgram
  着色器程序，负责编译、链接顶点着色器（vertexShader）、片元着色器（fragmentShader）。熟悉整个流程之后，这一步的shader编写就是分高下的关键所在了，或炫酷的视觉效果、或高效的并行算法，都在 shader 代码。我们需要清楚：
• 需要声明哪些attribute变量?这取决于geometry.attributes，变量名称必须保持一致；变量类型取决于geometry.attributes中各个属性的componentsPerAttribute值：
• 1——float；
  2——vec2；
  3——vec3；
  4——vec4；
• Cesium 提供哪些内置的uniform变量（通常前缀为czm_）?比如下面的czm_projection，内置uniform变量无需在我们的 shader 代码中声明，Cesium 会自动添加，下一节的uniformMap也无需包含；
• 需要声明哪些uniform变量?除了内置变量，我们运算需要的外部传递的，每一个次运算所使用的值都相同的外部变量，都需要声明。变量的值，通过下一节的uniformMap传递。
  
  3.4、uniformMap
  用于传递自定义 uniform 变量的值，是一个回调函数字典对象，key 是 uniform 变量名，value 是回调函数，回调函数的返回值可以是：
• number ：数字类型，在 shader 中类型为float；
• boolean ：布尔类型，true 或者 false，在 shader 中类型为bool；
• Cartesian2 ：二维向量，在 shader 中类型为vec2；
• Cartesian3 ：三维向量，在 shader 中类型为vec3；
• Cartesian4 ：四维向量，在 shader 中类型为vec4；
• Color ：颜色，本身也是四维向量，在 shader 中类型为vec4；
• []：元素为上述类型的数组
• Matrix2 ：2x2 矩阵，在 shader 中类型为mat2；
• Matrix3 ：3x3 矩阵，一般可以传法线矩阵（normalMatrix），在 shader 中类型为mat3；
• Matrix4 ：4x4 矩阵，如 modelMatrix、viewMatrix、projectionMatrix 等等都是这个类型，在 shader 中类型为mat4；
• Texture ：二维贴图，在 shader 中类型为sampler2D；
• CubeMap ：立方体贴图，在 shader 中类型为samplerCube；
• {}：结构体。
  
  3.5、renderState
  渲染状态对象，封装如深度测试（depthTest）、剔除（cull）、混合（blending）等状态类型的参数设置。其中涉及多个技术，后面会展开部分来介绍，其余的在使用中慢慢掌握。
  

4、完整示例代码

两个字：快，稳！
欢迎咨询，后台回复【商务合作】，获取联系方式！

欢迎关注微信公众号【三维网格3D】，第一时间获取最新文章