improved wall rendering

Author: digitaltom

app/javascript/maplibre/layers/geojson.js

@@ -1,6 +1,6 @@
 import { draw, select } from 'maplibre/edit'
 import { removeDescBanner, renderDescBanners, showDescBanners, syncDescBanner } from 'maplibre/layers/geojson/desc_banners'
-import { bufferLoaded, buildLineExtrusion, loadBuffer } from 'maplibre/layers/geojson/extrusion'
+import { buildLineExtrusion } from 'maplibre/layers/geojson/extrusion'
 import {
   removeFeatureImageOverlay,
   renderImageOverlays,
@@ -24,10 +24,10 @@ import {
 import { highlightFeature } from 'maplibre/feature'
 import { Layer, queryFeaturesNear } from 'maplibre/layers/layer'
 import { frontFeature, getFeature, layers } from 'maplibre/layers/layers'
-import { addGeoJSONSource, map, mapProperties, noValidate, removeGeoJSONSource } from 'maplibre/map'
+import { addGeoJSONSource, map, noValidate, removeGeoJSONSource } from 'maplibre/map'
 import { pruneShapeImages } from 'maplibre/styles/circle_image'
 import { prunePatternImages } from 'maplibre/styles/pattern_image'
-import { clusterStyles, initializeClusterStyles, initializeViewStyles, styles, viewStyleNames } from 'maplibre/styles/styles'
+import { clusterStyles, extrusionOpacityBuckets, initializeClusterStyles, initializeViewStyles, styles, viewStyleNames } from 'maplibre/styles/styles'
 
 // Every layer counts, so that the render of one layer never drops the shape images of another
 function pruneShapes() {
@@ -36,13 +36,12 @@ function pruneShapes() {
   prunePatternImages(features)
 }
 
-// Whether a feature needs a buffered extrusion polygon: a LineString with a height set, not
-// already rendered as a route-extras segment (which builds its own extrusion), and not hidden by 3D terrain.
+// Whether a feature needs an extrusion polygon: a LineString with a height set, not
+// already rendered as a route-extras segment (which builds its own extrusion).
 function needsExtrusionPolygon(feature) {
   return feature.geometry?.type === 'LineString' &&
     !!feature.properties?.['fill-extrusion-height'] &&
-    !feature.properties?.['show-route-extras'] &&
-    !mapProperties.terrain
+    !feature.properties?.['show-route-extras']
 }
 
 export class GeoJSONLayer extends Layer {
@@ -76,8 +75,10 @@ export class GeoJSONLayer extends Layer {
   createSource() {
     super.createSource()
     addGeoJSONSource(this.kmMarkerSourceId, false)
-    addGeoJSONSource(this.routeExtrasSourceId, false)
-    addGeoJSONSource(this.extrusionSourceId, false)
+    // Wall pieces are 0.5 m quads. Simplification below the source maxzoom drops them or
+    // collapses them to two points, which MapLibre draws as thin vertical sticks.
+    addGeoJSONSource(this.routeExtrasSourceId, false, null, 0)
+    addGeoJSONSource(this.extrusionSourceId, false, null, 0)
   }
 
   setupClickHandler() {
@@ -129,6 +130,15 @@ export class GeoJSONLayer extends Layer {
     initializeViewStyles(this.routeExtrasSourceId)
     initializeExtrasLabelStyles(this.routeExtrasSourceId)
     initializeViewStyles(this.extrusionSourceId)
+    // Walls are built from short quads (see extrusion.js). Rounded corners and the vertical
+    // gradient shade every quad on its own, which shows each seam as a dark band.
+    for (const sourceId of [this.routeExtrasSourceId, this.extrusionSourceId]) {
+      extrusionOpacityBuckets.forEach((_, i) => {
+        const id = `polygon-layer-extrusion-${i + 1}_${sourceId}`
+        map.setLayoutProperty(id, 'fill-extrusion-rounded-corner-distance', 0, noValidate)
+        map.setPaintProperty(id, 'fill-extrusion-vertical-gradient', false, noValidate)
+      })
+    }
 
     map.setFilter(`line-layer_${this.sourceId}`, withLevelFilter(this.mainLineFilter), noValidate)
     // Hide the outline layer for route extras - we only want the colored segments visible
@@ -240,7 +250,6 @@ export class GeoJSONLayer extends Layer {
     detectLevels()
 
     const features = this.layer.geojson.features
-    this.ensureBuffer(features)
 
     renderKmMarkers(features, this.kmMarkerSourceId)
     renderRouteExtras(features, this.routeExtrasSourceId)
@@ -307,7 +316,6 @@ export class GeoJSONLayer extends Layer {
     const source = map.getSource(this.sourceId)
     if (!source) { return }
     source.updateData({ remove: [feature.id], add: sourceFeatures })
-    this.ensureBuffer([feature])
 
     // Route-extras segments copy the parent's style properties (see inheritedProps) and build
     // their own extrusion, so ANY property edit on a route feature leaves them stale.
@@ -317,7 +325,7 @@ export class GeoJSONLayer extends Layer {
 
     // Extrusion polygon lives in a separate source (only LineStrings ever have one): upsert it
     // for a non-route extrusion line, otherwise remove any stale polygon (height cleared,
-    // route-extras enabled, terrain on, …).
+    // route-extras enabled, …).
     const extrusionSource = map.getSource(this.extrusionSourceId)
     if (extrusionSource && feature.geometry?.type === 'LineString') {
       const polygon = needsExtrusionPolygon(feature) ? buildLineExtrusion(feature) : null
@@ -347,7 +355,6 @@ export class GeoJSONLayer extends Layer {
     const source = map.getSource(this.sourceId)
     if (!source) { return }
     source.updateData({ add: [feature] })
-    this.ensureBuffer([feature])
 
     if (hasRouteExtras(feature)) {
       renderRouteExtras(this.layer.geojson.features, this.routeExtrasSourceId)
@@ -429,26 +436,11 @@ export class GeoJSONLayer extends Layer {
     }
   }
 
-  // buildLineExtrusion() returns null until @turf/buffer is loaded, so the extrusions render again then
-  ensureBuffer(features) {
-    if (bufferLoaded() || !features.some(f => needsExtrusionPolygon(f) || hasRouteExtras(f))) { return }
-    loadBuffer().then(() => {
-      if (!this.layer?.geojson?.features) { return }
-      renderRouteExtras(this.layer.geojson.features, this.routeExtrasSourceId)
-      this.renderExtrusionLines(this.layer.geojson.features)
-    })
-  }
-
   renderExtrusionLines(features) {
     const source = map.getSource(this.extrusionSourceId)
     if (!source) { return }
 
-    if (mapProperties.terrain) {
-      source.setData({ type: 'FeatureCollection', features: [] })
-      return
-    }
-
-    // LineStrings with fill-extrusion-height are buffered into polygons for MapLibre's fill-extrusion layer.
+    // LineStrings with fill-extrusion-height are turned into polygons for MapLibre's fill-extrusion layer.
     // Placed in a separate non-selectable source so the polygons are never clickable.
     // Skipped when 'show-route-extras' renders its own extrusion.
     const extrusionFeatures = features

app/javascript/maplibre/layers/geojson/extrusion.js

@@ -1,27 +1,23 @@
+import { mapProperties } from 'maplibre/map'
 import { defaultLineWidth, defaults } from 'maplibre/styles/defaults'
 
-// @turf/buffer pulls in JSTS and d3-geo (~350 KB), which most maps never need
-let buffer = null
-let bufferLoading = null
+// With terrain, MapLibre lifts every extrusion polygon by the elevation at its centroid,
+// so one long polygon floats over a slope. Short pieces follow the ground in small steps.
+// Without terrain every polygon sits at 0, so each segment stays one piece.
+const minPieceLength = 0.5
+const maxPieces = 5000
+const metersPerDegree = 111320
 
-export function bufferLoaded() { return !!buffer }
-
-export function loadBuffer() {
-  bufferLoading ||= import('@turf/buffer').then(module => { buffer = module.buffer })
-  return bufferLoading
-}
-
-// Buffer a LineString into a polygon for MapLibre's fill-extrusion layer, which has no line support.
-// Returns null for geometry that can't be buffered (non-line, <2 coords, or degenerate),
-// and before loadBuffer() finished.
-// @turf/buffer (JSTS) is expensive, so callers should only invoke this for features that changed.
+// Turn a LineString into a wall polygon for MapLibre's fill-extrusion layer, which has no line support.
+// Returns null for geometry that can't be extruded (non-line, <2 coords, or degenerate).
 export function buildLineExtrusion(feature) {
-  if (!buffer || feature.geometry?.type !== 'LineString' || feature.geometry.coordinates.length < 2) {
+  if (feature.geometry?.type !== 'LineString' || feature.geometry.coordinates.length < 2) {
     return null
   }
   const width = feature.properties['fill-extrusion-width'] || feature.properties['stroke-width'] || defaultLineWidth(feature)
-  const extrusionLine = buffer(feature, width / 2, { units: 'meters' })
-  if (!extrusionLine) { return null }
+  const pieces = wallPieces(feature.geometry.coordinates, width / 2)
+  if (!pieces.length) { return null }
+  const extrusionLine = { type: 'Feature', geometry: { type: 'MultiPolygon', coordinates: pieces } }
   // Route-extras segments are anonymous slices of a route, so they stay id-less.
   if (feature.id) {
     extrusionLine.id = `${feature.id}-extrusion`
@@ -35,17 +31,68 @@ export function buildLineExtrusion(feature) {
   extrusionLine.properties['stroke-width'] = 0
   extrusionLine.properties['stroke-opacity'] = 0
   setExtrusionMinZoom(extrusionLine.properties)
-  // The label stays on the line ('line-labels'). On the buffered polygon the point-placed
+  // The label stays on the line ('line-labels'). On the polygon the point-placed
   // 'text-layer' would draw a horizontal duplicate beside the line.
   delete extrusionLine.properties.label
   delete extrusionLine.properties['label-title']
   return extrusionLine
 }
 
+// One quad per piece, in local metres around each segment, plus a disc on every vertex.
+// The discs round the joins on the outside of a bend and the caps at both ends.
+function wallPieces(coords, halfWidth) {
+  const segments = []
+  for (let i = 1; i < coords.length; i++) {
+    const [lng0, lat0] = coords[i - 1]
+    const [lng1, lat1] = coords[i]
+    const mx = metersPerDegree * Math.cos(lat0 * Math.PI / 180)
+    const dx = (lng1 - lng0) * mx
+    const dy = (lat1 - lat0) * metersPerDegree
+    const length = Math.hypot(dx, dy)
+    if (length > 0) { segments.push({ lng0, lat0, lng1, lat1, mx, ux: dx / length, uy: dy / length, length }) }
+  }
+  if (!segments.length) { return [] }
+  const total = segments.reduce((sum, s) => sum + s.length, 0)
+  // Math.ceil adds at most one piece per segment and every vertex adds a disc, so those are
+  // kept out of the budget. A line with too many segments still gets one piece per segment.
+  const pieceLength = mapProperties.terrain
+    ? Math.max(minPieceLength, total / Math.max(1, maxPieces - 2 * segments.length - 1))
+    : Infinity
+  const pieces = []
+  for (const { lng0, lat0, mx, ux, uy, length } of segments) {
+    const toLngLat = (along, side) => [
+      lng0 + (ux * along - uy * side) / mx,
+      lat0 + (uy * along + ux * side) / metersPerDegree
+    ]
+    const n = Math.max(1, Math.ceil(length / pieceLength))
+    for (let p = 0; p < n; p++) {
+      const from = length * p / n
+      const to = length * (p + 1) / n
+      const right = toLngLat(from, -halfWidth)
+      pieces.push([[right, toLngLat(to, -halfWidth), toLngLat(to, halfWidth), toLngLat(from, halfWidth), right]])
+    }
+    pieces.push(disc(lng0, lat0, mx, halfWidth))
+  }
+  const last = segments.at(-1)
+  pieces.push(disc(last.lng1, last.lat1, last.mx, halfWidth))
+  return pieces
+}
+
+const discSides = 12
+
+function disc(lng, lat, mx, radius) {
+  const ring = []
+  for (let i = 0; i <= discSides; i++) {
+    const angle = 2 * Math.PI * (i % discSides) / discSides
+    ring.push([lng + radius * Math.cos(angle) / mx, lat + radius * Math.sin(angle) / metersPerDegree])
+  }
+  return [ring]
+}
+
 // A wall below one pixel is not worth drawing, and the taller it is, the further out that point sits.
 // The extrusion layers already filter on 'min-zoom', so writing the threshold onto the polygon hides
 // it per feature. The polygon itself stays in the source at every zoom level: dropping it would move
-// all the buffering into the single frame that crosses the threshold and freeze the zoom gesture.
+// all the polygon building into the single frame that crosses the threshold and freeze the zoom gesture.
 function setExtrusionMinZoom(properties) {
   // A wall with a base starts above the ground, so only the difference is drawn.
   const height = Number(properties['fill-extrusion-height']) - (Number(properties['fill-extrusion-base']) || 0)

app/javascript/maplibre/layers/geojson/route_extras.js

@@ -336,7 +336,7 @@ export function renderRouteExtras (features, sourceId) {
 
   showExtrasLegend(activeExtrasType, activeValues, mergeBboxes(legendFeatures))
 
-  // Buffer LineString segments into polygons for 3D extrusion
+  // Turn LineString segments into polygons for 3D extrusion
   const extrusionFeatures = extrasFeatures
     .filter(f => f.properties['fill-extrusion-height'])
     .map(buildLineExtrusion)

app/javascript/maplibre/map.js

@@ -122,10 +122,46 @@ function setAttributionControl () {
   map.addControl(attributionControl, 'bottom-right')
 }
 
+// ?fps=<n> caps every requestAnimationFrame user, MapLibre included, for screen recordings:
+// evenly spaced frames, and half the GPU work of a 60Hz screen at 30fps.
+// ponytail: frames snap to the vsync grid, so 144Hz gives every 5th vsync (~28.8fps).
+let frameCapInstalled = false
+function capFrameRate () {
+  const fps = Number(new URLSearchParams(window.location.search).get('fps'))
+  if (!(fps > 0) || frameCapInstalled) { return }
+  frameCapInstalled = true
+  const request = window.requestAnimationFrame.bind(window)
+  const cancel = window.cancelAnimationFrame.bind(window)
+  // The 2ms slack keeps a 60Hz screen on every second vsync despite timestamp jitter
+  const interval = 1000 / fps - 2
+  // Our id -> the native id of the vsync the callback currently waits for
+  const pending = new Map()
+  let lastId = 0
+  let frame = null
+  let next = 0
+  window.requestAnimationFrame = callback => {
+    const id = ++lastId
+    const tick = time => {
+      // All callbacks of one vsync get the same time, so they run or wait together
+      if (time !== frame && time >= next) { frame = time; next = time + interval }
+      if (time !== frame) { pending.set(id, request(tick)); return }
+      pending.delete(id)
+      callback(time)
+    }
+    pending.set(id, request(tick))
+    return id
+  }
+  window.cancelAnimationFrame = id => {
+    cancel(pending.get(id))
+    pending.delete(id)
+  }
+}
+
 export async function initializeMap (divId = 'maplibre-map') {
   backgroundMapLayer = null
   backgroundStyleKey = null
   rasterZoomLimits = {}
+  capFrameRate()
 
   // Initialize level from URL FIRST, before any layer initialization
   // This ensures the level is set before style.load triggers initializeLayers
@@ -148,6 +184,8 @@ export async function initializeMap (divId = 'maplibre-map') {
       attributionControl: false, // see setAttributionControl()
       hash: true, // enable hash in URL for map center/zoom
       fadeDuration: 200, // shorter fade
+      // A 2x screen draws 4x the pixels and drops frames in pitched camera flights
+      pixelRatio: Math.min(window.devicePixelRatio, 1.5),
       interactive: (window.gon.map_mode !== 'static'), // can move/zoom map
       // The static styles in public/layers/ must not carry an api key, so add the
       // configured one to every maptiler request that comes out of them
@@ -355,7 +393,7 @@ function updateCursorPosition(e) {
 
 // Each map layer has its own source, so different style layers can be applied
 // sourceName convention: layer.type + '-source-' + layer.id
-export function addGeoJSONSource(sourceName, cluster=false, attribution=null) {
+export function addGeoJSONSource(sourceName, cluster=false, attribution=null, tolerance=null) {
   // https://maplibre.org/maplibre-style-spec/sources/#geojson
   // console.log("Adding source: " + sourceName)
   if (map.getSource(sourceName)) {
@@ -371,7 +409,8 @@ export function addGeoJSONSource(sourceName, cluster=false, attribution=null) {
     clusterRadius: 50,
     // the attribution control drops a null and de-duplicates the rest, so layers of the
     // same type credit their data source only once
-    ...(attribution && { attribution })
+    ...(attribution && { attribution }),
+    ...(tolerance !== null && { tolerance })
   })
 }
 

config/importmap.rb

@@ -94,11 +94,5 @@
 pin "@turf/destination", to: "@turf--destination.js", preload: "map" # @7.4.0
 pin "@turf/length", to: "@turf--length.js", preload: "map" # @7.4.0
 pin "@turf/area", to: "@turf--area.js", preload: "map" # @7.4.0
-pin "@turf/buffer", to: "@turf--buffer.js", preload: false # @7.4.0
 pin "@turf/bbox", to: "@turf--bbox.js", preload: "map" # @7.4.0
 pin "@turf/center", to: "@turf--center.js", preload: "map" # @7.4.0
-pin "@turf/jsts", to: "@turf--jsts.js", preload: false # @2.7.2
-# dependencies of turf/buffer
-pin "d3-array", preload: false # @3.2.4
-pin "d3-geo", preload: false # @3.1.1
-pin "internmap", preload: false # @2.0.3

lib/tasks/demo.rake

@@ -3,7 +3,7 @@ require "net/http"
 namespace :demo do
   desc "Draw on an existing map in three scenes, for screen recording (Elba, La Zanca)"
   task draw: :environment do
-    fps = 25
+    fps = 30
     pace = 0.75                                    # every cursor action runs 25% faster
 
     # Opening and closing shot: all three scenes in one frame
@@ -66,7 +66,7 @@ namespace :demo do
     abort "No map with private_id #{private_id}" unless map
     # Printed before the slow setup below, so the page is open by the time the first
     # broadcast goes out. A cursor is a broadcast, so it needs a connected client.
-    puts "Open #{ENV.fetch("MAPFORGE_HOST", "http://localhost:3000")}/m/#{map.private_id}"
+    puts "Open #{ENV.fetch("MAPFORGE_HOST", "http://localhost:3000")}/m/#{map.private_id}?fps=30"
 
     hiker  = { uuid: "demo-hiker", name: "Cleo", image: "/images/frontpage/avatar2.jpeg" }
     scout  = { uuid: "demo-scout", name: "Ben", image: "/images/frontpage/avatar3.jpeg" }
@@ -204,7 +204,7 @@ namespace :demo do
     track_properties = ->(upto) {
       { "title" => "Coast walk", "stroke" => "#e8590c", "stroke-width" => 5,
         "stroke-opacity" => 0.65, "stroke-dasharray" => true,
-        "fill-extrusion-height" => 8, "fill-extrusion-width" => 3, "fill-extrusion-opacity" => 0.6,
+        "fill-extrusion-height" => 8, "fill-extrusion-width" => 3, "fill-extrusion-opacity" => 1,
         "show-route-extras" => "steepness",
         "route" => { "provider" => "ors", "profile" => "foot",
                      "waypoints" => stops[0..upto].map { |stop| track[stop].first(2) },
@@ -297,7 +297,7 @@ namespace :demo do
                       "desc" => "Steel hull at 22 m, groupers inside\n\n" \
                                 "<img src=\"/images/frontpage/shipwreck.jpg\" width=\"150\">\n",
                       "marker-color" => "#000000", "stroke" => "transparent",
-                      "show-desc" => "banner", "marker-size" => 14,
+                      "show-desc" => "banner", "marker-size" => 5,
                       "marker-symbol" => "/icon-sets/fontawesome/ship.png" })
     }