easy-three-utils 0.0.331 → 0.0.332

package/cesium/cameraRecord.ts

@@ -0,0 +1,187 @@
+import { v4 as uuid } from 'uuid'
+import * as Cesium from 'cesium'
+
+interface ICameraOptions {
+  destination: Cesium.Cartesian3,
+  orientation: {
+    heading: number;
+    pitch: number;
+    roll: number;
+  },
+  duration?: number;
+}
+
+interface IRecord {
+  actionType: EActionTtype;
+  data?: ICameraOptions;
+  time: number;
+  id: string;
+}
+
+enum EActionTtype {
+  INITVIEW = 'initView',
+  MOVE = 'move',
+  PAUSE = 'pause'
+}
+
+const useCameraRecord = () => {
+  let viewer: Cesium.Viewer | null = null
+  let records: IRecord[] = []
+  let timer: NodeJS.Timeout | null = null
+  let cameraSpeed = 2
+
+  const setViewer = (cesiumViewer: Cesium.Viewer) => {
+    viewer = cesiumViewer
+  }
+
+  const recordCameraActions = (time: number) => {
+    const camera = viewer!.camera;
+    const { positionCartographic: pos, heading, pitch, roll } = camera
+    const { x, y, z } = Cesium.Cartesian3.fromRadians(pos.longitude, pos.latitude, pos.height)
+
+    const data = {
+      destination: new Cesium.Cartesian3(x, y, z),
+      orientation: {
+        heading,
+        pitch,
+        roll
+      },
+      duration: time / 1000 * cameraSpeed
+    }
+    if (time) {
+      records.push({
+        actionType: EActionTtype.MOVE,
+        data,
+        time: time,
+        id: uuid()
+      })
+    }
+  }
+
+  let idleTime = 0
+  let removeMoveStartEvent: Cesium.Event.RemoveCallback, removeMoveEndEvent: Cesium.Event.RemoveCallback;
+  let time = 0
+  let startTime = 0
+  let mouseDownstatus = false
+  const recordScript = () => {
+    records = []
+    viewer!.scene.screenSpaceCameraController.inertiaSpin = 0
+    viewer!.scene.screenSpaceCameraController.inertiaTranslate = 0
+    viewer!.scene.screenSpaceCameraController.inertiaZoom = 0
+    const camera = viewer!.camera;
+    const { positionCartographic: pos, heading, pitch, roll } = camera
+    const { x, y, z } = Cesium.Cartesian3.fromRadians(pos.longitude, pos.latitude, pos.height)
+
+    const data = {
+      destination: new Cesium.Cartesian3(x, y, z),
+      orientation: {
+        heading,
+        pitch,
+        roll
+      }
+    }
+    records.push({
+      actionType: EActionTtype.INITVIEW,
+      data,
+      time: 0,
+      id: uuid()
+    })
+
+    removeMoveStartEvent = viewer!.scene.camera.moveStart.addEventListener(() => {
+      startTime = time
+      mouseDownstatus = true
+
+      if (idleTime) {
+        records.push({
+          actionType: EActionTtype.PAUSE,
+          time: idleTime,
+          id: uuid()
+        })
+      }
+      idleTime = 0
+    })
+
+    removeMoveEndEvent = viewer!.scene.camera.moveEnd.addEventListener(() => {
+      const timestamp = time - startTime
+      recordCameraActions(timestamp)
+      mouseDownstatus = false
+    })
+
+    timer = setInterval(() => {
+      time += 100;
+      if (!mouseDownstatus) {
+        idleTime = idleTime + 100;
+      }
+    }, 100)
+  }
+
+  const stopRecordScript = () => {
+    if (mouseDownstatus) {
+      const timestamp = time - startTime
+      recordCameraActions(timestamp)
+    }
+    removeMoveStartEvent()
+    removeMoveEndEvent()
+    if (idleTime) {
+      records.push({
+        actionType: EActionTtype.PAUSE,
+        time: idleTime,
+        id: uuid()
+      })
+    }
+    idleTime = 0
+    clearInterval(timer as NodeJS.Timeout)
+  }
+
+  let playTime = 0;
+  const playScript = () => {
+    playTime = 0
+    viewer!.camera.setView(records[0].data as any)
+    viewer!.scene.screenSpaceCameraController.inertiaSpin = 0.9
+    viewer!.scene.screenSpaceCameraController.inertiaTranslate = 0.9
+    viewer!.scene.screenSpaceCameraController.inertiaZoom = 0.8
+
+    records.forEach(async (item) => {
+      if (item.actionType === EActionTtype.MOVE) {
+        new Promise((resolve) => {
+          const func = () => {
+            const timer = setTimeout(() => {
+              viewer!.camera.flyTo(item.data!)
+              clearTimeout(timer)
+            }, playTime)
+          }
+          resolve(func())
+        })
+        playTime = playTime + item.time * cameraSpeed
+      } else {
+        playTime = playTime + item.time
+      }
+    })
+  }
+
+  const setScriptRecords = (value: IRecord[]) => {
+    records = value
+  }
+
+  const getScriptRecords = () => {
+    return records
+  }
+
+  return {
+    setViewer,
+    getScriptRecords,
+    recordScript,
+    stopRecordScript,
+    playScript,
+    setScriptRecords
+  }
+}
+
+export {
+  useCameraRecord,
+  EActionTtype
+}
+
+export type {
+  IRecord
+}

