@sakuzu/maplibre-gl-draw 1.0.0

package/dist/view/renderers/polygon/fill.d.ts

@@ -0,0 +1,74 @@
+import type { ProjectionData } from 'maplibre-gl';
+import type { Coordinate } from '../../../store/types.js';
+import type { OffsetUniforms, ShaderData } from '../../shaders/helpers.js';
+import { TerrainContext } from '../../terrain/context.js';
+/**
+ * The fill renderer core uses for polygons, shared with custom feature renderers.
+ *
+ * Takes `[lng, lat]` rings in degrees, triangulates them (holes included) and converts them
+ * to clip space on the GPU relative to the view center, for float precision. Call
+ * `ensureShader` with the shader data of the frame and `setOffsetUniforms` before drawing.
+ */
+export declare class FillShaderManager {
+    private gl;
+    private program;
+    private variantName;
+    private projectionUniformManager;
+    private colorLoc;
+    private offsetUniforms;
+    private vao;
+    private vertexBuffer;
+    private indexBuffer;
+    /**
+     * @param terrain The terrain state of the draw instance (an inactive one draws flat)
+     */
+    constructor(gl: WebGL2RenderingContext, terrain?: TerrainContext);
+    /**
+     * Sets the vertex attributes and the index buffer on the VAO
+     *
+     * The ELEMENT_ARRAY_BUFFER binding is part of the VAO state, so it is bundled while
+     * the VAO is bound.
+     */
+    private setupVAO;
+    /**
+     * Ensures the shader (recreating it when necessary)
+     */
+    ensureShader(shaderData: ShaderData): void;
+    /**
+     * Sets the uniforms for offset mode
+     * Uses the projectionCenter computed at high precision on the CPU side
+     */
+    setOffsetUniforms(uniforms: OffsetUniforms): void;
+    /**
+     * Creates the shader program (offset mode)
+     */
+    private createShaderProgram;
+    /**
+     * Sets the projection uniforms (supporting offset mode + globe mode)
+     * @param projectionData MapLibre's ProjectionData
+     * @param zoom The current zoom level (used for switching offset mode)
+     */
+    private setProjectionUniforms;
+    /**
+     * Fill-renders a single-ring polygon
+     *
+     * Use drawPolygonRings for a polygon that has holes.
+     *
+     * @param coords The coordinate array (WGS84)
+     * @param color The fill color
+     * @param projectionData MapLibre's ProjectionData
+     * @param zoom The current zoom level
+     */
+    drawPolygon(coords: Coordinate[], color: [number, number, number, number], projectionData: ProjectionData, zoom: number): void;
+    /**
+     * Fill-renders a polygon given as an array of rings (supports holes)
+     *
+     * Sends the WGS84 coordinates to the GPU as they are and converts them in the shader
+     *
+     * @param rings The array of rings ([0] is the outer ring, [1..] are inner rings, WGS84)
+     * @param color The fill color
+     * @param projectionData MapLibre's ProjectionData
+     * @param zoom The current zoom level
+     */
+    drawPolygonRings(rings: Coordinate[][], color: [number, number, number, number], projectionData: ProjectionData, zoom: number): void;
+}

package/dist/view/renderers/polygon/fill.js

