RD-910

- fix bug that prevented spacebox from being set correclty when style was changed.
- add simple lerping between space color and radial gradient to make the experince less jarring

Author: Les Moffat

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@maptiler/sdk",
-  "version": "3.3.0-rc2",
+  "version": "3.3.0-rc3",
   "description": "The Javascript & TypeScript map SDK tailored for MapTiler Cloud",
   "author": "MapTiler",
   "module": "dist/maptiler-sdk.mjs",

package.json

@@ -41,7 +41,7 @@ import { MaptilerProjectionControl } from "./controls/MaptilerProjectionControl"
 import { Telemetry } from "./Telemetry";
 import { CubemapDefinition, CubemapLayer, CubemapLayerConstructorOptions } from "./custom-layers/CubemapLayer";
 import { GradientDefinition, RadialGradientLayer, RadialGradientLayerOptions } from "./custom-layers/RadialGradientLayer";
-import extractCustomLayerStyle from "./custom-layers/extractCustomLayerStyle";
+import extractCustomLayerStyle, { StyleSpecificationWithMetaData } from "./custom-layers/extractCustomLayerStyle";
 
 export type LoadWithTerrainEvent = {
   type: "loadWithTerrain";
@@ -232,6 +232,20 @@ export class Map extends maplibregl.Map {
     });
   }
 
