當前位置:網站首頁>cesium加載3dtiles白膜,通過shader自定義材質實現漸變效果並顯示動態光環

cesium加載3dtiles白膜,通過shader自定義材質實現漸變效果並顯示動態光環

2022-05-13 04:22:38依賴_賴

關鍵代碼:

function loadTilesShader(tileset) {
    
  tileset.style = new Cesium.Cesium3DTileStyle({
    
    color: {
    
      conditions: [
        ['true', 'rgba(0, 127.5, 255 ,1)']
      ]
    }
  });
  //實現漸變效果
  tileset.tileVisible.addEventListener(function (tile) {
    
    var content = tile.content;
    var featuresLength = content.featuresLength;
    for (let i = 0; i < featuresLength; i += 2) {
    
      let feature = content.getFeature(i)
      let model = feature.content._model

      if (model && model._sourcePrograms && model._rendererResources) {
    
        Object.keys(model._sourcePrograms).forEach(key => {
    
          let program = model._sourcePrograms[key]
          let fragmentShader = model._rendererResources.sourceShaders[program.fragmentShader];
          let v_position = "";
          if (fragmentShader.indexOf(" v_positionEC;") != -1) {
    
            v_position = "v_positionEC";
          } else if (fragmentShader.indexOf(" v_pos;") != -1) {
    
            v_position = "v_pos";
          }
          const color = `vec4(${
      feature.color.toString()})`;

          model._rendererResources.sourceShaders[program.fragmentShader] =
            ` varying vec3 ${
      v_position}; void main(void){ vec4 position = czm_inverseModelView * vec4(${
      v_position},1); // 比特置 gl_FragColor = ${
      color}; // 顏色 gl_FragColor *= vec4(vec3(position.z / 50.0), 1.0); // 漸變 // 動態光環 float time = fract(czm_frameNumber / 180.0); time = abs(time - 0.5) * 2.0; float glowRange = 180.0; // 光環的移動範圍(高度) float diff = step(0.005, abs( clamp(position.z / glowRange, 0.0, 1.0) - time)); gl_FragColor.rgb += gl_FragColor.rgb * (1.0 - diff); } `
        })
        model._shouldRegenerateShaders = true
      }
    }
  });
}

在這裏插入圖片描述

版權聲明
本文為[依賴_賴]所創,轉載請帶上原文鏈接,感謝
https://cht.chowdera.com/2022/133/202205130418194393.html

隨機推薦