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