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 =
/**
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
