cesium-天际线

主要是两个着色器

let postProccessStage = new Cesium.PostProcessStage({
		//unform着色器对象 textureScale
		fragmentShader:
		// 声明一个纹理采样器 colorTexture 用于读取纹理颜色
			'uniform sampler2D colorTexture;' +
			// 声明一个纹理采样器 depthTexture 用于读取深度纹理
			'uniform sampler2D depthTexture;' +
			'in vec2 v_textureCoordinates;' +
			'out vec4 outColor;' +
			'void main(void)' +
			'{' +
			'float depth = czm_readDepth(depthTexture, v_textureCoordinates);' +
			'vec4 color = texture(colorTexture, v_textureCoordinates);' +
			'if(depth<1.0 - 0.000001){' +
			'outColor = color;' +
			'}' +
			'else{' +
			'outColor = vec4(1.0,0.0,0.0,1.0);' +
			'}' +
			'}'
	});
//PostProcessStage:要使用的片段着色器。默认sampler2D制服是colorTexture和depthTexture。
	let postProccesStage_1 = new Cesium.PostProcessStage({
		// name:obj.name+'_1',
		fragmentShader: 'uniform sampler2D colorTexture;' +
			'uniform sampler2D redTexture;' +
			'uniform sampler2D silhouetteTexture;' +
			'in vec2 v_textureCoordinates;' +
			'out vec4 outColor;' +
			'void main(void)' +
			'{' +
			'vec4 redcolor=texture(redTexture, v_textureCoordinates);' +
			'vec4 silhouetteColor = texture(silhouetteTexture, v_textureCoordinates);' +
			'vec4 color = texture(colorTexture, v_textureCoordinates);' +
			'if(redcolor.r == 1.0){' +
			'outColor = mix(color, vec4(5.0,0.0,0.0,1.0), silhouetteColor.a);' +
			'}' +
			'else{' +
			'outColor = color;' +
			'}' +
			'}',
		//uniform着色器对象
		uniforms: {
			redTexture: postProccessStage.name,
			silhouetteTexture: edgeDetection.name
		}
	});

全部代码




效果图

cesium-天际线_第1张图片

你可能感兴趣的:(cesium,vue.js,javascript,elementui,cesium)