对于墙纹理效果 我们先定义一下他的interface, 方便使用的人知道他的调用参数
export interface PMaterialBrick{
color?: any,
speed?: number,
brickColor?: any,
mortarColor?:any,
brickSize?: any,
brickPct?: any,
brickRoughness?: number,
mortarRoughness?: number
}
对于墙纹理我们叫 MaterialBrick
import {MaterialProperty} from "./MaterialProperty";
const defaultOption: PMaterialBrick = {
brickColor: new Cesium.Color(0.6, 0.3, 0.1, 1.0),
mortarColor: new Cesium.Color(0.8, 0.8, 0.7, 1.0),
brickSize: new Cesium.Cartesian2(0.3, 0.15),
brickPct: new Cesium.Cartesian2(0.9, 0.85),
brickRoughness: 0.2,
mortarRoughness: 0.1
}
//墙效果
export class MaterialBrick extends MaterialProperty{
protected _getType(option: any): string {
return "MaterialBrick"
}
constructor(option=defaultOption) {
super(MaterialBrick.prototype, defaultOption, option);
}
protected _getTranslucent(material: any){
var uniforms = material.uniforms
return uniforms.brickColor.alpha < 1.0 || uniforms.mortarColor.alpha < 1.0
}
protected getSource(option: any): string {
return `
uniform vec4 brickColor;
uniform vec4 mortarColor;
uniform vec2 brickSize;
uniform vec2 brickPct;
uniform float brickRoughness;
uniform float mortarRoughness;
#define Integral(x, p) ((floor(x) * p) + max(fract(x) - (1.0 - p), 0.0))
czm_material czm_getMaterial(czm_materialInput materialInput){
czm_material material = czm_getDefaultMaterial(materialInput);
// From OpenGL Shading Language (3rd edition) pg. 194, 501
vec2 st = materialInput.st;
vec2 position = st / brickSize;
if(fract(position.y * 0.5) > 0.5) {
position.x += 0.5;
}
更多参考 https://xiaozhuanlan.com/topic/8970156234
