cesium中如何添加自定义材质，编写shader

最新推荐文章于 2024-10-12 23:14:58 发布

小秧@

最新推荐文章于 2024-10-12 23:14:58 发布

阅读量2.6k

点赞数 8

文章标签：材质 javascript 开发语言

本文链接：https://blog.csdn.net/webMinStudent/article/details/130776610

版权

文章介绍了如何在Cesium中利用内置接口创建自定义材质，通过编写GLSLshader代码来实现动态效果。关键步骤包括定义材质类型、设置uniforms和源代码，然后在czm_getMaterial函数中修改材质属性，如diffuse和alpha。示例代码展示了如何使用平滑过渡函数(smoothstep)来控制材质的透明度，从而达到特定的视觉效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

cesium中如何添加自定义材质，编写shader

cesium中提供了接口，让我们开发者在cesium中编写底层的shader着色器代码，达到一些酷炫的效果

Cesium.Material._materialCache.addMaterial('RectFlayLightMaterial', {
	fabric: {
		type: ,
		uniforms: {
            uTime: 0
        },
        source: `czm_material czm_getMaterial(czm_materialInput materialInput){
			czm_material material = czm_getDefaultMaterial(materialInput);
			return material;
		}`
	}
})

最简单的模板就是这样，source是glsl的源代码，这里定义了一个函数czm_getMaterial，在后续的代码中会调用这个czm_getMaterial函数，这个函数返回了一个材质，我们只有将这个material，的一些属性进行修改即可。
例如:

diffuse
alpha

至于这些属性表示什么意思，需要查看cesium对这块的文档说明

例如这样的修改

Cesium.Material._materialCache.addMaterial("RectFlayLightMaterial", {
        fabric: {
          type: "RectFlayLightMaterial",
          uniforms: {
            uTime: 0
          },
          source: `
          czm_material czm_getMaterial(czm_materialInput materialInput)
        {
            czm_material material = czm_getDefaultMaterial(materialInput);
            material.diffuse = vec3(1.0, 0.0, 0.0);
            material.alpha = uTime;
            vec2 st = materialInput.st;
            // 获取当前帧数,1@秒内变化从@-1:
            float time = fract(czm_frameNumber / (60.0*10.0));
            time = time * (1. + .1);
            // 平滑过渡函数
            // smoothstep(edge, edge1， value);
            // 参数1:边缘0,==8,
            // 参数2边缘1,==10,
            // 参数3当前值,==7 ，result = @
            // 参数3:当前值,==9 ，result = @.5
            // 参数3:当前值,==10 ，result = 1
            float alpha = smoothstep(time-0.1,time, st.s) * step(-time,-st.s);
            // 设置材质的透明度
            alpha += 0.05;
            material.alpha = alpha;
            material.diffuse = vec3(0.7, 0.6, 1.0);
            return material;
        }
      `
        },
      });

忘了说一点，这个Cesium.Material._materialCache.addMaterial要在一个类中编写

class RectFlayLightMaterial {
    constructor(name) {
      this.name = name;
      this.definitionChanged = new Cesium.Event();
      Cesium.Material._materialCache.addMaterial("RectFlayLightMaterial", {
        fabric: {
          type: "RectFlayLightMaterial",
          uniforms: {
            uTime: 0
          },
          source: `
          czm_material czm_getMaterial(czm_materialInput materialInput)
        {
            czm_material material = czm_getDefaultMaterial(materialInput);
            material.diffuse = vec3(1.0, 0.0, 0.0);
            material.alpha = uTime;
            vec2 st = materialInput.st;
            // 获取当前帧数,1@秒内变化从@-1:
            float time = fract(czm_frameNumber / (60.0*10.0));
            time = time * (1. + .1);
            // 平滑过渡函数
            // smoothstep(edge, edge1， value);
            // 参数1:边缘0,==8,
            // 参数2边缘1,==10,
            // 参数3当前值,==7 ，result = @
            // 参数3:当前值,==9 ，result = @.5
            // 参数3:当前值,==10 ，result = 1
            float alpha = smoothstep(time-0.1,time, st.s) * step(-time,-st.s);
            // 设置材质的透明度
            alpha += 0.05;
            material.alpha = alpha;
            material.diffuse = vec3(0.7, 0.6, 1.0);
            return material;
        }
      `
        },
      });
    }
    getType() {
      // 返回材质类型
      return "RectFlayLightMaterial";
    }
    equals(other) {
        // 判断两个材质是否相等
        return (other instanceof RectFlayLightMaterial && this.name == other.name)
    }
    getValue(time, result) {
      // result 是着色器的unifrom
      // console.log(result, 'result')
      let t = performance.now() / 1000;
      t = t % 1;
      result.uTime = t;
      return result;
    }