@tileflow/core 0.1.0-alpha.43 → 0.1.0-alpha.44

package/README.md

@@ -267,6 +267,11 @@ under the camera, read chosen layers of a vector source for an area at a fixed z
 Browser 3D scenes support `camera.adaptivePerspective`: caller override,
 map default, then `false`. Streets enables it. Depth markers let buildings
 occlude application markers.
+Custom 3D layers load visible ground from the bottom of the viewport towards the horizon before
+spending tiles offscreen. Buildings fade down at the far boundary, across the view's width, and
+distance haze follows that boundary. Coverage follows the viewport and its projection on resize,
+within each layer's `maxTiles` budget (25 by default); views exceeding that budget still have
+bounded coverage, with the nearest ground taking priority.
 Model roles use `modelLighting` for independent colours and materials. `colorScale` (0–1,
 default 1) subtly darkens a role after recolouring. Map-shaded models share the buildings’
 vertical/contact gradient; physical roles keep their own lighting. Model corner geometry is

package/THIRD_PARTY_NOTICES.md

@@ -1,11 +1,11 @@
 # Third-party notices
 
-`@tileflow/core/browser` embeds `maplibre-contour` 0.1.0, `PMTiles` 4.5.0, `fflate` 0.8.3, and
+`@tileflow/core/browser` embeds `maplibre-contour` 0.1.1, `PMTiles` 4.5.0, `fflate` 0.8.3, and
 `earcut` 3.2.4 so contour, local archive, and 3D building rendering remain self-contained.
 `@tileflow/core` and `@tileflow/core/browser` embed the decoder of `meshoptimizer` 1.3.0, loaded
 only to read a compressed 3D model file. The complete upstream licenses follow.
 
-## maplibre-contour 0.1.0
+## maplibre-contour 0.1.1
 
 BSD 3-Clause License
 

package/dist/3d.js