+  private setSpaceFromStyle({ style }: { style?: StyleSpecificationWithMetaData }) {
+    if (!style?.metadata?.maptiler?.space) {
+      return;
+    }
+    this.space?.setCubemap(style.metadata.maptiler.space);
+  }
+
+  private setHaloFromStyle({ style }: { style?: StyleSpecificationWithMetaData }) {
+    if (!style?.metadata?.maptiler?.halo) {
+      return;
+    }
+    void this.halo?.setGradient(style.metadata.maptiler.halo);
+  }
+
   private setSpaceFromCurrentStyle() {
     const spaceOptionsFromStyleSpec = extractCustomLayerStyle<CubemapDefinition>({ map: this, property: "space" });
     if (spaceOptionsFromStyleSpec && this.space) {
@@ -243,7 +257,7 @@ export class Map extends maplibregl.Map {
   private setHaloFromCurrentStyle() {
     const haloOptionsFromStyleSpec = extractCustomLayerStyle<GradientDefinition>({ map: this, property: "halo" });
     if (haloOptionsFromStyleSpec && this.halo) {
-      this.halo.setGradient(haloOptionsFromStyleSpec);
+      void this.halo.setGradient(haloOptionsFromStyleSpec);
       return;
     }
   }
@@ -945,13 +959,13 @@ export class Map extends maplibregl.Map {
 
     if (typeof styleInfo.style !== "string" && !styleInfo.requiresUrlMonitoring) {
       if (this.space) {
-        this.setSpaceFromCurrentStyle();
+        this.setSpaceFromStyle({ style });
       } else {
         this.initSpace({ before });
       }
 
       if (this.halo) {
-        this.setHaloFromCurrentStyle();
+        this.setHaloFromStyle({ style });
       } else {
         this.initHalo({ before });
       }

src/Map.ts

@@ -9,6 +9,7 @@ import vertexShaderSource from "./cubemap.vert.glsl?raw";
 import fragmentShaderSource from "./cubemap.frag.glsl?raw";
 import { loadCubemapTexture } from "./loadCubemapTexture";
 import type { CubemapDefinition, CubemapFaces, CubemapLayerConstructorOptions } from "./types";
+import { lerpVec4 } from "../../utils/math-utils";
 
 const SPACE_IMAGES_BASE_URL = "api.maptiler.com/resources/space";
 
@@ -64,6 +65,12 @@ class CubemapLayer implements CustomLayerInterface {
   private currentFadeOpacity: number = 0.0;
   private cubeMapNeedsUpdate: boolean = false;
   private bgColor: Vec4;
+
+  private previousBgColor: Vec4 = [0, 0, 0, 0];
+  private targetBgColor: Vec4 = [0, 0, 0, 0];
+
+  private transitionDelta: number = 0.0;
+
   private gl!: WebGLContext;
 
   private cubemap?: Object3D<(typeof ATTRIBUTES_KEYS)[number], (typeof UNIFORMS_KEYS)[number]>;
@@ -79,7 +86,6 @@ class CubemapLayer implements CustomLayerInterface {
 
   public updateCubemap(): void {
     this.useCubemapTexture = this.faces !== null;
-
     const uniformsKeys = UNIFORMS_KEYS.filter((uniformKey) => {
       if (uniformKey === "cubeSampler") {
         return this.useCubemapTexture;
@@ -101,6 +107,7 @@ class CubemapLayer implements CustomLayerInterface {
       indices: INDICES,
     });
     this.cubeMapNeedsUpdate = true;
+    this.animateTo();
   }
 
   public onAdd(map: MapSDK, gl: WebGLRenderingContext | WebGL2RenderingContext): void {
@@ -133,6 +140,18 @@ class CubemapLayer implements CustomLayerInterface {
     }
   }
 
+  private animateTo() {
+    const animateTo = () => {
+      if (this.transitionDelta < 1.0) {
+        requestAnimationFrame(animateTo);
+        this.bgColor = lerpVec4(this.previousBgColor, this.targetBgColor, this.transitionDelta);
+        this.transitionDelta += 0.075;
+        this.map.triggerRepaint();
+      }
+    };
+    requestAnimationFrame(animateTo);
+  }
+
   private animateIn(): void {
     const animateIn = () => {
       if (this.currentFadeOpacity < 1.0) {
@@ -226,7 +245,9 @@ class CubemapLayer implements CustomLayerInterface {
   }
 
   public setCubemap(cubemap: CubemapDefinition): void {
-    this.bgColor = parseColorStringToVec4(cubemap.color);
+    this.targetBgColor = parseColorStringToVec4(cubemap.color);
+    this.previousBgColor = this.bgColor;
+    this.transitionDelta = 0.0;
     this.faces = getCubemapFaces(cubemap);
     this.updateCubemap();
     this.cubeMapNeedsUpdate = true;

src/custom-layers/CubemapLayer/CubemapLayer.ts

@@ -7,6 +7,7 @@ import { createObject3D, parseColorStringToVec4, type Object3D } from "../../uti
 import vertexShaderSource from "./radialGradient.vert.glsl?raw";
 import fragmentShaderSource from "./radialGradient.frag.glsl?raw";
 import type { GradientDefinition, RadialGradientLayerOptions } from "./types";
+import { lerp } from "../../utils/math-utils";
 
 const HALO_MAX_DISTANCE = 2;
 // 1 = globe radius
@@ -37,6 +38,8 @@ const defaultConstructorOptions: RadialGradientLayerOptions = {
   ],
 };
 
+const DELTA_CHANGE = 0.075;
+
 export class RadialGradientLayer implements CustomLayerInterface {
   public id: string = "Halo Layer";
   public type: CustomLayerInterface["type"] = "custom";
@@ -45,6 +48,8 @@ export class RadialGradientLayer implements CustomLayerInterface {
   private gradient: GradientDefinition;
   private scale: number = 0.0;
 
+  private animationDelta: number = 0.0;
+
   private map!: MapSDK;
   private plane?: Object3D<(typeof ATTRIBUTES_KEYS)[number], (typeof UNIFORMS_KEYS)[number]>;
 
@@ -71,14 +76,41 @@ export class RadialGradientLayer implements CustomLayerInterface {
       vertices: VERTICES,
     });
 
-    const animate = () => {
-      if (this.scale < this.gradient.scale) {
-        this.scale += 0.05;
-        this.map.triggerRepaint();
-        requestAnimationFrame(animate);
-      }
-    };
-    animate();
+    void this.animateIn();
+  }
+
+  private async animateIn() {
+    return new Promise<void>((resolve) => {
+      this.animationDelta = 0;
+      const animate = () => {
+        if (this.animationDelta < 1) {
+          this.scale = lerp(0, this.gradient.scale, this.animationDelta);
+          this.animationDelta += DELTA_CHANGE;
+          this.map.triggerRepaint();
+          requestAnimationFrame(animate);
+          return;
+        }
+        resolve();
+      };
+      animate();
+    });
+  }
+
+  private async animateOut() {
+    this.animationDelta = 0;
+    return new Promise<void>((resolve) => {
+      const animate = () => {
+        if (this.animationDelta < 1) {
+          this.scale = lerp(this.gradient.scale, 0, this.animationDelta);
+          this.animationDelta += DELTA_CHANGE;
+          this.map.triggerRepaint();
+          requestAnimationFrame(animate);
+          return;
+        }
+        resolve();
+      };
+      animate();
+    });
   }
 
   public onRemove(_map: MapSDK, gl: WebGLRenderingContext | WebGL2RenderingContext): void {
@@ -187,8 +219,10 @@ export class RadialGradientLayer implements CustomLayerInterface {
    * Value settings methods
    */
 
-  public setGradient(gradient: GradientDefinition): void {
+  public async setGradient(gradient: GradientDefinition): Promise<void> {
+    await this.animateOut();
     this.gradient = gradient;
+    await this.animateIn();
   }
 
   public show(): void {

src/custom-layers/RadialGradientLayer/RadialGradientLayer.ts

@@ -1,3 +1,5 @@
+import { Vec4 } from "./webgl-utils";
+
 function minMax(value: number, min: number, max: number): number {
   return Math.min(max, Math.max(min, value));
 }
@@ -10,4 +12,20 @@ function diagonalOfSquare(side: number): number {
   return Math.sqrt(2) * side;
 }
 
-export { minMax, normalize, diagonalOfSquare };
+type Lerpable = [number, number, number, number] | Vec4;
+
+function lerpVec4(a: Lerpable, b: Lerpable, t: number): Vec4 {
+  //prettier-ignore
+  return [
+    lerp(a[0], b[0], t),
+    lerp(a[1], b[1], t),
+    lerp(a[2], b[2], t),
+    lerp(a[3], b[3], t),
+  ];
+}
+
+function lerp(a: number, b: number, t: number): number {
+  return a + (b - a) * t;
+}
+
+export { minMax, normalize, diagonalOfSquare, lerpVec4, lerp };