文章转自： https://blog.csdn.net/weixin_38676065/article/details/126123975

学习参考文章：https://github.com/AnalyticalGraphicsInc/cesium/wiki/Fabric

自定义材质不是必须的，但想要呈现绚丽的效果，还得自定义材质来实现。

文章目录

内置材质

类型

使用

自定义材质

组件

源代码

输入变量

fabric 对象

实例

效果

代码

分析

内置材质

类型

材质通过漫反射、镜面反射、法线、发射和 alpha 分量的组合来定义表面外观。 这些值是使用名为 Fabric 的 JSON 模式指定的，该模式在幕后被解析并组装成 glsl 着色器代码。内置的材质可以直接拿来使用，最常用的就是Color和Image。部分材质及它的uniforms如下：

材料类型描述uniforms

Color单纯的颜色color

Imagejpg 或 png 的贴图图片image、repeat

Checkerboard国际象棋格子lightColor、darkColor、repeat

Stripe竖条纹旗帜horizontal、evenColor、oddColor、offset、repeat

Dot行列点阵lightColor、darkColor、repeat

Grid线状网格color、cellAlpha、lineCount、lineThickness、lineOffset

DiffuseMap漫反射贴图image、channels、repeat

SpecularMap单通道贴图image、channel、repeat

AlphaMap单通道的不透明度贴图image、channel、repeat

NormalMap三通道贴图image、channels、repeat、strength

BumpMap单通道的凹凸贴图image、channels、repeat、strength

EmissionMap三通道的自发光贴图image、channel、repeat

PolylineArrow箭头线，终点在折线末端color

PolylineGlow发光线color、glowPower、taperPower

PolylineOutline描边线color、outlineColor、outlineWidth

Water水面贴图，看起来有水波动效baseWaterColor、blendColor、specularMap、normalMap、frequency、animationSpeed、amplitude、specularIntensity

RimLighting边缘会比较亮color、rimColor、width

使用

通过几何对象的 material 属性可以创建材质，这个属性是 Cesium.Material对象，使用内置材质设置material 非常简单。

// color

polygon.appearance.material = Cesium.Material.fromType('color');

// image

polygon.appearance.material = Cesium.Material.fromType('Image')

polygon.appearance.material.uniforms.image = 'image.png'

1

2

3

4

5

6

7

上面就创建了自定义的颜色和贴图的材质。Cesium.Material.fromType() 方法是一个简写，完整的写法是如下，Fabric 是 Cesium 中用于描述材质的一种 JSON 规定，里面type属性是材质的类型，也就是材质标识，uniforms是对应材质的一些变量，可以设置材质的颜色、图片等，不同材质的uniforms不一样。

// color

polygon.appearance.material = new Cesium.Material({

fabric: {

type: 'Color',

uniforms: {

color: new Cesium.Color(1.0, 0.0, 0.0, 0.5)

}

}

})

polygon.appearance.material.uniforms.color = Cesium.Color.WHITE

// image

polygon.appearance.material = new Cesium.Material({

fabric: {

type: 'Image',

uniforms: {

image: 'image.png'

}

}

})

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

自定义材质

使用 fabric 对象 + GLSL 代码和其他素材，就可以创建自定义材质。

let fabric = {

// ...

}

polygon.appearance.material = new Cesium.Material({

fabric: fabric

})

1

2

3

4

5

6

7

8

let fabric = {

type : 'MyNewMaterial',

// ...其他 fabric JSON 的属性

}

polygon.appearance.material = new Cesium.Material({

fabric : fabric

});

// ... 然后在另一处需要这个 fabric

anotherPolygon..appearance.material = Material.fromType('MyNewMaterial');

1

2

3

4

5

6

7

8

9

10

组件

白色的漫反射材质或许是最常用的：

let fabric = {

components: {

diffuse: 'vec3(1.0)'

}

}

1

2

3

4

5

6

稍微复杂一些，加一点镜面反射，使得正射视角看反光最强，侧面变弱：

let fabric = {

components : {

diffuse : 'vec3(0.5)',

specular : '0.1'

}

}

1

2

3

4

5

6

Fabric 是 Cesium 中用于描述材质的一种 JSON 规定，components 属性包含了 fabric 所定义的材质的各种子因素。每个子因素均使用简短的 glsl 代码字符串表示，因此上面写的 vec(0.5) 就表示 rgb 均为 0.5 的一种颜色。这个简单的 glsl 代码可以使用所有 glsl 内置的函数，例如 mix、cos、texture2D 等。components 可以定义 6 个属性：

名称默认值描述

