Hubble example

examples/camera/app.js

@@ -7,6 +7,9 @@ import {layers} from './layers';
 import {vignette, fxaa} from '@luma.gl/shadertools';
 import {PostProcessEffect} from '@deck.gl/core';
 
+import {CameraKeyframes} from '@hubble.gl/core';
+import {easing} from 'popmotion';
+
 const INITIAL_VIEW_STATE = {
   longitude: -122.4,
   latitude: 37.74,
@@ -38,8 +41,37 @@ export default function App() {
   const deckgl = useRef(null);
   const [ready, setReady] = useState(false);
   const [busy, setBusy] = useState(false);
+
+  const [viewState, setViewState] = useState(INITIAL_VIEW_STATE);
+
   const nextFrame = useNextFrame();
 
+  const updateCamera = (prevCamera) => {
+    // Set by User
+  prevCamera = new CameraKeyframes({
+        timings: [0, 5000],
+        keyframes: [
+          {
+            longitude: viewState.longitude,
+            latitude: viewState.latitude,
+            zoom: viewState.zoom,
+            pitch: viewState.pitch,
+            bearing: viewState.bearing
+          },
+          {
+            longitude: viewState.longitude,
+            latitude: viewState.latitude,
+            zoom: viewState.zoom,
+            bearing: viewState.bearing + 92,
+            pitch: viewState.pitch // up to 45/50
+          }
+        ],
+        easings: [easing.easeInOut]
+      });
+
+    return prevCamera;
+  }
+
   return (
     <div style={{position: 'relative'}}>
       <div style={{position: 'absolute'}}>
@@ -55,6 +87,13 @@ export default function App() {
           // blendEquation: GL.FUNC_ADD,
           // blendFunc: [GL.SRC_ALPHA, GL.ONE_MINUS_SRC_ALPHA]
         }}
+
+        viewState={viewState}
+        onViewStateChange={({viewState}) => {
+          setViewState(viewState);
+        }}
+        controller={true}
+
         effects={[vignetteEffect, aaEffect]}
         layers={layers}
         {...adapter.getProps(deckgl, setReady, nextFrame)}
@@ -66,6 +105,7 @@ export default function App() {
             busy={busy}
             setBusy={setBusy}
             encoderSettings={encoderSettings}
+            updateCamera={updateCamera}
           />
         )}
       </div>

examples/camera/scene.js

@@ -24,13 +24,15 @@ export async function sceneBuilder(animationLoop) {
       easings: [easing.easeInOut]
     })
   };
-  animationLoop.timeline.attachAnimation(keyframes.camera);
+
+  const currentCamera = animationLoop.timeline.attachAnimation(keyframes.camera);
 
   return new DeckScene({
     animationLoop,
     keyframes,
     lengthMs: 5000,
     width: 640,
-    height: 480
+    height: 480,
+    currentCamera
   });
 }

examples/gltf-object-mapbox/app.js

@@ -0,0 +1,132 @@
+import React, {useState, useRef} from 'react';
+import {DeckAdapter} from 'hubble.gl';
+import {useNextFrame, BasicControls} from '@hubble.gl/react';
+import {sceneBuilder} from './scene';
+
+import DeckGL from '@deck.gl/react';
+import {ScenegraphLayer} from '@deck.gl/mesh-layers';
+
+import {GLTFLoader} from '@loaders.gl/gltf';
+import {registerLoaders} from '@loaders.gl/core';
+import {StaticMap} from 'react-map-gl';
+
+import {CameraKeyframes} from '@hubble.gl/core';
+import {easing} from 'popmotion';
+
+registerLoaders([GLTFLoader]);
+
+const MAPBOX_STYLE = 'https://97morningstar.github.io/dataRepo/style.json';
+
+const GLTF_URL = '/data/out.glb';
+
+const adapter = new DeckAdapter(sceneBuilder);
+
+const INITIAL_VIEW_STATE = {
+  longitude: 6.2410395,
+  latitude: 51.8742355,
+  zoom: 18,
+  pitch: 60
+};
+
+const encoderSettings = {
+  framerate: 30,
+  webm: {
+    quality: 0.8
+  },
+  jpeg: {
+    quality: 0.8
+  },
+  gif: {
+    sampleInterval: 1000
+  }
+};
+
+export default function App() {
+  const deckgl = useRef(null);
+  const [ready, setReady] = useState(false);
+  const [busy, setBusy] = useState(false);
+  const [viewState, setViewState] = useState(INITIAL_VIEW_STATE);
+  const nextFrame = useNextFrame();
+
+  console.log(deck, ready, busy, nextFrame);
+
+  const scenegraphLayer = new ScenegraphLayer({
+    id: 'scene',
+    scenegraph: GLTF_URL,
+    data: [
+      {
+        geometry: {
+          type: 'Point',
+          coordinates: [6.2410395, 51.8742355, -100]
+        }
+      }
+    ],
+    getPosition: f => [6.2410395, 51.8742355, -100],
+    sizeScale: 12,
+    getOrientation: [0, 100, 90],
+    getTranslation: [97, 50, 100],
+    getScale: [0.45, 0.45, 0.45]
+  });
+
+  const updateCamera = (prevCamera) => {
+    // Set by User
+  prevCamera = new CameraKeyframes({
+        timings: [0, 5000],
+        keyframes: [
+          {
+            longitude: viewState.longitude,
+            latitude: viewState.latitude,
+            zoom: viewState.zoom,
+            pitch: viewState.pitch,
+            bearing: viewState.bearing
+          },
+          {
+            longitude: viewState.longitude,
+            latitude: viewState.latitude,
+            zoom: viewState.zoom,
+            bearing: viewState.bearing + 92,
+            pitch: viewState.pitch // up to 45/50
+          }
+        ],
+        easings: [easing.easeInOut]
+      });
+
+    return prevCamera;
+  }
+
+  return (
+    <div>
+      <DeckGL
+        ref={deckgl}
+        initialViewState={INITIAL_VIEW_STATE}
+        layers={[scenegraphLayer]}
+
+        viewState={viewState}
+        onViewStateChange={({viewState}) => {
+          setViewState(viewState);
+        }}
+
+        controller={true}
+
+        {...adapter.getProps(deckgl, setReady, nextFrame)}
+      >
+        <StaticMap
+          mapStyle={MAPBOX_STYLE}
+          mapboxApiAccessToken="pk.eyJ1IjoicGlvbmVlci1tZSIsImEiOiJjanA0OXMwM2IwcW5qM2tvYnAyYndpdXMxIn0.bqxGkqM2ozOVT57GuVzEjw"
+        />
+      </DeckGL>
+
+      <div style={{position: 'absolute'}}>
+        {ready && (
+          <BasicControls
+            adapter={adapter}
+            busy={busy}
+            setBusy={setBusy}
+            encoderSettings={encoderSettings}
+            updateCamera={updateCamera}
+          />
+        )}
+      </div>
+    </div>
+  );
+}

