refactored fill texture creation. replace GradientFactory with TextureManager for gradient texture handling and us unified cache

Signed-off-by: Tim Deubler <[email protected]>

Author: TerminalTim

packages/display/src/displays/webgl/Display.ts

@@ -229,14 +229,7 @@ class WebGlDisplay extends BasicDisplay {
     }
 
     private initSky(skyColor: Color | LinearGradient) {
-        let color;
-        if (this.factory.gradients.isGradient(skyColor)) {
-            color = this.factory.gradients.getTexture((<unknown>skyColor as LinearGradient));
-        } else {
-            // TODO: Separate the texture cache from the gradient factory, and add support for caching simple color textures in the texture cache for efficiency.
-            const hexColor = rgbaToHexString(toRGB(skyColor as Color, true));
-            color = this.factory.gradients.getTexture({0: hexColor, 1: hexColor});
-        }
+        const color = this.factory.textureManager.getFillTexture(skyColor);
         this.render.setSkyColor(color);
     }
 

packages/display/src/displays/webgl/GLRender.ts

@@ -63,7 +63,7 @@ import {Attribute} from './buffer/Attribute';
 import {GLExtensions} from './GLExtensions';
 import {Texture} from './Texture';
 import {Color} from '@here/xyz-maps-common';
-import {GradientTexture} from './GradientFactory';
+import {FillTexture} from './TextureManager';
 import {ViewportTile} from '../BasicDisplay';
 import toRGB = Color.toRGB;
 
@@ -274,7 +274,7 @@ export class GLRender implements BasicRender {
         this.gl?.clearColor(color[0], color[1], color[2], color[3] ?? 1.0);
     }
 
