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
-
@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);