package/cesium/glsl/viewable.ts

@@ -0,0 +1,122 @@
+export default `
+  #define USE_CUBE_MAP_SHADOW true
+  uniform sampler2D colorTexture;
+  uniform sampler2D depthTexture;
+  varying vec2 v_textureCoordinates;
+  uniform mat4 camera_projection_matrix;
+  uniform mat4 camera_view_matrix;
+  uniform samplerCube shadowMap_textureCube;
+  uniform mat4 shadowMap_matrix;
+  uniform vec4 shadowMap_lightPositionEC;
+  uniform vec4 shadowMap_normalOffsetScaleDistanceMaxDistanceAndDarkness;
+  uniform vec4 shadowMap_texelSizeDepthBiasAndNormalShadingSmooth;
+  uniform float helsing_viewDistance; 
+  uniform vec4 helsing_visibleAreaColor;
+  uniform vec4 helsing_invisibleAreaColor;
+ 
+  struct zx_shadowParameters
+  {
+      vec3 texCoords;
+      float depthBias;
+      float depth;
+      float nDotL;
+      vec2 texelStepSize;
+      float normalShadingSmooth;
+      float darkness;
+  };
+ 
+  float czm_shadowVisibility(samplerCube shadowMap, zx_shadowParameters shadowParameters)
+  {
+      float depthBias = shadowParameters.depthBias;
+      float depth = shadowParameters.depth;
+      float nDotL = shadowParameters.nDotL;
+      float normalShadingSmooth = shadowParameters.normalShadingSmooth;
+      float darkness = shadowParameters.darkness;
+      vec3 uvw = shadowParameters.texCoords;
+      depth -= depthBias;
+      float visibility = czm_shadowDepthCompare(shadowMap, uvw, depth);
+      return czm_private_shadowVisibility(visibility, nDotL, normalShadingSmooth, darkness);
+  }
+ 
+  vec4 getPositionEC(){
+      return czm_windowToEyeCoordinates(gl_FragCoord);
+  }
+ 
+  vec3 getNormalEC(){
+      return vec3(1.);
+  }
+ 
+  vec4 toEye(in vec2 uv,in float depth){
+      vec2 xy=vec2((uv.x*2.-1.),(uv.y*2.-1.));
+      vec4 posInCamera=czm_inverseProjection*vec4(xy,depth,1.);
+      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);
+  }
+ 
+  float getDepth(in vec4 depth){
+      float z_window=czm_unpackDepth(depth);
+      z_window=czm_reverseLogDepth(z_window);
+      float n_range=czm_depthRange.near;
+      float f_range=czm_depthRange.far;
+      return(2.*z_window-n_range-f_range)/(f_range-n_range);
+  }
+ 
+  float shadow(in vec4 positionEC){
+      vec3 normalEC=getNormalEC();
+      zx_shadowParameters shadowParameters;
+      shadowParameters.texelStepSize=shadowMap_texelSizeDepthBiasAndNormalShadingSmooth.xy;
+      shadowParameters.depthBias=shadowMap_texelSizeDepthBiasAndNormalShadingSmooth.z;
+      shadowParameters.normalShadingSmooth=shadowMap_texelSizeDepthBiasAndNormalShadingSmooth.w;
+      shadowParameters.darkness=shadowMap_normalOffsetScaleDistanceMaxDistanceAndDarkness.w;
+      vec3 directionEC=positionEC.xyz-shadowMap_lightPositionEC.xyz;
+      float distance=length(directionEC);
+      directionEC=normalize(directionEC);
+      float radius=shadowMap_lightPositionEC.w;
+      if(distance>radius)
+      {
+          return 2.0;
+      }
+      vec3 directionWC=czm_inverseViewRotation*directionEC;
+      shadowParameters.depth=distance/radius-0.0003;
+      shadowParameters.nDotL=clamp(dot(normalEC,-directionEC),0.,1.);
+      shadowParameters.texCoords=directionWC;
+      float visibility=czm_shadowVisibility(shadowMap_textureCube,shadowParameters);
+      return visibility;
+  }
+ 
+  bool visible(in vec4 result)
+  {
+      result.x/=result.w;
+      result.y/=result.w;
+      result.z/=result.w;
+      return result.x>=-1.&&result.x<=1.
+      &&result.y>=-1.&&result.y<=1.
+      &&result.z>=-1.&&result.z<=1.;
+  }
+ 
+  void main(){
+      gl_FragColor = texture2D(colorTexture, v_textureCoordinates);
+      float depth = getDepth(texture2D(depthTexture, v_textureCoordinates));
+      vec4 viewPos = toEye(v_textureCoordinates, depth);
+      vec4 wordPos = czm_inverseView * viewPos;
+      vec4 vcPos = camera_view_matrix * wordPos;
+      float near = .001 * helsing_viewDistance;
+      float dis = length(vcPos.xyz);
+      if(dis > near && dis < helsing_viewDistance){
+          vec4 posInEye = camera_projection_matrix * vcPos;
+          if(visible(posInEye)){
+              float vis = shadow(viewPos);
+              if (vis > 0.3) {
+                gl_FragColor = mix(gl_FragColor, helsing_visibleAreaColor, .5);
+            } else {
+                gl_FragColor = mix(gl_FragColor, helsing_invisibleAreaColor, .5);
+            }
+          }
+      }
+  }`;

