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;
}
至于你想实现怎样的效果,完全是看你对webgl,glsl,图形学的了解有多少
例如这样的效果的实现