Added changed files

Author: davenquinn

src/actions.ts

@@ -1,40 +1,46 @@
 type SetExaggeration = {
-  type: 'set-exaggeration',
-  value: number
-}
+  type: "set-exaggeration";
+  value: number;
+};
 
 enum DisplayQuality {
-  High = 'high',
-  Low = 'low'
+  High = "high",
+  Low = "low",
 }
 
 type SetDisplayQuality = {
-  type: 'set-display-quality',
-  value: DisplayQuality
-}
+  type: "set-display-quality";
+  value: DisplayQuality;
+};
 
+type SetShowInspector = {
+  type: "set-show-inspector";
+  value: boolean;
+};
 
-type GlobeAction = SetExaggeration | SetDisplayQuality
+type GlobeAction = SetExaggeration | SetDisplayQuality | SetShowInspector;
 
 interface GlobeState {
-  verticalExaggeration: number
-  displayQuality: DisplayQuality
+  verticalExaggeration: number;
+  displayQuality: DisplayQuality;
 }
 
 const initialState = {
   verticalExaggeration: 1,
-  displayQuality: DisplayQuality.Low
-}
+  displayQuality: DisplayQuality.Low,
+};
 
-const reducer = (state: GlobeState = initialState, action: GlobeAction)=>{
+const reducer = (state: GlobeState = initialState, action: GlobeAction) => {
   switch (action.type) {
-  case 'set-exaggeration':
-    return {...state, verticalExaggeration: action.value}
-  case 'set-display-quality':
-    return {...state, displayQuality: action.value}
-  default:
-    return state
+    case "set-exaggeration":
+      return { ...state, verticalExaggeration: action.value };
+    case "set-display-quality":
+      return { ...state, displayQuality: action.value };
+    case "set-show-inspector":
+      return { ...state, showInspector: action.value };
+    default:
+      return state;
   }
-}
+};
 
-export {reducer as globeReducer, GlobeAction, DisplayQuality}
+export { reducer as globeReducer, GlobeAction, DisplayQuality };

src/index.ts

@@ -1,46 +1,63 @@
-import "cesiumSource/Widgets/widgets.css"
-import * as Cesium from "cesiumSource/Cesium"
-import {hyperStyled} from '@macrostrat/hyper'
-import styles from "./main.styl"
-const h = hyperStyled(styles)
-import {GlobeViewer} from './viewer'
-import {GeologyLayer, SatelliteLayer, HillshadeLayer} from './layers'
-import {DisplayQuality} from './actions'
-import {MapClickHandler, SelectedPoint, MapChangeTracker, FlyToInitialPosition} from './position'
-import {Fog, Globe, Scene} from 'resium'
-import {useSelector} from 'react-redux'
-import {terrainProvider} from './layers'
+import "cesiumSource/Widgets/widgets.css";
+import * as Cesium from "cesiumSource/Cesium";
+import { hyperStyled } from "@macrostrat/hyper";
+import styles from "./main.styl";
+const h = hyperStyled(styles);
+import { GlobeViewer } from "./viewer";
+import { GeologyLayer, SatelliteLayer, HillshadeLayer } from "./layers";
+import { DisplayQuality } from "./actions";
+import {
+  MapClickHandler,
+  SelectedPoint,
+  MapChangeTracker,
+  FlyToInitialPosition,
+} from "./position";
+import { Fog, Globe, Scene } from "resium";
+import { useSelector } from "react-redux";
+import { terrainProvider } from "./layers";
 