package/cesium/glsl/weather.ts

@@ -0,0 +1,78 @@
+const rainShader = "uniform sampler2D colorTexture;\n\
+                varying vec2 v_textureCoordinates;\n\
+                uniform float tiltAngle;\n\
+                uniform float rainSize;\n\
+                uniform float rainSpeed;\n\
+                float hash(float x) {\n\
+                    return fract(sin(x * 133.3) * 13.13);\n\
+                }\n\
+                void main(void) {\n\
+                    float time = czm_frameNumber / rainSpeed;\n\
+                    vec2 resolution = czm_viewport.zw;\n\
+                    vec2 uv = (gl_FragCoord.xy * 2. - resolution.xy) / min(resolution.x, resolution.y);\n\
+                    vec3 c = vec3(.6, .7, .8);\n\
+                    float a = tiltAngle;\n\
+                    float si = sin(a), co = cos(a);\n\
+                    uv *= mat2(co, -si, si, co);\n\
+                    uv *= length(uv + vec2(0, 4.9)) * rainSize + 1.;\n\
+                    float v = 1. - sin(hash(floor(uv.x * 100.)) * 2.);\n\
+                    float b = clamp(abs(sin(20. * time * v + uv.y * (5. / (2. + v)))) - .95, 0., 1.) * 20.;\n\
+                    c *= v * b;\n\
+                    gl_FragColor = mix(texture2D(colorTexture, v_textureCoordinates), vec4(c, 1), .5);\n\
+                }\n\
+                ";
+
+const snowShader = "uniform sampler2D colorTexture;\n\
+            varying vec2 v_textureCoordinates;\n\
+            uniform float snowSpeed;\n\
+                    uniform float snowSize;\n\
+            float snow(vec2 uv,float scale)\n\
+            {\n\
+                float time=czm_frameNumber/snowSpeed;\n\
+                float w=smoothstep(1.,0.,-uv.y*(scale/10.));if(w<.1)return 0.;\n\
+                uv+=time/scale;uv.y+=time*2./scale;uv.x+=sin(uv.y+time*.5)/scale;\n\
+                uv*=scale;vec2 s=floor(uv),f=fract(uv),p;float k=3.,d;\n\
+                p=.5+.35*sin(11.*fract(sin((s+p+scale)*mat2(7,3,6,5))*5.))-f;d=length(p);k=min(d,k);\n\
+                k=smoothstep(0.,k,sin(f.x+f.y)*snowSize);\n\
+                return k*w;\n\
+            }\n\
+            void main(void){\n\
+                vec2 resolution=czm_viewport.zw;\n\
+                vec2 uv=(gl_FragCoord.xy*2.-resolution.xy)/min(resolution.x,resolution.y);\n\
+                vec3 finalColor=vec3(0);\n\
+                //float c=smoothstep(1.,0.3,clamp(uv.y*.3+.8,0.,.75));\n\
+                float c=0.;\n\
+                c+=snow(uv,30.)*.0;\n\
+                c+=snow(uv,20.)*.0;\n\
+                c+=snow(uv,15.)*.0;\n\
+                c+=snow(uv,10.);\n\
+                c+=snow(uv,8.);\n\
+                c+=snow(uv,6.);\n\
+                c+=snow(uv,5.);\n\
+                finalColor=(vec3(c));\n\
+                gl_FragColor=mix(texture2D(colorTexture,v_textureCoordinates),vec4(finalColor,1),.5);\n\
+                }\n\
+                ";
+
+const fogShader = "uniform sampler2D colorTexture;\n\
+         uniform sampler2D depthTexture;\n\
+         uniform float visibility;\n\
+         uniform vec4 fogColor;\n\
+         varying vec2 v_textureCoordinates; \n\
+         void main(void) \n\
+         { \n\
+            vec4 origcolor = texture2D(colorTexture, v_textureCoordinates); \n\
+            float depth = czm_readDepth(depthTexture, v_textureCoordinates); \n\
+            vec4 depthcolor = texture2D(depthTexture, v_textureCoordinates); \n\
+            float f = visibility * (depthcolor.r - 0.3) / 0.2; \n\
+            if (f < 0.0) f = 0.0; \n\
+            else if (f > 1.0) f = 1.0; \n\
+            gl_FragColor = mix(origcolor, fogColor, f); \n\
+         }\n\
+         ";
+
+export {
+    rainShader,
+    snowShader,
+    fogShader
+}