-    setSkyColor(color: Color.RGBA | GradientTexture) {
+    setSkyColor(color: Color.RGBA | FillTexture) {
         this.skyBuffer.addUniform('u_fill', color);
     }
 

packages/display/src/displays/webgl/GradientFactory.ts

@@ -17,27 +17,9 @@
  * License-Filename: LICENSE
  */
 
-import {Texture} from './Texture';
 import {LinearGradient} from '@here/xyz-maps-core';
-
-type LinearGradientStops = LinearGradient['stops'];
-
-export class GradientTexture extends Texture {
-    ref: number = 0;
-    gradient: any;
-    factory: GradientFactory;
-
-    destroy() {
-        this.factory.dropTexture(this);
-        super.destroy();
-    }
-}
-
-
-// let gradientTextCache = new Map();
-// window._gradientTextCache = gradientTextCache;
-// const defaultGradientConfig = {0: 'rgba(0, 0, 255, 0)', 0.1: 'royalblue', 0.3: 'cyan', 0.5: 'lime', 0.7: 'yellow', 1.0: 'red'};
-
+import {FillTexture} from './TextureManager';
+export type LinearGradientStops = LinearGradient['stops'];
 
 export class GradientFactory {
     static canvas: HTMLCanvasElement = document.createElement('canvas');
@@ -46,7 +28,6 @@ export class GradientFactory {
     private width: number;
     private height: number;
     private gl: WebGLRenderingContext;
-    private cache: Map<LinearGradientStops, GradientTexture> = new Map();
 
     constructor(gl: WebGLRenderingContext, width: number = 256, height: number = 1) {
         this.gl = gl;
@@ -58,47 +39,32 @@ export class GradientFactory {
         return typeof gradient?.type == 'string' && typeof gradient.stops == 'object';
     }
 
-    getTexture(linearGradient: LinearGradientStops | LinearGradient, preprocessor?: (stops: LinearGradientStops) => LinearGradientStops): GradientTexture {
+    createTexture(linearGradient: LinearGradientStops | LinearGradient, preprocessor?: (stops: LinearGradientStops) => LinearGradientStops): FillTexture {
         const gradientStops: LinearGradientStops = this.isGradient(linearGradient)
             ? (linearGradient as LinearGradient).stops
             : linearGradient as LinearGradientStops;
 
-        let texture = this.cache.get(gradientStops);
-
-        if (!texture) {
-            const canvas = GradientFactory.canvas;
-            const ctx = GradientFactory.ctx;
-            const {width, height} = this;
-            canvas.width = width;
-            canvas.height = height;
-
-            const gradient = ctx.createLinearGradient(0, 0, width, height);
+        const canvas = GradientFactory.canvas;
+        const ctx = GradientFactory.ctx;
+        const {width, height} = this;
+        canvas.width = width;
+        canvas.height = height;
 
-            const stops = preprocessor?.(gradientStops) || gradientStops;
+        const gradient = ctx.createLinearGradient(0, 0, width, height);
 
-            for (var key in stops) {
-                gradient.addColorStop(Number(key), stops[key]);
-            }
-            // ctx.clearRect(0, 0, width, height);
-            ctx.fillStyle = gradient;
-            ctx.fillRect(0, 0, width, height);
-            // return paletteCtx.getImageData(0, 0, 256, 1).data;
+        const stops = preprocessor?.(gradientStops) || gradientStops;
 
-            const data = ctx.getImageData(0, 0, width, height).data;
-
-            texture = new GradientTexture(this.gl, {width, height, data}, {premultiplyAlpha: true});
-            texture.gradient = gradientStops;
-            texture.factory = this;
-
-            this.cache.set(gradientStops, texture);
+        for (var key in stops) {
+            gradient.addColorStop(Number(key), stops[key]);
         }
-        texture.ref++;
+        // ctx.clearRect(0, 0, width, height);
+        ctx.fillStyle = gradient;
+        ctx.fillRect(0, 0, width, height);
+        // return paletteCtx.getImageData(0, 0, 256, 1).data;
 
-        return texture;
-    }
+        const data = ctx.getImageData(0, 0, width, height).data;
 
-    dropTexture(texture: GradientTexture) {
-        this.cache.delete(texture.gradient);
+        return new FillTexture(this.gl, {width, height, data}, {premultiplyAlpha: true});
     }
 }
 

packages/display/src/displays/webgl/TextureManager.ts

@@ -0,0 +1,96 @@
+/*
+ * Copyright (C) 2019-2025 HERE Europe B.V.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ * License-Filename: LICENSE
+ */
+import {Texture} from './Texture';
+import {GradientFactory, LinearGradientStops} from './GradientFactory';
+import {Color, LinearGradient} from '@here/xyz-maps-core';
+import {Color as Colors} from '@here/xyz-maps-common';
+
+export class FillTexture extends Texture {
+    ref: number = 0;
+    id: Color | LinearGradientStops | LinearGradient;
+    cache: TextureCache;
+
+    destroy() {
+        this.cache.delete(this.id);
+        super.destroy();
+    }
+}
+
+export type TextureCache = Map<Color | LinearGradientStops | LinearGradient, FillTexture>;
+
+type TextureInput = Color | LinearGradientStops | LinearGradient;
+
+export class TextureManager {
+    private gradients: GradientFactory;
+    private gl: WebGLRenderingContext;
+
+    constructor(gl: WebGLRenderingContext) {
+        this.gradients = new GradientFactory(gl, 256, 1);
+        this.gl = gl;
+    }
+
+    private textures: Map<TextureInput, FillTexture> = new Map();
+
+    getFillTexture(color: TextureInput): FillTexture | undefined {
+        const {gradients} = this;
+        let texture = this.textures.get(color);
+        if (!texture) {
+            if (gradients.isGradient(color)) {
+                texture = gradients.createTexture((<unknown>color as LinearGradient));
+            } else {
+                const rgba = Colors.toRGB(color as Color, true);
+                texture = new FillTexture(this.gl, {data: new Uint8Array(rgba.map((c) => c * 255)), width: 1, height: 1});
+            }
+            this.addTexture(color, texture);
+        }
+        texture.ref++;
+        return texture;
+    }
+
+    getGradientTexture(gradient: LinearGradientStops | LinearGradient, preprocessor: (stops: LinearGradientStops) => LinearGradientStops): FillTexture | undefined {
+        let texture = this.textures.get(gradient);
+        if (!texture) {
+            texture = this.gradients.createTexture(gradient, preprocessor);
+            this.addTexture(gradient, texture);
+        }
+        texture.ref++;
+        return texture;
+    }
+
+    addTexture(id: TextureInput, texture: FillTexture): void {
+        this.textures.set(id, texture);
+        texture.id = id;
+        texture.cache = this.textures;
+    }
+
+    removeTexture(id: string): void {
+        const texture = this.textures.get(id);
+        if (texture) {
+            texture.destroy();
+            this.textures.delete(id);
+        }
+    }
+
+    clear(): void {
+        for (const texture of this.textures.values()) {
+            texture.destroy();
+        }
+        this.textures.clear();
+    }
+};

packages/display/src/displays/webgl/buffer/FeatureFactory.ts

@@ -49,11 +49,11 @@ import {ModelStyle, Color} from '@here/xyz-maps-core';
 import {ModelFactory} from './ModelFactory';
 import {ModelBuffer} from './templates/ModelBuffer';
 import {ImageInfo} from '../Atlas';
-import {GradientFactory} from '../GradientFactory';
 import {HeatmapBuffer} from './templates/HeatmapBuffer';
 import {TextureAtlasManager} from '../TextureAtlasManager';
 import {LineBuffer} from './templates/LineBuffer';
 import {Color as ColorUtils, Expression, ExpressionMode} from '@here/xyz-maps-common';
+import {TextureManager} from '../TextureManager';
 
 const {toRGB} = ColorUtils;
 type RGBA = ColorUtils.RGBA;
@@ -148,18 +148,18 @@ export class FeatureFactory {
     pendingCollisions: CollisionGroup[] = [];
     z: number;
     private waitAndRefresh: (p: Promise<any>) => void;
-    gradients: GradientFactory;
+    textureManager: TextureManager;
     private zLayer: number;
 
     constructor(gl: WebGLRenderingContext, collisionHandler, devicePixelRatio: number) {
         this.gl = gl;
         this.atlasManager = new TextureAtlasManager(gl);
+        this.textureManager = new TextureManager(gl);
         this.dpr = devicePixelRatio;
         this.collisions = collisionHandler;
         this.lineFactory = new LineFactory(gl);
         this.modelFactory = new ModelFactory(gl);
 
-        this.gradients = new GradientFactory(gl, 256, 1);
 
         const pixelCnt = 512 * 512;
         const pixelData = new Uint8Array(pixelCnt * 4);
@@ -868,7 +868,6 @@ export class FeatureFactory {
                     const x = tile.lon2x((<GeoJSONCoordinate>coordinates)[0], tileSize);
                     const y = tile.lat2y((<GeoJSONCoordinate>coordinates)[1], tileSize);
                     const z = typeof altitude == 'number' ? altitude : altitude ? <number>coordinates[2] || 0 : null;
-                    // const z = extrude ? <number>coordinates[2] || 0 : null;
 
                     if (collisionGroup) {
                         collisionData = this.collisions.insert(

packages/display/src/displays/webgl/buffer/createBuffer.ts

@@ -334,7 +334,7 @@ const createBuffer = (
 
                                         const gradient = (<unknown>shared.fill as LinearGradient)?.stops || DEFAULT_HEATMAP_GRADIENT.stops;
 
-                                        const gradientTexture = factory.gradients.getTexture(gradient, HeatmapBuffer.verifyAndFixGradient);
+                                        const gradientTexture = factory.textureManager.getGradientTexture(gradient, HeatmapBuffer.verifyAndFixGradient);
                                         geoBuffer.addUniform('u_gradient', gradientTexture);
                                     }