-const CesiumView = (props)=>{
+const CesiumView = (props) => {
+  const exaggeration =
+    useSelector((state) => state.globe.verticalExaggeration) ?? 1.0;
+  const displayQuality = useSelector((state) => state.globe.displayQuality);
 
-  const exaggeration = useSelector(state => state.globe.verticalExaggeration) ?? 1.0
-  const displayQuality = useSelector(state => state.globe.displayQuality)
+  const showInspector = useSelector((state) => state.globe.showInspector);
 
-  return h(GlobeViewer, {
-    terrainProvider,
-    // not sure why we have to do this...
-    terrainExaggeration: exaggeration,
-    highResolution: displayQuality,
-    skyBox: false
-    //terrainShadows: Cesium.ShadowMode.ENABLED
-  }, [
-    h(Globe, {
-      baseColor: Cesium.Color.LIGHTGRAY,
-      enableLighting: false,
-      showGroundAtmosphere: true,
-      maximumScreenSpaceError: displayQuality == DisplayQuality.High ? 1.5 : 2
-      //shadowMode: Cesium.ShadowMode.ENABLED
-    }, null),
-    h(Scene, {requestRenderMode: true}),
-    h(MapChangeTracker),
-    h(SatelliteLayer),
-    h(HillshadeLayer),
-    h(GeologyLayer, {alpha: 0.5}),
-    h(MapClickHandler),
-    h(SelectedPoint),
-    h(FlyToInitialPosition),
-    h(Fog, {density: 1e-4})
-  ])
-}
+  return h(
+    GlobeViewer,
+    {
+      terrainProvider,
+      // not sure why we have to do this...
+      terrainExaggeration: exaggeration,
+      highResolution: displayQuality == DisplayQuality.High,
+      skyBox: false,
+      showInspector,
+      //terrainShadows: Cesium.ShadowMode.ENABLED
+    },
+    [
+      h(
+        Globe,
+        {
+          baseColor: Cesium.Color.LIGHTGRAY,
+          enableLighting: false,
+          showGroundAtmosphere: true,
+          maximumScreenSpaceError:
+            displayQuality == DisplayQuality.High ? 2 : 3,
+          //shadowMode: Cesium.ShadowMode.ENABLED
+        },
+        null
+      ),
+      h(Scene, { requestRenderMode: true }),
+      h(MapChangeTracker),
+      h(SatelliteLayer),
+      h(HillshadeLayer),
+      h(GeologyLayer, { alpha: 0.5 }),
+      h(MapClickHandler),
+      h(SelectedPoint),
+      h(FlyToInitialPosition),
+      h(Fog, { density: 1e-4 }),
+    ]
+  );
+};
 
 export default CesiumView;

src/layers/terrain/hillshade.ts

@@ -1,34 +1,43 @@
-import { useRef} from 'react'
-import {MapboxImageryProvider} from "cesium"
-import h from '@macrostrat/hyper'
-import {ImageryLayer} from "resium"
-import {useSelector} from 'react-redux'
-import REGL from 'regl'
-import {vec3} from 'gl-matrix'
+import { useRef } from "react";
+import { MapboxImageryProvider } from "cesium";
+import h from "@macrostrat/hyper";
+import { ImageryLayer } from "resium";
+import { useSelector } from "react-redux";
+import REGL from "regl";
+import { vec3 } from "gl-matrix";
+import { terrainProvider } from "./provider";
 // https://wwwtyro.net/2019/03/21/advanced-map-shading.html
 