package/cesium/index.ts

@@ -0,0 +1,188 @@
+import * as Cesium from 'cesium'
+import { useCameraRecord, EActionTtype } from './cameraRecord'
+import * as hooks from './utils'
+
+Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJkMjBmZGE5MS02ZTE1LTRjNzAtYmJjNS0zNTJhNmI1MDQ4YmQiLCJpZCI6OTQ5NzAsImlhdCI6MTY1MzM3ODM0Mn0.OcAxsSXF6VtqtI83SpUc5oL1fFxSFM60O3gp5YKyDeA'
+
+import type { IRecord } from './cameraRecord'
+
+type TCesiumUtilsType = {
+  dict: typeof hooks.dict;
+
+  customCollection: ReturnType<typeof hooks.useCustomCollection>;
+  drawPolygon: ReturnType<typeof hooks.useDrawPolygon>;
+  clipping: ReturnType<typeof hooks.useClipping>;
+  weather: ReturnType<typeof hooks.useWeather>;
+  measure: ReturnType<typeof hooks.useMeasure>;
+}
+
+const useCesium = () => {
+  const loadCesium = (containerName: string, callback: (viewer: Cesium.Viewer, utils: TCesiumUtilsType) => void, ev: {
+    leftClickEvent: (viewer: Cesium.Viewer, e: Cesium.ScreenSpaceEventHandler.PositionedEvent) => void,
+    moveEvent: (viewer: Cesium.Viewer, e: Cesium.ScreenSpaceEventHandler.MotionEvent) => void
+  }) => {
+
+    const viewer = new Cesium.Viewer(containerName, {
+      contextOptions: {
+        requestWebgl1: true
+      },
+      animation: false,
+      baseLayerPicker: false,
+      fullscreenButton: false,
+      geocoder: false,
+      homeButton: false,
+      infoBox: false,
+      sceneModePicker: false,
+      selectionIndicator: false,
+      timeline: false,
+      navigationHelpButton: false,
+      navigationInstructionsInitiallyVisible: false
+    });
+
+    viewer.scene.moon.show = false;
+    viewer.scene.fog.enabled = false;
+    viewer.scene.sun.show = true;
+    viewer.scene.skyBox.show = false;
+    // viewer.scene.debugShowFramesPerSecond = true;
+    (viewer.cesiumWidget.creditContainer as HTMLElement).style.display = "none";
+    viewer.scene.globe.depthTestAgainstTerrain = true;
+
+    // const appConfig = {
+    //   WMTSMap: {
+    //     url: "http://10.10.0.99:9101/WeServer/wmts",
+    //     layer: 'East_image',
+    //     format: 'image/jpeg',
+    //     tileMatrixSetID: 'wgs84',
+    //     style: 'default'
+    //   }
+    // }
+
+    // const wmtsimage = new Cesium.WebMapTileServiceImageryProvider({
+    //   url: appConfig.WMTSMap.url,
+    //   layer: appConfig.WMTSMap.layer,
+    //   format: appConfig.WMTSMap.format,
+    //   tileMatrixSetID: appConfig.WMTSMap.tileMatrixSetID,
+    //   style: appConfig.WMTSMap.style,
+    //   tilingScheme: new Cesium.GeographicTilingScheme(),
+    //   maximumLevel: 19,
+    //   tileMatrixLabels: ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20"],
+    // });
+    // viewer.imageryLayers.removeAll();
+    // viewer.imageryLayers.addImageryProvider(wmtsimage);
+
+    const customCollection = hooks.useCustomCollection(viewer)
+    const drawPolygon = hooks.useDrawPolygon(viewer, {
+      nodeCollection: customCollection.addCollection(hooks.dict.ECollectionWhiteListNames.POLYGON_NODE),
+      polygonCollection: customCollection.addCollection(hooks.dict.ECollectionWhiteListNames.POLYGON),
+    })
+    const clipping = hooks.useClipping(viewer)
+    const weather = hooks.useWeather(viewer)
+    const measure = hooks.useMeasure(viewer)
+
+    callback(viewer, {
+      dict: hooks.dict,
+      customCollection,
+      drawPolygon,
+      clipping,
+      weather,
+      measure
+    })
+
+    const handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
+
+    handler.setInputAction(((event) => {
+      ev.leftClickEvent(viewer, event)
+    }) as Cesium.ScreenSpaceEventHandler.PositionedEventCallback, Cesium.ScreenSpaceEventType.LEFT_CLICK);
+
+    handler.setInputAction(((event) => {
+      ev.moveEvent(viewer, event)
+    }) as Cesium.ScreenSpaceEventHandler.MotionEventCallback, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
+  }
+
+  const updateCameraEvent = (viewer: Cesium.Viewer) => {
+    viewer.scene.screenSpaceCameraController.tiltEventTypes = [
+      Cesium.CameraEventType.LEFT_DRAG
+    ]
+
+    viewer.scene.screenSpaceCameraController.zoomEventTypes = [
+      Cesium.CameraEventType.MIDDLE_DRAG,
+      Cesium.CameraEventType.WHEEL,
+      Cesium.CameraEventType.PINCH
+    ]
+
+    viewer.scene.screenSpaceCameraController.rotateEventTypes = [
+      Cesium.CameraEventType.RIGHT_DRAG
+    ]
+  }
+
+  const getCamera = (viewer: Cesium.Viewer) => {
+    const camera = viewer.camera;
+    const { positionCartographic: pos, heading, pitch, roll } = camera
+    const { x, y, z } = Cesium.Cartesian3.fromRadians(pos.longitude, pos.latitude, pos.height)
+
+    return {
+      destination: new Cesium.Cartesian3(x, y, z),
+      orientation: {
+        heading,
+        pitch,
+        roll
+      }
+    }
+  }
+
+  const setCamera = (viewer: Cesium.Viewer) => {
+    viewer.camera.flyTo({
+      destination: new Cesium.Cartesian3(-3313326.6764875883, 6046492.400581042, 2681576.8673584852),
+      orientation: {
+        heading: 0.37123871980838885,
+        pitch: -1.245479096883912,
+        roll: 6.280549614726131
+      }
+    })
+  }
+
+  const loadTiles = async (viewer: Cesium.Viewer, url: string) => {
+    const tileset = await Cesium.Cesium3DTileset.fromUrl(url, {
+      skipLevelOfDetail: true,
+      preferLeaves: true,
+      maximumCacheOverflowBytes: 32,
+      baseScreenSpaceError: 256,
+      maximumScreenSpaceError: 16,
+      skipScreenSpaceErrorFactor: 16,
+      skipLevels: 4,
+      loadSiblings: true,
+      cullWithChildrenBounds: true,
+      cullRequestsWhileMoving: true,
+      cullRequestsWhileMovingMultiplier: 1,
+      progressiveResolutionHeightFraction: 1,
+      dynamicScreenSpaceErrorDensity: 128
+    })
+
+    const ts = viewer!.scene.primitives.add(tileset);
+    const boundingSphere = ts.boundingSphere;
+    viewer!.camera.viewBoundingSphere(boundingSphere, new Cesium.HeadingPitchRange(0.0, -0.5, boundingSphere.radius));
+    viewer!.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);
+    viewer.flyTo(tileset)
+  }
+
+  return {
+    loadCesium,
+    updateCameraEvent,
+    getCamera,
+    setCamera,
+    loadTiles
+  }
+}
+
+export {
+  EActionTtype,
+
+  useCesium,
+  useCameraRecord
+}
+
+export type {
+  IRecord,
+
+  TCesiumUtilsType
+}