美文网首页
Cesium雷达扫描效果

Cesium雷达扫描效果

作者: zhuyx0304 | 来源:发表于2024-04-10 09:44 被阅读0次
// 添加雷达扫描线
      function addRadarScanPostStage(
        viewer,
        cartographicCenter,
        radius,
        scanColor,
        duration
      ) {
        var _Cartesian3Center =
          Cesium.Cartographic.toCartesian(cartographicCenter);
        var _Cartesian4Center = new Cesium.Cartesian4(
          _Cartesian3Center.x,
          _Cartesian3Center.y,
          _Cartesian3Center.z,
          1
        );

        var _CartographicCenter1 = new Cesium.Cartographic(
          cartographicCenter.longitude,
          cartographicCenter.latitude,
          cartographicCenter.height + 500
        );
        var _Cartesian3Center1 =
          Cesium.Cartographic.toCartesian(_CartographicCenter1);
        var _Cartesian4Center1 = new Cesium.Cartesian4(
          _Cartesian3Center1.x,
          _Cartesian3Center1.y,
          _Cartesian3Center1.z,
          1
        );

        var _CartographicCenter2 = new Cesium.Cartographic(
          cartographicCenter.longitude + Cesium.Math.toRadians(0.001),
          cartographicCenter.latitude,
          cartographicCenter.height
        );
        var _Cartesian3Center2 =
          Cesium.Cartographic.toCartesian(_CartographicCenter2);
        var _Cartesian4Center2 = new Cesium.Cartesian4(
          _Cartesian3Center2.x,
          _Cartesian3Center2.y,
          _Cartesian3Center2.z,
          1
        );
        var _RotateQ = new Cesium.Quaternion();
        var _RotateM = new Cesium.Matrix3();

        var _time = new Date().getTime();

        var _scratchCartesian4Center = new Cesium.Cartesian4();
        var _scratchCartesian4Center1 = new Cesium.Cartesian4();
        var _scratchCartesian4Center2 = new Cesium.Cartesian4();
        var _scratchCartesian3Normal = new Cesium.Cartesian3();
        var _scratchCartesian3Normal1 = new Cesium.Cartesian3();

        var ScanPostStage = new Cesium.PostProcessStage({
          // fragmentShader: getRadarScanShader(), //有外圈的
          fragmentShader: getRadarScan(), // 无外圈
          uniforms: {
            u_scanCenterEC: function () {
              return Cesium.Matrix4.multiplyByVector(
                viewer.camera._viewMatrix,
                _Cartesian4Center,
                _scratchCartesian4Center
              );
            },
            u_scanPlaneNormalEC: function () {
              var temp = Cesium.Matrix4.multiplyByVector(
                viewer.camera._viewMatrix,
                _Cartesian4Center,
                _scratchCartesian4Center
              );
              var temp1 = Cesium.Matrix4.multiplyByVector(
                viewer.camera._viewMatrix,
                _Cartesian4Center1,
                _scratchCartesian4Center1
              );
              _scratchCartesian3Normal.x = temp1.x - temp.x;
              _scratchCartesian3Normal.y = temp1.y - temp.y;
              _scratchCartesian3Normal.z = temp1.z - temp.z;

              Cesium.Cartesian3.normalize(
                _scratchCartesian3Normal,
                _scratchCartesian3Normal
              );
              return _scratchCartesian3Normal;
            },
            u_radius: radius,
            u_scanLineNormalEC: function () {
              var temp = Cesium.Matrix4.multiplyByVector(
                viewer.camera._viewMatrix,
                _Cartesian4Center,
                _scratchCartesian4Center
              );
              var temp1 = Cesium.Matrix4.multiplyByVector(
                viewer.camera._viewMatrix,
                _Cartesian4Center1,
                _scratchCartesian4Center1
              );
              var temp2 = Cesium.Matrix4.multiplyByVector(
                viewer.camera._viewMatrix,
                _Cartesian4Center2,
                _scratchCartesian4Center2
              );

              _scratchCartesian3Normal.x = temp1.x - temp.x;
              _scratchCartesian3Normal.y = temp1.y - temp.y;
              _scratchCartesian3Normal.z = temp1.z - temp.z;

              Cesium.Cartesian3.normalize(
                _scratchCartesian3Normal,
                _scratchCartesian3Normal
              );

              _scratchCartesian3Normal1.x = temp2.x - temp.x;
              _scratchCartesian3Normal1.y = temp2.y - temp.y;
              _scratchCartesian3Normal1.z = temp2.z - temp.z;

              var tempTime =
                ((new Date().getTime() - _time) % duration) / duration;
              Cesium.Quaternion.fromAxisAngle(
                _scratchCartesian3Normal,
                tempTime * Cesium.Math.PI * 2,
                _RotateQ
              );
              Cesium.Matrix3.fromQuaternion(_RotateQ, _RotateM);
              Cesium.Matrix3.multiplyByVector(
                _RotateM,
                _scratchCartesian3Normal1,
                _scratchCartesian3Normal1
              );
              Cesium.Cartesian3.normalize(
                _scratchCartesian3Normal1,
                _scratchCartesian3Normal1
              );
              return _scratchCartesian3Normal1;
            },
            u_scanColor: scanColor,
          },
        });
        viewer.scene.postProcessStages.add(ScanPostStage);

        return ScanPostStage;
      }

      //雷达扫描线效果Shader
      function getRadarScanShader() {
        var scanSegmentShader =
          "uniform sampler2D colorTexture;\n" +
          "uniform sampler2D depthTexture;\n" +
          "varying vec2 v_textureCoordinates;\n" +
          "uniform vec4 u_scanCenterEC;\n" +
          "uniform vec3 u_scanPlaneNormalEC;\n" +
          "uniform vec3 u_scanLineNormalEC;\n" +
          "uniform float u_radius;\n" +
          "uniform vec4 u_scanColor;\n" +
          "vec4 toEye(in vec2 uv, in float depth)\n" +
          " {\n" +
          " vec2 xy = vec2((uv.x * 2.0 - 1.0),(uv.y * 2.0 - 1.0));\n" +
          " vec4 posInCamera =czm_inverseProjection * vec4(xy, depth, 1.0);\n" +
          " posInCamera =posInCamera / posInCamera.w;\n" +
          " return posInCamera;\n" +
          " }\n" +
          "bool isPointOnLineRight(in vec3 ptOnLine, in vec3 lineNormal, in vec3 testPt)\n" +
          "{\n" +
          "vec3 v01 = testPt - ptOnLine;\n" +
          "normalize(v01);\n" +
          "vec3 temp = cross(v01, lineNormal);\n" +
          "float d = dot(temp, u_scanPlaneNormalEC);\n" +
          "return d > 0.5;\n" +
          "}\n" +
          "vec3 pointProjectOnPlane(in vec3 planeNormal, in vec3 planeOrigin, in vec3 point)\n" +
          "{\n" +
          "vec3 v01 = point -planeOrigin;\n" +
          "float d = dot(planeNormal, v01) ;\n" +
          "return (point - planeNormal * d);\n" +
          "}\n" +
          "float distancePointToLine(in vec3 ptOnLine, in vec3 lineNormal, in vec3 testPt)\n" +
          "{\n" +
          "vec3 tempPt = pointProjectOnPlane(lineNormal, ptOnLine, testPt);\n" +
          "return length(tempPt - ptOnLine);\n" +
          "}\n" +
          "float getDepth(in vec4 depth)\n" +
          "{\n" +
          "float z_window = czm_unpackDepth(depth);\n" +
          "z_window = czm_reverseLogDepth(z_window);\n" +
          "float n_range = czm_depthRange.near;\n" +
          "float f_range = czm_depthRange.far;\n" +
          "return (2.0 * z_window - n_range - f_range) / (f_range - n_range);\n" +
          "}\n" +
          "void main()\n" +
          "{\n" +
          "gl_FragColor = texture2D(colorTexture, v_textureCoordinates);\n" +
          "float depth = getDepth( texture2D(depthTexture, v_textureCoordinates));\n" +
          "vec4 viewPos = toEye(v_textureCoordinates, depth);\n" +
          "vec3 prjOnPlane = pointProjectOnPlane(u_scanPlaneNormalEC.xyz, u_scanCenterEC.xyz, viewPos.xyz);\n" +
          "float dis = length(prjOnPlane.xyz - u_scanCenterEC.xyz);\n" +
          "float twou_radius = u_radius * 2.0;\n" +
          "if(dis < u_radius)\n" +
          "{\n" +
          "float f0 = 1.0 -abs(u_radius - dis) / u_radius;\n" +
          "f0 = pow(f0, 64.0);\n" +
          "vec3 lineEndPt = vec3(u_scanCenterEC.xyz) + u_scanLineNormalEC * u_radius;\n" +
          "float f = 0.0;\n" +
          "if(isPointOnLineRight(u_scanCenterEC.xyz, u_scanLineNormalEC.xyz, prjOnPlane.xyz))\n" +
          "{\n" +
          "float dis1= length(prjOnPlane.xyz - lineEndPt);\n" +
          "f = abs(twou_radius -dis1) / twou_radius;\n" +
          "f = pow(f, 3.0);\n" +
          "}\n" +
          "gl_FragColor = mix(gl_FragColor, u_scanColor, f + f0);\n" +
          "}\n" +
          "}\n";
        return scanSegmentShader;
      }

      //无外圈
      function getRadarScan() {
        var radarScan =
          "uniform sampler2D colorTexture;\n\
                uniform sampler2D depthTexture;\n\
                varying vec2 v_textureCoordinates;\n\
                uniform vec4 u_scanCenterEC;\n\
                uniform vec3 u_scanPlaneNormalEC;\n\
                uniform vec3 u_scanLineNormalEC;\n\
                uniform float u_radius;\n\
                uniform vec4 u_scanColor;\n\
                \n\
                vec4 toEye(in vec2 uv, in float depth){\n\
                vec2 xy = vec2((uv.x * 2.0 - 1.0),(uv.y * 2.0 - 1.0));\n\
                vec4 posInCamera =czm_inverseProjection * vec4(xy, depth, 1.0);\n\
                posInCamera =posInCamera / posInCamera.w;\n\
                return posInCamera;\n\
                }\n\
                \n\
                bool isPointOnLineRight(in vec3 ptOnLine, in vec3 lineNormal, in vec3 testPt){\n\
                vec3 v01 = testPt - ptOnLine;\n\
                normalize(v01);\n\
                vec3 temp = cross(v01, lineNormal);\n\
                float d = dot(temp, u_scanPlaneNormalEC);\n\
                return d > 0.5;\n\
                }\n\
                \n\
                vec3 pointProjectOnPlane(in vec3 planeNormal, in vec3 planeOrigin, in vec3 point){\n\
                vec3 v01 = point -planeOrigin;\n\
                float d = dot(planeNormal, v01) ;\n\
                return (point - planeNormal * d);\n\
                }\n\
                \n\
                float distancePointToLine(in vec3 ptOnLine, in vec3 lineNormal, in vec3 testPt){\n\
                vec3 tempPt = pointProjectOnPlane(lineNormal, ptOnLine, testPt);\n\
                return length(tempPt - ptOnLine);\n\
                }\n\
                \n\
                float getDepth(in vec4 depth){\n\
                float z_window = czm_unpackDepth(depth);\n\
                z_window = czm_reverseLogDepth(z_window);\n\
                float n_range = czm_depthRange.near;\n\
                float f_range = czm_depthRange.far;\n\
                return (2.0 * z_window - n_range - f_range) / (f_range - n_range);\n\
                }\n\
                \n\
                void main(){\n\
                gl_FragColor = texture2D(colorTexture, v_textureCoordinates);\n\
                float depth = getDepth( texture2D(depthTexture, v_textureCoordinates));\n\
                vec4 viewPos = toEye(v_textureCoordinates, depth);\n\
                vec3 prjOnPlane = pointProjectOnPlane(u_scanPlaneNormalEC.xyz, u_scanCenterEC.xyz, viewPos.xyz);\n\
                float dis = length(prjOnPlane.xyz - u_scanCenterEC.xyz);\n\
                float twou_radius = u_radius * 2.0;\n\
                if(dis < u_radius){\n\
                    float f0 = 1.0 -abs(u_radius - dis) / u_radius;\n\
                    f0 = pow(f0, 64.0);\n\
                    vec3 lineEndPt = vec3(u_scanCenterEC.xyz) + u_scanLineNormalEC * u_radius;\n\
                    float f = 0.0;\n\
                    if(isPointOnLineRight(u_scanCenterEC.xyz, u_scanLineNormalEC.xyz, prjOnPlane.xyz)){\n\
                        float dis1= length(prjOnPlane.xyz - lineEndPt);\n\
                        f = abs(twou_radius -dis1) / twou_radius;\n\
                        f = pow(f, 5.0);\n\
                    }\n\
                    gl_FragColor = mix(gl_FragColor, u_scanColor, f);\n\
                    }\n\
                }\n\
                ";
        return radarScan;
      }

      var cartographicCenter = new Cesium.Cartographic(
        Cesium.Math.toRadians(117.270739),
        Cesium.Math.toRadians(31.84309),
        32
      );
      var scanColor = new Cesium.Color(1.0, 0.0, 0.0, 1);
      lastStage = addRadarScanPostStage(
        viewer,
        cartographicCenter,
        1000,
        scanColor,
        3000
      );
      viewer.camera.setView({
        destination: Cesium.Cartesian3.fromDegrees(117.270739, 31.84309, 100),
        orientation: {
          heading: Cesium.Math.toRadians(0), // 正北方向(0度)
          pitch: Cesium.Math.toRadians(-90), // 直视下方(-90度)
          roll: 0.0, // 无滚动角度
        },
        endTransform: Cesium.Matrix4.IDENTITY, // 保持原始变换
      });

