Cesium Fabric —— 材质JSON规范

发布于:2024-04-04 ⋅ 阅读:(25) ⋅ 点赞:(0)

Fabric 介绍

Fabric 是 Cesium 中用于描述材质的一种 JSON 规定。
材质表现了多边形、折线、椭圆等形状的外观。
使用 Fabric 和 GLSL,可以完全自定义材质

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

可以这么用:

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

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

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

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

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() 方法创建:

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

或者用全写法:

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 属性。

let fabric = {
  // ...
}

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

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

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