GLTF压缩的技术方法

指定3dtiles

function func_1() {
        // 找到需要光环效果的3dtiles
        var confprimitives = viewer.scene.primitives._primitives;
        confprimitives.map((val) => {
            if (val.name == "jzw") {
                val.show = true;    // 显示 3dtiles
                let customShader = `
                      varying vec3 v_positionEC;
                      void main(void){
                          vec4 position = czm_inverseModelView * vec4(v_positionEC,1); // 位置
                          float glowRange = 20.0; // 光环的移动范围(高度)
                          gl_FragColor = vec4(0.2,  0.5, 1.0, 1.0); // 颜色
                          gl_FragColor *= vec4(vec3(position.z / 10.0), 1.0); // 渐变
                          // 动态光环
                          float time = fract(czm_frameNumber / 180.0);
                          time = abs(time - 0.5) * 2.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);
                      }
                     `
                function updateTile(tile) {
                    let content = tile.content
                    for (let i = 0; i < content.featuresLength; i++) {
                        let feature = content.getFeature(i)
                        let model = feature.content._model
                        if (
                            customShader &&
                            model &&
                            model._sourcePrograms &&
                            model._rendererResources
                        ) {
                            Object.keys(model._sourcePrograms).forEach(key => {
                                let program = model._sourcePrograms[key]
                                model._rendererResources.sourceShaders[
                                    program.fragmentShader
                                    ] = customShader
                            })
                            model._shouldRegenerateShaders = true
                        }
                    }
                }
                // 监听函数
                val.tileVisible.addEventListener(function (tile) {
                    updateTile(tile);
                });
                // viewer.flyTo(val);
            }
        })
    }

所有3dtiles（直接js引入）

; if (typeof Cesium !== 'undefined') (function (Cesium) {

  /**
   * 通过重写模型每一帧渲染着色逻辑注入自定义着色器
   * 性能以及通用性较差,建议单独写一套3dtiles加载逻辑，自定义着色程序
   */
  Cesium.TILE_EFFECT_STATE = true;
  Cesium.TILE_FS_BODY = ` float stc_pl = fract(czm_frameNumber / 120.0) * 3.14159265 * 2.0;
                float stc_sd = v_stcVertex.z / 60.0 + sin(stc_pl) * 0.1;
                gl_FragColor *= vec4(stc_sd, stc_sd, stc_sd, 1.0);
                float stc_a13 = fract(czm_frameNumber / 360.0);
                float stc_h = clamp(v_stcVertex.z / 450.0, 0.0, 1.0);
                stc_a13 = abs(stc_a13 - 0.5) * 2.0;
                float stc_diff = step(0.005, abs(stc_h - stc_a13));
                gl_FragColor.rgb += gl_FragColor.rgb * (1.0 - stc_diff);`;

  function install () {

    Cesium.ModelUtility.updateForwardAxis = function (model) {
      this._model = model;
      var cachedSourceVersion = model.gltf.extras.sourceVersion;

      if (
        (Cesium.defined(cachedSourceVersion) && cachedSourceVersion !== "2.0") ||
        Cesium.ModelUtility.getAssetVersion(model.gltf) !== "2.0"
      ) {
        model._gltfForwardAxis = Cesium.Axis.X;
      }
    };

    Cesium.ModelUtility.modifyFragmentShaderForLogDepth = function (shader) {
      let state = false;
      if (Cesium.TILE_EFFECT_STATE && this._model && this._model._resource._url.indexOf('b3dm') !== -1) state = true;
      shader = Cesium.ShaderSource.replaceMain(shader, "czm_depth_main");

      if (state) {
        shader += `
                varying vec3 v_stcVertex;
                void main(){
                    czm_depth_main();
                    `+ Cesium.TILE_FS_BODY + `
                    czm_writeLogDepth();
                }
                `;
      } else {
        shader += `
                    varying vec3 v_stcVertex;
                    void main(){
                        czm_depth_main();
                        czm_writeLogDepth();
                    }
                    `;
      }
      return shader;
    };

    Cesium.ModelUtility.modifyVertexShaderForLogDepth = function (
      shader,
      toClipCoordinatesGLSL
    ) {
      shader = Cesium.ShaderSource.replaceMain(shader, "czm_depth_main");
      shader +=
        "\n" +
        "varying vec3 v_stcVertex;\n" +
        "void main() \n" +
        "{ \n" +
        "    czm_depth_main(); \n" +
        "    v_stcVertex = a_position;\n" +
        "    czm_vertexLogDepth(" +
        toClipCoordinatesGLSL +
        "); \n" +
        "} \n";
      return shader;
    };
  }
  install();
})(Cesium)