Cesium 自定义Material 系列 （十一）

• 对于斑点墙纹理效果 我们先定义一下他的interface, 方便使用的人知道他的调用参数

• export interface PMaterialBlob{
• lightColor?: any,
• darkColor?: any,
• frequency?:number
• }

• 对于斑点墙墙纹理我们叫 MaterialBlob

• import {MaterialProperty} from "./MaterialProperty";
• const defaultOption: PMaterialBlob = {
• lightColor: new Cesium.Color(1.0, 1.0, 1.0, 0.5),
• darkColor: new Cesium.Color(0.0, 0.0, 1.0, 0.5),
• frequency: 10.0
• }
• //斑点
• export class MaterialBlob extends MaterialProperty{
• protected _getType(option: any): string {
• return "MaterialBlob"
• }
• constructor(option=defaultOption) {
• super(MaterialBlob.prototype, defaultOption, option);
• }
• protected _getTranslucent(material: any){
• var uniforms = material.uniforms
• return uniforms.lightColor.alpha < 1.0 || uniforms.darkColor.alpha < 0.0
• }
•  
• protected getSource(option: any): string {
• return `
• uniform vec4 lightColor;
• uniform vec4 darkColor;
• uniform float frequency;
•  
• czm_material czm_getMaterial(czm_materialInput materialInput){
• czm_material material = czm_getDefaultMaterial(materialInput);
•  
• // From Stefan Gustavson's Procedural Textures in GLSL in OpenGL Insights
• vec2 F = czm_cellular(materialInput.st * frequency);
• float t = 1.0 - F.x * F.x;
•  
• vec4 color = mix(lightColor, darkColor, t);
• material.diffuse = color.rgb;
• material.alpha = color.a;
•  
• return material;
• }
•  
•  
• `;
• }
•  
• }

• 对于调用方式

• let lon = 0, lat = 0, height = 250000, width = 3；
• let material = new MaterialBlob({
• lightColor: new Cesium.Color(1.0, 1.0, 1.0, 0.5),
• darkColor: new Cesium.Color(0.0, 0.0, 1.0, 0.5),
• frequency: 10.0,
• });
•  
• 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,
• ]),
• material: material,
• },
• });

还需要导入着色器
``javascript const czm_snoise =
/**

• @license
• Description : Array and textureless GLSL 2D/3D/4D simplex
• noise functions.
• Author : Ian McEwan, Ashima Arts.
• Maintainer : ijm
• Lastmod : 20110822 (ijm)
• License : Copyright (C) 2011 Ashima Arts. All rights reserved.
• Distributed under the MIT License. See LICENSE file.
• https://github.com/ashima/webgl-noise
  */

vec4 _czm_mod289(vec4 x)
{
return x - floor(x * (1.0 / 289.0)) * 289.0;
}

vec3 _czm_mod289(vec3 x)
{
return x - floor(x * (1.0 / 289.0)) * 289.0;
}

vec2 _czm_mod289(vec2 x)
{
return x - floor(x * (1.0 / 289.0)) * 289.0;
}

float _czm_mod289(float x)
{
return x - floor(x * (1.0 / 289.0)) * 289.0;
}

vec4 _czm_permute(vec4 x)
{
return _czm_mod289(((x34.0)+1.0)x);
}

vec3 _czm_permute(vec3 x)
{
return _czm_mod289(((x34.0)+1.0)x);
}

float _czm_permute(float x)
{
return _czm_mod289(((x34.0)+1.0)x);
}

vec4 _czm_taylorInvSqrt(vec4 r)
{
return 1.79284291400159 - 0.85373472095314 * r;
}

float _czm_taylorInvSqrt(float r)
{
return 1.79284291400159 - 0.85373472095314 * r;
}

vec4 _czm_grad4(float j, vec4 ip)
{
const vec4 ones = vec4(1.0, 1.0, 1.0, -1.0);
vec4 p,s;

• p.xyz = floor( fract (vec3(j) * ip.xyz) * 7.0) * ip.z - 1.0;
• p.w = 1.5 - dot(abs(p.xyz), ones.xyz);
• s = vec4(lessThan(p, vec4(0.0)));
• p.xyz = p.xyz + (s.xyz*2.0 - 1.0) * s.www;
•  
• return p;

}

/**

• DOC_TBA
  *

• Implemented by Ian McEwan, Ashima Arts, and distributed under the MIT License. {@link https://github.com/ashima/webgl-noise}
  *

• @name czm_snoise

• @glslFunction
  *

• @see https://github.com/ashima/webgl-noise

• @see Stefan Gustavson's paper Simplex noise demystified
  / float czm_snoise(vec2 v) { const vec4 C = vec4(0.211324865405187, // (3.0-sqrt(3.0))/6.0 0.366025403784439, // 0.5(sqrt(3.0)-1.0)
  -0.577350269189626, // -1.0 + 2.0 * C.x
  0.024390243902439); // 1.0 / 41.0
  // First corner
  vec2 i = floor(v + dot(v, C.yy) );
  vec2 x0 = v - i + dot(i, C.xx);

   

  // Other corners
  vec2 i1;
  //i1.x = step( x0.y, x0.x ); // x0.x > x0.y ? 1.0 : 0.0
  //i1.y = 1.0 - i1.x;
  i1 = (x0.x > x0.y) ? vec2(1.0, 0.0) : vec2(0.0, 1.0);

 更多参考 https://xiaozhuanlan.com/topic/9302576841