Cesium学习笔记（14）

通过Material的fabric设置材质

fabric通过对象的形式设置材质

Material中的fabric属性是以json形式或者说对象形式来设置材质（color、Image、Grid等等）。

let ma2=new Cesium.Material({
    fabric:{
      //材质类型
      //Color、Image、Grid等
      type:"Image",  
      //材质的属性
      uniforms:{
        image:"src/assets/dog.png",
      }
    }
  })
let appearance1 = new Cesium.EllipsoidSurfaceAppearance({
    material: ma2,
  })
const Rectangle2 = new Cesium.RectangleGeometry({
    ellipsoid: Cesium.Ellipsoid.default,
    rectangle: Cesium.Rectangle.fromDegrees(-70.0, 39.0, -65.0, 42.0),
    //距离地球表面高度
    height: 100000,
    //挤出高度
    // extrudedHeight:100000, 
    vertexFormat: Cesium.EllipsoidSurfaceAppearance.VERTEX_FORMAT,
  })
let instance2 = new Cesium.GeometryInstance({
   id: "instance2",
   geometry: Rectangle2,
   attributes: {
     color: Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.BLUE.withAlpha(0.5))

   }
 });
 
let primitive = new Cesium.Primitive({
  geometryInstances: [instance2],
  appearance: appearance1,
  asynchronous: false,
})

fabric通过编写着色器源码的形式修改材质

简单例子

  //使用fabric  编写着色器 修改材质
  //漫反射材质修改
  let ma = new Cesium.Material({
    fabric: {
      //着色器的源码
      source: `
      czm_material czm_getMaterial(czm_materialInput materialInput)
      {
        czm_material material = czm_getDefaultMaterial(materialInput);

        //dissuse漫反射 //漫反射颜色没有透明度  只有rgb
        material.diffuse = vec3(1.0,0.0,0.0);
        return material;
      }
      `
    }
  })
let appearance1 = new Cesium.EllipsoidSurfaceAppearance({
    material: ma,
  })

glsl

glsl是一种用于描述顶点和片元着色器的语言，类似C语言，专门为OpenGL和其他着色器渲染系统而设计的。fabric的source中写的代码就是glsl。下面介绍一些基本的对象。可以从这个文档中查找相关解释。 Cesium Documentation

czm_getMaterial的输入参数czm_materialInput对象

文档介绍

czm_getDefaultMaterial函数

用于返回一个默认材质对象（czm_material），它的输入就是czm_getMaterial的输入参数czm_materialInput对象

czm_material 材质对象

就是用这个对象来做出炫酷的效果 例子

  let ma = new Cesium.Material({
    fabric: {
      //着色器的源码
      source: `
      czm_material czm_getMaterial(czm_materialInput materialInput)
      {
        czm_material material = czm_getDefaultMaterial(materialInput);
        //dissuse漫反射 //漫反射颜色没有透明度  只有rgb 
        //将几何实例中的每个顶点的uv坐标作为颜色的前两位,从形成渐变色
        // material.diffuse = vec3(materialInput.st,0.0);

        //生成条纹效果  
        float stre=mod(materialInput.s*10.0,1.0);  // 0.11 stre就是0.1  0.12 stre就是0.2
        material.diffuse = vec3(stre,0.5,0.0);
        //u坐标为0.12和 0.22 0.32 0.42....颜色是一样的,都会是(0.2,0.5,0.0).
        //所以就形成了条纹效果
        return material;
      }
      `
    }
  })

简单理解

给每个像素附材质时，都会调用czm_getMaterial这个函数。然后，每个像素就会根据该函数返回的材质显示相应的效果。 materialInput的s和st就是当前像素的纹理坐标（uv坐标系，范围都是0-1），s表示u坐标 st表示uv坐标。上面条纹的效果就是利用了每个像素的uv坐标来附颜色，从而形成了条纹渐变颜色。

使用gsap实现动画效果

gsap是一个js动画库。

  //使用fabric  编写着色器 修改材质
  let ma = new Cesium.Material({
    fabric: {
      uniforms:{
        //这里定义的变量可以在着色器中使用  表示时间
        uTime:0,
      },
      //着色器的源码
      source: `
      czm_material czm_getMaterial(czm_materialInput materialInput)
      {
        czm_material material = czm_getDefaultMaterial(materialInput);
        //dissuse漫反射 //漫反射颜色没有透明度  只有rgb 
        //将几何实例中的每个顶点的uv坐标作为颜色的前两位,从形成渐变色
        // material.diffuse = vec3(materialInput.st,0.0);

        //生成条纹效果  
        float stre=mod((materialInput.s*10.0+uTime),1.0);  // 0.11 stre就是0.1  0.12 stre就是0.2
        material.diffuse = vec3(stre,0.5,0.0);
        //u坐标为0.12和 0.22 0.32 0.42....颜色是一样的,都会是(0.2,0.5,0.0).
        //所以就形成了条纹效果
        return material;
      }
      `
    }
  })
gsap.to(ma.uniforms,{
  uTime:1,        
  duration:0.5,  //时间间隔
  repeat:-1,
  ease:"linear"  //线性过渡
})