bruce-cesium 7.1.4 → 7.1.5

package/dist/bruce-cesium.umd.js

@@ -39622,15 +39622,68 @@
             return Boolean(data && data.generation && Array.isArray(data.generation.Frames) && data.generation.Frames.length > 0);
         }
         TextureFrameSeriesAnimator.IsFrameArchiveMetadata = IsFrameArchiveMetadata;
+        // How far covered values bleed outward into uncovered texels before the GPU samples them.
+        const VALUE_DILATE_PASSES = 2;
+        /*
+         * Bleeds covered values outward into uncovered texels, leaving alpha untouched.
+         *
+         * The GPU samples the value texture with linear filtering, so an uncovered texel's RGB still gets
+         * averaged into the vertices next to it even though its alpha is zero. Land sits at one end of the
+         * ramp, so without this the coastline grows a row of spikes exactly where the data stops. Masking the
+         * baseline creates more of these edges, which is what makes this necessary rather than cosmetic.
+         */
+        function dilateValues(value, width, height, passes) {
+            const texels = width * height;
+            const filled = new Uint8Array(texels);
+            for (let p = 0; p < texels; p++) {
+                filled[p] = value[p * 4 + 3] !== 0 ? 1 : 0;
+            }
+            for (let pass = 0; pass < passes; pass++) {
+                const source = value.slice();
+                const wasFilled = filled.slice();
+                for (let y = 0; y < height; y++) {
+                    for (let x = 0; x < width; x++) {
+                        const p = y * width + x;
+                        if (wasFilled[p]) {
+                            continue;
+                        }
+                        let sum = 0;
+                        let hits = 0;
+                        for (let dy = -1; dy <= 1; dy++) {
+                            for (let dx = -1; dx <= 1; dx++) {
+                                const nx = x + dx;
+                                const ny = y + dy;
+                                if (nx < 0 || ny < 0 || nx >= width || ny >= height || !wasFilled[ny * width + nx]) {
+                                    continue;
+                                }
+                                sum += source[(ny * width + nx) * 4];
+                                hits++;
+                            }
+                        }
+                        if (hits > 0) {
+                            const v = Math.round(sum / hits);
+                            value[p * 4] = v;
+                            value[p * 4 + 1] = v;
+                            value[p * 4 + 2] = v;
+                            filled[p] = 1;
+                        }
+                    }
+                }
+            }
+        }
         const DEFAULT_CROSSFADE_MS = 900;
         const DEFAULT_LOW_COLOR = { red: 255, green: 255, blue: 255, alpha: 0.12 };
         const DEFAULT_HIGH_COLOR = { red: 21, green: 96, blue: 196, alpha: 0.92 };
         class Animator {
             constructor(options) {
-                var _a;
+                var _a, _b;
                 this.removeOnTick = null;
                 this.removeCrossfadeTick = null;
                 this.disposed = false;
+                // One alpha byte per texel, 1 meaning the texel is baseline. Fetched once, the mesh does not move.
+                this.baselineFlags = null;
+                this.baselineDims = null;
+                this.baselineLoad = null;
                 this.currentFrameIndex = -1;
                 // Single-in-flight fetch queue: only one Range GET outstanding at a time, and the NEXT one
                 // is chosen right before sending, this is what makes reprioritizing mid-scrub take effect
@@ -39670,6 +39723,8 @@
                 this.frameDims = new Array(this.frames.length).fill(null);
                 this.valueCache = new Array(this.frames.length).fill(null);
                 this.produceValueCanvas = Boolean(options.produceValueCanvas);
+                this.baselineMaskEntry = options.baselineMask || null;
+                this.maskBaseline = (_b = options.maskBaseline) !== null && _b !== void 0 ? _b : Boolean(options.baselineMask);
                 this.valueCanvas = this.produceValueCanvas ? document.createElement("canvas") : null;
                 this.driveMaterial = options.driveMaterial !== false;
                 this.originalMaterial = options.entity.polygon.material;
@@ -39839,6 +39894,12 @@
                 if (this.disposed) {
                     return;
                 }
+                // Awaited before decoding rather than applied later, so no frame is ever cached unmasked and
+                // then corrected once the mask lands.
+                await this.ensureBaselineMask();
+                if (this.disposed) {
+                    return;
+                }
                 const decoded = await this.decodeAndTint(buffer);
                 if (this.disposed) {
                     return;
@@ -39873,8 +39934,81 @@
                 // recovered from the tinted pixels afterwards.
                 const valuePixels = this.produceValueCanvas ? new Uint8ClampedArray(imageData.data) : undefined;
                 ApplyGrayscaleColorMask(imageData, this.lowColor, this.highColor);
+                this.applyBaselineMask(imageData.data, valuePixels, canvas.width, canvas.height);
+                if (valuePixels) {
+                    dilateValues(valuePixels, canvas.width, canvas.height, VALUE_DILATE_PASSES);
+                }
                 return { pixels: imageData.data, width: canvas.width, height: canvas.height, valuePixels };
             }
+            /**
+             * Fetches and decodes the archive's static baseline mask, at most once.
+             */
+            ensureBaselineMask() {
+                if (!this.maskBaseline || !this.baselineMaskEntry) {
+                    return Promise.resolve();
+                }
+                if (this.baselineLoad) {
+                    return this.baselineLoad;
+                }
+                const entry = this.baselineMaskEntry;
+                const start = entry.ByteOffset;
+                const end = entry.ByteOffset + entry.ByteLength - 1;
+                this.baselineLoad = fetch(this.archiveUrl, { headers: { Range: `bytes=${start}-${end}` } })
+                    .then((response) => response.arrayBuffer())
+                    .then(async (buffer) => {
+                    if (this.disposed) {
+                        return;
+                    }
+                    const blob = new Blob([buffer], { type: "image/png" });
+                    const objectUrl = URL.createObjectURL(blob);
+                    let image;
+                    try {
+                        image = await loadImage(objectUrl);
+                    }
+                    finally {
+                        URL.revokeObjectURL(objectUrl);
+                    }
+                    const canvas = document.createElement("canvas");
+                    canvas.width = image.width;
+                    canvas.height = image.height;
+                    const ctx = canvas.getContext("2d");
+                    ctx.drawImage(image, 0, 0);
+                    const pixels = ctx.getImageData(0, 0, canvas.width, canvas.height).data;
+                    const flags = new Uint8Array(canvas.width * canvas.height);
+                    for (let p = 0; p < flags.length; p++) {
+                        flags[p] = pixels[p * 4 + 3] >= 128 ? 1 : 0;
+                    }
+                    this.baselineFlags = flags;
+                    this.baselineDims = { width: canvas.width, height: canvas.height };
+                })
+                    .catch((e) => {
+                    // A missing or unreadable mask must not stop the animation; it just means nothing is hidden.
+                    console.warn("TextureFrameSeriesAnimator: could not load the baseline mask, drawing it instead.", e);
+                });
+                return this.baselineLoad;
+            }
+            /**
+             * Clears alpha on baseline texels, which is what makes hiding the dry/land sentinel a render choice.
+             */
+            applyBaselineMask(pixels, valuePixels, width, height) {
+                const flags = this.baselineFlags;
+                if (!flags || !this.baselineDims) {
+                    return;
+                }
+                // A mask from a different raster size cannot be indexed against this frame, and guessing a
+                // resampling would silently hide the wrong ground.
+                if (this.baselineDims.width !== width || this.baselineDims.height !== height) {
+                    return;
+                }
+                for (let p = 0; p < flags.length; p++) {
+                    if (flags[p]) {
+                        pixels[p * 4 + 3] = 0;
+                        if (valuePixels) {
+                            valuePixels[p * 4 + 3] = 0;
+                        }
+                    }
+                }
+            }
             beginCrossfadeTo(idx) {
                 const to = this.frameCache[idx];
                 this.fadeFromValuePixels = this.displayedValuePixels === null && this.valueCache[idx]
@@ -40116,11 +40250,13 @@ void main() {
             return _glsl300Support;
         }
         /*
-         * Places grid node (fx, fy) on the ellipsoid, walking equal steps of east/north metres.
-         * Cesium maps a polygon's material across a tangent-plane rectangle and the generated raster is
-         * linear in a projected CRS, so stepping in degrees instead would skew the surface against the flat-textured polygon it replaces.
+         * Places grid node (fx, fy) on the ellipsoid, stepping the way the raster was sampled.
+         * A raster sampled at lon/lat has to be walked in degrees; one sampled linearly across a projected CRS has to be walked in tangent-plane metres.
          */
-        function makePlacer(extent) {
+        function makePlacer(extent, pixelPlacement) {
+            if (pixelPlacement === "lonlat") {
+                return (fx, fy) => Cesium.Cartesian3.fromDegrees(Cesium.Math.lerp(extent.West, extent.East, fx), Cesium.Math.lerp(extent.North, extent.South, fy), 0);
+            }
             const ellipsoid = Cesium.Ellipsoid.WGS84;
             const centre = Cesium.Cartesian3.fromDegrees((extent.West + extent.East) / 2, (extent.South + extent.North) / 2, 0);
             const frame = Cesium.Transforms.eastNorthUpToFixedFrame(centre);
@@ -40134,21 +40270,21 @@ void main() {
             };
         }
         /*
-         * Builds one tile's grid, plus a duplicated perimeter ring the shader pushes downwards to cover
-         * the crack where a neighbouring tile at a different density interpolates the shared edge.
+         * Builds one tile's grid, optionally plus a duplicated perimeter ring the shader pushes downwards to
+         * cover the crack where a neighbouring tile at a different density interpolates the shared edge.
          */
-        function buildGeometry(extent, resolution, patch) {
+        function buildGeometry(extent, resolution, patch, pixelPlacement, withSkirt = false) {
             const cols = resolution;
             const rows = resolution;
             const gridCount = (cols + 1) * (rows + 1);
-            const perimeterCount = 2 * (cols + 1) + 2 * (rows + 1) - 4;
+            const perimeterCount = withSkirt ? 2 * (cols + 1) + 2 * (rows + 1) - 4 : 0;
             const count = gridCount + perimeterCount;
             const positions = new Float64Array(count * 3);
             const normals = new Float32Array(count * 3);
             const sts = new Float32Array(count * 2);
             const skirts = new Float32Array(count);
             const ellipsoid = Cesium.Ellipsoid.WGS84;
-            const place = makePlacer(extent);
+            const place = makePlacer(extent, pixelPlacement);
             let v = 0;
             for (let row = 0; row <= rows; row++) {
                 // Texture row 0 is the north edge, so t runs opposite to northing.
@@ -40199,26 +40335,28 @@ void main() {
                 loop.push(row * (cols + 1));
             }
             const skirtStart = gridCount;
-            loop.forEach((gridIndex, k) => {
-                const target = skirtStart + k;
-                positions[target * 3] = positions[gridIndex * 3];
-                positions[target * 3 + 1] = positions[gridIndex * 3 + 1];
-                positions[target * 3 + 2] = positions[gridIndex * 3 + 2];
-                normals[target * 3] = normals[gridIndex * 3];
-                normals[target * 3 + 1] = normals[gridIndex * 3 + 1];
-                normals[target * 3 + 2] = normals[gridIndex * 3 + 2];
-                sts[target * 2] = sts[gridIndex * 2];
-                sts[target * 2 + 1] = sts[gridIndex * 2 + 1];
-                skirts[target] = 1;
-            });
-            for (let k = 0; k < loop.length; k++) {
-                const nextK = (k + 1) % loop.length;
-                indices[i++] = loop[k];
-                indices[i++] = skirtStart + k;
-                indices[i++] = loop[nextK];
-                indices[i++] = loop[nextK];
-                indices[i++] = skirtStart + k;
-                indices[i++] = skirtStart + nextK;
+            if (withSkirt) {
+                loop.forEach((gridIndex, k) => {
+                    const target = skirtStart + k;
+                    positions[target * 3] = positions[gridIndex * 3];
+                    positions[target * 3 + 1] = positions[gridIndex * 3 + 1];
+                    positions[target * 3 + 2] = positions[gridIndex * 3 + 2];
+                    normals[target * 3] = normals[gridIndex * 3];
+                    normals[target * 3 + 1] = normals[gridIndex * 3 + 1];
+                    normals[target * 3 + 2] = normals[gridIndex * 3 + 2];
+                    sts[target * 2] = sts[gridIndex * 2];
+                    sts[target * 2 + 1] = sts[gridIndex * 2 + 1];
+                    skirts[target] = 1;
+                });
+                for (let k = 0; k < loop.length; k++) {
+                    const nextK = (k + 1) % loop.length;
+                    indices[i++] = loop[k];
+                    indices[i++] = skirtStart + k;
+                    indices[i++] = loop[nextK];
+                    indices[i++] = loop[nextK];
+                    indices[i++] = skirtStart + k;
+                    indices[i++] = skirtStart + nextK;
+                }
             }
             const geometry = new Cesium.Geometry({
                 attributes: {
@@ -40276,6 +40414,8 @@ void main() {
                 this.valueMax = (_b = options.valueMax) !== null && _b !== void 0 ? _b : 1;
                 this.exaggeration = (_c = options.exaggeration) !== null && _c !== void 0 ? _c : autoExaggeration(this.extent, this.valueMin, this.valueMax);
                 this.baseHeight = (_d = options.baseHeight) !== null && _d !== void 0 ? _d : 0;
+                this.pixelPlacement = options.pixelPlacement;
+                this.tileSkirts = Boolean(options.tileSkirts);
                 this.lowColor = toCesiumColor(options.lowColor || DEFAULT_LOW_COLOR);
                 this.highColor = toCesiumColor(options.highColor || DEFAULT_HIGH_COLOR);
                 this.tiles = buildTiles(hasCoverage);
@@ -40283,6 +40423,9 @@ void main() {
             GetFollowsGround() {
                 return this.followGround;
             }
+            GetPixelPlacement() {
+                return this.pixelPlacement;
+            }
             GetBaseHeight() {
                 return this.baseHeight;
             }
@@ -40497,7 +40640,7 @@ void main() {
                 if (cached) {
                     return cached;
                 }
-                const geometry = buildGeometry(this.extent, tier, tile.patch);
+                const geometry = buildGeometry(this.extent, tier, tile.patch, this.pixelPlacement, this.tileSkirts);
                 const attributeLocations = Cesium.GeometryPipeline.createAttributeLocations(geometry);
                 const mesh = {
                     attributeLocations,
@@ -40590,7 +40733,9 @@ void main() {
                             u_valueRange: () => self.valueMax - self.valueMin,
                             u_exaggeration: () => self.exaggeration,
                             u_baseHeight: () => self.baseHeight,
-                            u_skirtDepth: () => Math.max(2, Math.abs(self.valueMax - self.valueMin) * self.exaggeration * SKIRT_FRACTION),
+                            u_skirtDepth: () => self.tileSkirts
+                                ? Math.max(2, Math.abs(self.valueMax - self.valueMin) * self.exaggeration * SKIRT_FRACTION)
+                                : 0,
                             u_coverageCutoff: () => COVERAGE_CUTOFF,
                             u_lowColor: () => self.lowColor,
                             u_highColor: () => self.highColor,
@@ -40722,6 +40867,8 @@ void main() {
                 }
             }
             const drawsDisplacedSurface = Boolean(extrusionArchive);
+            // The displaced surface IS the entity's fill, drawn as its own primitive at the value's height.
+            // Leaving the flat polygon filled as well shows a second copy of the parcel on the ground under it.
             const hasFill = (drawsDisplacedSurface ? true
                 : fillType === BModels.Style.EPolygonFillType.Texture
                     ? Boolean(textureDataUri || frameArchive || cFillColor.alpha > 0)
@@ -40810,6 +40957,7 @@ void main() {
                     polygon: {
                         hierarchy: new Cesium.PolygonHierarchy(posses, holePosses.map(x => new Cesium.PolygonHierarchy(x))),
                         material: fillMaterial,
+                        fill: !drawsDisplacedSurface,
                         extrudedHeight: extrusion.value,
                         extrudedHeightReference: extrusion.exHeightRef,
                         shadows: Cesium.ShadowMode.ENABLED,
@@ -40840,6 +40988,12 @@ void main() {
                 if (!CompareCPolygonHierarchies(oldHierarchy, newHierarchy)) {
                     cEntity.polygon.hierarchy = new Cesium.ConstantProperty(newHierarchy);
                 }
+                // Toggling extrusion styling on an already-rendered entity flips this,
+                // so it has to be reconciled rather than set only at creation.
+                const oldFill = GetCValue(params.viewer, cEntity.polygon.fill);
+                if (oldFill !== !drawsDisplacedSurface) {
+                    cEntity.polygon.fill = new Cesium.ConstantProperty(!drawsDisplacedSurface);
+                }
                 const oldExtrusion = GetCValue(params.viewer, cEntity.polygon.extrudedHeight);
                 if (oldExtrusion != extrusion.value) {
                     cEntity.polygon.extrudedHeight = new Cesium.ConstantProperty(extrusion.value);
@@ -40893,7 +41047,7 @@ void main() {
             }
             // Must run before any material is baked below: the Animator takes over polygon.material, so a bake
             // has to know whether it is baking over a live animation or over a disposed one's restored material.
-            const animator = syncTextureFrameArchive(cEntity, drawsDisplacedSurface ? null : frameArchive, params.viewer, style.textureColorMask);
+            const animator = syncTextureFrameArchive(cEntity, drawsDisplacedSurface ? null : frameArchive, params.viewer, style.textureColorMask, style.maskTextureBaseline);
             syncDisplacedSurface({
                 cEntity,
                 extrusionArchive,
@@ -41378,12 +41532,17 @@ void main() {
             frames: extrusionArchive.metadata.Frames,
             textureColorMask: style.textureColorMask,
             driveMaterial: false,
-            produceValueCanvas: true
+            produceValueCanvas: true,
+            baselineMask: extrusionArchive.metadata.BaselineMask,
+            // Off-type for the same reason as the fill path: the pinned bruce-models predates the field.
+            maskBaseline: style.maskTextureBaseline
         });
         cEntity[EXTRUSION_ANIMATOR_KEY] = animator;
         const mask = style.textureColorMask;
         const surface = new exports.DisplacedSurfacePrimitive.Surface({
             extent,
+            // The grid has to be walked the way the raster was sampled, or the surface skews across the extent.
+            pixelPlacement: extrusionArchive.metadata.PixelPlacement,
             source: null,
             baseHeight: placement.baseHeight,
             followGround: placement.followGround,
@@ -41475,7 +41634,7 @@ void main() {
      * @param viewer
      * @param textureColorMask
      */
-    function syncTextureFrameArchive(cEntity, frameArchive, viewer, textureColorMask) {
+    function syncTextureFrameArchive(cEntity, frameArchive, viewer, textureColorMask, maskTextureBaseline) {
         const existing = cEntity[TEXTURE_FRAME_SERIES_ANIMATOR_KEY];
         if (frameArchive && existing && !existing.IsDisposed() && existing.GetArchiveUrl() === frameArchive.url) {
             return existing;
@@ -41492,7 +41651,9 @@ void main() {
             entity: cEntity,
             archiveUrl: frameArchive.url,
             frames: frameArchive.metadata.Frames,
-            textureColorMask
+            textureColorMask,
+            baselineMask: frameArchive.metadata.BaselineMask,
+            maskBaseline: maskTextureBaseline
         });
         cEntity[TEXTURE_FRAME_SERIES_ANIMATOR_KEY] = animator;
         return animator;
@@ -43089,7 +43250,7 @@ void main() {
         StyleUtils.ApplyTypeStyle = ApplyTypeStyle;
     })(exports.StyleUtils || (exports.StyleUtils = {}));
 
-    const VERSION = "7.1.4";
+    const VERSION = "7.1.5";
     /**
      * Updates the environment instance used by bruce-cesium to one specified.
      * This can be used to ensure that the instance a parent is referencing is shared between bruce-cesium, bruce-models, and the parent app.