@tangram.gl/basemap-layers 0.0.0-stage → 0.0.0

package/src/bidi.ts

@@ -0,0 +1,199 @@
+// tangram-layers
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+// deck.gl-community
+// SPDX-License-Identifier: MIT AND BSD-3-Clause
+// Copyright (c) vis.gl contributors
+// Copyright (c) 2023, MapLibre contributors
+
+/**
+ * @license
+ * Portions of this file are adapted from MapLibre GL JS v6.13.0, src/symbol/bidi.ts,
+ * under this license:
+ *
+ * Copyright (c) 2023, MapLibre contributors
+ *
+ * All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without modification,
+ * are permitted provided that the following conditions are met:
+ *
+ *     * Redistributions of source code must retain the above copyright notice,
+ *       this list of conditions and the following disclaimer.
+ *     * Redistributions in binary form must reproduce the above copyright notice,
+ *       this list of conditions and the following disclaimer in the documentation
+ *       and/or other materials provided with the distribution.
+ *     * Neither the name of MapLibre GL JS nor the names of its contributors
+ *       may be used to endorse or promote products derived from this software
+ *       without specific prior written permission.
+ *
+ * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+ * "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+ * LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+ * A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR
+ * CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
+ * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
+ * PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR
+ * PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF
+ * LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING
+ * NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
+ * SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+// Reordering of bidirectional text as MapLibre GL JS 6.13 does it without a right-to-left text
+// plugin, on the same Unicode Bidirectional Algorithm implementation: the bidi-js package (MIT),
+// a dependency, which holds its own Unicode data.
+import bidiFactory, {type Bidi, type BidiCharTypeName} from 'bidi-js';
+
+let bidiInstance: Bidi | null = null;
+
+/** bidi-js, built on first use: it unpacks its Unicode data when built. */
+function getBidi(): Bidi {
+  bidiInstance ||= bidiFactory();
+  return bidiInstance;
+}
+
+/** Characters that steer the bidirectional algorithm, which no font draws: dropped once used. */
+const BIDI_CONTROLS = /[؜‎‏‪-‮⁦-⁩]/;
+
+/** Character types rule L1 resets to the paragraph's direction at the end of a line. */
+const NEUTRAL_AT_END_OF_LINE = new Set<BidiCharTypeName>(['WS', 'FSI', 'LRI', 'RLI', 'PDI']);
+
+/** Character types rule L1 resets wherever they appear, with the whitespace before them. */
+const ALWAYS_RESET = new Set<BidiCharTypeName>(['S', 'B']);
+
+/** Character types that make text need reordering: right-to-left letters and overrides. */
+const RIGHT_TO_LEFT = new Set<BidiCharTypeName>(['R', 'AL', 'RLE', 'RLO', 'RLI']);
+
+/** One grapheme cluster of a line, with its embedding level. */
+type Cluster = {text: string; level: number};
+
+let graphemeSegmenter: {segment(text: string): Iterable<{segment: string}>} | null | undefined;
+
+/**
+ * Splits text into grapheme clusters, or code points where `Intl.Segmenter` is missing, so that a
+ * letter and the marks written on it move together when a right-to-left run is reversed (rule L3).
+ */
+function toGraphemes(text: string): string[] {
+  if (graphemeSegmenter === undefined) {
+    const Segmenter = (Intl as any)?.Segmenter;
+    graphemeSegmenter = Segmenter ? new Segmenter(undefined, {granularity: 'grapheme'}) : null;
+  }
+  return graphemeSegmenter
+    ? Array.from(graphemeSegmenter.segment(text), ({segment}) => segment)
+    : Array.from(text);
+}
+
+/** Whether `text` has right-to-left characters, so that it needs {@link processBidirectionalText}. */
+export function containsRightToLeftText(text: string): boolean {
+  // Latin text, the common case, skips the lookups.
+  if (!/[^\u0000-ɏ]/.test(text)) {
+    return false;
+  }
+  const bidi = getBidi();
+  for (const character of text) {
+    if (RIGHT_TO_LEFT.has(bidi.getBidiCharTypeName(character))) {
+      return true;
+    }
+  }
+  return false;
+}
+
+/** Rule L1: whitespace at the end of a line, and separators, take the paragraph's direction. */
+function resetTrailingNeutrals(clusters: Cluster[], paragraphLevel: number): void {
+  const bidi = getBidi();
+  let trailing = true;
+  for (let i = clusters.length - 1; i >= 0; i--) {
+    const type = bidi.getBidiCharTypeName(clusters[i].text[0]);
+    if (ALWAYS_RESET.has(type)) {
+      clusters[i].level = paragraphLevel;
+      trailing = true;
+    } else if (trailing && NEUTRAL_AT_END_OF_LINE.has(type)) {
+      clusters[i].level = paragraphLevel;
+    } else {
+      trailing = false;
+    }
+  }
+}
+
+/**
+ * Rule L2: from the deepest level down to the shallowest odd one, reverses every run at that level
+ * or deeper.
+ */
+function reorder(clusters: Cluster[], paragraphLevel: number): Cluster[] {
+  let highest = paragraphLevel;
+  let lowestOdd = Infinity;
+  for (const {level} of clusters) {
+    if (level > highest) highest = level;
+    if ((level | 1) < lowestOdd) lowestOdd = level | 1;
+  }
+  const ordered = clusters.slice();
+  for (let level = highest; level >= lowestOdd; level--) {
+    for (let start = 0; start < ordered.length; start++) {
+      if (ordered[start].level < level) continue;
+      let end = start;
+      while (end + 1 < ordered.length && ordered[end + 1].level >= level) end++;
+      for (let i = start, j = end; i < j; i++, j--) {
+        [ordered[i], ordered[j]] = [ordered[j], ordered[i]];
+      }
+      start = end;
+    }
+  }
+  return ordered;
+}
+
+/** Puts the code units `[start, end)` of `text` into visual order, dropping bidi controls. */
+function reorderLine(
+  text: string,
+  levels: Uint8Array,
+  paragraphLevel: number,
+  start: number,
+  end: number
+): string {
+  const bidi = getBidi();
+  const clusters: Cluster[] = [];
+  let index = start;
+  for (const cluster of toGraphemes(text.slice(start, end))) {
+    clusters.push({text: cluster, level: levels[index]});
+    index += cluster.length;
+  }
+  resetTrailingNeutrals(clusters, paragraphLevel);
+  let reordered = '';
+  for (const cluster of reorder(clusters, paragraphLevel)) {
+    if (BIDI_CONTROLS.test(cluster.text)) continue;
+    // A bracket read right to left is drawn as its mirror image.
+    reordered +=
+      cluster.level % 2 ? (bidi.getMirroredCharacter(cluster.text) ?? cluster.text) : cluster.text;
+  }
+  return reordered;
+}
+
+/**
+ * Puts text into the order it is drawn, broken into lines, as MapLibre GL JS does: the embedding
+ * levels are found for the whole label, then each line is reordered on its own. A label is broken
+ * at `lineBreakPoints` (UTF-16 code unit offsets) and wherever a paragraph ends.
+ */
+export function processBidirectionalText(text: string, lineBreakPoints: number[]): string[] {
+  const {levels, paragraphs} = getBidi().getEmbeddingLevels(text);
+  const inside = lineBreakPoints
+    .concat(paragraphs.map(paragraph => paragraph.start))
+    .filter(point => point > 0 && point < text.length);
+  const bounds = [...new Set([0, ...inside, text.length])].sort((a, b) => a - b);
+  const lines: string[] = [];
+  // The bounds and the paragraphs are both in text order, so one pass finds each line's paragraph
+  // (tile text is untrusted: a label of many short lines must not cost lines times paragraphs).
+  let paragraph = 0;
+  for (let i = 0; i + 1 < bounds.length; i++) {
+    const start = bounds[i];
+    while (paragraph < paragraphs.length && paragraphs[paragraph].end < start) {
+      paragraph++;
+    }
+    const paragraphLevel =
+      paragraph < paragraphs.length && paragraphs[paragraph].start <= start
+        ? paragraphs[paragraph].level
+        : 0;
+    lines.push(reorderLine(text, levels, paragraphLevel, start, bounds[i + 1]));
+  }
+  return lines;
+}

