学习参考文章：https://github.com/AnalyticalGraphicsInc/cesium/wiki/Fabric、https://www.cnblogs.com/onsummer/p/14059215.html
好记性不如烂笔头，记录一下cesium自定义材质的知识。自定义材质不是必须的，但想要呈现绚丽的效果，还得自定义材质来实现。

内置材质

类型

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

使用

通过几何对象的 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 个属性：

源代码

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 结构体有如下字段：

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有一定的了解。