Cesium 高性能扩展之DrawCommand(一):入门

欢迎关注微信公号【三维网格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】,第一时间获取最新文章

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 211,376评论 6 491
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,126评论 2 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 156,966评论 0 347
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,432评论 1 283
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,519评论 6 385
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,792评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,933评论 3 406
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,701评论 0 266
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,143评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,488评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,626评论 1 340
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,292评论 4 329
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,896评论 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,742评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,977评论 1 265
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,324评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,494评论 2 348

推荐阅读更多精彩内容