diffuse‘vec3(0.0)’漫反射颜色，即物体的基本颜色

specular‘0.0’镜面反射，定义的是单方向反射光强度

shininess‘1.0’镜面反射的清晰度，这个值越大会出现更小的高光光斑

normal法线，默认无法线

emission‘vec3(0.0)’自发光，默认不发光

alpha‘1.0’不透明度，0.0 是完全透明，1.0 是不透明。

源代码

components 还有一个更强大而灵活的选择是 glsl 源代码，通过 glsl 的方式修改材质。这个途径将设置的 glsl 代码传递到 czm_getMaterial 函数，这个函数执行后返回材质的 components：

struct czm_materialInput

{

float s;

vec2 st;

vec3 str;

mat3 tangentToEyeMatrix;

vec3 positionToEyeEC;

vec3 normalEC;

};

struct czm_material

{

vec3 diffuse;

float specular;

float shininess;

vec3 normal;

vec3 emission;

float alpha;

};

czm_material czm_getMaterial(czm_materialInput materialInput);

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

默认情况下，材质的默认值会被返回：

czm_material czm_getMaterial(czm_materialInput materialInput)

{

return czm_getDefaultMaterial(materialInput);

}

1

2

3

4

5

这个时候的 fabric 对象是：

let fabric = {

components: {

source: `czm_material czm_getMaterial(czm_materialInput materialInput) { return czm_getDefaultMaterial(materialInput); }`

}

}

1

2

3

4

5

6

上面修改了漫反射和镜面反射的例子可以通过 glsl 改写为：

let fabric = {

source: `czm_material czm_getMaterial(czm_materialInput materialInput)

{

czm_material m = czm_getDefaultMaterial(materialInput);

m.diffuse = vec3(0.5);

m.specular = 0.5;

return m;

}`

}

1

2

3

4

5

6

7

8

9

10

使用 glsl 代替 components 虽然看起来代码比较冗长，但是提供了灵活性。

如果不是有特别的需求，使用 components 属性指定材质的各种因子就可以了。但是，不管是哪一种，在这些 glsl 代码中，都是可以直接使用 glsl 的内置函数和 Cesium 预定义的 函数、结构体、常量的。

输入变量

materialInput 变量在 source 和 components 中均可以使用，在 glsl 代码的定义中，这个变量是 czm_materialInput 结构体有如下字段：

名称类型描述

sfloat一维纹理坐标

stvec2二维纹理坐标

strvec3三维纹理坐标，三维纹理的二维部分不一定就是二维纹理坐标，切记。例如，在一个椭球几何中，s可能就是从下到上，st可能是经纬度，str三维纹理就是包围盒的三轴方向。

tangentToEyeMatrixmat3用于法线贴图、凹凸贴图的转换矩阵，转换切线空间坐标到视图坐标

positionToEyeECvec3从 fragment 到 视图空间坐标的向量（不知道这个 fragment 说的是什么），用于反射和折射等。向量的长度是 fragment 到视图（相机）的距离。

normalECvec3fragment 在视图坐标中的法线（已归一化），作用于凹凸贴图、反射、折射等例如可以这么设置来可视化纹理坐标：

let fabric = {

components: {

diffuse: 'vec3(materialInput.st, 0.0)'

}

}

1

2

3

4

5

6

一样的，可以把 diffuse 组件设置为 materialInput.normalEC 来可视化法线。

除了 materialInput 这个传入的参数，还可以访问 Cesium 提供的 uniform 变量。

例如，可以通过一个 color uniform 去设置 diffuse 组件和 alpha 组件，来创建自己的 Color 材质：

let fabric = {

type: 'MyColor',

uniforms: {

color: new Color(1.0, 0.0, 0.0, 1.0)

},

components: {

diffuse: 'color.rgb',

alpha: 'color.a'

}

}

1

2

3

4

5

6

7

8

9

10

11

在 fabric 中，glsl 中的 uniform 变量、new Cesium.Material() 和 Cesium.Material.fromType() 返回的 js 对象中的 uniform 变量与 uniforms 属性的子属性（例如这里的 uniforms.color）具有相同的名称。

子属性的值（对于标量来说）或子属性（对于向量来说）即 uniform 的值。

下例，通过 image uniform 来实现自定义的 DiffuseMap 材质：

let fabric = {

type: 'OurDiffuseMap',

uniforms: {

image: 'czm_defaultImage'

},

components: {

diffuse: 'texture2D(image, materialInput.st).rgb'

}

}

1

2

3

4

5

6

7

8

9

czm_defaultImage 是 1x1 分辨率的图片，根据上面的说法，这可以从 dataurl 或图片文件中获取，例如：