examples/gltf-object-mapbox/index.js

@@ -0,0 +1,5 @@
+import React from 'react';
+import {render} from 'react-dom';
+import App from './app';
+
+render(<App />, document.body.appendChild(document.createElement('div')));

examples/gltf-object-mapbox/layers.js

@@ -0,0 +1,72 @@
+import {PathLayer, ScatterplotLayer, TextLayer, PolygonLayer} from '@deck.gl/layers';
+
+const pathData =
+  'https://raw.githubusercontent.com/visgl/deck.gl-data/master/website/bart-lines.json';
+const stationData =
+  'https://raw.githubusercontent.com/visgl/deck.gl-data/master/website/bart-stations.json';
+const zipCodeData =
+  'https://raw.githubusercontent.com/visgl/deck.gl-data/master/website/sf-zipcodes.json';
+
+export const layers = [
+  new PolygonLayer({
+    id: 'polygon-layer',
+    data: zipCodeData,
+    stroked: true,
+    filled: true,
+    lineWidthMinPixels: 2,
+    getPolygon: d => d.contour,
+    getFillColor: d => [22, 133, 248],
+    getLineColor: [61, 20, 76, 255],
+    getLineWidth: 3,
+    opacity: 1,
+    material: {
+      ambient: 1,
+      diffuse: 0,
+      shininess: 175,
+      specularColor: [255, 255, 255]
+    }
+  }),
+  new ScatterplotLayer({
+    id: 'scatterplot-layer',
+    data: stationData,
+    opacity: 0.9,
+    stroked: false,
+    filled: true,
+    radiusScale: 6,
+    radiusMinPixels: 1,
+    radiusMaxPixels: 100,
+    lineWidthMinPixels: 1,
+    getPosition: d => [...d.coordinates, 5],
+    getRadius: d => 260 - Math.sqrt(d.exits),
+    getFillColor: d => [233, 0, 255],
+    getLineColor: d => [245, 39, 137]
+  }),
+  new PathLayer({
+    id: 'path-layer',
+    data: pathData,
+    widthScale: 20,
+    widthMinPixels: 2,
+    getPath: d => d.path.map(p => [...p, 20]),
+    getColor: d => {
+      return [250, 235, 44, 255];
+    },
+    getWidth: d => 2
+  }),
+  new TextLayer({
+    id: 'text-layer',
+    data: stationData,
+    fontFamily: 'monospace',
+    fontSettings: {
+      fontSize: 100,
+      sdf: true
+    },
+    getPosition: d => [...d.coordinates, 200],
+    getText: d => d.name,
+    getSize: 22,
+    getAngle: 0,
+    getTextAnchor: 'start',
+    getAlignmentBaseline: 'center',
+    getPixelOffset: [32, 0],
+    getColor: [250, 235, 44, 255]
+  })
+];

examples/gltf-object-mapbox/package.json

@@ -0,0 +1,25 @@
+{
+  "scripts": {
+    "start": "webpack-dev-server --progress --hot --open",
+    "start-local": "webpack-dev-server --env.local --progress --hot --open"
+  },
+  "dependencies": {
+    "@deck.gl/mesh-layers": "^8.2.2",
+    "@luma.gl/debug": "^8.2.0",
+    "@luma.gl/shadertools": "^8.2.0",
+    "core-util-is": "^1.0.2",
+    "d3-color": "^1.4.1",
+    "deck.gl": "^8.2.2",
+    "react-map-gl": "^5.2.7"
+  },
+  "devDependencies": {
+    "@babel/plugin-syntax-class-properties": "^7.8.3",
+    "@babel/preset-env": "^7.9.4",
+    "@babel/preset-react": "^7.9.4",
+    "babel-loader": "^8.0.5",
+    "html-webpack-plugin": "^3.0.7",
+    "webpack": "^4.20.2",
+    "webpack-cli": "^3.1.2",
+    "webpack-dev-server": "^3.1.11"
+  }
+}