Cesium 自定义Material 系列 （十）
对于沥青墙纹理效果 我们先定义一下他的interface, 方便使用的人知道他的调用参数
export interface PMaterialAsphalt{
asphaltColor: any,
bumpSize : 0.02,
roughness : 0.2
}
对于沥青墙纹理我们叫 MaterialAsphalt
import {MaterialProperty} from "../MaterialProperty";
const defaultOption: PMaterialAsphalt = {
asphaltColor: new Cesium.Color(1.0, 1.0, 1.0, 0.5),
bumpSize : 0.02,
roughness : 0.2
}
//沥青效果
export class MaterialAsphalt extends MaterialProperty{
protected _getType(option: any): string {
return "MaterialAsphalt"
}
constructor(option=defaultOption) {
super(MaterialAsphalt.prototype, defaultOption, option);
}
protected _getTranslucent(material: any){
return material.uniforms.asphaltColor.alpha < 1.0
}
protected getSource(option: any): string {
return `
uniform vec4 asphaltColor;
uniform float bumpSize;
uniform float roughness;
czm_material czm_getMaterial(czm_materialInput materialInput)
{
czm_material material = czm_getDefaultMaterial(materialInput);
// From Stefan Gustavson's Procedural Textures in GLSL in OpenGL Insights
//Main cellular pattern
vec4 color = asphaltColor;
vec2 st = materialInput.st;
vec2 F = czm_cellular(st / bumpSize);
color.rgb -= (F.x / F.y) * 0.1;
//Extra bumps for roughness
float noise = czm_snoise(st / bumpSize);
noise = pow(noise, 5.0) * roughness;
color.rgb += noise;
material.diffuse = color.rgb;
material.alpha = color.a;
return material;
}
`;
}
}
对于调用方式
```javascript
let lon = 0, lat = 0, height = 250000, width = 3；
let material = new MaterialAsphalt({
asphaltColor: new Cesium.Color(1.0, 1.0, 1.0, 0.9),
bumpSize: 0.02,
roughness: 0.2,
});
let entity = viewer.entities.add({
wall: {
maximumHeights: [height, height, height],
minimumHeights: [0, 0, 0],
positions: Cesium.Cartesian3.fromDegreesArrayHeights([
lon,
lat,
height,
lon + 3,
lat,
height,
lon + 3,
lat + 10,
height,
]),
更多参考 https://xiaozhuanlan.com/topic/8764139025