polygon.appearance.material = Material.fromType('OurDiffuseMap');

polygon.appearance.material.uniforms.image = 'diffuse.png';

1

2

3

还有一个多维数据集的变量：czm_defaultCubeMap。

支持 glsl 的 uniform 类型，例如 float、vec3、mat4 等。

对于 uniform 数组还不支持，不过在规划中了。

在 fabric 这个对象中，uniforms 下的所有属性均被 glsl 认作是 uniform 变量，可以直接当变量使用，例如上例中的 texture2D(image, materialInput.st) 中的 image 参数。

在这里，规定了 image 这个 uniform 的类型是 Cesium 内置的 czm_defaultImage 结构体类型。

fabric 对象

fabric 是一个有官方规定如何写的 js 对象，它拥有 5 个属性：

type：用于声明 fabric 对象最终会生成什么材质，如果是官方内置的，直接用官方内置的，否则则创建自定义的材质并缓存。

materials：允许再塞进去子一级的 fabric，构成复合材质。

source：是 glsl 源代码，它主要是对 czm_getMaterial 这个 Cesium 内置的 glsl 函数的实现，返回值是 czm_material

components：是几个基本材质因子的 glsl 代码快捷入口，是 source 的一种简略实现。

uniforms：一些全局变量，可以在 glsl 代码中用到这个 uniform 定义的所有变量了。

实例

效果

发光特效

代码

材质代码：

const Cesium = require('cesium/Cesium')

function DynamicWallMaterialProperty (options) {

this._definitionChanged = new Cesium.Event()

this._color = undefined

this._colorSubscription = undefined

this.color = options.color

this.duration = options.duration

this.trailImage = options.trailImage

this._time = (new Date()).getTime()

this.viewer = options.viewer

}

Object.defineProperties(DynamicWallMaterialProperty.prototype, {

isConstant: {

get: function () {

return false

}

},

definitionChanged: {

get: function () {

return this._definitionChanged

}

},

color: Cesium.createPropertyDescriptor('color')

})

DynamicWallMaterialProperty.prototype.getType = function (time) {

return 'DynamicWall'

}

DynamicWallMaterialProperty.prototype.getValue = function (time, result) {

if (!Cesium.defined(result)) {

result = {}

}

result.color = Cesium.Property.getValueOrClonedDefault(this._color, time, Cesium.Color.WHITE, result.color)

if (this.trailImage) {

result.image = this.trailImage

} else {

result.image = Cesium.Material.DynamicWallImage

}

if (this.duration) {

result.time = (((new Date()).getTime() - this._time) % this.duration) / this.duration

}

this.viewer.scene.requestRender()

return result

}

DynamicWallMaterialProperty.prototype.equals = function (other) {

return this === other ||

(other instanceof DynamicWallMaterialProperty &&

Cesium.Property.equals(this._color, other._color))

}

Cesium.DynamicWallMaterialProperty = DynamicWallMaterialProperty

Cesium.Material.DynamicWallType = 'DynamicWall'

Cesium.Material.DynamicWallImage = require('./colors.png')

Cesium.Material.DynamicWallSource = `

czm_material czm_getMaterial(czm_materialInput materialInput)

{

czm_material material = czm_getDefaultMaterial(materialInput);

vec2 st = materialInput.st;

vec4 colorImage = texture2D(image, vec2(fract(st.t - time), st.t));

vec4 fragColor;

fragColor.rgb = color.rgb / 1.0;

fragColor = czm_gammaCorrect(fragColor);

material.alpha = colorImage.a * color.a;

material.diffuse = color.rgb;

material.emission = fragColor.rgb;

return material;

}

`

Cesium.Material._materialCache.addMaterial(Cesium.Material.DynamicWallType, {

fabric: {

type: Cesium.Material.DynamicWallType,

uniforms: {

color: new Cesium.Color(1.0, 1.0, 1.0, 1),

image: Cesium.Material.DynamicWallImage,

time: 0

},

source: Cesium.Material.DynamicWallSource

},

translucent: function (material) {

return true

}

})

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

分析

上面是自定义材质的代码，大部分自定义材质代码的模板也是如此，不同的就是glsl里的代码和uniforms变量。uniforms变量里定义的属性，可以直接在Cesium.Material.DynamicWallSource中的glsl代码里使用。简单的光效不学glsl语言也可以模仿网上案例修改一下参数，复杂的光效就得对glsl有一定的了解。

————————————————

版权声明：本文为CSDN博主「一指流沙叹风华」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。

原文链接：https://blog.csdn.net/weixin_38676065/article/details/126123975