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;
}
}
});
});
}```