對于斑點墻紋理效果 我們先定義一下他的interface, 方便使用的人知道他的調(diào)用參數(shù)
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;
}
`;
}
}
對于調(diào)用方式
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,
},
});
還需要導(dǎo)入著色器
``javascript const czm_snoise =
/**
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. {@linkhttps://github.com/ashima/webgl-noise}
*
@nameczm_snoise
*
@seehttps://github.com/ashima/webgl-noise
@seeStefan Gustavson's paperSimplex 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
