Cesium 1.108版本3Dtile建筑渐变特效

Cesium 1.108版本3Dtile建筑渐变特效

采用的是直接引入Build内的Cesium包 以前一直用es6的包 发现代码变更会有些不方便 也不好与组内成员协同。
新版本尝试了下customShader，但是它只能改到material，达不到我想要的渐变效果，整张渐变贴图可能也行。

// 添加3Dtiles 
function add3DTiles() {
		const tileset = Cesium.Cesium3DTileset.fromUrl("3dtiles/tileset.json", {
			// customShader: new Cesium.CustomShader({
			// 	lightingModel: Cesium.LightingModel.UNLIT,
			// 	fragmentShaderText: `
			// 	void fragmentMain(FragmentInput fsInput, inout czm_modelMaterial material)
			// 	{
			// 		vec3 v_positionMC = fsInput.attributes.positionMC;
			// 		float buildMaxHeight = 300.0;//建筑群最高高度 配渐变色
			// 		material.diffuse = ${color};//赋予基础底色
			// 		material.diffuse = ${color}*vec3(v_positionMC.y / buildMaxHeight);//根据楼层高度比例渲染渐变色
			// 		float time = abs(fract(czm_frameNumber / 360.0)-0.5)*2.;//动画频率 约束在(0,1) 更改频率修改360.0
			// 		float diffuse = step(0.005, abs(clamp(v_positionMC.y / buildMaxHeight, 0.0, 1.0) - time));//根据帧数变化,光圈颜色白色,由底部朝上一丢丢(0.05)开始逐渐上移显现.
			// 		material.diffuse += material.diffuse * (1.0 - diffuse );//单纯叠加颜色 感兴趣的可以mix混合下
			// 	}
			// 	`,
			// }),
		});
		tileset.then((tile) => {
			FyConfig.viewer.scene.primitives.add(tile);
			let boundingSphere = tile.boundingSphere;
			FyConfig.viewer.camera.viewBoundingSphere(
				boundingSphere,
				new Cesium.HeadingPitchRange(0, Cesium.Math.toRadians(-45), boundingSphere.radius * 3),
			);
			FyConfig.viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);
			// 更改着色器
			tile.tileVisible.addEventListener(function (res) {
				let content = res.content;
				let featuresLength = content.featuresLength;
				for (let i = 0; i < featuresLength; i += 2) {
					let feature = content.getFeature(i);
					let model = feature.content._model;
					if (model && model._pipelineResources) {
						let program = model._pipelineResources[1];
						const color = `vec4(0,127.5/255.,1.,1.)`;
						// let fragGlsl = program._fragmentShaderSource.sources[0];
						// let partGlsl = fragGlsl.substring(0, fragGlsl.indexOf("void main()"));
						let mainGlsl = `
							uniform vec2 model_iblFactor;
							uniform mat3 model_iblReferenceFrameMatrix;
							uniform float model_luminanceAtZenith;
							uniform float u_metallicFactor;
							uniform float u_roughnessFactor;
							uniform int model_featuresLength;
							uniform sampler2D model_batchTexture;
							uniform vec4 model_textureStep;
							uniform float model_colorBlend;
							uniform bool model_commandTranslucent;
							uniform sampler2D model_pickTexture;
							in vec3 v_positionWC;
							in vec3 v_positionEC;
							in vec3 v_normalEC;
							in vec3 v_positionMC;
							in float v_featureId_0;
							struct SelectedFeature
							{
								int id;
								vec2 st;
								vec4 color;
							};
							SelectedFeature selectedFeature;
							void main(){
								float buildMaxHeight = 300.0;//建筑群最高高度 配渐变色
								out_FragColor = ${color};//赋予基础底色
								out_FragColor *= vec4(vec3(v_positionMC.y / buildMaxHeight ), 1.0);//根据楼层高度比例渲染渐变色
								float time = abs(fract(czm_frameNumber / 360.0)-0.5)*2.;//动画频率 约束在(0,1) 更改频率修改360.0
								float diffuse = step(0.005, abs(clamp(v_positionMC.y / buildMaxHeight, 0.0, 1.0) - time));//根据帧数变化,光圈颜色白色,由底部朝上一丢丢(0.05)开始逐渐上移显现。
								out_FragColor.rgb += out_FragColor.rgb * (1.0 - diffuse );//单纯叠加颜色 感兴趣的可以mix混合下
							}
						`;
						program._fragmentShaderSource.sources[0] = mainGlsl;
					}
				}
			});
		});
	}```