相关文章

  • SuperMap iClient3D for WebGL扩展开发

    最近有同事反馈有模拟雷达扫描效果的需求,需要表达雷达扫描的半径、扫描范围以及扫描过程动画,下面将通过使用Cesiu...

  • iOS 雷达扫描效果

    最近闲的时候实现了一个雷达扫描的效果效果如下图 前言 swift 3.0 实现 了解 Layer anchorPo...

  • canvas实现雷达扫描效果

    效果图: 代码如下: 好记性不如烂笔头,总结和记录工作学习中的点点滴滴,如有不对之处还请指教。 参考[1] js实...

  • Android 颜色渲染 SweepGradient扫描/梯度渲

    SweepGradient 为什么什么叫扫描渲染呢? 相信大家都看过雷达扫描的效果,尤其是在安全软件中. 代码演示 }

  • 雷达扫描搜索视图实现

    最近项目需求,有个蓝牙搜索扫描的功能,美工给予了一张静态的搜索视图,而需要的效果是实现模仿雷达转动扫描的效果,下面...

  • css-动态雷达扫描效果

    产品要一个“看起来”很厉害的页面展示,所以这个动态扫描诞生啦! 本篇实现的效果主要是用了csss3的@keyfra...

  • [每天进步一点点~] uni-app css 制作雷达扫描、波浪

    雷达扫描效果(背景换成纯色渐变了): 波浪移动动画效果 第一种: 第二种(有待改进,后续再补)

  • 高级UI<第二十一篇>:使用SweepGradient实现雷达扫

    使用梯度渲染/渐变渲染(SweepGradient)可以实现雷达扫描效果,它的初始角度是0,使用矩阵变换的旋转操作...

  • 时间简史单词

    eclipse:日食、月食 postulate:提出〔理论等〕,假定,假设 radar:雷达 cesium:铯 p...

  • iOS雷达效果

    这段时间新app开始了,有个产品需求是做一个类似如下效果的雷达图: 中间的图片是用户头像,然后需要展示一个雷达扫描...

网友评论

      本文标题:Cesium雷达扫描效果

      本文链接:https://www.haomeiwen.com/subject/zrdstjtx.html