-type Img = HTMLImageElement|HTMLCanvasElement
+type Img = HTMLImageElement | HTMLCanvasElement;
 
 class HillshadeImageryProvider extends MapboxImageryProvider {
+  // Fib about tile size in order to download fewer elevation tiles
+  tileWidth = 512;
+  tileHeight = 512;
+  terrainProvider = terrainProvider;
+
   processImage(image: Img, rect: Cesium.Rectangle): Img {
     const canvas = document.createElement("canvas");
     canvas.width = image.width;
     canvas.height = image.height;
-    const regl = REGL({ canvas, extensions: ["OES_texture_float"]});
+    const regl = REGL({
+      canvas,
+      extensions: ["OES_texture_float", "WEBGL_color_buffer_float"],
+    });
 
     const tElevation = regl.texture({
       data: image,
-      flipY: true
+      flipY: true,
     });
 
-    const angle = rect.east-rect.west
+    const angle = rect.east - rect.west;
     // rough meters per pixel (could get directly from zoom level)
-    const pixelScale = 6371000*angle/image.width
+    const pixelScale = (6371000 * angle) / image.width;
 
     const fboElevation = regl.framebuffer({
       width: image.width,
       height: image.height,
-      colorType: "float"
+      colorType: "float",
     });
 
     const cmdProcessElevation = regl({
@@ -59,24 +68,24 @@ class HillshadeImageryProvider extends MapboxImageryProvider {
         }
       `,
       attributes: {
-        position: [-1, -1, 1, -1, 1, 1, -1, -1, 1, 1, -1, 1]
+        position: [-1, -1, 1, -1, 1, 1, -1, -1, 1, 1, -1, 1],
       },
       uniforms: {
         tElevation: tElevation,
         elevationScale: 1.0,
-        resolution: [image.width, image.height]
+        resolution: [image.width, image.height],
       },
       viewport: { x: 0, y: 0, width: image.width, height: image.height },
       count: 6,
       framebuffer: fboElevation,
     });
 
-    cmdProcessElevation()
+    cmdProcessElevation();
 
     const fboNormal = regl.framebuffer({
       width: image.width,
       height: image.height,
-      colorType: "float"
+      colorType: "float",
     });
 
     const cmdNormal = regl({
@@ -110,29 +119,32 @@ class HillshadeImageryProvider extends MapboxImageryProvider {
         }
       `,
       attributes: {
-        position: [-1, -1, 1, -1, 1, 1, -1, -1, 1, 1, -1, 1]
+        position: [-1, -1, 1, -1, 1, 1, -1, -1, 1, 1, -1, 1],
       },
       uniforms: {
         tElevation: fboElevation,
         pixelScale: pixelScale,
-        resolution: [image.width, image.height]
+        resolution: [image.width, image.height],
       },
       viewport: { x: 0, y: 0, width: image.width, height: image.height },
       count: 6,
-      framebuffer: fboNormal
+      framebuffer: fboNormal,
     });
 
     cmdNormal();
 
     const cmdDirect = regl({
+      // The vertex shader tells the GPU where to draw the vertices.
       vert: `
         precision highp float;
         attribute vec2 position;
+        uniform vec2 scale;
 
         void main() {
-          gl_Position = vec4(position, 0, 1);
+          gl_Position = vec4(scale*position, 0, 1);
         }
       `,
+      // The fragment shader tells the GPU what color to draw.
       frag: `
         precision highp float;
 
@@ -149,41 +161,45 @@ class HillshadeImageryProvider extends MapboxImageryProvider {
         }
       `,
       attributes: {
-        position: [-1, -1, 1, -1, 1, 1, -1, -1, 1, 1, -1, 1]
+        position: [-1, -1, 1, -1, 1, 1, -1, -1, 1, 1, -1, 1],
       },
       uniforms: {
         tNormal: fboNormal,
         tElevation: fboElevation,
+        scale: [1, 1],
         resolution: [image.width, image.height],
-        sunDirection: vec3.normalize([], [1, 1, 0.5])
+        sunDirection: vec3.normalize([], [1, 1, 0.5]),
       },
       viewport: { x: 0, y: 0, width: image.width, height: image.height },
-      count: 6
+      count: 6,
     });
 
     cmdDirect();
 
-    return canvas
+    return canvas;
   }
-  requestImage(x,y,z,request) {
-    const res = super.requestImage(x,y,z,request)
-    const rect = this.tilingScheme.tileXYToRectangle(x, y, z)
-    return res?.then(d=>this.processImage(d, rect))
+  requestImage(x, y, z, request) {
+    const res = this.terrainProvider.backend.requestImage(x, y, z, request);
+    if (res == null) return undefined;
+    const rect = this.tilingScheme.tileXYToRectangle(x, y, z);
+    return res.then((d) => this.processImage(d, rect));
   }
 }
 
-const HillshadeLayer = (props)=>{
-  const hasSatellite = useSelector(state => state.update.mapHasSatellite)
+const HillshadeLayer = (props) => {
+  const hasSatellite = useSelector((state) => state.update.mapHasSatellite);
 
-  let hillshade = useRef(new HillshadeImageryProvider({
-    mapId : 'mapbox.terrain-rgb',
-    maximumLevel : 14,
-    accessToken: process.env.MAPBOX_API_TOKEN
-  }))
-
-  if (hasSatellite) return null
-  return h(ImageryLayer, {imageryProvider: hillshade.current, ...props})
-}
+  let hillshade = useRef(
+    new HillshadeImageryProvider({
+      mapId: "mapbox.terrain-rgb",
+      maximumLevel: 14,
+      accessToken: process.env.MAPBOX_API_TOKEN,
+      format: "@2x.webp",
+    })
+  );
 
+  if (hasSatellite) return null;
+  return h(ImageryLayer, { imageryProvider: hillshade.current, ...props });
+};
 
-export {HillshadeLayer}
+export { HillshadeLayer };