@@ -0,0 +1,251 @@
+// SPDX-FileCopyrightText: 2026 SAKAIDA Atsushi
+// SPDX-License-Identifier: AGPL-3.0-only
+/**
+ * FillShaderManager
+ *
+ * A shader manager that manages the fill rendering of polygons
+ * Performs the WGS84 to clip space conversion on the GPU (offset mode)
+ */
+import earcut from 'earcut';
+import { calculateLngLatOffset, createProgram, getProjectionTransitionUniform, OFFSET_MODE_GLSL, } from '../../shaders/helpers.js';
+import { ProjectionUniformManager } from '../../shaders/projection.js';
+import { TERRAIN_SHADE_FRAGMENT_GLSL, TERRAIN_SHADE_VERTEX_GLSL, } from '../../shaders/terrain-shade.js';
+import { TerrainContext } from '../../terrain/context.js';
+import { buildEarcutInput } from './earcut-input.js';
+/**
+ * The fill renderer core uses for polygons, shared with custom feature renderers.
+ *
+ * Takes `[lng, lat]` rings in degrees, triangulates them (holes included) and converts them
+ * to clip space on the GPU relative to the view center, for float precision. Call
+ * `ensureShader` with the shader data of the frame and `setOffsetUniforms` before drawing.
+ */
+export class FillShaderManager {
+    /**
+     * @param terrain The terrain state of the draw instance (an inactive one draws flat)
+     */
+    constructor(gl, terrain = new TerrainContext()) {
+        Object.defineProperty(this, "gl", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "program", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        Object.defineProperty(this, "variantName", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: ''
+        });
+        // Projection uniform management
+        Object.defineProperty(this, "projectionUniformManager", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        // Uniform locations (renderer specific)
+        Object.defineProperty(this, "colorLoc", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        // Uniform values for offset mode
+        Object.defineProperty(this, "offsetUniforms", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        // The VAO and buffers reused for drawing (attributes are set up only once at construction)
+        Object.defineProperty(this, "vao", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        Object.defineProperty(this, "vertexBuffer", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        Object.defineProperty(this, "indexBuffer", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        this.gl = gl;
+        this.projectionUniformManager = new ProjectionUniformManager(gl, { surface: true, terrain });
+        this.vertexBuffer = gl.createBuffer();
+        this.indexBuffer = gl.createBuffer();
+        this.vao = gl.createVertexArray();
+        this.setupVAO();
+    }
+    /**
+     * Sets the vertex attributes and the index buffer on the VAO
+     *
+     * The ELEMENT_ARRAY_BUFFER binding is part of the VAO state, so it is bundled while
+     * the VAO is bound.
+     */
+    setupVAO() {
+        const gl = this.gl;
+        gl.bindVertexArray(this.vao);
+        gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer);
+        gl.enableVertexAttribArray(0);
+        gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);
+        gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer);
+        gl.bindVertexArray(null);
+    }
+    /**
+     * Ensures the shader (recreating it when necessary)
+     */
+    ensureShader(shaderData) {
+        if (this.variantName !== shaderData.variantName) {
+            if (this.program) {
+                this.gl.deleteProgram(this.program);
+            }
+            this.program = this.createShaderProgram(shaderData.vertexShaderPrelude, shaderData.define);
+            this.variantName = shaderData.variantName;
+            // Get the projection uniform locations
+            this.projectionUniformManager.getLocations(this.program);
+            // Get the renderer specific uniform locations
+            this.colorLoc = this.gl.getUniformLocation(this.program, 'u_color');
+        }
+    }
+    /**
+     * Sets the uniforms for offset mode
+     * Uses the projectionCenter computed at high precision on the CPU side
+     */
+    setOffsetUniforms(uniforms) {
+        this.offsetUniforms = uniforms;
+    }
+    /**
+     * Creates the shader program (offset mode)
+     */
+    createShaderProgram(prelude, define) {
+        // u_projection_transition is defined only in the prelude of globe mode
+        const projTransitionUniform = getProjectionTransitionUniform(prelude);
+        // High precision version: uses relative coordinates computed at 64-bit precision on
+        // the CPU side
+        const vertexSource = `#version 300 es
+${prelude}
+${define}
+${projTransitionUniform}${OFFSET_MODE_GLSL}${TERRAIN_SHADE_VERTEX_GLSL}
+layout(location = 0) in vec2 a_pos;  // relative coords (64-bit precision on the CPU)
+void main() {
+    // High precision version: uses relative coords computed at 64-bit precision on the CPU
+    gl_Position = project_position_to_clipspace_from_offset(a_pos, u_projection_matrix);
+    emitShadeOffset(a_pos);
+}`;
+        // The fill gets the same terrain shading as the ground (factor 1.0 when there is no terrain)
+        const fragmentSource = `#version 300 es
+precision highp float;
+uniform vec4 u_color;
+out vec4 fragColor;
+${TERRAIN_SHADE_FRAGMENT_GLSL}
+void main() {
+    fragColor = vec4(u_color.rgb * terrainFillShade(), u_color.a);
+}`;
+        return createProgram(this.gl, vertexSource, fragmentSource);
+    }
+    /**
+     * Sets the projection uniforms (supporting offset mode + globe mode)
+     * @param projectionData MapLibre's ProjectionData
+     * @param zoom The current zoom level (used for switching offset mode)
+     */
+    setProjectionUniforms(projectionData, zoom) {
+        this.projectionUniformManager.setUniforms(projectionData, zoom, this.offsetUniforms);
+    }
+    /**
+     * Fill-renders a single-ring polygon
+     *
+     * Use drawPolygonRings for a polygon that has holes.
+     *
+     * @param coords The coordinate array (WGS84)
+     * @param color The fill color
+     * @param projectionData MapLibre's ProjectionData
+     * @param zoom The current zoom level
+     */
+    drawPolygon(coords, color, projectionData, zoom) {
+        this.drawPolygonRings([coords], color, projectionData, zoom);
+    }
+    /**
+     * Fill-renders a polygon given as an array of rings (supports holes)
+     *
+     * Sends the WGS84 coordinates to the GPU as they are and converts them in the shader
+     *
+     * @param rings The array of rings ([0] is the outer ring, [1..] are inner rings, WGS84)
+     * @param color The fill color
+     * @param projectionData MapLibre's ProjectionData
+     * @param zoom The current zoom level
+     */
+    drawPolygonRings(rings, color, projectionData, zoom) {
+        if (!this.program)
+            return;
+        const gl = this.gl;
+        // Flatten all rings to build the earcut input (inner rings are treated as holes)
+        const { flatCoords, holeIndices, rings: openRings } = buildEarcutInput(rings);
+        if (openRings.length === 0)
+            return;
+        // Triangulate with earcut (run on absolute coordinates)
+        const indices = earcut(flatCoords, holeIndices);
+        if (indices.length === 0)
+            return;
+        // Compute relative coordinates on the CPU side (offset mode: computed at 64-bit precision)
+        const centerLngLat = this.offsetUniforms?.centerLngLat ?? [0, 0];
+        // Vertices hold only the relative coordinates of each point; the triangle
+        // composition is expressed with indices
+        const pointCount = flatCoords.length / 2;
+        const vertexData = new Float32Array(flatCoords.length);
+        for (let i = 0; i < pointCount; i++) {
+            // Compute the offset from the center at 64-bit precision
+            const offset = calculateLngLatOffset([flatCoords[i * 2], flatCoords[i * 2 + 1]], centerLngLat);
+            vertexData[i * 2] = offset[0];
+            vertexData[i * 2 + 1] = offset[1];
+        }
+        const indexData = new Uint32Array(indices);
+        gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer);
+        gl.bufferData(gl.ARRAY_BUFFER, vertexData, gl.DYNAMIC_DRAW);
+        gl.bindVertexArray(this.vao);
+        gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indexData, gl.DYNAMIC_DRAW);
+        gl.useProgram(this.program);
+        // Set the projection uniforms
+        this.setProjectionUniforms(projectionData, zoom);
+        if (this.colorLoc) {
+            gl.uniform4fv(this.colorLoc, color);
+        }
+        gl.drawElements(gl.TRIANGLES, indexData.length, gl.UNSIGNED_INT, 0);
+        gl.bindVertexArray(null);
+    }
+    /**
+     * Releases the resources
+     *
+     * @internal
+     */
+    dispose() {
+        if (this.program) {
+            this.gl.deleteProgram(this.program);
+            this.program = null;
+        }
+        if (this.vao) {
+            this.gl.deleteVertexArray(this.vao);
+            this.vao = null;
+        }
+        if (this.vertexBuffer) {
+            this.gl.deleteBuffer(this.vertexBuffer);
+            this.vertexBuffer = null;
+        }
+        if (this.indexBuffer) {
+            this.gl.deleteBuffer(this.indexBuffer);
+            this.indexBuffer = null;
+        }
+    }
+}

package/dist/view/renderers/polygon/sdf-polygon.d.ts

@@ -0,0 +1,62 @@
+import type { PolygonTriangulator } from './triangulator.js';
+/** The color type */
+export type Color = [number, number, number, number];
+/** The polygon style */
+export interface SDFPolygonStyle {
+    fillColor: Color;
+    fillOpacity: number;
+    strokeColor: Color;
+    /**
+     * The pixel width of the outline (relative to createdZoom)
+     *
+     * Positive value: scales with the zoom as `strokeWidth * 2^(zoom - createdZoom)`.
+     * Negative value: a fixed width of `-strokeWidth` pixels (createdZoom and the zoom at
+     *   draw time are ignored). This is a convention for drawing features that have no
+     *   createdZoom mixed into the same batch as features with a variable width (which
+     *   preserves the z-order).
+     * 0: the outline is not drawn.
+     */
+    strokeWidth: number;
+    strokeOpacity: number;
+}
+/**
+ * A retained-mode polygon batch (GPU resources)
+ *
+ * It shares no resources with the shared vertex buffer and shared VAO of immediate mode.
+ */
+export interface RetainedPolygonBatch {
+    /** The VAO with the attributes already set up (dedicated to this batch) */
+    readonly vao: WebGLVertexArrayObject;
+    /** The vertex buffer (dedicated to this batch) */
+    readonly vertexBuffer: WebGLBuffer;
+    /** The index buffer (dedicated to this batch) */
+    readonly indexBuffer: WebGLBuffer;
+    /** The number of indices */
+    readonly indexCount: number;
+    /** The origin of the relative coordinates (already rounded to Float32) */
+    readonly origin: [number, number];
+    /**
+     * The fixed zoom used to compute the line width of the outline
+     *
+     * When it is null, the zoom at draw time is passed to u_zoom.
+     */
+    readonly widthZoom: number | null;
+}
+/**
+ * The options for building a retained-mode polygon batch
+ */
+export interface RetainedPolygonBuildOptions {
+    /** The origin of the relative coordinates (the first coordinate of the first polygon
+     * when omitted) */
+    origin?: [number, number];
+    /** The fixed zoom used to compute the line width of the outline (the zoom at draw time
+     * when omitted) */
+    widthZoom?: number;
+    /**
+     * The supplier of triangulations (earcut is called on the spot when omitted)
+     *
+     * A polygon whose triangulation is not ready is built with the fill omitted (the
+     * outline is still drawn).
+     */
+    triangulator?: PolygonTriangulator;
+}