NASA-AMMOS / NASA-AMMOS/3DTilesRendererJS

MVT / Vector Tiles Improvements

Open
#1,579 2 comments 2 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
JavaScript
Stars
2.5k
Forks
416
Avg merge
17h 52m
Merged PRs (30d)
37

Description

Related to #1575
Related to #1327

Features
  • Mouse interactions, raycasting against shapes
  • Scale lines, points based on projected world size
Performance
  • Offscreen rendering in Webworkers
  • Fall back to loaded parent tile definitions
  • Consider per-shape bounding boxes for skipping rasterization
  • Pre-parse the MVT shapes (possibly even to Path2Ds) to avoid iterative MVT fetching
  • Redraw only visible tiles
Technical
  • Afford ability to "register" PMTiles archive as a protocol or source for fetching data from. The archive could then be used and referenced by other overlays like WMTS, etc.
  • Afford ability to "register" MVT parser / rasterizer as a utility for handling loaded tiles. Then if WMTS, XYZ, etc overlays load MVT files then they will work with any tiling system.
  • Reconsider the MVT hierarchy "locking" mechanism to avoid overlapping LoDs?

Other Approaches

Triangulated Polygons

Rather than rasterizing the vector shapes using the canvas API the shapes can be triangulated using earcut (or three.js' built in triangulate function) and then rasterized to render targets used for overlays with WebGL / WebGPU. This would (hopefully) be faster than rasterizing via the canvas API when applying overlays.

Things like points and lines will need to be constructed with miter joints to enable a visible "thickness", which can then be adjusted in vertex shaders for scaling.

Flat Vector Maps

Extending from the above polygon triangulation: These triangulated geometries can subsequently be used to render the map directly without an intermediate rasterization. Rendering the meshes directly would be faster, result in more crisp edges, and allow for more clean, controllable transitions between LoDs.

For supporting ellipsoidal globes: The shapes can have edges inserted in a grid pattern that can subsequently be transformed to the shape of the surface of globe.

Dynamically scaling overlays / maps

With dynamically scaling, triangulated polygonal shapes, the shapes can be rendered every frame to scale the features as necessary. Whether rendering the shapes directly (eg a flat map) or rendering the overlays, they can be rendered every frame to update the annotation scales, giving a look more consistent with other map systems.

This is something that Overture maps, MapboxGL, and Maplibre do.

Cascaded rendering

Use a shadow-cascade-like system with a few textures being fit to the frustum with lower LoDs being used further from the camera. These cascades can then be sampled by the terrain fragment shader with fade blend transitions at the cascade boundaries.

The complexity comes when we want to sample web-mercator projection data sets, which can result in artifacts when performing a mercator -> equirectangular conversion.

Direct Rendering

Rather than rendering to an intermediate overlay texture we could embed the vector shapes in a storage buffer or texture and sample the shapes at terrain rasterization time. This would give perfect rasterization quality and crisp lines independent of zoom level, etc if it can be done performantly.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reading related issues #1575 and #1327, then compare the proposed feature, performance, and technical workstreams. Agree on one narrowly scoped approach and define its affected MVT or overlay entry points; this issue does not specify files, tests, or a concrete done condition.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, three.js
Domain
computer-graphics, performance
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Quiet
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.