package/src/circle-layer.ts

@@ -0,0 +1,191 @@
+// tangram-layers
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+import {LayerExtension} from '@deck.gl/core';
+import type {Layer} from '@deck.gl/core';
+import {ScatterplotLayer} from '@deck.gl/layers';
+import {sortFeaturesByKey} from './sort-key';
+import {getStyleAccessor, withOpacity} from './style-accessor';
+import {getStylePropertyDefault} from './style-expression';
+import type {ResolvedBasemapStyleLayer as BasemapStyleLayer} from './style-resolver';
+
+const DEFAULT_RADIUS = getStylePropertyDefault('circle-radius') as number;
+const DEFAULT_COLOR = getStylePropertyDefault('circle-color') as number[];
+const DEFAULT_OPACITY = getStylePropertyDefault('circle-opacity') as number;
+const DEFAULT_STROKE_WIDTH = getStylePropertyDefault('circle-stroke-width') as number;
+const DEFAULT_STROKE_COLOR = getStylePropertyDefault('circle-stroke-color') as number[];
+const DEFAULT_STROKE_OPACITY = getStylePropertyDefault('circle-stroke-opacity') as number;
+const DEFAULT_BLUR = getStylePropertyDefault('circle-blur') as number;
+
+/**
+ * Adds `getBlur` to a `ScatterplotLayer`: per circle, the outer fraction of the circle (stroke
+ * included) that fades out, as MapLibre GL JS draws `circle-blur`. WebGL only; on WebGPU circles
+ * draw without blur.
+ */
+export class CircleBlurExtension extends LayerExtension {
+  static extensionName = 'CircleBlurExtension';
+  static defaultProps = {getBlur: {type: 'accessor', value: 0}};
+
+  initializeState(this: Layer) {
+    if (this.context.device.type === 'webgpu') {
+      return;
+    }
+    this.getAttributeManager()?.addInstanced({
+      instanceCircleBlur: {size: 1, accessor: 'getBlur', defaultValue: 0}
+    });
+  }
+
+  getShaders(this: Layer) {
+    if (this.context.device.type === 'webgpu') {
+      return {};
+    }
+    // deck.gl appends these to the layer's and other extensions' code for the same hooks.
+    return {
+      inject: {
+        'vs:#decl': 'in float instanceCircleBlur;\nout float circleBlur_blur;',
+        'vs:#main-end': 'circleBlur_blur = instanceCircleBlur;',
+        'fs:#decl': 'in float circleBlur_blur;',
+        'fs:DECKGL_FILTER_COLOR': `
+  if (circleBlur_blur > 0.0) {
+    color.a *= 1.0 - smoothstep(1.0 - circleBlur_blur, 1.0, length(geometry.uv));
+  }
+`
+      }
+    };
+  }
+}
+
+/** Shared by every blurred circle sublayer, so deck.gl does not see their extensions change. */
+const CIRCLE_BLUR_EXTENSION = new CircleBlurExtension();
+
+const pointFeatureCache = new WeakMap<any[], any[]>();
+
+function getPointFeatures(features: any[]): any[] {
+  const cached = pointFeatureCache.get(features);
+  if (cached) {
+    return cached;
+  }
+  const points = features.every(feature => feature.geometry?.type === 'Point')
+    ? features
+    : features.flatMap(feature => {
+        if (feature.geometry?.type === 'Point') {
+          return [feature];
+        }
+        if (feature.geometry?.type === 'MultiPoint') {
+          return feature.geometry.coordinates.map((position: number[]) => ({...feature, position}));
+        }
+        return [];
+      });
+  pointFeatureCache.set(features, points);
+  return points;
+}
+
+/**
+ * Draws a `circle` style layer's points (and each point of a multipoint) with MapLibre's circle
+ * paint: the stroke is drawn outside `circle-radius`. Under pitch, circles shrink with distance,
+ * as with the default `circle-pitch-scale` of `map`; `viewport` is not applied.
+ * `circle-translate-anchor` follows `circle-pitch-alignment`: the offset is screen-aligned when
+ * circles face the viewer and map-aligned when they lie on the map.
+ */
+export function createCircleSubLayer({
+  baseProps,
+  id,
+  styleLayer,
+  features,
+  zoom,
+  globe,
+  parameters
+}: {
+  baseProps: any;
+  id: string;
+  styleLayer: BasemapStyleLayer;
+  features: any[];
+  zoom: number;
+  /**
+   * On a globe, circles always face the viewer: `circle-pitch-alignment: map` is not verified
+   * there.
+   */
+  globe: boolean;
+  parameters: any;
+}) {
+  const points = getPointFeatures(features);
+  if (points.length === 0) {
+    return null;
+  }
+  const radius = getStyleAccessor(
+    styleLayer,
+    ['circle-radius', 'circle-stroke-width'],
+    zoom,
+    ([value, width]) =>
+      Math.max(0, Number(value ?? DEFAULT_RADIUS)) +
+      Math.max(0, Number(width ?? DEFAULT_STROKE_WIDTH)) / 2
+  );
+  const lineWidth = getStyleAccessor(styleLayer, ['circle-stroke-width'], zoom, ([width]) =>
+    Math.max(0, Number(width ?? DEFAULT_STROKE_WIDTH))
+  );
+  const fillColor = getStyleAccessor(
+    styleLayer,
+    ['circle-color', 'circle-opacity'],
+    zoom,
+    ([color, opacity]) => withOpacity(color ?? DEFAULT_COLOR, opacity ?? DEFAULT_OPACITY)
+  );
+  const lineColor = getStyleAccessor(
+    styleLayer,
+    ['circle-stroke-color', 'circle-stroke-opacity'],
+    zoom,
+    ([color, opacity]) =>
+      withOpacity(color ?? DEFAULT_STROKE_COLOR, opacity ?? DEFAULT_STROKE_OPACITY)
+  );
+  const blur = getStyleAccessor(styleLayer, ['circle-blur'], zoom, ([value]) =>
+    Math.min(1, Math.max(0, Number(value ?? DEFAULT_BLUR) || 0))
+  );
+  const pixelOffset = getStyleAccessor<[number, number]>(
+    styleLayer,
+    ['circle-translate'],
+    zoom,
+    ([value]) => {
+      const [x, y] = value ?? [0, 0];
+      // Scatterplot adds offsets in clip space (billboard) or common space (map), both y-up.
+      return [x, y === 0 ? 0 : -y];
+    }
+  );
+  const alignment = getStyleAccessor(styleLayer, ['circle-pitch-alignment'], zoom, ([v]) => v);
+
+  const hasBlur = styleLayer.paint?.['circle-blur'] !== undefined;
+
+  return new ScatterplotLayer({
+    ...baseProps,
+    id,
+    data: sortFeaturesByKey(points, styleLayer, 'circle-sort-key', zoom),
+    getPosition: d => d.position ?? d.geometry.coordinates,
+    getRadius: radius.value,
+    getLineWidth: lineWidth.value,
+    getFillColor: fillColor.value,
+    getLineColor: lineColor.value,
+    extensions: [...(baseProps.extensions || []), ...(hasBlur ? [CIRCLE_BLUR_EXTENSION] : [])],
+    ...(hasBlur ? {getBlur: blur.value} : {}),
+    getPixelOffset: pixelOffset.value,
+    billboard: globe || alignment.value !== 'map',
+    stroked: styleLayer.paint?.['circle-stroke-width'] !== undefined && lineWidth.value !== 0,
+    updateTriggers: {
+      getRadius: radius.updateTrigger,
+      getLineWidth: lineWidth.updateTrigger,
+      getFillColor: fillColor.updateTrigger,
+      getLineColor: lineColor.updateTrigger,
+      getBlur: hasBlur ? blur.updateTrigger : undefined,
+      getPixelOffset: pixelOffset.updateTrigger
+    },
+    radiusUnits: 'pixels',
+    lineWidthUnits: 'pixels',
+    radiusMinPixels: 0,
+    lineWidthMinPixels: 0,
+    filled: true,
+    antialiasing: true,
+    parameters
+  });
+}