@@ -2553,11 +2553,11 @@ var growth = `
 uniform float u_scale;
 uniform vec2 u_offset; // this tile's corner from the scene's origin, in tile units
 uniform float u_metres; // metres per tile unit
-// The disc the city's tiles cover whole, in this tile's units: its centre, where heights start to
-// ease down and where they are gone; none while its radius is 0. And the view's direction along the
-// ground, in this tile's axes.
+// In this tile's units: origin and start/end of the fade along the view, or centre and radii of the
+// fallback covered disc. The direction is along the ground in this tile's axes.
 uniform vec4 u_ring;
 uniform vec2 u_ring_ahead;
+uniform bool u_ring_directional;
 
 float progressOf() {
   return clamp(u_scale * 1.25 - a_wave.x * 0.25, 0.0, 1.0);
@@ -2569,9 +2569,11 @@ float elevationOf(float own, float top, float p) {
 }
 
 // Buildings sink into the ground over the last stretch of the city's reach, so it ends without an
-// edge of cut-off blocks. Only its far side does: where the tile limit holds the ring short, the
-// buildings round the camera, nearer than its centre, keep standing.
+// edge of cut-off blocks. The view-aligned fade leaves the entire near width standing; the legacy
+// disc fallback also exempts its near side.
 float reachOf(vec2 position) {
+  if (u_ring_directional)
+    return 1.0 - smoothstep(u_ring.z, u_ring.w, dot(position - u_ring.xy, u_ring_ahead));
   if (u_ring.w <= 0.0) return 1.0;
   vec2 from = position - u_ring.xy;
   float far = smoothstep(0.0, u_ring.w - u_ring.z, dot(from, u_ring_ahead));
@@ -5665,7 +5667,8 @@ function createCameraTiles(options) {
     const chosen = cameraTileRing(
       { ...centre, zoom: currentZoom, pitch: map.getPitch(), bearing: map.getBearing() },
       zoom,
-      options.maxTiles
+      options.maxTiles,
+      cameraViewport(map, zoom)
     );
     ring = chosen;
     wanted = chosen.tiles.map(({ x: x3, y: y2 }) => `${x3}/${y2}`);
@@ -5677,7 +5680,7 @@ function createCameraTiles(options) {
       return;
     }
     const now = performance.now();
-    for (const { x: x3, y: y2, distance } of chosen.tiles) {
+    for (const [priority, { x: x3, y: y2 }] of chosen.tiles.entries()) {
       const key = `${x3}/${y2}`;
       let entry = tiles.get(key);
       if (!entry) {
@@ -5685,7 +5688,7 @@ function createCameraTiles(options) {
         tiles.set(key, entry);
       }
       entry.used = now;
-      entry.distance = distance;
+      entry.priority = priority;
       if ((!entry.value && !entry.pending || entry.retryAt !== void 0) && !entry.loading && (entry.retryAt ?? 0) <= now)
         load(source, key, entry, chosen.tileMetres);
     }
@@ -5698,7 +5701,7 @@ function createCameraTiles(options) {
     entry.retryAt = void 0;
     source.read(
       { z: zoom, x: entry.x, y: entry.y },
-      { signal: controller.signal, priority: entry.distance ?? 0 }
+      { signal: controller.signal, priority: entry.priority ?? 0 }
     ).then((tile) => {
       if (disposed || tiles.get(key) !== entry || entry.loading !== controller) return;
       if (!tile) {
@@ -5733,14 +5736,14 @@ function createCameraTiles(options) {
       while (!disposed && queue.length && performance.now() - started < buildBudgetMs) {
         let nearest = 0;
         for (let at = 1; at < queue.length; at += 1)
-          if ((queue[at].entry.distance ?? 0) < (queue[nearest].entry.distance ?? 0))
+          if ((queue[at].entry.priority ?? 0) < (queue[nearest].entry.priority ?? 0))
             nearest = at;
         const { key, entry, controller, tile, metres: tileMetres } = queue.splice(nearest, 1)[0];
         const current = () => !disposed && tiles.get(key) === entry && entry.loading === controller && !controller.signal.aborted;
         if (!current()) continue;
         let value;
         try {
-          value = await options.build(tile, tileMetres, controller.signal, entry.distance ?? 0);
+          value = await options.build(tile, tileMetres, controller.signal, entry.priority ?? 0);
         } catch {
           if (current()) {
             entry.loading = void 0;
@@ -5810,6 +5813,7 @@ function createCameraTiles(options) {
   map.on("sourcedata", onSource);
   map.on("move", onMove);
   map.on("moveend", onMoveEnd);
+  map.on("resize", onMoveEnd);
   return {
     update,
     ready() {
@@ -5864,6 +5868,7 @@ function createCameraTiles(options) {
       map.off("sourcedata", onSource);
       map.off("move", onMove);
       map.off("moveend", onMoveEnd);
+      map.off("resize", onMoveEnd);
       for (const entry of tiles.values()) {
         entry.loading?.abort();
         if (entry.pending && entry.pending !== options.empty) options.release(entry.pending);
@@ -5931,33 +5936,110 @@ function cameraFrame(callback) {
   if (typeof requestAnimationFrame === "function") requestAnimationFrame(callback);
   else setTimeout(callback, 16);
 }
-function cameraTileRing(camera, tileZoom, maxTiles) {
+function cameraTileRing(camera, tileZoom, maxTiles, viewport) {
   const reach = Math.min(
     5e3,
     Math.max(800, 1600 * 2 ** (16 - camera.zoom) * (1 + camera.pitch / 60))
   );
   const bearing = camera.bearing * Math.PI / 180;
+  const direction = [Math.sin(bearing), -Math.cos(bearing)];
   const ahead = reach * 0.35 * Math.min(1, camera.pitch / 60);
   const latitude = camera.lat + Math.cos(bearing) * ahead / 111320;
   const longitude = camera.lng + Math.sin(bearing) * ahead / (111320 * Math.cos(camera.lat * Math.PI / 180));
   const [cx, cy] = cameraTileAt(longitude, latitude, tileZoom);
-  const tileMetres = earth * Math.cos(latitude * Math.PI / 180) / 2 ** tileZoom;
+  const [ox, oy] = cameraTileAt(camera.lng, camera.lat, tileZoom);
+  const tileMetres = earth * Math.cos(camera.lat * Math.PI / 180) / 2 ** tileZoom;
+  const far = (reach + ahead) / tileMetres;
+  const along = ([x3, y2]) => (x3 - ox) * direction[0] + (y2 - oy) * direction[1];
+  const visible = viewport && clipGround(viewport, (point) => far - along(point));
   const span = Math.ceil(reach / tileMetres);
+  const left = Math.floor(Math.min(cx - span, ...visible?.map(([x3]) => x3) ?? []));
+  const right = Math.floor(Math.max(cx + span, ...visible?.map(([x3]) => x3) ?? []));
+  const top = Math.floor(Math.min(cy - span, ...visible?.map(([, y2]) => y2) ?? []));
+  const bottom = Math.floor(Math.max(cy + span, ...visible?.map(([, y2]) => y2) ?? []));
   const candidates = [];
-  for (let dx = -span; dx <= span; dx += 1)
-    for (let dy = -span; dy <= span; dy += 1) {
-      const x3 = Math.floor(cx) + dx;
-      const y2 = Math.floor(cy) + dy;
-      const distance = Math.hypot(
-        Math.max(x3, Math.min(cx, x3 + 1)) - cx,
-        Math.max(y2, Math.min(cy, y2 + 1)) - cy
-      );
-      if (distance * tileMetres <= reach) candidates.push({ x: x3, y: y2, distance });
+  for (let x3 = left; x3 <= right; x3++)
+    for (let y2 = top; y2 <= bottom; y2++) {
+      const distance = Math.hypot(Math.max(x3 - cx, 0, cx - x3 - 1), Math.max(y2 - cy, 0, cy - y2 - 1));
+      let intersection = visible ?? [];
+      for (const boundary of [
+        ([px]) => px - x3,
+        ([px]) => x3 + 1 - px,
+        ([, py]) => py - y2,
+        ([, py]) => y2 + 1 - py
+      ])
+        intersection = clipGround(intersection, boundary);
+      const near2 = Math.min(...intersection.map(along));
+      if (near2 < Infinity || distance * tileMetres <= reach)
+        candidates.push({ x: x3, y: y2, distance, near: near2 });
+    }
+  candidates.sort((a, b2) => a.near - b2.near || a.distance - b2.distance);
+  const tiles = candidates.slice(0, maxTiles).map(({ x: x3, y: y2, distance }) => ({ x: x3, y: y2, distance }));
+  const omitted = candidates.slice(tiles.length);
+  const radius = omitted.reduce(
+    (radius2, tile) => Math.min(radius2, tile.distance),
+    reach / tileMetres
+  );
+  const end = Math.min(far, ...omitted.map((tile) => tile.near));
+  const near = visible?.length ? Math.min(...visible.map(along)) : end;
+  return {
+    tiles,
+    centre: [cx, cy],
+    radius,
+    tileMetres,
+    ...visible?.length ? {
+      fade: {
+        origin: [ox, oy],
+        start: end - Math.max(0.25, (end - near) * 0.2),
+        end
+      }
+    } : {}
+  };
+}
+function cameraViewport(map, zoom) {
+  const canvas = map.getCanvas?.();
+  const width = canvas?.clientWidth ?? 0;
+  const height = canvas?.clientHeight ?? 0;
+  if (!map.unproject || width <= 0 || height <= 0) return void 0;
+  const origin = cameraTileAt(map.getCenter().lng, map.getCenter().lat, zoom)[0];
+  const world = 2 ** zoom;
+  const pointAt = (x3, y2) => {
+    const location = map.unproject([x3, y2]);
+    const [tx, ty] = cameraTileAt(location.lng, location.lat, zoom);
+    return [tx + Math.round((origin - tx) / world) * world, ty];
+  };
+  const bearing = map.getBearing() * Math.PI / 180;
+  const points = [];
+  for (const x3 of [0, width]) {
+    const bottom = pointAt(x3, height);
+    const middle = pointAt(x3, height / 2);
+    let top = pointAt(x3, 0);
+    if ((top[0] - middle[0]) * Math.sin(bearing) - (top[1] - middle[1]) * Math.cos(bearing) <= 0) {
+      const stretch = world / Math.hypot(middle[0] - bottom[0], middle[1] - bottom[1]);
+      top = [
+        middle[0] + (middle[0] - bottom[0]) * stretch,
+        middle[1] + (middle[1] - bottom[1]) * stretch
+      ];
+    }
+    points.push(bottom, top);
+  }
+  if (points.some((point) => point.some((value) => !Number.isFinite(value)))) return void 0;
+  return [points[0], points[1], points[3], points[2]];
+}
+function clipGround(points, distance) {
+  const result = [];
+  for (let i2 = 0; i2 < points.length; i2++) {
+    const a = points[i2];
+    const b2 = points[(i2 + 1) % points.length];
+    const da = distance(a);
+    const db = distance(b2);
+    if (da >= 0) result.push([a[0], a[1]]);
+    if (da < 0 !== db < 0) {
+      const t = da / (da - db);
+      result.push([a[0] + (b2[0] - a[0]) * t, a[1] + (b2[1] - a[1]) * t]);
     }
-  candidates.sort((a, b2) => a.distance - b2.distance);
-  const tiles = candidates.slice(0, maxTiles);
-  const radius = Math.min(reach / tileMetres, candidates[tiles.length]?.distance ?? Infinity);
-  return { tiles, centre: [cx, cy], radius, tileMetres };
+  }
+  return result;
 }
 function cameraTileAt(longitude, latitude, zoom) {
   const phi = Math.min(85.05, Math.max(-85.05, latitude)) * Math.PI / 180;
@@ -8505,6 +8587,7 @@ var tileflowSkyHazeReachFloor = 3;
 var nineTenths = 0.8042;
 function tileflowSkyReachDepth(view, reach) {
   const sin = Math.sin(radians(view.pitch));
+  if (reach.forward !== void 0) return 1 + reach.forward * sin;
   const cos = Math.cos(radians(view.pitch));
   const back = -sin;
   const across = Math.atan(view.aspect * Math.tan(view.fov / 2));
@@ -8577,7 +8660,8 @@ function reachOf(map, distance) {
   return {
     ahead: (east * Math.sin(bearing) + north * Math.cos(bearing)) / metres,
     across: (east * Math.cos(bearing) - north * Math.sin(bearing)) / metres,
-    radius: reach.radius / metres
+    radius: reach.radius / metres,
+    ...reach.forward === void 0 ? {} : { forward: reach.forward / metres }
   };
 }
 function fovOf(map, args) {
@@ -9112,6 +9196,7 @@ function createTileflowBuildings3D(options) {
         context.uniform2f(program.uniforms.u_offset, ...offset);
         context.uniform4f(program.uniforms.u_ring ?? null, ...ring);
         context.uniform2f(program.uniforms.u_ring_ahead ?? null, ...ahead);
+        context.uniform1i(program.uniforms.u_ring_directional ?? null, camera.ring()?.fade ? 1 : 0);
         const buffers = value.gl;
         context.bindVertexArray(buffers.vao);
         for (const range of ranges)
@@ -9394,13 +9479,21 @@ function createTileflowBuildings3D(options) {
     return {
       lng: ring.centre[0] / n * 360 - 180,
       lat: Math.atan(Math.sinh(Math.PI * (1 - 2 * ring.centre[1] / n))) * 180 / Math.PI,
-      radius: ring.radius * ring.tileMetres
+      radius: ring.radius * ring.tileMetres,
+      ...ring.fade ? { forward: ring.fade.end * ring.tileMetres } : {}
     };
   }
   function ringIn(x3, y2) {
     const ring = camera.ring();
     if (!ring) return [0, 0, 0, 0];
     const extent4 = tileflowBuildingExtent;
+    if (ring.fade)
+      return [
+        (ring.fade.origin[0] - x3) * extent4,
+        (ring.fade.origin[1] - y2) * extent4,
+        ring.fade.start * extent4,
+        ring.fade.end * extent4
+      ];
     const cx = (ring.centre[0] - x3) * extent4;
     const cy = (ring.centre[1] - y2) * extent4;
     const inner = ring.radius * extent4 * 0.8;
@@ -9414,6 +9507,8 @@ function createTileflowBuildings3D(options) {
     return [Math.sin(bearing), -Math.cos(bearing)];
   }
   function insideRing(ring, left, top, right, bottom) {
+    if (camera.ring()?.fade)
+      return Math.min(ahead[0] * (left - ring[0]), ahead[0] * (right - ring[0])) + Math.min(ahead[1] * (top - ring[1]), ahead[1] * (bottom - ring[1])) < ring[3];
     const radius = ring[3];
     if (!(radius > 0)) return true;
     const cx = ring[0];
@@ -9631,6 +9726,7 @@ function createTileflowBuildings3D(options) {
         );
         context.uniform4f(u.u_ring ?? null, ...ringIn(x3, y2));
         context.uniform2f(u.u_ring_ahead ?? null, ...ahead);
+        context.uniform1i(u.u_ring_directional ?? null, camera.ring()?.fade ? 1 : 0);
         const palette = themes ? paletteOf(context, entry, themes.themes) : void 0;
         context.uniform1f(u.u_palette_on, palette ? 1 : 0);
         context.activeTexture(context.TEXTURE1);

package/dist/browser.js

@@ -1224,7 +1224,7 @@ var init_meshopt_decoder = __esm({
   }
 });
 
-// ../../node_modules/.pnpm/maplibre-contour@0.1.0/node_modules/maplibre-contour/dist/index.mjs
+// ../../node_modules/.pnpm/maplibre-contour@0.1.1/node_modules/maplibre-contour/dist/index.mjs
 var dist_exports = {};
 __export(dist_exports, {
   default: () => mlcontour$1
@@ -1248,7 +1248,7 @@ function define(_2, chunk) {
 }
 var shared3, worker, mlcontour, mlcontour$1;
 var init_dist = __esm({
-  "../../node_modules/.pnpm/maplibre-contour@0.1.0/node_modules/maplibre-contour/dist/index.mjs"() {
+  "../../node_modules/.pnpm/maplibre-contour@0.1.1/node_modules/maplibre-contour/dist/index.mjs"() {
     "use strict";
     define(["exports"], (function(exports) {
       "use strict";
@@ -1596,13 +1596,10 @@ var init_dist = __esm({
         });
       }
       function prepareContourTile(promise) {
-        return promise.then(({ arrayBuffer }) => {
-          const clone = copy(arrayBuffer);
-          return {
-            arrayBuffer: clone,
-            transferrables: [clone]
-          };
-        });
+        return promise.then(({ arrayBuffer }) => ({
+          arrayBuffer,
+          transferrables: [arrayBuffer]
+        }));
       }
       let supportsOffscreenCanvas = null;
       function offscreenCanvasSupported() {
@@ -1665,6 +1662,10 @@ var init_dist = __esm({
         var _a2;
         return Boolean((_a2 = abortController === null || abortController === void 0 ? void 0 : abortController.signal) === null || _a2 === void 0 ? void 0 : _a2.aborted);
       }
+      function parseUrl(url) {
+        const [, z2, x3, y2] = /\/\/(\d+)\/(\d+)\/(\d+)/.exec(url) || [];
+        return [Number(z2), Number(x3), Number(y2)];
+      }
       let num = 0;
       class AsyncCache {
         constructor(maxSize = 100) {
@@ -2644,9 +2645,7 @@ var init_dist = __esm({
       function writeLayer(layer, pbf) {
         if (!pbf)
           throw new Error("pbf undefined");
-        pbf.writeVarintField(15, 2);
         pbf.writeStringField(1, layer.id || "");
-        pbf.writeVarintField(5, layer.extent || 4096);
         const context = {
           keys: [],
           values: [],
@@ -2663,6 +2662,8 @@ var init_dist = __esm({
         for (const value of context.values) {
           pbf.writeMessage(4, writeValue, value);
         }
+        pbf.writeVarintField(5, layer.extent || 4096);
+        pbf.writeVarintField(15, 2);
       }
       function writeFeature(context, pbf) {
         const feature = context.feature;
@@ -2911,7 +2912,7 @@ var init_dist = __esm({
         }
         fetchDem(z2, x3, y2, options, abortController, timer) {
           return __awaiter(this, void 0, void 0, function* () {
-            const zoom = Math.min(z2 - (options.overzoom || 0), this.maxzoom);
+            const zoom = Math.max(0, Math.min(z2 - (options.overzoom || 0), this.maxzoom));
             const subZ = z2 - zoom;
             const div = 1 << subZ;
             const newX = Math.floor(x3 / div);
@@ -2926,7 +2927,7 @@ var init_dist = __esm({
             return Promise.resolve({ arrayBuffer: new ArrayBuffer(0) });
           }
           const key = [z2, x3, y2, encodeIndividualOptions(options)].join("/");
-          return this.contourCache.get(key, (_2, childAbortController) => __awaiter(this, void 0, void 0, function* () {
+          const cached = this.contourCache.get(key, (_2, childAbortController) => __awaiter(this, void 0, void 0, function* () {
             const max2 = 1 << z2;
             const neighborPromises = [];
             for (let iy = y2 - 1; iy <= y2 + 1; iy++) {
@@ -2969,8 +2970,11 @@ var init_dist = __esm({
               }
             });
             mark === null || mark === void 0 ? void 0 : mark();
-            return { arrayBuffer: result.buffer };
+            return { arrayBuffer: result.slice().buffer };
           }), parentAbortController);
+          return cached.then(({ arrayBuffer }) => ({
+            arrayBuffer: copy(arrayBuffer)
+          }));
         }
       }
       let id = 0;
@@ -3054,13 +3058,14 @@ var init_dist = __esm({
       exports.L = LocalDemManager;
       exports.T = Timer;
       exports._ = __awaiter;
-      exports.a = decodeOptions;
-      exports.b = generateIsolines;
+      exports.a = parseUrl;
+      exports.b = decodeOptions;
       exports.c = decodeParsedImage;
       exports.d = defaultDecoder;
       exports.e = encodeOptions;
-      exports.f = prepareContourTile;
+      exports.f = generateIsolines;
       exports.g = getOptionsForZoom;
+      exports.h = prepareContourTile;
       exports.p = prepareDemTile;
     }));
     define(["./shared"], (function(actor) {
@@ -3083,7 +3088,7 @@ var init_dist = __esm({
           };
           this.fetchContourTile = (managerId, z2, x3, y2, options, abortController, timer) => {
             var _a2;
-            return actor.f(((_a2 = this.managers[managerId]) === null || _a2 === void 0 ? void 0 : _a2.fetchContourTile(z2, x3, y2, options, abortController, timer)) || noManager(managerId));
+            return actor.h(((_a2 = this.managers[managerId]) === null || _a2 === void 0 ? void 0 : _a2.fetchContourTile(z2, x3, y2, options, abortController, timer)) || noManager(managerId));
           };
         }
       }
@@ -3152,7 +3157,7 @@ var init_dist = __esm({
             maplibre.addProtocol(this.contourProtocolId, this.contourProtocol);
           };
           this.sharedDemProtocolV4 = (request, abortController) => actor._(this, void 0, void 0, function* () {
-            const [z2, x3, y2] = this.parseUrl(request.url);
+            const [z2, x3, y2] = actor.a(request.url);
             const timer = new actor.T("main");
             let timing;
             try {
@@ -3175,8 +3180,8 @@ var init_dist = __esm({
             const timer = new actor.T("main");
             let timing;
             try {
-              const [z2, x3, y2] = this.parseUrl(request.url);
-              const options = actor.a(request.url);
+              const [z2, x3, y2] = actor.a(request.url);
+              const options = actor.b(request.url);
               const data = yield this.manager.fetchContourTile(z2, x3, y2, actor.g(options, z2), abortController, timer);
               timing = timer.finish(request.url);
               return { data: data.arrayBuffer };
@@ -3213,13 +3218,9 @@ var init_dist = __esm({
         getDemTile(z2, x3, y2, abortController) {
           return this.manager.fetchAndParseTile(z2, x3, y2, abortController || new AbortController());
         }
-        parseUrl(url) {
-          const [, z2, x3, y2] = /\/\/(\d+)\/(\d+)\/(\d+)/.exec(url) || [];
-          return [Number(z2), Number(x3), Number(y2)];
-        }
       }
       const exported = {
-        generateIsolines: actor.b,
+        generateIsolines: actor.f,
         DemSource,
         HeightTile: actor.H,
         LocalDemManager: actor.L,
@@ -5324,6 +5325,7 @@ var tileflowSkyHazeReachFloor = 3;
 var nineTenths = 0.8042;
 function tileflowSkyReachDepth(view, reach) {
   const sin = Math.sin(radians(view.pitch));
+  if (reach.forward !== void 0) return 1 + reach.forward * sin;
   const cos = Math.cos(radians(view.pitch));
   const back = -sin;
   const across = Math.atan(view.aspect * Math.tan(view.fov / 2));
@@ -5397,7 +5399,8 @@ function reachOf(map, distance) {
   return {
     ahead: (east * Math.sin(bearing) + north * Math.cos(bearing)) / metres,
     across: (east * Math.cos(bearing) - north * Math.sin(bearing)) / metres,
-    radius: reach.radius / metres
+    radius: reach.radius / metres,
+    ...reach.forward === void 0 ? {} : { forward: reach.forward / metres }
   };
 }
 function fovOf(map, args) {
@@ -8427,11 +8430,11 @@ var growth = `
 uniform float u_scale;
 uniform vec2 u_offset; // this tile's corner from the scene's origin, in tile units
 uniform float u_metres; // metres per tile unit
