Cesium全屏红色渐变闪烁告警

在线示例

Cesium全屏红色渐变闪烁告警

代码

DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://cesium.com/downloads/cesiumjs/releases/1.104/Build/CesiumUnminified/Cesium.js">script>
    <link
      href="https://cesium.com/downloads/cesiumjs/releases/1.104/Build/Cesium/Widgets/widgets.css"
      rel="stylesheet"
    />
  head>
  <body>
    <div id="cesiumContainer" class="fullSize">div>
    <script>
      window.CESIUM_BASE_URL =
        "https://cesium.com/downloads/cesiumjs/releases/1.104/Build/Cesium";

      const viewer = new Cesium.Viewer("cesiumContainer", {});

      const fragmentShaderSource = /* glsl */ `
              // b.x = width
              // b.y = height
              // r.x = roundness top-right  
              // r.y = roundness boottom-right
              // r.z = roundness top-left
              // r.w = roundness bottom-left
              float sdRoundBox( in vec2 p, in vec2 b, in vec4 r ) 
              {
                  r.xy = (p.x>0.0)?r.xy : r.zw;
                  r.x  = (p.y>0.0)?r.x  : r.y;
                  vec2 q = abs(p)-b+r.x;
                  return min(max(q.x,q.y),0.0) + length(max(q,0.0)) - r.x;
              }

              uniform sampler2D colorTexture; 
              in vec2 v_textureCoordinates; 

              void main(void) 
              { 

                // gl_FragCoord.xy / czm_viewport.zw 根据视口的宽度和高度, 通过除法将窗口坐标分量缩放到[0, 1]
                // cesium是以左下角为远点, 而sdRoundBox是根据中点为原点实现的, 所以将p的范围从[0,1]更改为[-1,1],这样它就可以在两个方向上都跨越原点。
                // 这将使p.x > 0.0和p.y > 0.0这样的判断有意义,这样你就可以在四个方向上都看到红色边缘了。
                // 1.缩放:我们将gl_FragCoord.xy除以(czm_viewport.zw / 2.0)。这样得到的结果p就在[0, 2]的范围内。这是因为gl_FragCoord.xy的最大值是czm_viewport.zw,除以czm_viewport.zw / 2.0得到的结果就是2。
                // 2.偏移:然后,我们从得到的结果中减去1,将范围从[0, 2]转化到了[-1, 1]。
                vec2 p = (gl_FragCoord.xy / (czm_viewport.zw / 2.0)) - 1.0;

                

                float d= sdRoundBox(p,vec2(0.8, 0.7),vec4(0.1));
                // vec3 col = mix(vec3(0.0), vec3(1.0, 0.0, 0.0), d > 0.0 ? 1.0 : 0.0);
                vec3 col = mix(vec3(0.0), vec3(1.0, 0.0, 0.0)* abs(sin(czm_frameNumber*9.5))* (d / 0.35), d > 0.0 ? 1.0 : 0.0);

                vec3 originalColor = texture(colorTexture, v_textureCoordinates).rgb;
                out_FragColor = mix(vec4(originalColor, 1.0)*2.0, vec4(col, 1.0), 0.5);
                // out_FragColor = vec4(col,1.0);
              }
              `;
      viewer.scene.postProcessStages.add(
        new Cesium.PostProcessStage({
          fragmentShader: fragmentShaderSource,
        })
      );
    script>
  body>
html>

你可能感兴趣的:(开源GIS,cesium)