package/src/fill-extrusion-lighting-extension.ts

@@ -0,0 +1,206 @@
+// tangram-layers
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+import {LayerExtension} from '@deck.gl/core';
+import type {Layer} from '@deck.gl/core';
+import type {ShaderModule} from '@luma.gl/shadertools';
+
+/** A style's `light`, evaluated at one zoom. */
+export type FillExtrusionLight = {
+  /** Whether the light turns with the map (`map`) or stays fixed on the screen (`viewport`). */
+  anchor: 'map' | 'viewport';
+  /** Radial coordinate, azimuthal angle and polar angle, in degrees, as in the style spec. */
+  position: [number, number, number];
+  /** RGB in 0-1. */
+  color: [number, number, number];
+  /** 0-1. */
+  intensity: number;
+};
+
+/** The style spec's default `light`. */
+export const DEFAULT_FILL_EXTRUSION_LIGHT: FillExtrusionLight = Object.freeze({
+  anchor: 'viewport',
+  position: Object.freeze([1.15, 210, 30]),
+  color: Object.freeze([1, 1, 1]),
+  intensity: 0.5
+}) as FillExtrusionLight;
+
+type FillExtrusionLightingProps = {
+  /** The light's direction in deck.gl's common space (x east, y north, z up), and intensity. */
+  lightDirectionIntensity: [number, number, number, number];
+  /** The light's color, and 1 when the walls darken toward the ground, else 0. */
+  lightColorGradient: [number, number, number, number];
+};
+
+/**
+ * Returns the light vector that deck.gl's normals, in common space (x east, y north, z up), are
+ * shaded against, as MapLibre GL JS shades its own. MapLibre takes the light's spherical position
+ * in tile coordinates (y south) and turns it by the map's bearing when the light is anchored to
+ * the viewport. It keeps the light's radial length, which it does not normalize. Its wall normals
+ * point into the buildings: `_generateSideFaces` takes the perpendicular `(-y, x)` of each edge
+ * of a ring that is clockwise in tile coordinates. deck.gl's point out, so the horizontal part of
+ * the light is reversed for them: x is negated, and y, negated from tile to common space, is
+ * negated back.
+ */
+export function getFillExtrusionLightDirection(
+  light: FillExtrusionLight,
+  bearing: number
+): [number, number, number] {
+  const [radius, azimuthalDegrees, polarDegrees] = light.position;
+  const azimuthal = ((azimuthalDegrees + 90) * Math.PI) / 180;
+  const polar = (polarDegrees * Math.PI) / 180;
+  let x = radius * Math.cos(azimuthal) * Math.sin(polar);
+  let y = radius * Math.sin(azimuthal) * Math.sin(polar);
+  const z = radius * Math.cos(polar);
+  if (light.anchor === 'viewport') {
+    const angle = (bearing * Math.PI) / 180;
+    const cos = Math.cos(angle);
+    const sin = Math.sin(angle);
+    [x, y] = [cos * x - sin * y, sin * x + cos * y];
+  }
+  return [-x, y, z];
+}
+
+const UNIFORMS = /* glsl */ `\
+layout(std140) uniform fillExtrusionLightingUniforms {
+  vec4 lightDirectionIntensity;
+  vec4 lightColorGradient;
+} fillExtrusionLighting;
+`;
+
+/**
+ * MapLibre GL JS's `fill-extrusion` shading (`fill_extrusion.vertex.glsl`): a directional light
+ * whose strength rises with the color's darkness, a small ambient term, and walls that darken
+ * toward the ground when `fill-extrusion-vertical-gradient` is on. `t` is 1 at the top of a wall
+ * and 0 at its bottom; `base` and `height` are the extrusion's, in meters.
+ */
+const SHADE = /* glsl */ `\
+vec3 fillExtrusionLighting_shade(vec3 color, vec3 normal, bool isWall, float t, float base, float height) {
+  vec3 lightDirection = fillExtrusionLighting.lightDirectionIntensity.xyz;
+  float intensity = fillExtrusionLighting.lightDirectionIntensity.w;
+  vec3 lightColor = fillExtrusionLighting.lightColorGradient.rgb;
+  float verticalGradient = fillExtrusionLighting.lightColorGradient.a;
+
+  float colorValue = color.r * 0.2126 + color.g * 0.7152 + color.b * 0.0722;
+  color += vec3(0.03);
+  float directional = clamp(dot(normal, lightDirection), 0.0, 1.0);
+  directional = mix(1.0 - intensity, max(1.0 - colorValue + intensity, 1.0), directional);
+  if (isWall) {
+    float gradient = clamp(
+      (t + max(0.0, base)) * pow(max(0.0, height) / 150.0, 0.5),
+      mix(0.7, 0.98, 1.0 - intensity),
+      1.0
+    );
+    directional *= (1.0 - verticalGradient) + verticalGradient * gradient;
+  }
+  return clamp(color * directional * lightColor, mix(vec3(0.0), vec3(0.3), 1.0 - lightColor), vec3(1.0));
+}
+`;
+
+const fillExtrusionLighting: ShaderModule<FillExtrusionLightingProps> = {
+  name: 'fillExtrusionLighting',
+  inject: {
+    'vs:#decl': `${UNIFORMS}${SHADE}
+bool fillExtrusionLighting_isWall;
+float fillExtrusionLighting_t;
+float fillExtrusionLighting_base;
+float fillExtrusionLighting_height;
+`,
+    // The attributes are declared in the layer's own shaders, which only `main` follows.
+    'vs:#main-start': /* glsl */ `
+#ifdef IS_SIDE_VERTEX
+  fillExtrusionLighting_isWall = true;
+  fillExtrusionLighting_t = positions.y;
+#else
+  fillExtrusionLighting_isWall = false;
+  fillExtrusionLighting_t = 1.0;
+#endif
+  // Polygons are raised to fill-extrusion-base, and extruded from there by the rest of the height.
+  fillExtrusionLighting_base = vertexPositions.z;
+  fillExtrusionLighting_height = vertexPositions.z + elevations;
+`,
+    // The layer is drawn unlit (see `draw`), so color is the extrusion's own.
+    'vs:DECKGL_FILTER_COLOR': /* glsl */ `
+  // The light is placed relative to the ground under the building: east, north and up. On a
+  // globe, deck.gl turns a roof's normal into globe space (project_normal), but leaves the walls
+  // of longitude/latitude polygons in east and north (project_offset_normal). A roof faces up.
+  vec3 fillExtrusionLighting_normal = geometry.normal;
+  if (project.projectionMode == PROJECTION_MODE_GLOBE && !fillExtrusionLighting_isWall) {
+    fillExtrusionLighting_normal = vec3(0.0, 0.0, 1.0);
+  }
+  color.rgb = fillExtrusionLighting_shade(
+    color.rgb,
+    fillExtrusionLighting_normal,
+    fillExtrusionLighting_isWall,
+    fillExtrusionLighting_t,
+    fillExtrusionLighting_base,
+    fillExtrusionLighting_height
+  );
+`
+  },
+  uniformTypes: {lightDirectionIntensity: 'vec4<f32>', lightColorGradient: 'vec4<f32>'}
+};
+
+/**
+ * The material the extension draws with: deck.gl's lighting leaves the color as it is, for the
+ * extension to shade.
+ */
+const UNLIT_MATERIAL = {unlit: true};
+
+function isExtrudedPolygonLayer(layer: Layer): boolean {
+  const state = layer.state as Record<string, unknown> | undefined;
+  return (
+    layer.context.device.type !== 'webgpu' &&
+    Boolean(state && 'polygonTesselator' in state && (layer.props as any).extruded)
+  );
+}
+
+/**
+ * Shades the extruded `SolidPolygonLayer`s of a layer as MapLibre GL JS shades `fill-extrusion`,
+ * from the style's `light` (`fillExtrusionLight`) and `fill-extrusion-vertical-gradient`
+ * (`fillExtrusionVerticalGradient`), instead of with deck.gl's lights, which it turns off for the
+ * layer at every draw. A light anchored to the viewport turns with the viewport's bearing, which is
+ * read at every draw. On a globe, the light is placed relative to
+ * the ground under each building. Polygons must lie at `fill-extrusion-base` and be extruded by
+ * the rest of the height. WebGL only: on WebGPU the extension adds no shader code, and buildings
+ * keep deck.gl's lights.
+ */
+export class FillExtrusionLightingExtension extends LayerExtension {
+  static extensionName = 'FillExtrusionLightingExtension';
+  static defaultProps = {
+    fillExtrusionLight: {type: 'object', value: DEFAULT_FILL_EXTRUSION_LIGHT},
+    fillExtrusionVerticalGradient: true
+  };
+
+  isEnabled(layer: Layer): boolean {
+    return isExtrudedPolygonLayer(layer);
+  }
+
+  getShaders(this: Layer, extension: this): any {
+    return extension.isEnabled(this) ? {modules: [fillExtrusionLighting]} : null;
+  }
+
+  draw(this: Layer<any>, params: any, extension: this) {
+    if (!extension.isEnabled(this)) {
+      return;
+    }
+    const light: FillExtrusionLight = this.props.fillExtrusionLight || DEFAULT_FILL_EXTRUSION_LIGHT;
+    const bearing = (this.context.viewport as {bearing?: number}).bearing || 0;
+    const [x, y, z] = getFillExtrusionLightDirection(light, bearing);
+    const fillExtrusionLightingProps: FillExtrusionLightingProps = {
+      lightDirectionIntensity: [x, y, z, light.intensity],
+      lightColorGradient: [...light.color, this.props.fillExtrusionVerticalGradient ? 1 : 0]
+    };
+    // After the lighting effect has set the layer's material (see `LayersPass`).
+    this.setShaderModuleProps({
+      fillExtrusionLighting: fillExtrusionLightingProps,
+      phongMaterial: UNLIT_MATERIAL,
+      gouraudMaterial: UNLIT_MATERIAL
+    } as any);
+  }
+}

