Cesium材质——Material

简介:

Cesium.Material对象的目的,就是生成一段名称为czm_getMaterial的函数(示例代码如下),

这个czm_getMaterial函数,是shader代码,会被放到片元着色器中使用。

cpp 复制代码
czm_material czm_getMaterial(czm_materialInput materialInput)
{
    ...省略代码...
    return material;
}

Cesium.Material主要被MaterialProperty、Appearace这2个对象使用

1、创建自定义Material对象

创建一个自定义的material对象,主要是掌握fabric的结构就可以

fabric官方参考:

https://github.com/CesiumGS/cesium/wiki/Fabric

javascript 复制代码
let materialPolylineFlow = new Cesium.Material({
  fabric: {
    type: "PolylineFlow",//自定义type类型
    uniforms: {
      color: new Cesium.Color(1.0, 0.0, 0.0, 1.0),
      speed: 4,
      percent: 0.1,
      gradient: 0.4,
    },
    source: fs,//自定义的着色器,也就是定义czm_getMaterial函数的地方
  },
  translucent: function (material) {
    return true;
  },
});

2、Material的复用

上述代码定义了一个type(类型)名为"PolylineFlow"的Material实例对象。

里面包含4个uniform变量、一段自定义的shader代码、还有控制透明度的函数

问题:如果我想复用这个material对象,该怎么做?

比如,我想声明一个一模一样的material效果,只是color为蓝色Cesium.Color.BLUE

我该怎么做?

**方案1:**复制上述所有代码

只是修改color的值

javascript 复制代码
let materialPolylineFlowBlue = new Cesium.Material({
  fabric: {
    //type: "PolylineFlowBlue",//不能和上面的PolylineFlow同名(也可以不写这个值)
    uniforms: {
      color: new Cesium.Color(0.0, 0.0, 1.0, 1.0),//只是这里的值变了,其他都没变
      speed: 4,
      percent: 0.1,
      gradient: 0.4,
    },
    source: fs,
  },
  translucent: function (material) {
    return true;
  },
});

这个可行,就是重复代码太多

**方案2:**封装一个工具类

解决重复代码,第1个想到的就是自己封装一个类,把公共代码集中到一块

javascript 复制代码
class util{
  
 static getMaterialByType(strTypeName,options){
    if(strTypeName=="PolylineFlow"){
      let {color=new Cesium.Color(1.0, 0.0, 0.0, 1.0),
           speed=4,
           percent=0.1,
           gradient=0.4
          }=options;
      //------------------下述代码和之前基本一致------------------
      let material = new Cesium.Material({
        fabric: {
          //type: "PolylineFlowBlue",//没必要再传入这个参数了
          uniforms: {
            color: color,
            speed: speed,
            percent: percent,
            gradient: gradient,
          },
          source: fs,
        },
        translucent: function (material) {
          return true;
        },
      });
      //------------------上述代码和之前基本一致------------------
    }else if(strTypeName=="otherType"){
      //其他类型的Material
    }
  }
}

这个也可行!

获取一个蓝色的Material,代码如下

javascript 复制代码
let materialBlue=util.getMaterialByType("PolylineFlow",{
  color:Cesium.Color.BLUE
})
**方案3:**Cesium自己的方案

通过Cesium.Material._materialCache.addMaterial来注册一个type类型的Material

javascript 复制代码
Cesium.Material.PolylineFlowType = "PolylineFlow";
Cesium.Material._materialCache.addMaterial(
  Cesium.Material.PolylineFlowType,
  {
    fabric: {
      type: Cesium.Material.PolylineFlowType,
      uniforms: {
        color: new Cesium.Color(1.0, 0.0, 0.0, 1.0),
        speed: 4,
        percent: 0.1,
        gradient: 0.4,
      },
      source: fs,
    },
    translucent: function (material) {
      return true;
    },
  },
);

之后,如果要复用这个PolylineFlow类型的Material

Cesium提供了2中方法

方法1:
javascript 复制代码
let materialByNew = new Cesium.Material({
  fabric: {
    type: "PolylineFlow",
    uniforms: {
      color: new Cesium.Color(0.0, 0.0, 1.0, 1.0),
    },
  },
});

不推荐使用这个,假如type传入一个"非注册过"的material类型

不会报错,反而会进行"不完全注册"!

"不完全注册"是指

new Cesium.Material()的源码中,

虽然执行了Cesium.Material._materialCache.addMaterial()方法

但是,并不能复用!(可能是Cesium的bug)

方法2:
javascript 复制代码
let materialByFrom = Cesium.Material.fromType("PolylineFlow", {
  color: new Cesium.Color(0.0, 1.0, 0.0, 1.0),
});

推荐使用这个,因为它就是一个纯粹的复用

fromType()的第1个参数,是要复用的material的type名称

如果传入的type值,不在materialCache中,则直接报错。

相关推荐
在下胡三汉1 天前
3dmax物理材质转换标准材质,物理材质转VR材质,VR材质转标准材质3dmax物理材质转标准材质插件
vr·材质
在下胡三汉1 天前
3dmax一键烘焙很多张贴图合并成一张贴图插件支持fbx/obj/blender多材质模型合并为一张贴图
blender·材质·贴图
在下胡三汉2 天前
3dmax标准材质转物理材质插件,支持VR材质和CR材质转换成功物理材质,支持多维子材质
vr·材质
一个有理想的摸鱼选手4 天前
CesiumLite-开箱即用的轻量化三维地图包(持续更新中...)
gis·cesium
九河_4 天前
【blender】使用bpy对一个obj的不同mesh进行不同的材质贴图(涉及对bmesh的操作)
blender·材质·贴图·bpy
不浪brown13 天前
重磅开源!Cesium实现高度雾仿真,谁再说Cesium做不出好效果?
cesium
青山Coding14 天前
Cesium基础(五)实体创建与拖拽
前端·cesium
Lud_15 天前
OpenGL ES 中的材质
android·材质·opengl es
Mapmost17 天前
全新升级!3DTiles加载速度Mapmost完胜Cesium
性能优化·webgl·cesium
不浪brown17 天前
告别静态水面的平庸!Cesium中实现水面倒影+动态流向的逼真水特效
cesium