visgl · chrisgervang · Mar 20, 2025 · Jan 19, 2025 · Jan 19, 2025 · Jan 23, 2025
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
@@ -27,7 +27,7 @@ jobs:
 
       - name: Run tests
         run: |
-          yarn lint  
+          yarn lint
           yarn test ci
 
       - name: Coveralls

diff --git a/.gitignore b/.gitignore
@@ -8,6 +8,7 @@ coverage/
 .cache/
 
 tsconfig.tsbuildinfo
+tsconfig.build.tsbuildinfo
 
 */**/yarn.lock
 !website/yarn.lock

diff --git a/.ocularrc.js b/.ocularrc.js
@@ -27,7 +27,7 @@ const config = {
   },
 
   coverage: {
-    test: 'browser'
+    test: 'force-browser-tests' // TODO: revert to 'browser' after resolving https://github.com/visgl/dev-tools/issues/10
   },
 
   entry: {

diff --git a/docs/README.md b/docs/README.md
@@ -1,5 +1,17 @@
 # Introduction
 
+<p align="center">
+  <span>These docs are for <a href="https://github.com/visgl/hubble.gl/blob/2.0-release/docs/README.md"><img src="https://img.shields.io/badge/hubble.gl-v2.0-brightgreen.svg?style=flat-square" /></a></span>
+  <br />
+  Looking for an old version?
+  <a href="https://github.com/visgl/hubble.gl/blob/1.4-release/docs/README.md">
+    <img src="https://img.shields.io/badge/hubble.gl-v1.4-green.svg?style=flat-square" />
+  </a>
+  <a href="https://github.com/visgl/hubble.gl/blob/1.3-release/docs/README.md">
+    <img src="https://img.shields.io/badge/hubble.gl-v1.3-green.svg?style=flat-square" />
+  </a>
+</p>
+
 Hubble.gl is a JavaScript library for animating and video encoding WebGL data visualizations.
 
 - **High Quality Video:** 60+fps framerates, up to 8k resolution, and a variety of formats. Render a quick draft or with loseless encoding. Fine tune timing and look with keyframe markers and render everything in the same app.

diff --git a/docs/api-reference/keyframe/keyframes.md b/docs/api-reference/keyframe/keyframes.md
@@ -15,7 +15,7 @@ class CameraKeyFrames extends Keyframes {
 }
 
 // It can be used directly too.
-new Keyframes({timings, keyframes, easings = linear, interpolators = 'linear'})
+new Keyframes({ timings, keyframes, easings = linear, interpolators = 'linear'})
 ```
 
 ## Constructor

diff --git a/examples/get-started/pure-js/app.js b/examples/get-started/pure-js/app.js
@@ -1,5 +1,5 @@
 /* global document, URL */
-import {Deck} from '@deck.gl/core';
+import {Deck, MapView} from '@deck.gl/core';
 import {GeoJsonLayer, ArcLayer} from '@deck.gl/layers';
 import {DeckAdapter, DeckAnimation, AnimationManager, WebMEncoder} from '@hubble.gl/core';
 import {easeInOut} from 'popmotion';
@@ -82,6 +82,12 @@ export const deck = new Deck({
     deck.setProps({viewState});
   },
   controller: true,
+  views: new MapView({
+    // most video formats don't fully support transparency
+    clear: {
+      color: [255, 255, 255, 1]
+    }
+  }),
   layers: [
     new GeoJsonLayer({
       id: 'base-map',
@@ -118,10 +124,6 @@ export const deck = new Deck({
       getWidth: 1
     })
   ],
-  // most video formats don't fully support transparency
-  parameters: {
-    clearColor: [255, 255, 255, 1]
-  },
   // retina displays will double resolution
   useDevicePixels: false
 });

diff --git a/examples/get-started/pure-js/package.json b/examples/get-started/pure-js/package.json
@@ -10,10 +10,10 @@
   },
   "dependencies": {
     "@hubble.gl/core": "^1.4.0",
-    "deck.gl": "^8.9",
+    "deck.gl": "^9.1",
     "popmotion": "9.3.1"
   },
   "devDependencies": {
-    "vite": "^4.0.0"
+    "vite": "^6.2.0"
   }
 }
diff --git a/examples/get-started/scripting/index.html b/examples/get-started/scripting/index.html
@@ -1,10 +1,8 @@
 <html>
   <head>
     <!-- deck.gl standalone bundle -->
-    <script src="https://unpkg.com/deck.gl@8.9.35/dist.min.js"></script>
+    <script src="https://unpkg.com/deck.gl@9.1/dist.min.js"></script>
     <script src="https://unpkg.com/[email protected]/dist.min.js"></script>
-    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.1/mapbox-gl.js'></script>
-    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.1/mapbox-gl.css' rel='stylesheet' />
     <style>
       body {margin: 0; padding: 0; font-family: Helvetica, Arial, sans-serif;}
       #geo, #non-geo {position: absolute; width: 50vw; height: 50vh;}
@@ -14,21 +12,26 @@
         z-index: 1;
         top: 0;
         right: 0;
-        background-color: #FFF;
+        background-color: #fff;
         margin: 24px;
         padding: 10px 24px;
         box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
         min-width: 300px;
       }
-      .render-result h3 { font-size: 16px; margin: 8px 0; }
-      #re-render { margin-top: 8px; }
+      .render-result h3 {
+        font-size: 16px;
+        margin: 8px 0;
+      }
+      #re-render {
+        margin-top: 8px;
+      }
       #result {
         display: none;
       }
     </style>
   </head>
   <body>
-    <div id="non-geo" ></div>
+    <div id="non-geo"></div>
     <div class="render-result">
       <h3 id="render-status">Rendering video...</h3>
       <div id="result">
@@ -104,12 +107,14 @@ <h3 id="render-status">Rendering video...</h3>
     const nonGeoExample = new deck.DeckGL({
       container: document.getElementById('non-geo'),
       mapbox: false /* disable map */,
-      views: [new deck.OrbitView()],
+      views: new deck.OrbitView({
+        // most video formats don't fully support transparency
+        clear: {
+          color: [255, 255, 255, 1]
+        }
+      }),
       initialViewState: {distance: 1, fov: 50, rotationX: 10, rotationOrbit: 160, zoom: 3.5},
       controller: false,
-      parameters: {
-        clearColor: [255, 255, 255, 1]
-      },
       // retina displays will double resolution
       useDevicePixels: false
     });

diff --git a/examples/website/basic-basemap-mapbox-legacy/app.jsx b/examples/website/basic-basemap-mapbox-legacy/app.jsx
@@ -80,6 +80,7 @@ const DeckGLOverlay = forwardRef((props, ref) => {
   setRef(ref, deck._deck);
   return null;
 });
+DeckGLOverlay.displayName = 'DeckGLOverlay';
 
 const Container = ({children}) => (
   <div

diff --git a/examples/website/basic-basemap-mapbox-legacy/index.html b/examples/website/basic-basemap-mapbox-legacy/index.html
@@ -4,6 +4,7 @@
   <meta charset="utf-8">
   <title>hubble.gl Example</title>
   <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.13.0/mapbox-gl.css" rel="stylesheet" />
   <style>
     body {margin: 0; font-family: sans-serif; width: 100vw; height: 100vh; overflow: hidden;}
     #app {width: 100%; height: 100%;}

diff --git a/examples/website/basic-basemap-mapbox/app.jsx b/examples/website/basic-basemap-mapbox/app.jsx
@@ -8,7 +8,7 @@ import React, {useState, useRef, useEffect, forwardRef} from 'react';
 import {createRoot} from 'react-dom/client';
 import {BasicControls, useHubbleGl, useDeckAnimation} from '@hubble.gl/react';
 import {MapboxOverlay} from '@deck.gl/mapbox';
-import Map, {useControl} from 'react-map-gl';
+import {Map, useControl} from 'react-map-gl/mapbox';
 import {PolygonLayer} from '@deck.gl/layers';
 import {easeInOut} from 'popmotion';
 import {setRef} from './set-ref';
@@ -80,6 +80,7 @@ const DeckGLOverlay = forwardRef((props, ref) => {
   setRef(ref, deck._deck);
   return null;
 });
+DeckGLOverlay.displayName = 'DeckGLOverlay';
 
 const Container = ({children}) => (
   <div

diff --git a/examples/website/basic-basemap-mapbox/index.html b/examples/website/basic-basemap-mapbox/index.html
@@ -1,19 +1,20 @@
 <!doctype html>
 <html lang="en">
-<head>
-  <meta charset="utf-8">
-  <title>hubble.gl Example</title>
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <style>
-    body {margin: 0; font-family: sans-serif; width: 100vw; height: 100vh; overflow: hidden;}
-    #app {width: 100%; height: 100%;}
-  </style>
-</head>
-<body>
-<div id="app"></div>
-</body>
-<script type="module">
-  import {renderToDOM} from './app.jsx';
-  renderToDOM(document.getElementById('app'));
-</script>
+  <head>
+    <link href="https://api.mapbox.com/mapbox-gl-js/v3.10.0/mapbox-gl.css" rel="stylesheet" />
+    <meta charset="utf-8" />
+    <title>hubble.gl Example</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <style>
+      body {margin: 0; font-family: sans-serif; width: 100vw; height: 100vh; overflow: hidden;}
+      #app {width: 100%; height: 100%;}
+    </style>
+  </head>
+  <body>
+    <div id="app"></div>
+  </body>
+  <script type="module">
+    import {renderToDOM} from './app.jsx';
+    renderToDOM(document.getElementById('app'));
+  </script>
 </html>
diff --git a/examples/website/basic-basemap-mapbox/package.json b/examples/website/basic-basemap-mapbox/package.json
@@ -9,15 +9,15 @@
     "build": "vite build"
   },
   "dependencies": {
-    "deck.gl": "^8.9",
+    "deck.gl": "^9.1",
     "hubble.gl": "^1.4.0",
+    "mapbox-gl": "^3.10.0",
+    "popmotion": "9.3.1",
     "react": "^18.3.0",
     "react-dom": "^18.3.0",
-    "react-map-gl": "^7.1.8",
-    "mapbox-gl": "^2.0.0",
-    "popmotion": "9.3.1"
+    "react-map-gl": "^8.0.1"
   },
   "devDependencies": {
-    "vite": "^4.0.0"
+    "vite": "^6.2.0"
   }
 }
diff --git a/examples/website/basic-basemap/package.json b/examples/website/basic-basemap/package.json
@@ -9,13 +9,13 @@
     "build": "vite build"
   },
   "dependencies": {
-    "deck.gl": "^8.9",
+    "deck.gl": "^9.1",
     "hubble.gl": "^1.4.0",
+    "maplibre-gl": "^3.6.2",
+    "popmotion": "9.3.1",
     "react": "^18.3.0",
     "react-dom": "^18.3.0",
-    "react-map-gl": "^7.1.8",
-    "maplibre-gl": "^3.6.2",
-    "popmotion": "9.3.1"
+    "react-map-gl": "^7.1.8"
   },
   "devDependencies": {
     "vite": "^4.0.0"

diff --git a/examples/website/camera/app.jsx b/examples/website/camera/app.jsx
@@ -1,11 +1,11 @@
 import React, {useState, useRef, useEffect} from 'react';
 import {createRoot} from 'react-dom/client';
-import DeckGL from '@deck.gl/react';
+import {DeckGL} from '@deck.gl/react';
 import {useHubbleGl, BasicControls} from '@hubble.gl/react';
-import {vignette, fxaa} from '@luma.gl/shadertools';
+import {vignette, fxaa} from '@luma.gl/effects';
 import {PostProcessEffect, MapView} from '@deck.gl/core';
-import {deckAnimation} from './layers';
 import {easeInOut} from 'popmotion';
+import {deckAnimation} from './layers';
 
 const INITIAL_VIEW_STATE = {
   longitude: -122.435,
@@ -108,12 +108,18 @@ export default function App() {
     <Container>
       <div style={{position: 'relative'}}>
         <DeckGL
-          ref={ref => deckRef.current = ref?.deck}
+          ref={ref => (deckRef.current = ref?.deck)}
           style={{position: 'unset'}}
-          views={new MapView({farZMultiplier: 3})}
+          views={
+            new MapView({
+              farZMultiplier: 3,
+              clear: {
+                color: [61 / 255, 20 / 255, 76 / 255, 1]
+              }
+            })
+          }
           parameters={{
-            depthTest: false,
-            clearColor: [61 / 255, 20 / 255, 76 / 255, 1]
+            depthTest: false
             // blend: true,
             // blendEquation: GL.FUNC_ADD,
             // blendFunc: [GL.SRC_ALPHA, GL.ONE_MINUS_SRC_ALPHA]

diff --git a/examples/website/camera/package.json b/examples/website/camera/package.json
@@ -9,11 +9,12 @@
     "build": "vite build"
   },
   "dependencies": {
+    "@luma.gl/effects": "9.1.4",
+    "deck.gl": "^9.1",
     "hubble.gl": "^1.4.0",
-    "deck.gl": "^8.9",
+    "popmotion": "9.3.1",
     "react": "^18.3.0",
-    "react-dom": "^18.3.0",
-    "popmotion": "9.3.1"
+    "react-dom": "^18.3.0"
   },
   "devDependencies": {
     "vite": "^4.0.0"

diff --git a/examples/website/quick-start/app.jsx b/examples/website/quick-start/app.jsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import {createRoot} from 'react-dom/client';
+import {MapView} from '@deck.gl/core';
 import {ScatterplotLayer, TextLayer} from '@deck.gl/layers';
 import {QuickAnimation, hold, useDeckAnimation} from 'hubble.gl';
 import {anticipate, easeIn, reverseEasing} from 'popmotion';
@@ -91,9 +92,12 @@ export default function App() {
         resolution={RESOLUTION}
         animation={animation}
         deckProps={{
-          parameters: {
-            clearColor: [255, 255, 255, 1]
-          }
+          views: new MapView({
+            // most video formats don't fully support transparency
+            clear: {
+              color: [255, 255, 255, 1]
+            }
+          })
         }}
         timecode={TIMECODE}
       />

diff --git a/examples/website/quick-start/quick-start-after.jsx b/examples/website/quick-start/quick-start-after.jsx
@@ -1,4 +1,5 @@
 import React, {useMemo} from 'react';
+import {MapView} from '@deck.gl/core';
 import {ScatterplotLayer, TextLayer} from '@deck.gl/layers';
 import {QuickAnimation, hold, DeckAnimation} from 'hubble.gl';
 import {anticipate, easeIn, reverseEasing} from 'popmotion';
@@ -76,9 +77,12 @@ export default function App() {
       resolution={RESOLUTION}
       animation={animation}
       deckProps={{
-        parameters: {
-          clearColor: [255, 255, 255, 1]
-        }
+        views: new MapView({
+          // most video formats don't fully support transparency
+          clear: {
+            color: [255, 255, 255, 1]
+          }
+        })
       }}
       timecode={TIMECODE}
     />

diff --git a/examples/website/quick-start/quick-start-before.jsx b/examples/website/quick-start/quick-start-before.jsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import {MapView} from '@deck.gl/core';
 import {ScatterplotLayer, TextLayer} from '@deck.gl/layers';
 import DeckGL from '@deck.gl/react';
 
@@ -32,9 +33,12 @@ export default function App() {
       width={640}
       height={480}
       layers={layers}
-      parameters={{
-        clearColor: [255, 255, 255, 1]
-      }}
+      views={new MapView({
+        // most video formats don't fully support transparency
+        clear: {
+          color: [255, 255, 255, 1]
+        }
+      })}
     />
   );
 }