Cesium Fabric —— 材质JSON规范

Fabric 介绍

Fabric 是 Cesium 中用于描述材质的一种 JSON 规定。

材质表现了多边形、折线、椭圆等形状的外观。

使用 Fabric 和 GLSL，可以完全自定义材质

通过几何对象的 material 属性可以创建材质，这个属性是 Cesium.Material 对象。

可以这么用：

javascript 复制代码

// 假设 polygon 是一个 primitive
polygon.appearance.material = Cesium.Material.fromType('color');

这就创建了一个只有颜色的材质，包括透明度的颜色。Cesium.Material.fromType() 方法是一个简写，完整的写法是：

javascript 复制代码

polygon.appearance.material = new Cesium.Material({
  fabric: {
    type: 'Color' // 大写
  }
})

每一个 Material 都可以有 0 ~ N 个 uniform，这个参数在创建时指定，也可以在渲染后修改。例如，color 类型的 Material 就有格式为 rgba 的颜色 uniform：

javascript 复制代码

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

内置材质（23种）

Cesium 有几个内置的材质。列举两个比较常用的

材质类型	描述
type: 'Color'	一个简单的颜色，包括透明通道
type: 'Image'	jpg 或 png 贴图类型的材质

所有的内置材质可以简单地使用 Cesium.Material.fromType() 方法创建：

javascript 复制代码

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

或者用全写法：

javascript 复制代码

polygon.appearance.material = new Cesium.Material({
  fabric: {
    type: 'Image',
    uniforms: {
      image: 'image.png'
    }
  }
})

机器生成的规律纹理

材质类型	描述
type: 'Checkerboard'	国际象棋格子
type: 'Stripe'	竖条纹旗帜
type: 'Dot'	行列点阵
type: 'Grid'	线状网格，显示一些网状结构的图形

基础材质

材质类型	描述
type: 'DiffuseMap'	漫反射贴图，即最常见的贴图，通常是 rgb 三个颜色
type: 'SpecularMap'	单通道贴图，表示的是入射光强度贴图
type: 'AlphaMap'	单通道的不透明度贴图
type: 'NormalMap'	三通道贴图，表示的是法线贴图
type: 'BumpMap'	单通道的凹凸贴图
type: 'EmissionMap'	三通道的自发光贴图

折线材质

材质类型	描述
type: 'PolylineArrow'	箭头线，终点在折线末端
type: 'PolylineGlow'	发光线
type: 'PolylineOutline'	描边线

Misc 材质

材质类型	描述
type: 'Water'	水面贴图，看起来有水波动效
type: 'RimLighting'	发边缘会比较亮

自定义材质

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

如果一个材质不想被复用，那么就不要指定它的 type 属性。

javascript 复制代码

let fabric = {
  // ...
}

polygon.appearance.material = new Cesium.Material({
  fabric: fabric
})

当 fabric 对象中的 type 属性之前是没有指定过的，那么在第一次调用 new Cesium.Material() 时，这个新的 fabric 材质将被缓存，随后再次 new Material 或 Material.fromType() 时将从缓存中取用。

javascript 复制代码

let fabric = {
   type : 'MyNewMaterial',
   // ...其他 fabric JSON 的属性
}
polygon.appearance.material = new Cesium.Material({
  fabric : fabric
});
// ... 然后在另一处需要这个 fabric
anotherPolygon..appearance.material = Material.fromType('MyNewMaterial');