Cesium 材质Fabric（一）

在线列子：https://github.com/AnalyticalGraphicsInc/cesium-materials-pack
Cesium 材质Fabric（二）（参数介绍）
常见材质 ：

1. ColorType
2. ImageType
3. DiffuseMapType
4. AlphaMapType
5. SpecularMapType
6. EmissionMapType
7. BumpMapType
8. NormalMapType
9. GridType
10. StripeType
11. CheckerboardType
12. DotType
13. WaterType
14. RimLightingType
15. FadeType
16. PolylineArrowType
17. PolylineGlowType
18. PolylineOutlineType

一、简介及使用

（一）简介

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

（二）使用

1. 方法一（外设）

// 方法一
primitive.appearance..material = Material.fromType('Image');
primitive.appearance..uniforms.image = 'image.png';

2. 方法二（内置）

// 方法一
polygon.material = new Cesium.Material({
  fabric : {
    type : 'Image',
    uniforms : {
      image : 'image.png'
    }
  }
});

注：

1. uniforms --> 一种输入参数变量，在创建材质时或者创建材质后修改.
   如：ColorType 类型材质，uniform ，它包含red, green, blue, 和alpha四个部件：

polygon.material.uniforms.color = new Cesium.Color(1.0, 1.0, 0.0, 1.0);

ImageType，ubiform，包含jpg或者png格式的图片，可以带透明通道，用rgb表示颜色，a表示透明度：

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

二、常用材质

（一）内置材质

1.ColorMaterialProperty（颜色材质）

// 模型位置
var saturnPosition = Cesium.Cartesian3.fromDegrees(
  -95.0,
  45.0,
  300000.0
);
// 添加模型
viewer.entities.add({
  name: "Saturn",
  position: saturnPosition,
  ellipsoid: {
    radii: new Cesium.Cartesian3(200000.0, 200000.0, 200000.0),
    // 材质
    material:  Cesium.Color.BLUE
  },
});
 // 视图缩放
viewer.zoomTo(viewer.entities);

2.ImageMaterialProperty（贴图材质）

• image 值可以是URL，Canvas,或者Video
• repeat 值为一个二位数，分别表示X,y方向的重复次数，例如new Cartesian2(2.0,
  1.0)表示x方向重复2次,y方向重复1次
• color 设置颜色之后，会在图片上覆盖一层设置的颜色
• transparent 是否透明，纹理为png图片的时候可以设置

// 模型位置
var saturnPosition = Cesium.Cartesian3.fromDegrees(
  -95.0,
  45.0,
  300000.0
);
// 添加模型
viewer.entities.add({
  name: "Saturn",
  position: saturnPosition,
  ellipsoid: {
    radii: new Cesium.Cartesian3(200000.0, 200000.0, 200000.0),
    // 材质
    material:  new Cesium.ImageMaterialProperty({
      image: imgUrl,
      repeat: new Cesium.Cartesian2(4, 4),
      color: Cesium.Color.BLUE,
    })
  },
});
 // 视图缩放
viewer.zoomTo(viewer.entities);

（二）程序生成的纹理

1.CheckerboardMaterialProperty（棋盘纹理）

• evenColor 默认白色，棋盘的第一个颜色
• oddColor 默认黑色，第二个颜色
• repeat 重复次数

// 模型位置
var saturnPosition = Cesium.Cartesian3.fromDegrees(
  -95.0,
  45.0,
  300000.0
);
// 添加模型
viewer.entities.add({
  name: "Saturn",
  position: saturnPosition,
  ellipsoid: {
    radii: new Cesium.Cartesian3(200000.0, 200000.0, 200000.0),
    // 材质
    material:   new Cesium.CheckerboardMaterialProperty({
	  evenColor : Cesium.Color.WHITE,
	  oddColor : Cesium.Color.BLACK,
	  repeat : new Cesium.Cartesian2(4, 4)
	})
  },
});
 // 视图缩放
viewer.zoomTo(viewer.entities);

2.StripeMaterialProperty（条纹纹理）

• evenColor 默认白色，棋盘的第一个颜色
• oddColor 默认黑色，第二个颜色
• repeat 条纹重复次数
• offset 偏移量
• orientation 水平或者垂直,默认水平

// 模型位置
var saturnPosition = Cesium.Cartesian3.fromDegrees(
  -95.0,
  45.0,
  300000.0
);
// 添加模型
viewer.entities.add({
  name: "Saturn",
  position: saturnPosition,
  ellipsoid: {
    radii: new Cesium.Cartesian3(200000.0, 200000.0, 200000.0),
    // 材质
	    material:  new Cesium.StripeMaterialProperty({
	  evenColor : Cesium.Color.WHITE,
	  oddColor : Cesium.Color.BLACK,
	  repeat : 32,
	  offset:20,
	  orientation:Cesium.StripeOrientation.VERTICAL 
	})
  },
});
 // 视图缩放
viewer.zoomTo(viewer.entities);

3.GridMaterialProperty（网格）

• color 网格颜色
• cellAlpha 单元格透明度
• lineCount 行列个数
• lineThickness 线粗细
• lineOffset 线偏移