-// The disc the city's tiles cover whole, in this tile's units: its centre, where heights start to
-// ease down and where they are gone; none while its radius is 0. And the view's direction along the
-// ground, in this tile's axes.
+// In this tile's units: origin and start/end of the fade along the view, or centre and radii of the
+// fallback covered disc. The direction is along the ground in this tile's axes.
 uniform vec4 u_ring;
 uniform vec2 u_ring_ahead;
+uniform bool u_ring_directional;
 
 float progressOf() {
   return clamp(u_scale * 1.25 - a_wave.x * 0.25, 0.0, 1.0);
@@ -8443,9 +8446,11 @@ float elevationOf(float own, float top, float p) {
 }
 
 // Buildings sink into the ground over the last stretch of the city's reach, so it ends without an
-// edge of cut-off blocks. Only its far side does: where the tile limit holds the ring short, the
-// buildings round the camera, nearer than its centre, keep standing.
+// edge of cut-off blocks. The view-aligned fade leaves the entire near width standing; the legacy
+// disc fallback also exempts its near side.
 float reachOf(vec2 position) {
+  if (u_ring_directional)
+    return 1.0 - smoothstep(u_ring.z, u_ring.w, dot(position - u_ring.xy, u_ring_ahead));
   if (u_ring.w <= 0.0) return 1.0;
   vec2 from = position - u_ring.xy;
   float far = smoothstep(0.0, u_ring.w - u_ring.z, dot(from, u_ring_ahead));
@@ -11624,7 +11629,8 @@ function createCameraTiles(options) {
     const chosen = cameraTileRing(
       { ...centre, zoom: currentZoom, pitch: map.getPitch(), bearing: map.getBearing() },
       zoom,
-      options.maxTiles
+      options.maxTiles,
+      cameraViewport(map, zoom)
     );
     ring = chosen;
     wanted = chosen.tiles.map(({ x: x3, y: y2 }) => `${x3}/${y2}`);
@@ -11636,7 +11642,7 @@ function createCameraTiles(options) {
       return;
     }
     const now = performance.now();
-    for (const { x: x3, y: y2, distance } of chosen.tiles) {
+    for (const [priority, { x: x3, y: y2 }] of chosen.tiles.entries()) {
       const key = `${x3}/${y2}`;
       let entry = tiles.get(key);
       if (!entry) {
@@ -11644,7 +11650,7 @@ function createCameraTiles(options) {
         tiles.set(key, entry);
       }
       entry.used = now;
-      entry.distance = distance;
+      entry.priority = priority;
       if ((!entry.value && !entry.pending || entry.retryAt !== void 0) && !entry.loading && (entry.retryAt ?? 0) <= now)
         load(source, key, entry, chosen.tileMetres);
     }
@@ -11657,7 +11663,7 @@ function createCameraTiles(options) {
     entry.retryAt = void 0;
     source.read(
       { z: zoom, x: entry.x, y: entry.y },
-      { signal: controller.signal, priority: entry.distance ?? 0 }
+      { signal: controller.signal, priority: entry.priority ?? 0 }
     ).then((tile) => {
       if (disposed || tiles.get(key) !== entry || entry.loading !== controller) return;
       if (!tile) {
@@ -11692,14 +11698,14 @@ function createCameraTiles(options) {
       while (!disposed && queue.length && performance.now() - started < buildBudgetMs) {
         let nearest = 0;
         for (let at = 1; at < queue.length; at += 1)
-          if ((queue[at].entry.distance ?? 0) < (queue[nearest].entry.distance ?? 0))
+          if ((queue[at].entry.priority ?? 0) < (queue[nearest].entry.priority ?? 0))
             nearest = at;
         const { key, entry, controller, tile, metres: tileMetres } = queue.splice(nearest, 1)[0];
         const current = () => !disposed && tiles.get(key) === entry && entry.loading === controller && !controller.signal.aborted;
         if (!current()) continue;
         let value;
         try {
-          value = await options.build(tile, tileMetres, controller.signal, entry.distance ?? 0);
+          value = await options.build(tile, tileMetres, controller.signal, entry.priority ?? 0);
         } catch {
           if (current()) {
             entry.loading = void 0;
@@ -11769,6 +11775,7 @@ function createCameraTiles(options) {
   map.on("sourcedata", onSource);
   map.on("move", onMove);
   map.on("moveend", onMoveEnd);
+  map.on("resize", onMoveEnd);
   return {
     update,
     ready() {
@@ -11823,6 +11830,7 @@ function createCameraTiles(options) {
       map.off("sourcedata", onSource);
       map.off("move", onMove);
       map.off("moveend", onMoveEnd);
+      map.off("resize", onMoveEnd);
       for (const entry of tiles.values()) {
         entry.loading?.abort();
         if (entry.pending && entry.pending !== options.empty) options.release(entry.pending);
@@ -11890,33 +11898,110 @@ function cameraFrame(callback) {
   if (typeof requestAnimationFrame === "function") requestAnimationFrame(callback);
   else setTimeout(callback, 16);
 }
-function cameraTileRing(camera, tileZoom, maxTiles) {
+function cameraTileRing(camera, tileZoom, maxTiles, viewport) {
   const reach = Math.min(
     5e3,
     Math.max(800, 1600 * 2 ** (16 - camera.zoom) * (1 + camera.pitch / 60))
   );
   const bearing = camera.bearing * Math.PI / 180;
+  const direction = [Math.sin(bearing), -Math.cos(bearing)];
   const ahead = reach * 0.35 * Math.min(1, camera.pitch / 60);
   const latitude = camera.lat + Math.cos(bearing) * ahead / 111320;
   const longitude = camera.lng + Math.sin(bearing) * ahead / (111320 * Math.cos(camera.lat * Math.PI / 180));
   const [cx, cy] = cameraTileAt(longitude, latitude, tileZoom);
-  const tileMetres = earth * Math.cos(latitude * Math.PI / 180) / 2 ** tileZoom;
+  const [ox, oy] = cameraTileAt(camera.lng, camera.lat, tileZoom);
+  const tileMetres = earth * Math.cos(camera.lat * Math.PI / 180) / 2 ** tileZoom;
+  const far = (reach + ahead) / tileMetres;
+  const along = ([x3, y2]) => (x3 - ox) * direction[0] + (y2 - oy) * direction[1];
+  const visible = viewport && clipGround(viewport, (point) => far - along(point));
   const span = Math.ceil(reach / tileMetres);
+  const left = Math.floor(Math.min(cx - span, ...visible?.map(([x3]) => x3) ?? []));
+  const right = Math.floor(Math.max(cx + span, ...visible?.map(([x3]) => x3) ?? []));
+  const top = Math.floor(Math.min(cy - span, ...visible?.map(([, y2]) => y2) ?? []));
+  const bottom = Math.floor(Math.max(cy + span, ...visible?.map(([, y2]) => y2) ?? []));
   const candidates = [];
-  for (let dx = -span; dx <= span; dx += 1)
-    for (let dy = -span; dy <= span; dy += 1) {
-      const x3 = Math.floor(cx) + dx;
-      const y2 = Math.floor(cy) + dy;
-      const distance = Math.hypot(
-        Math.max(x3, Math.min(cx, x3 + 1)) - cx,
-        Math.max(y2, Math.min(cy, y2 + 1)) - cy
-      );
-      if (distance * tileMetres <= reach) candidates.push({ x: x3, y: y2, distance });
+  for (let x3 = left; x3 <= right; x3++)
+    for (let y2 = top; y2 <= bottom; y2++) {
+      const distance = Math.hypot(Math.max(x3 - cx, 0, cx - x3 - 1), Math.max(y2 - cy, 0, cy - y2 - 1));
+      let intersection = visible ?? [];
+      for (const boundary of [
+        ([px]) => px - x3,
+        ([px]) => x3 + 1 - px,
+        ([, py]) => py - y2,
+        ([, py]) => y2 + 1 - py
+      ])
+        intersection = clipGround(intersection, boundary);
+      const near2 = Math.min(...intersection.map(along));
+      if (near2 < Infinity || distance * tileMetres <= reach)
+        candidates.push({ x: x3, y: y2, distance, near: near2 });
+    }
+  candidates.sort((a, b2) => a.near - b2.near || a.distance - b2.distance);
+  const tiles = candidates.slice(0, maxTiles).map(({ x: x3, y: y2, distance }) => ({ x: x3, y: y2, distance }));
+  const omitted = candidates.slice(tiles.length);
+  const radius = omitted.reduce(
+    (radius2, tile) => Math.min(radius2, tile.distance),
+    reach / tileMetres
+  );
+  const end = Math.min(far, ...omitted.map((tile) => tile.near));
+  const near = visible?.length ? Math.min(...visible.map(along)) : end;
+  return {
+    tiles,
+    centre: [cx, cy],
+    radius,
+    tileMetres,
+    ...visible?.length ? {
+      fade: {
+        origin: [ox, oy],
+        start: end - Math.max(0.25, (end - near) * 0.2),
+        end
+      }
+    } : {}
+  };
+}
+function cameraViewport(map, zoom) {
+  const canvas = map.getCanvas?.();
+  const width = canvas?.clientWidth ?? 0;
+  const height = canvas?.clientHeight ?? 0;
+  if (!map.unproject || width <= 0 || height <= 0) return void 0;
+  const origin = cameraTileAt(map.getCenter().lng, map.getCenter().lat, zoom)[0];
+  const world = 2 ** zoom;
+  const pointAt = (x3, y2) => {
+    const location = map.unproject([x3, y2]);
+    const [tx, ty] = cameraTileAt(location.lng, location.lat, zoom);
+    return [tx + Math.round((origin - tx) / world) * world, ty];
+  };
+  const bearing = map.getBearing() * Math.PI / 180;
+  const points = [];
+  for (const x3 of [0, width]) {
+    const bottom = pointAt(x3, height);
+    const middle = pointAt(x3, height / 2);
+    let top = pointAt(x3, 0);
+    if ((top[0] - middle[0]) * Math.sin(bearing) - (top[1] - middle[1]) * Math.cos(bearing) <= 0) {
+      const stretch = world / Math.hypot(middle[0] - bottom[0], middle[1] - bottom[1]);
+      top = [
+        middle[0] + (middle[0] - bottom[0]) * stretch,
+        middle[1] + (middle[1] - bottom[1]) * stretch
+      ];
+    }
+    points.push(bottom, top);
+  }
+  if (points.some((point) => point.some((value) => !Number.isFinite(value)))) return void 0;
+  return [points[0], points[1], points[3], points[2]];
+}
+function clipGround(points, distance) {
+  const result = [];
+  for (let i2 = 0; i2 < points.length; i2++) {
+    const a = points[i2];
+    const b2 = points[(i2 + 1) % points.length];
+    const da = distance(a);
+    const db = distance(b2);
+    if (da >= 0) result.push([a[0], a[1]]);
+    if (da < 0 !== db < 0) {
+      const t = da / (da - db);
+      result.push([a[0] + (b2[0] - a[0]) * t, a[1] + (b2[1] - a[1]) * t]);
     }
-  candidates.sort((a, b2) => a.distance - b2.distance);
-  const tiles = candidates.slice(0, maxTiles);
-  const radius = Math.min(reach / tileMetres, candidates[tiles.length]?.distance ?? Infinity);
-  return { tiles, centre: [cx, cy], radius, tileMetres };
+  }
+  return result;
 }
 function cameraTileAt(longitude, latitude, zoom) {
   const phi = Math.min(85.05, Math.max(-85.05, latitude)) * Math.PI / 180;
@@ -14447,6 +14532,7 @@ function createTileflowBuildings3D(options) {
         context.uniform2f(program.uniforms.u_offset, ...offset);
         context.uniform4f(program.uniforms.u_ring ?? null, ...ring);
         context.uniform2f(program.uniforms.u_ring_ahead ?? null, ...ahead);
+        context.uniform1i(program.uniforms.u_ring_directional ?? null, camera.ring()?.fade ? 1 : 0);
         const buffers = value.gl;
         context.bindVertexArray(buffers.vao);
         for (const range of ranges)
@@ -14729,13 +14815,21 @@ function createTileflowBuildings3D(options) {
     return {
       lng: ring.centre[0] / n * 360 - 180,
       lat: Math.atan(Math.sinh(Math.PI * (1 - 2 * ring.centre[1] / n))) * 180 / Math.PI,
-      radius: ring.radius * ring.tileMetres
+      radius: ring.radius * ring.tileMetres,
+      ...ring.fade ? { forward: ring.fade.end * ring.tileMetres } : {}
     };
   }
   function ringIn(x3, y2) {
     const ring = camera.ring();
     if (!ring) return [0, 0, 0, 0];
     const extent5 = tileflowBuildingExtent;
+    if (ring.fade)
+      return [
+        (ring.fade.origin[0] - x3) * extent5,
+        (ring.fade.origin[1] - y2) * extent5,
+        ring.fade.start * extent5,
+        ring.fade.end * extent5
+      ];
     const cx = (ring.centre[0] - x3) * extent5;
     const cy = (ring.centre[1] - y2) * extent5;
     const inner = ring.radius * extent5 * 0.8;
@@ -14749,6 +14843,8 @@ function createTileflowBuildings3D(options) {
     return [Math.sin(bearing), -Math.cos(bearing)];
   }
   function insideRing2(ring, left, top, right, bottom) {
+    if (camera.ring()?.fade)
+      return Math.min(ahead[0] * (left - ring[0]), ahead[0] * (right - ring[0])) + Math.min(ahead[1] * (top - ring[1]), ahead[1] * (bottom - ring[1])) < ring[3];
     const radius = ring[3];
     if (!(radius > 0)) return true;
     const cx = ring[0];
@@ -14966,6 +15062,7 @@ function createTileflowBuildings3D(options) {
         );
         context.uniform4f(u.u_ring ?? null, ...ringIn(x3, y2));
         context.uniform2f(u.u_ring_ahead ?? null, ...ahead);
+        context.uniform1i(u.u_ring_directional ?? null, camera.ring()?.fade ? 1 : 0);
         const palette = themes ? paletteOf(context, entry, themes.themes) : void 0;
         context.uniform1f(u.u_palette_on, palette ? 1 : 0);
         context.activeTexture(context.TEXTURE1);
@@ -20361,11 +20458,11 @@ async function loadPinnedMaplibreContour() {
 }
 function resolveMaplibreContourLibrary(module) {
   if (!module || typeof module !== "object") {
-    throw new Error("maplibre-contour 0.1.0 did not expose its browser module.");
+    throw new Error("maplibre-contour 0.1.1 did not expose its browser module.");
   }
   const library = module.default;
   if (!library || typeof library !== "object" || typeof library.DemSource !== "function") {
-    throw new Error("maplibre-contour 0.1.0 did not expose DemSource.");
+    throw new Error("maplibre-contour 0.1.1 did not expose DemSource.");
   }
   return library;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tileflow/core",
-  "version": "0.1.0-alpha.43",
+  "version": "0.1.0-alpha.44",
   "license": "Apache-2.0",
   "description": "Typed Tileflow config and MapLibre style compiler.",
   "type": "module",
@@ -87,7 +87,7 @@
   "devDependencies": {
     "@mapbox/vector-tile": "3.0.0",
     "earcut": "3.2.4",
-    "maplibre-contour": "0.1.0",
+    "maplibre-contour": "0.1.1",
     "meshoptimizer": "1.3.0",
     "pbf": "5.1.2",
     "pmtiles": "4.5.0",