欢迎关注微信公号【三维网格3D】,第一时间获取最新文章
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时还需要用到;
context:从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】,第一时间获取最新文章