// 模型位置
var saturnPosition = Cesium.Cartesian3.fromDegrees(
  -95.0,
  45.0,
  300000.0
);
// 添加模型
viewer.entities.add({
  name: "Saturn",
  position: saturnPosition,
  ellipsoid: {
    radii: new Cesium.Cartesian3(200000.0, 200000.0, 200000.0),
    // 材质
	    material:  Cesium.GridMaterialProperty({
		  color : Cesium.Color.YELLOW,
		  cellAlpha : 0.2,
		  lineCount : new Cesium.Cartesian2(8, 8),
		  lineThickness : new Cesium.Cartesian2(2.0, 2.0)
		})
  },
});
 // 视图缩放
viewer.zoomTo(viewer.entities);

（三）基本材质

名称	效果图	描述
漫反射贴图DiffuseMap		一张图片定义了光在所有方向上的散射颜色，一般是个三维向量（vec3）
高光反射贴图 SpecularMap		一张图片，定义了光在某一个方向上的反射颜色 ，一般是个标量（scalar)，通常用来模拟某个光亮的平面，比如陆地上的水面。
透明贴图AlphaMap		一张图片，定义了材质透明度 ，一般是个标量（scalar)。通常让一部分表面透明或者半透明，比如栅栏
法向贴图NormalMap		一张图片，定义了在切线空间定义了表面的法向量，一般是个三维向量（ vec3）。法向贴图在不增加几何体复杂度的前提下，提升了表面渲染的细节
凹凸贴图BumpMap		一张图片，定义了表面的高度 ，一般是个标量（scalar)。就像法向贴图，也可以在不增加几何体复杂度的前提下，提升了表面渲染的细节 ，它通过相邻像素之间的差异来微调法向量
自发光贴图 EmissionMap		一张图片，定义了材质在所有方向上发光颜色，一般是个三维向量（vec3）。比如走廊里的灯泡

（四）折线材质

这只一种只能添加到折线几何体上的材质。

1.PolylineGlowMaterialProperty（发光线）

• color 发光的颜色(中心颜色为白色)
• glowPower 发光的长度，值为线宽的百分比(0~1.0)
• taperPower 渐缩效果的强度，以占总线长的百分比表示。如果为1.0或更高，则不使用锥度效果(1.0)

var saturnPosition = Cesium.Cartesian3.fromDegrees(
  -95.0,
  45.0,
  300000.0
);

var entity = viewer.entities.add({
  name: "line",
  position: Cesium.Cartesian3.fromDegrees(-95.0, 34.0),
    polyline : {
        positions : Cesium.Cartesian3.fromDegreesArray([-77, 35,
                                                        -77.1, 35]),
    width : 15,
    material : new Cesium.PolylineGlowMaterialProperty({
     // 渐缩效果的强度，以占总线长的百分比表示。如果为1.0或更高，则不使用锥度效果(1.0)  
    //taperPower: 0.1,
    glowPower : 0.2,
    color : Cesium.Color.BLUE
})
}});
viewer.zoomTo(viewer.entities);

2. PolylineOutlineMaterialProperty（外轮廓线材质）

var saturnPosition = Cesium.Cartesian3.fromDegrees(
  -95.0,
  45.0,
  300000.0
);

var entity = viewer.entities.add({
  name: "line",
  position: Cesium.Cartesian3.fromDegrees(-95.0, 34.0),
    polyline : {
        positions : Cesium.Cartesian3.fromDegreesArray([-77, 35,
                                                        -77.1, 35]),
    width : 15,
    material :  new Cesium.PolylineOutlineMaterialProperty({
          color: Cesium.Color.ORANGE,
          outlineWidth: 5,
          outlineColor: Cesium.Color.BLACK,
        }),
}});
viewer.zoomTo(viewer.entities);

3.PolylineArrowMaterialProperty（带有箭头的线）

var saturnPosition = Cesium.Cartesian3.fromDegrees(
  -95.0,
  45.0,
  300000.0
);

var entity = viewer.entities.add({
  name: "line",
  position: Cesium.Cartesian3.fromDegrees(-95.0, 34.0),
    polyline : {
        positions : Cesium.Cartesian3.fromDegreesArray([-77, 35,
                                                        -77.1, 35]),
    width : 15,
    material : new Cesium.PolylineArrowMaterialProperty(Cesium.Color.PURPLE),
}});
viewer.zoomTo(viewer.entities);

4.PolylineDashMaterialProperty（虚线）

var saturnPosition = Cesium.Cartesian3.fromDegrees(
  -95.0,
  45.0,
  300000.0
);

var entity = viewer.entities.add({
  name: "line",
  position: Cesium.Cartesian3.fromDegrees(-95.0, 34.0),
    polyline : {
        positions : Cesium.Cartesian3.fromDegreesArray([-77, 35,
                                                        -77.1, 35]),
    width : 15,
    material :  new Cesium.PolylineDashMaterialProperty({
          color: Cesium.Color.CYAN,
        }),
}});
viewer.zoomTo(viewer.entities);

（五）其他材质