package/src/fill-outline-extension.ts

@@ -0,0 +1,70 @@
+// tangram-layers
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+import {LayerExtension} from '@deck.gl/core';
+import type {Layer} from '@deck.gl/core';
+import type {ShaderModule} from '@luma.gl/shadertools';
+
+/**
+ * Draws the `PathLayer`s of a fill's outline (`fill-outline-color`) as MapLibre GL JS draws it: as
+ * `gl.LINES`, which draw each segment on its own, one pixel across the axis it crosses most
+ * steeply. deck.gl's 1 pixel stroke covers more pixels than that on diagonals, and its joins draw
+ * past the corners of short segments, so outlines came out darker and wider than MapLibre's. The
+ * stroke, drawn without antialiasing, is cut to the pixels a line draws: those within half a pixel
+ * of the segment along that axis, and not in the joins. MapLibre's shader also fades each pixel
+ * with its distance from the line (`fill_outline.fragment.glsl`); its outlines in Chrome have the
+ * colors of unfaded pixels, and so do these. Other sublayers are left unchanged. WebGL only; on
+ * WebGPU the outline draws as a stroke.
+ */
+export class FillOutlineExtension extends LayerExtension {
+  static extensionName = 'FillOutlineExtension';
+
+  getShaders(this: Layer) {
+    if (!isOutlinePathLayer(this)) {
+      return {};
+    }
+    // `vPathPosition.x` runs from -1 to 1 across the stroke. Its screen gradient gives the
+    // distance to the path in device pixels, and the direction across the line; the gradient is
+    // taken before any fragment of the quad is discarded. Picking draws the same pixels.
+    const fillOutline: ShaderModule = {
+      name: 'fillOutline',
+      inject: {
+        // Drawn 1.5 device pixels to each side of the path, so that with multisampling every pixel
+        // the line keeps, whose center is within half a pixel of the path, is covered whole.
+        'vs:DECKGL_FILTER_SIZE': `
+  if (size.x > 0.0) {
+    vec2 fillOutline_size = vec2(1.5 / project.devicePixelRatio);
+    size.xy = path.billboard ? fillOutline_size : project_pixel_size(fillOutline_size);
+  }
+`,
+        'fs:#main-start': `
+  vec2 fillOutline_gradient = vec2(dFdx(vPathPosition.x), dFdy(vPathPosition.x));
+`,
+        'fs:#main-end': `
+  // Each segment draws on its own, as a line does: not in the joins between segments, and not at
+  // its end, where the next segment starts.
+  if (vPathPosition.y < 0.0 || vPathPosition.y >= vPathLength) {
+    discard;
+  }
+  float fillOutline_gradientLength = max(length(fillOutline_gradient), 1e-6);
+  float fillOutline_distance = abs(vPathPosition.x) / fillOutline_gradientLength;
+  vec2 fillOutline_normal = abs(fillOutline_gradient) / fillOutline_gradientLength;
+  // The distance along the axis the line crosses most steeply: a line draws one pixel there.
+  if (fillOutline_distance / max(fillOutline_normal.x, fillOutline_normal.y) > 0.5) {
+    discard;
+  }
+`
+      }
+    };
+    return {modules: [fillOutline]};
+  }
+}
+
+function isOutlinePathLayer(layer: Layer): boolean {
+  return layer.context.device.type !== 'webgpu' && 'pathTesselator' in (layer.state || {});
+}