add(adapter) heads up display view

examples/worldview/src/app/App.js

@@ -77,14 +77,13 @@ const WindowSize = styled.div`
 
 const KEPLER_MAP_ID = 'map';
 const selectMapStyle = createSelectMapStyle(KEPLER_MAP_ID);
-const sceneLayers = [];
 const App = ({}) => {
-  useScene();
+  const sceneLayers = useScene();
   const keplerDeckLayers = useKeplerDeckLayers(KEPLER_MAP_ID);
   const deckProps = useMemo(() => {
     return {
-      // layers: [...keplerDeckLayers, ...sceneLayers]
-      layers: [...sceneLayers, ...keplerDeckLayers]
+      layers: [...keplerDeckLayers, ...sceneLayers]
+      // layers: [...sceneLayers, ...keplerDeckLayers]
       // layers: []
       // layers: keplerDeckLayers
     };

examples/worldview/src/features/map/Map.js

@@ -140,9 +140,10 @@ export class Map extends Component {
     for (let i = 0; i < layers.length; i++) {
       // TODO: layer mapbox and deck layers in order according to kepler config.
       // map.addLayer(new MapboxLayer({id: layers[i].id, deck}), "tunnel-simple");
-
-      // Adds DeckGL layers to Mapbox so Mapbox can be the bottom layer. Removing this clips DeckGL layers
-      map.addLayer(new MapboxLayer({id: layers[i].id, deck}));
+      if (!layers[i].id.includes('%%hud')) {
+        // Adds DeckGL layers to Mapbox so Mapbox can be the bottom layer. Removing this clips DeckGL layers
+        map.addLayer(new MapboxLayer({id: layers[i].id, deck}));
+      }
     }
 
     map.on('render', () =>
@@ -187,16 +188,19 @@ export class Map extends Component {
       <div ref={this.containerRef} id="hubble-preview" style={containerStyle}>
         <DeckGL
           ref={this.deckRef}
-          viewState={{...viewState, maxPitch: 90}}
           id="deck-overlay"
           style={deckStyle}
           controller={true}
           glOptions={{stencil: true}}
           onWebGLInitialized={gl => this.setState({glContext: gl})}
-          onViewStateChange={({viewState: vs}) => setViewState(vs)}
           width={resolution.width}
           height={resolution.height}
-          {...adapter.getProps({deck, extraProps: deckProps})}
+          {...adapter.getProps({
+            deck,
+            extraProps: deckProps,
+            mapViewState: viewState,
+            onMapViewStateChange: setViewState
+          })}
         >
           {glContext && (
             <StaticMap

examples/worldview/src/features/monitor/MonitorPanel.js

@@ -151,7 +151,7 @@ export const MonitorPanel = ({deckProps = undefined, staticMapProps = undefined}
               previewSize={previewSize}
               deckProps={deckProps}
               staticMapProps={staticMapProps}
-              debug={true}
+              debug={false}
             />
           )}
         </Pillarbox>

examples/worldview/src/features/renderer/rendererSlice.js

@@ -35,7 +35,7 @@ function msToSec(ms) {
 const defaultResolution = getResolutionSetting();
 
 const initialState = {
-  adapter: new DeckAdapter({}),
+  adapter: new DeckAdapter({headsUpDisplay: true}),
   busy: false, // 'rendering' | 'previewing'
   resolution: defaultResolution,
   filename: DEFAULT_FILENAME,

examples/worldview/src/scenes/sftrees/index.js

@@ -1,15 +1,33 @@
 /* eslint-disable */
-import {useDispatch} from 'react-redux';
+import {useDispatch, useSelector} from 'react-redux';
 import {
   timecodeChange,
   resolutionChange,
   formatChange,
   formatConfigsChange
 } from '../../features/renderer';
 import {useKepler, loadKeplerJson} from '../../features/kepler';
-import {updateViewState} from '../../features/map';
+import {updateViewState, viewStateSelector} from '../../features/map';
 import {useEffect} from 'react';
 import {easing} from 'popmotion';
+import {OrthographicView} from '@deck.gl/core';
+import {TextLayer} from '@deck.gl/layers';
+
+const resolution = {
+  width: 1920,
+  height: 1080
+};
+
+const viewport = new OrthographicView({}).makeViewport(resolution);
+
+function viewStateLegend(viewState) {
+  const show = ['latitude', 'longitude', 'zoom', 'pitch', 'bearing'];
+  var legend = '';
+  for (const key of show) {
+    legend += `${key}: ${viewState[key]}\n`;
+  }
+  return legend;
+}
 
 // const SF = {"latitude":37.75996553215378,"longitude":-122.43586511157562,"zoom":12.29897059083749,"bearing":0,"pitch":0}
 const SF = {
@@ -49,27 +67,54 @@ export const useScene = () => {
         framerate: 60
       })
     );
-    // dispatch(resolutionChange('1920x1080'));
+    dispatch(resolutionChange(resolution));
     // dispatch(resolutionChange({width: 3840, height: 2160}));
     // dispatch(resolutionChange({width: 5760, height: 5760}));
     // dispatch(resolutionChange({width: 7680, height: 4320}));
     // dispatch(resolutionChange({width: 1920, height: 1920}));
     // dispatch(resolutionChange({width: 1080, height: 1920}));
     // dispatch(resolutionChange({width: 1280, height: 720}));
-    dispatch(resolutionChange({width: 320, height: 180}));
+    // dispatch(resolutionChange({width: 320, height: 180}));
     // The maximum observed pixels supported are 33,177,600
     dispatch(
       formatConfigsChange({
+        webm: {
+          quality: 0.99
+        },
         gif: {
           sampleInterval: 1,
-          width: 1280,
-          height: 720,
-          jpegQuality: 1.0
+          jpegQuality: 1.0,
+          ...resolution
         }
       })
     );
     dispatch(formatChange('webm'));
   }, []);
 
-  return [];
+  const viewState = useSelector(viewStateSelector);
+
+  return [
+    new TextLayer({
+      id: '%%hud-title',
+      data: [{text: 'San Francisco', position: [0, viewport.unproject([0, 80])[1]]}],
+      fontFamily: 'sans-serif',
+      fontSettings: {
+        fontSize: 200,
+        sdr: true,
+        buffer: 2,
+        radius: 8
+      },
+      getSize: 48,
+      getColor: [255, 255, 255, 255],
+      getTextAnchor: 'middle'
+    }),
+    new TextLayer({
+      id: '%%hud-map-view-state',
+      data: [{text: viewState && viewStateLegend(viewState)}],
+      getSize: 32,
+      getPosition: viewport.unproject([40, resolution.height - 120]),
+      getColor: [255, 255, 255, 255],
+      getTextAnchor: 'start'
+    })
+  ];
 };

examples/worldview/webpack.config.js

@@ -14,7 +14,7 @@ const CONFIG = {
     publicPath: '/'
   },
 
-  devtool: 'source-map',
+  devtool: 'eval',
 
   module: {
     rules: [

modules/core/package.json

@@ -30,7 +30,8 @@
     "build-bundle": "webpack --config ../../scripts/bundle.config.js"
   },
   "peerDependencies": {
-    "@luma.gl/engine": "^8.2.0"
+    "@luma.gl/engine": "^8.2.0",
+    "@deck.gl/core": "^8.2.0"
   },
   "dependencies": {
     "@loaders.gl/core": "^3.0.12",

modules/core/src/adapters/deck-adapter.js

@@ -22,6 +22,7 @@ import {PreviewEncoder} from '../encoders';
 // eslint-disable-next-line no-unused-vars
 import {AnimationManager} from '../animations';
 import {VideoCapture} from '../capture/video-capture';
+import {MapView, OrthographicView} from '@deck.gl/core';
 
 export default class DeckAdapter {
   /** @type {any} */
@@ -34,18 +35,22 @@ export default class DeckAdapter {
   enabled;
   /** @type {WebGL2RenderingContext} */
   glContext;
+  /** @type {boolean} */
+  othrographicView;
 
   /**
    * @param {Object} params
    * @param {AnimationManager} params.animationManager
    * @param {WebGL2RenderingContext} params.glContext
+   * @param {boolean} params.headsUpDisplay
    */
-  constructor({animationManager = undefined, glContext = undefined}) {
+  constructor({animationManager = undefined, glContext = undefined, headsUpDisplay = false}) {
     this.animationManager = animationManager || new AnimationManager({});
     this.glContext = glContext;
     this.videoCapture = new VideoCapture();
     this.shouldAnimate = false;
     this.enabled = false;
+    this.headsUpDisplay = headsUpDisplay;
     this.getProps = this.getProps.bind(this);
     this.render = this.render.bind(this);
     this.stop = this.stop.bind(this);
@@ -61,8 +66,16 @@ export default class DeckAdapter {
    * @param {any} params.deck
    * @param {(nextTimeMs: number) => void} params.onNextFrame
    * @param {Object} params.extraProps
+   * @param {Object} params.mapViewState
+   * @param {(Object) => void} params.onMapViewStateChange
    */
-  getProps({deck, onNextFrame = undefined, extraProps = undefined}) {
+  getProps({
+    deck,
+    onNextFrame = undefined,
+    extraProps = undefined,
+    mapViewState = undefined,
+    onMapViewStateChange = undefined
+  }) {
     if (deck) {
       this.deck = deck;
     }
@@ -83,6 +96,46 @@ export default class DeckAdapter {
     if (this.glContext) {
       props.gl = this.glContext;
     }
+
+    if (this.headsUpDisplay) {
+      props.viewState = {
+        '%%map': {...mapViewState, maxPitch: 90},
+        '%%hud': {
+          target: [0, 0, 0],
+          zoom: 0
+        }
+      };
+
+      props.onViewStateChange = function onViewStateChange({viewId, viewState: vs}) {
+        // console.log(viewId, viewState);
+        if (viewId === '%%map') {
+          onMapViewStateChange(vs);
+        }
+      };
+
+      props.layerFilter = function layerFilter({layer, viewport}) {
+        if (layer.id.includes('%%hud')) {
+          if (viewport.id === '%%hud') {
+            // console.log(layer)
+            return true;
+          }
+          return false;
+        }
+        return true;
+      };
+
+      props.views = [
+        new MapView({
+          id: '%%map',
+          controller: true
+        }),
+        new OrthographicView({
+          id: '%%hud',
+          controller: false
+        })
+      ];
+    }
+
     return {...extraProps, ...props};
   }