Cesium对3dtile单个feature进行特效处理

admin管理员组

文章数量:1650772

cesium中对3dtile做特效处理的时候，目前只能对所有3dtile处理或者小区域内的3dtile（例如3dtile挖洞，淹没分析等）进行处理，本身上还是对drawcommand进行着色器的部分的改动。通常所作我们只能对选中的featrue进行更改颜色，无法做到更大限度去更改当前选中的feature，本文介绍一种方法对单个feature进行特效处理。

一、原理
通过点击选中场景某个feature，给其赋值一个颜色，将其颜色同时传到着色器中，在片源着色器中读取 tile_featureColor的颜色与传入的颜色做对比，如果两个颜色相同，则对其进行特效处理。若不同则不做任何处理。
Note：为什么选中tile_featureColor与传入的颜色作对比？

                    '    vec2 st = computeSt(' + batchIdAttributeName + '); \n' +
                    '    vec4 featureProperties = texture2D(tile_batchTexture, st); \n' +

上面代码取自于Cesium3DTileBatchTable类的部分着色器，computeSt方法就是根据当前batchId获取当前uv坐标值，通过坐标获取tile_batchTexture对应的颜色，该颜色也就是每一个feature的颜色，通过该颜色与传入的选中颜色值进行对比，然后进行着特效处理。featureProperties 最终会被赋值为tile_featureColor，因此我们可以在着色器中直接取用tile_featureColor的值与传入颜色进行对比。
二、示例
1、feature赋值

       let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
        handler.setInputAction(function (movement) {
            var pickingEntity = viewer.scene.pick(movement.position);
            //判断选择是否为Cesium3DTileFeature
            if (pickingEntity instanceof Cesium.Cesium3DTileFeature) {
                //赋值特征颜色
                pickingEntity.color = new Cesium.Color(1.0,0.0,0.0,1.0);
            }
        }, Cesium.ScreenSpaceEventType.LEFT_CLICK);

2、颜色传值
同时将new Cesium.Color(1.0,0.0,0.0,1.0)通过uniform传入到着色器
3、着色器处理

    'varying vec3 v_postion;\n'+
    'varying vec3 v_elevationPos;\n'+
    'uniform vec3 u_changeColor; \n' +//为传入的颜色值
    'void main() \n' +
      '{ \n' +
        ' czm_floodanlysis_main();\n'+
        'vec3 test=tile_featureColor.rgb-u_changeColor.rgb;\n'+
        'if((test.r+test.b+test.g)==0.0)\n'+//判断两个颜色是否相同，是否进行特效处理
        '{\n'+
           'gl_FragColor.rgba =vec4(0.0,0.5,1.0,1.0);\n'+
            'float vtxf_a11 = fract(czm_frameNumber / 220.0) * 3.14159265 * 2.0;'+
           ' float vtxf_a12 = v_elevationPos.z / 2000.0 + sin(vtxf_a11) * 0.1;'+
           ' gl_FragColor *= vec4(vtxf_a12, vtxf_a12, vtxf_a12, 1.0);'+
            'float vtxf_a13 = fract(czm_frameNumber / 360.0);'+
            'float vtxf_h = clamp(v_elevationPos.z / 4000.0, 0.0, 1.0);'+
            'vtxf_a13 = abs(vtxf_a13 - 0.5) * 2.0;'+
           ' float vtxf_diff = step(0.005, abs(vtxf_h - vtxf_a13));'+
            'gl_FragColor.rgb += gl_FragColor.rgb * (1.0 - vtxf_diff);\n'+
        '} \n'+
      '}\n';
  return ShaderP

三、在哪里处理着色器？

    ModelUtility.modifyVertexShaderForLogDepth = function(shader, toClipCoordinatesGLSL) {
        shader = ShaderSource.replaceMain(shader, 'czm_depth_main');
        shader +=
            '\n' +
            'void main() \n' +
            '{ \n' +
            '    czm_depth_main(); \n' +
            //在这里处理
            '    czm_vertexLogDepth(' + toClipCoordinatesGLSL + '); \n' +
            '} \n';

        return shader;
    };

关于如何往着色器进行传值有空再讲。。。。。。。。。。。。。。

本文标签： 特效CesiumDTilefeature