OpenSource
/
dc-sdk
mirror of https://github.com/dvt3d/dc-sdk

<!DOCTYPE html>
<html lang="en">


<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>dc-example</title>
  <script src='/libs/dc-sdk/dc.min.js'></script>
  <script src="../dat.gui.min.js"></script>
  <link href='/libs/dc-sdk/dc.min.css' type='text/css' rel='stylesheet'>
  <link href='../index.css' type='text/css' rel='stylesheet'>
</head>

<body>

<div id="viewer-container" class="viewer-container" style=""></div>
<script>
  let viewer = undefined
  let effect = undefined

  function initViewer() {
    viewer = new DC.Viewer('viewer-container',{
      orderIndependentTranslucency:false,
      contextOptions:{
        webgl:{
          alpha:true
        }
       }
    }).setOptions({
      showMoon: false,
      showSun: false,
      skyBox: {
        show:false
      },
      showAtmosphere:false,
      globe: {
        showGroundAtmosphere:false,
        depthTestAgainstTerrain: true // 当前示例中的Shader渲染需要开启深度检测，并在无地形时效果好些。
      }
    })
    let baseLayer = DC.ImageryLayerFactory.createImageryLayer(DC.ImageryType.AMAP,{
      style:'img',
      crs:'WGS84'
    })
    viewer.addBaseLayer(baseLayer)

    let Cesium = DC.getLib('Cesium')

    const fs =`
    uniform sampler2D colorTexture;
    uniform sampler2D depthTexture;
    uniform vec3 centerWC;
    uniform vec3 normalWC;
    uniform float radius;
    in vec2 v_textureCoordinates;
    float getDepth(){
      float z_window = czm_unpackDepth(texture(depthTexture, v_textureCoordinates));
      z_window = czm_reverseLogDepth(z_window);
      float n_range = czm_depthRange.near;
      float f_range = czm_depthRange.far;
      return  (2.0 * z_window - n_range - f_range) / (f_range - n_range);
    }

   vec4 toEye(in vec2 uv, in float depth){
      vec2 xy = vec2((uv.x * 2.0 - 1.0),(uv.y * 2.0 - 1.0));
      vec4 posInCamera =czm_inverseProjection * vec4(xy, depth, 1.0);
      posInCamera = posInCamera / posInCamera.w;
      return posInCamera;
   }

  vec3 pointProjectOnPlane(in vec3 planeNormal, in vec3 planeOrigin, in vec3 point){
    vec3 v01 = point - planeOrigin;
    float d = dot(planeNormal, v01) ;
    return (point - planeNormal * d);
  }

    void main() {
      float depth = getDepth();
      vec4 color = texture(colorTexture, v_textureCoordinates);
      vec4 viewPos = toEye(v_textureCoordinates, depth);
      vec4 center = czm_view * vec4(centerWC,1);
      vec4 planeNormal = czm_view * vec4(normalWC,0);
      vec3 prjOnPlane = pointProjectOnPlane(planeNormal.xyz, center.xyz, viewPos.xyz);
      float dis = length(prjOnPlane.xyz - center.xyz);
      if(color.rgb !=vec3(0.0) && dis <= radius && depth < 1.0){
        out_FragColor = vec4(color.rgb, 1.0);
      }
    }`;

    let center = Cesium.Cartesian3.fromDegrees(120,31)
    let up = Cesium.Ellipsoid.WGS84.geodeticSurfaceNormal(
      center,
      new Cesium.Cartesian3()
    )

    viewer.scene.postProcessStages.add(new Cesium.PostProcessStage({
      fragmentShader : fs,
      uniforms : {
        centerWC: function () {
          return center
        },
        normalWC:function () {
          return up
        },
        radius : function () {
          return 10000
        },
      }
    }));

    addGuiController() // add controller
  }

  function addGuiController(){
  }
  DC.ready({
    baseUrl:'../libs/dc-sdk/resources/'
  }).then(initViewer)
</script>
</body>
</html>