Cesium中关于新版本中建筑贴图模糊化得处理方式

运用场景:

在项目中有需要将3Dtiles加载得lod1,lod2.5等模型得贴图进行模糊化的相关功能


问题描述

例如:如果使用maximumScreenSpaceError的方式进行模糊化也可以达到我们需要得效果,但是需要我们去调整视角查看,在一定得视角范围得模型才会模糊化,不能到到大范围得模型进行模糊化,所以不是很完善.我们可以使用CustomShader进行大场景得模型模糊化来达到我们得目的!
参考代码如下:

 //cesium初始化得时候噩梦需要添加这个方法,将模糊化精度打开
 Cesium.ExperimentalFeatures.enableModelExperimental = true;

原因分析:

例如:cesium 新版本中需要添加上述的初始化方式才能开始模糊化,分别是 Cesium.ExperimentalFeatures.enableModelExperimental = true;,否则我们是使用new Cesium.CustomShader,代码实现得功能是不会实现得


解决方案:

Cesium.ExperimentalFeatures.enableModelExperimental = true;
const tileset = new Cesium.Cesium3DTileset({
  url: Cesium.IonResource.fromAssetId(75343),
  customShader: new Cesium.CustomShader({
    lightingModel: Cesium.LightingModel.UNLIT,
    fragmentShaderText: `
      // Color tiles by distance to the camera
      void fragmentMain(FragmentInput fsInput, inout czm_modelMaterial material)
      {
          material.diffuse = vec3(0.0, 0.0, 1.0);
          material.diffuse.g = -fsInput.attributes.positionEC.z / 1.0e4;
      }
      `,
  }),
});
layer.inst.customShader = new Cesium.CustomShader({
        lightingModel: Cesium.LightingModel.UNLIT,
        fragmentShaderText: `
        // Color tiles by distance to the camera
        void fragmentMain(FragmentInput fsInput, inout czm_modelMaterial material)
        {
            material.diffuse = vec3(0.0, 0.0, 1.0);
            material.diffuse.g = -fsInput.attributes.positionEC.z / 1.0e4;
        }
        `,
      })

或者采用自行贴图得方式进行贴图模糊化,图片可以使用马赛克类似得图片进行.

const textureUniformShader = new Cesium.CustomShader({
        uniforms: {
          // user-defined texture
          u_texture: {
            type: Cesium.UniformType.SAMPLER_2D,
            value: new Cesium.TextureUniform({
              url: "http://localhost:8080/test3.jpg",
            }),
          }
        },
        // Apply the texture to the model, but move the texture coordinates
        // a bit over time so it's animated.
        fragmentShaderText: `
    void fragmentMain(FragmentInput fsInput, inout czm_modelMaterial material)
    {
        material.diffuse = texture(u_texture, fsInput.attributes.texCoord_0).rgb;
    }
    `,
      });
      layer.inst.customShader = textureUniformShader
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小仙有礼了

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值