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