Cesium 自定义Material 系列 （十二）

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

export interface PMaterialBrick{

color?: any,

speed?: number,

brickColor?: any,

mortarColor?:any,

brickSize?: any,

brickPct?: any,

brickRoughness?: number,

mortarRoughness?: number

}

对于墙纹理我们叫 MaterialBrick

```javascript

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