From 52afe3a1167b4fe021e15ed8ded08b539fccc8df Mon Sep 17 00:00:00 2001 From: Xiaoji Chen Date: Fri, 10 Apr 2026 17:22:16 -0700 Subject: [PATCH] wip --- docs/upgrade-guide.md | 2 ++ docs/whats-new.md | 40 ++++++++++++++++---------------- website/package.json | 5 ++-- website/src/doc-demos/widgets.js | 33 +++++++++++++++----------- website/yarn.lock | 35 +++++++++++----------------- 5 files changed, 57 insertions(+), 58 deletions(-) diff --git a/docs/upgrade-guide.md b/docs/upgrade-guide.md index 58800059c56..b166add954b 100644 --- a/docs/upgrade-guide.md +++ b/docs/upgrade-guide.md @@ -2,6 +2,8 @@ ## Upgrading to v9.3 +Upgraded dependencies to [luma.gl v9.3](https://luma.gl/docs/upgrade-guide) and [loaders.gl v4.4](https://loaders.gl/docs/upgrade-guide). Your app may be affected if it contains custom layers. + ### OrthographicView Supplying a 2D array to `zoom` for per-axis zoom has been deprecated. diff --git a/docs/whats-new.md b/docs/whats-new.md index 295b9400e14..83113351bf9 100644 --- a/docs/whats-new.md +++ b/docs/whats-new.md @@ -4,7 +4,7 @@ This page contains highlights of each deck.gl release. Also check our [vis.gl bl ## deck.gl v9.3 -Target release date: March 2026 +Release date: April 13, 2026 ### Widgets @@ -46,15 +46,33 @@ Aside from the above, all widgets also received the following improvements: - All widget documentation pages now have live demos and easy-to-follow code samples. - A bug was fixed where widgets used with the `DeckGL` React component did not block pointer interaction with the canvas underneath. +### Views and Controllers + +deck.gl v9.3 is a substantial step forward in 3D navigation and rendering support. See the new [Using with 3D Tiles](./developer-guide/base-maps/using-with-3d-tiles.md) guide for a complete walkthrough. + +New `pickable: '3d'` [option](./api-reference/core/layer.md) on all layers enables depth picking, returning actual 3D coordinates on picked geometry. + +View layout props (`x`, `y`, `width`, `height`, and padding) now accept CSS-style expressions such as `calc(50% - 10px)` so you can mix relative percentages with fixed pixel offsets when arranging multi-view layouts. + +Class-specific improvements: + +- New [TerrainController](./api-reference/core/terrain-controller.md) - A terrain-aware controller that automatically adjusts camera elevation to follow 3D tilesets and elevated terrain. +- [MapController](./api-reference/core/map-controller.md) - New `rotationPivot: '3d'` option rotates around the object under the pointer, for more natural interaction with terrain and 3D tiles. +- [OrbitController](./api-reference/core/orbit-controller.md) now uses 3D picking to determine zoom and pan anchors, providing more intuitive navigation around 3D content. +- All controllers - New `maxBounds` option constrains the camera within a (2D or 3D) bounding box, preventing users from navigating outside of the content area. +- [GlobeController](./api-reference/core/globe-controller.md) - Major bug fixes and improved stability. +- [OrthographicView](./api-reference/core/orthographic-view.md) is moving away from 2d-array zoom and adds per-axis `zoom*`, `minZoom*`, `maxZoom*` props. + ### Layers ![TextLayer clipping feature](https://github.com/visgl/deck.gl-data/blob/master/images/whats-new/text-clipping.gif?raw=true) - [TextLayer](./api-reference/layers/text-layer.md) now supports per-object clipping box; and making text "sticky" when its container is partially off-screen. See a demo with this [new example](https://deck.gl/examples/text-layer-clipping). - [TileLayer](./api-reference/geo-layers/tile-layer.md) adds new `visibleMinZoom` and `visibleMaxZoom` props to control the zoom range at which tiles are drawn, independent of the zoom range at which data is loaded. +- Improvements to [Tile3DLayer](./api-reference/geo-layers/tile-3d-layer.md) including better performance and tile tracking. - WebGPU now materializes constant layer attributes into full buffers through `AttributeManager`, improving compatibility for layers that rely on constant accessors. -### @deck.gl/extensions +### Extensions - [PathStyleExtension](./api-reference/extensions/path-style-extension.md) now supports dashed strokes on [ScatterplotLayer](./api-reference/layers/scatterplot-layer.md) and [TextLayer](./api-reference/layers/text-layer.md) backgrounds, in addition to PathLayer. See [#9864](https://github.com/visgl/deck.gl/issues/9864). @@ -62,24 +80,6 @@ Aside from the above, all widgets also received the following improvements: In interleaved mode, `MapboxOverlay` now always renders layers in groups by `beforeId` or `slot`. This enables cross-layer extension handling (e.g. MaskExtension, CollisionFilterExtension) by default, without needing the previously experimental `_renderLayersInGroups` prop. -### Views - -View layout props (`x`, `y`, `width`, `height`, and padding) now accept CSS-style expressions such as `calc(50% - 10px)` so you can mix relative percentages with fixed pixel offsets when arranging multi-view layouts. - -- [OrthographicView](./api-reference/core/orthographic-view.md) is moving away from 2d-array zoom and adds per-axis `zoom*`, `minZoom*`, `maxZoom*` props. - -### Improved 3D Support - -deck.gl v9.3 is a substantial step forward in 3D navigation and rendering support. See the new [Using with 3D Tiles](./developer-guide/base-maps/using-with-3d-tiles.md) guide for a complete walkthrough. - -- New `pickable: '3d'` [option](./api-reference/core/layer.md) on all layers enables depth picking, returning actual 3D coordinates on picked geometry. -- New [TerrainController](./api-reference/core/terrain-controller.md) - A terrain-aware controller that automatically adjusts camera elevation to follow 3D tilesets and elevated terrain. -- Improvements to [Tile3DLayer](./api-reference/geo-layers/tile-3d-layer.md) including better performance and tile tracking. -- [MapController](./api-reference/core/map-controller.md) - New `rotationPivot: '3d'` option rotates around the object under the pointer, for more natural interaction with terrain and 3D tiles. -- [OrbitController](./api-reference/core/orbit-controller.md) now uses 3D picking to determine zoom and pan anchors, providing more intuitive navigation around 3D content. -- All controllers - New `maxBounds` option constrains the camera within a (2D or 3D) bounding box, preventing users from navigating outside of the content area. -- [GlobeController](./api-reference/core/globe-controller.md) - Major bug fixes and improved stability. - ## deck.gl v9.2 Release date: October 7, 2025 diff --git a/website/package.json b/website/package.json index b8f107a4294..034803d1a15 100644 --- a/website/package.json +++ b/website/package.json @@ -1,6 +1,6 @@ { "name": "project-website", - "version": "9.3.0-alpha.5", + "version": "9.3.0-beta.1", "private": true, "description": "Website for vis.gl project", "scripts": { @@ -26,7 +26,6 @@ "@material-ui/lab": "^4.0.0-alpha.57", "@monaco-editor/react": "^4.4.6", "@turf/turf": "^7.3.0", - "@vis.gl/react-maplibre": "^1.0.0-alpha.5", "d3-color": "^3.1.0", "d3-hierarchy": "^2.0.0", "d3-request": "^1.0.6", @@ -38,7 +37,7 @@ "popmotion": "^11.0.0", "react": "^18.0.0", "react-dom": "^18.0.0", - "react-map-gl": "^8.0.0", + "react-map-gl": "^8.1.1", "react-virtualized-auto-sizer": "^1.0.2", "source-map-loader": "^5.0.0", "styled-components": "^5.3.3", diff --git a/website/src/doc-demos/widgets.js b/website/src/doc-demos/widgets.js index 818a413b488..ad4c2d4ec87 100644 --- a/website/src/doc-demos/widgets.js +++ b/website/src/doc-demos/widgets.js @@ -340,38 +340,43 @@ export function SelectorWidgetDemo() { }) ]} />; } -function bounce(x, max) { - x = x % (max * 2); - return x >= max ? max - x : x; -} export function ScrollbarWidgetDemo() { - const data = Array.from({length: 1000}, (_, i) => ({ - position: [i * 100, 0, 0], - color: [bounce(i * 11, 255), bounce(i * 7, 255), 100] + const N = 1000; + const Spacing = 40; + const data = Array.from({length: N + 1}, (_, i) => ({ + position: [(i - N / 2) * Spacing, 0, 0], + color: [ + (Math.sin(i / 20) + 1) * 128, + (Math.sin(i / 20 + Math.PI * 2 / 3) + 1) * 128, + (Math.sin(i / 20 + Math.PI * 4 / 3) + 1) * 128, + ] })); + const contentBounds = [ + [-N / 2 * Spacing - Spacing, -Spacing, 0], + [N / 2 * Spacing + Spacing, Spacing, 0] + ]; + const layers = [ new ScatterplotLayer({ id: 'points', data: data, getPosition: d => d.position, getFillColor: d => d.color, - getRadius: 20, + getRadius: 10, }) ]; return