@tangram.gl/tangram-renderer 0.0.0-stage → 0.0.0

package/src/styles/style_globals.glsl

@@ -0,0 +1,69 @@
+// Tangram
+// SPDX-License-Identifier: MIT
+// Copyright (c) 2013-2016 Brett Camper and Mapzen
+
+#ifdef TANGRAM_VERTEX_SHADER
+
+// Apply layer ordering to avoid z-fighting
+void applyLayerOrder (float layer, inout vec4 position) {
+    position.z -= layer * TANGRAM_LAYER_DELTA * position.w;
+}
+
+// Vertex position in model space: [0, 1] range over the local tile
+// Note positions can be outside that range due to unclipped geometry, geometry higher than a unit cube, etc.
+vec4 modelPosition() {
+    return
+        vec4(
+            a_position.xyz / TANGRAM_TILE_SCALE         // scale coords to ~0-1 range
+            * exp2(u_tile_origin.z - u_tile_origin.w),  // adjust for tile overzooming
+        1.)
+        + vec4(0., 1., 0., 0.);
+        // NB: additional offset to account for unusual Tangram JS y coords,
+        // should be refactored to remove
+}
+
+// Position in model space as above, but according to tile coordinate (as opposed to style) zoom
+// e.g. unadjusted for tile overzooming
+vec4 modelPositionBaseZoom() {
+    return
+        vec4(
+            a_position.xyz / TANGRAM_TILE_SCALE,    // scale coords to ~0-1 range
+        1.)
+        + vec4(0., 1., 0., 0.); // see note on offset above
+}
+
+#endif
+
+// Vertex position in world coordinates, useful for 3d procedural textures, etc.
+vec4 worldPosition() {
+    return v_world_position;
+}
+
+// Optionally wrap world coordinates (allows more precision at higher zooms)
+// e.g. at wrap 1000, the world space will wrap every 1000 meters
+#ifdef TANGRAM_VERTEX_SHADER
+
+vec4 wrapWorldPosition(vec4 world_position) {
+    #if defined(TANGRAM_WORLD_POSITION_WRAP)
+    vec2 anchor = u_tile_origin.xy - mod(u_tile_origin.xy, TANGRAM_WORLD_POSITION_WRAP);
+        world_position.xy -= anchor;
+    #endif
+    return world_position;
+}
+
+#endif
+
+// Normal in world space
+#if defined(TANGRAM_VERTEX_SHADER)
+
+vec3 worldNormal() {
+    return TANGRAM_NORMAL;
+}
+
+#elif defined(TANGRAM_FRAGMENT_SHADER)
+
+vec3 worldNormal() {
+    return u_inverseNormalMatrix * TANGRAM_NORMAL;
+}
+
+#endif

package/src/styles/style_manager.ts

@@ -0,0 +1,464 @@
+// Tangram
+// SPDX-License-Identifier: MIT
+// Copyright (c) 2013-2016 Brett Camper and Mapzen
+// Copyright (c) 2026 vis.gl contributors
+
+// Manage rendering styles
+import type {ManagedStyle, StyleDefinition, StyleShaderDefinition, MixedStyleShaders, StyleManagerTile, ActiveStyleBlendOrder} from './style-mixing-types';
+
+import ShaderProgram from '../gl/shader_program';
+import mergeObjects from '../utils/merge';
+import Geo from '../utils/geo';
+import WorkerBroker from '../utils/worker_broker';
+import log from '../utils/log';
+
+import {Polygons} from './polygons/polygons';
+import {Lines} from './lines/lines';
+import {Points} from './points/points';
+import {TextStyle} from './text/text';
+import {RasterStyle} from './raster/raster';
+
+import style_globals_source from './style_globals.glsl';
+import selection_globals_source from '../selection/selection_globals.glsl';
+import selection_vertex_source from '../selection/selection_vertex.glsl';
+
+/** Builds scene style mixins and owns the registered render-style lifecycle. */
+export class StyleManager {
+    /** Registered renderable styles, including reusable built-ins. */
+    declare styles: Record<string, ManagedStyle>;
+    /** Prototype sources reused when rebuilding custom styles. */
+    declare base_styles: Record<string, ManagedStyle>;
+    /** Current tile-visible style names. */
+    declare active_styles: string[];
+    /** Sorted mesh blend-order passes. */
+    declare active_blend_orders: ActiveStyleBlendOrder[];
+
+    constructor () {
+        this.styles = {};
+        this.base_styles = {};
+        this.active_styles = [];
+        this.active_blend_orders = [];
+
+        // Add built-in rendering styles
+        this.register(Object.create(Polygons));
+        this.register(Object.create(Lines));
+        this.register(Object.create(Points));
+        this.register(Object.create(TextStyle));
+        this.register(Object.create(RasterStyle));
+    }
+
+    // Global configuration for all styles
+    init () {
+        ShaderProgram.removeBlock('global');
+        ShaderProgram.removeBlock('setup');
+
+        // Model and world position accessors, layer re-ordering function
+        ShaderProgram.addBlock('global', style_globals_source);
+
+        // Feature selection global
+        ShaderProgram.addBlock('global', selection_globals_source);
+
+        // Feature selection vertex shader support
+        ShaderProgram.replaceBlock('setup', selection_vertex_source);
+
+        // Minimum value for float comparisons
+        ShaderProgram.defines.TANGRAM_EPSILON = 0.00001;
+
+        // Minimum depth buffer value separating each `order` unit
+        // Assume min 16-bit depth buffer, in practice uses 14-bits, 1 extra bit to handle virtual half-layers
+        // for outlines (inserted in between layers), another extra bit to prevent precision loss
+        ShaderProgram.defines.TANGRAM_LAYER_DELTA = 1 / (1 << 14);
+
+        // Internal tile scale
+        ShaderProgram.defines.TANGRAM_TILE_SCALE =
+            `vec3(${Geo.tile_scale}., ${Geo.tile_scale}., u_meters_per_pixel * ${Geo.tile_size}.)`;
+
+        // Increases precision for height values
+        ShaderProgram.defines.TANGRAM_HEIGHT_SCALE = Geo.height_scale;
+
+        // Alpha discard threshold (substitute for alpha blending)
+        ShaderProgram.defines.TANGRAM_ALPHA_TEST = 0.5;
+    }
+
+    // Destroy all styles for a given rendering resource context
+    destroy (resource_context: unknown): void {
+        Object.keys(this.styles).forEach((_name) => {
+            let style = this.styles[_name];
+            if ((style.resource_context || style.gl) === resource_context) {
+                log('trace', `StyleManager.destroy: destroying render style ${style.name}`);
+
+                if (style.base) {
+                    this.remove(style.name);
+                }
+                style.destroy();
+            }
+        });
+    }
+
+    // Register a style
+    register (style: ManagedStyle): void {
+        this.styles[style.name] = style;
+        this.base_styles[style.name] = style;
+    }
+
+    // Remove a style
+    remove (name: string): void {
+        delete this.styles[name];
+    }
+
+    getActiveStyles () {
+        return this.active_styles;
+    }
+
+    // Get list of active styles based on a set of tiles
+    updateActiveStyles (tiles: StyleManagerTile[]): string[] {
+        this.active_styles = Object.keys(
+            tiles.reduce((active, tile) => {
+                Object.keys(tile.meshes).forEach(s => active[s] = true);
+                return active;
+            }, {} as Record<string, boolean>)
+        );
+        return this.active_styles;
+    }
+
+    getActiveBlendOrders () {
+        return this.active_blend_orders;
+    }
+
+    updateActiveBlendOrders (tiles: StyleManagerTile[]): void {
+        const orders: ActiveStyleBlendOrder[] = [];
+        tiles.forEach(tile => {
+            Object.entries(tile.meshes)
+                .forEach(([style, style_meshes]) => { // for each tile's set of meshes, keyed by style name
+                    style_meshes.forEach(mesh => { // for each style's list of meshes
+                        // find entry for this mesh's blend order, insert if first entry
+                        const blend_order = mesh.variant.blend_order;
+                        let oi = orders.findIndex(x => x.blend_order === blend_order);
+                        oi = oi > -1 ? oi : orders.push({ blend_order, styles: [] }) - 1;
+
+                        // add style to list for this blend order
+                        if (orders[oi].styles.indexOf(style) === -1) {
+                            orders[oi].styles.push(style);
+                        }
+                    });
+                });
+        });
+
+        // sort ascending by blend order
+        this.active_blend_orders = orders.sort((a, b) => Number(a.blend_order) - Number(b.blend_order));
+    }
+
+    mix (style: StyleDefinition, styles: Record<string, StyleDefinition>): StyleDefinition {
+        // Exit early if we have already applied mixins to this style
+        if (style.mixed) {
+            return style;
+        }
+        style.mixed = {};
+
+        // Mixin sources, in order
+        let sources: StyleDefinition[] = [];
+        if (style.mix) {
+            const sourceNames: string[] = [];
+            if (Array.isArray(style.mix)) {
+                sourceNames.push(...style.mix);
+            }
+            else {
+                sourceNames.push(style.mix);
+            }
+            sources = sourceNames.map(x => styles[x]).filter(x => x && x !== style); // TODO: warning on trying to mix into self
+
+            // Track which styles were mixed into this one
+            sources.forEach(s => style.mixed![s.name!] = true);
+        }
+        sources.push(style);
+
+        // Flags - OR'd, true if any style has it set
+        style.animated = sources.some(x => x && x.animated);
+        style.texcoords = sources.some(x => x && x.texcoords);
+
+        // Overwrites - last definition wins
+        style.base = sources.map(x => x.base).filter(x => x).pop();
+        style.lighting = sources.map(x => x.lighting).filter(x => x != null).pop();
+        style.texture = sources.map(x => x.texture).filter(x => x).pop();
+        style.raster = sources.map(x => x.raster).filter(x => x != null).pop();
+        style.dash = sources.map(x => x.dash).filter(x => x != null).pop();
+        style.dash_background_color = sources.map(x => x.dash_background_color).filter(x => x != null).pop();
+        if (sources.some(x => Object.prototype.hasOwnProperty.call(x, 'blend') && x.blend)) {
+            // only mix blend if explicitly set, otherwise let base style choose blending mode
+            // hasOwnProperty check gives preference to base style prototype
+            style.blend = sources.map(x => Object.prototype.hasOwnProperty.call(x, 'blend') && x.blend).filter(x => x).pop();
+        }
+        style.blend_order = sources.map(x => x.blend_order).filter(x => x != null).pop();
+
+        // Merges - property-specific rules for merging values
+        style.defines = Object.assign({}, ...sources.map(x => x.defines).filter(x => x)); // internal defines (not user-defined)
+        style.material = Object.assign({}, ...sources.map(x => x.material).filter(x => x));
+
+        let draws = sources.map(x => x.draw).filter(x => x); // draw defaults
+        if (draws.length > 0) {
+            style.draw = mergeObjects({}, ...draws);
+        }
+
+        // Mix shader properties
+        this.mixShaders(style, styles, sources);
+        return style;
+    }
+
+    // Mix the propertes in the "shaders" block
+    mixShaders (style: StyleDefinition, styles: Record<string, StyleDefinition>, sources: StyleDefinition[]): StyleDefinition {
+        let shaders = {} as MixedStyleShaders; // newly mixed shaders properties
+        let shader_merges = sources.map(x => x.shaders).filter(x => x) as StyleShaderDefinition[]; // just the source styles with shader properties
+
+        // Defines
+        shaders.defines = Object.assign({}, ...shader_merges.map(x => x.defines).filter(x => x));
+
+        // Attributes
+        shaders.attributes = Object.assign({}, ...shader_merges.map(x => x.attributes).filter(x => x));
+
+        // Uniforms
+        shaders.uniforms = {};  // uniforms for this style, both explicitly defined, and mixed from other styles
+        shaders._uniforms = (style.shaders && style.shaders.uniforms) || {}; // uniforms explicitly defined by *this* style
+        shaders._uniform_scopes = {}; // tracks which style each uniform originated from (this one, or ancestor)
+
+        // Mix in uniforms from ancestors, providing means to access
+        sources
+            .filter(x => x.shaders && x.shaders!.uniforms!)
+            .forEach(x => {
+                for (let u in x.shaders!.uniforms!) {
+                    shaders._uniform_scopes[u] = x.name!;
+
+                    // Define getter and setter for this uniform
+                    // Getter returns value for this style if present, otherwise asks appropriate ancestor for it
+                    // Setter sets the value for this style (whether previously present in this style or not)
+                    // Mimics JS prototype/hasOwnProperty behavior, but with multiple ancestors (via mixins)
+                    Object.defineProperty(shaders.uniforms, u, {
+                        enumerable: true,
+                        configurable: true,
+                        get: function () {
+                            // Uniform is explicitly defined on this style
+                            if (shaders._uniforms[u] !== undefined) {
+                                return shaders._uniforms[u];
+                            }
+                            // Uniform was mixed from another style, forward request there
+                            // Identity check is needed to prevent infinite recursion if a previously defined uniform
+                            // is set to undefined
+                            else if (styles[shaders._uniform_scopes[u]].shaders!.uniforms! !== shaders.uniforms) {
+                                return styles[shaders._uniform_scopes[u]].shaders!.uniforms![u];
+                            }
+                            return undefined;
+                        },
+                        set: function (v) {
+                            shaders._uniforms[u] = v;
+                        }
+                    });
+                }
+            });
+
+        // Extensions: build a list of unique extensions
+        shaders.extensions = Object.keys(shader_merges
+            .map(x => x.extensions)
+            .filter(x => x)
+            .reduce((prev, cur) => {
+                // single extension
+                if (typeof cur === 'string') {
+                    prev[cur] = true;
+                }
+                // array of extensions
+                else {
+                    cur!.forEach(x => prev[x] = true);
+                }
+                return prev;
+            }, {} as Record<string, boolean>) || {}
+        );
+
+        // Shader blocks
+        // Mark all shader blocks for the target style as originating with its own name
+        if (style.shaders && style.shaders.blocks) {
+            style.shaders.block_scopes = style.shaders.block_scopes || {};
+            for (let k in style.shaders.blocks) {
+                let block = style.shaders.blocks[k];
+                style.shaders.block_scopes[k] = style.shaders.block_scopes[k] || [];
+                if (Array.isArray(block)) {
+                    (style.shaders.block_scopes[k] as string[]).push(...block.map(() => style.name!));
+                }
+                else {
+                    (style.shaders.block_scopes[k] as string[]).push(style.name!);
+                }
+            }
+        }
+
+        // Merge shader blocks, keeping track of which style each block originated from
+        let mixed: Record<string, boolean> = {}; // all scopes mixed so far
+        shader_merges.forEach(source => {
+            if (!source.blocks) {
+                return;
+            }
+
+            shaders.blocks = shaders.blocks || {};
+            shaders.block_scopes = shaders.block_scopes || {};
+            let mixed_source: Record<string, boolean> = {}; // scopes mixed for this source style
+
+            for (let t in source.blocks) {
+                let block = source.blocks[t];
+                let block_scope = source.block_scopes![t];
+
+                shaders.blocks[t] = shaders.blocks[t] || [];
+                shaders.block_scopes[t] = shaders.block_scopes[t] || [];
+
+                // standardize on arrays (block can be single or multi-value)
+                block = Array.isArray(block) ? block : [block];
+                block_scope = Array.isArray(block_scope) ? block_scope : [block_scope];
+
+                for (let b=0; b < block.length; b++) {
+                    // Skip blocks we've already mixed in from the same scope
+                    // Repeating scope indicates a diamond pattern where a style is being mixed multiple times
+                    if (mixed[block_scope[b]]) {
+                        continue;
+                    }
+                    mixed_source[block_scope[b]] = true;
+
+                    (shaders.blocks[t] as string[]).push(block[b]);
+                    (shaders.block_scopes[t] as string[]).push(block_scope[b]);
+                }
+            }
+
+            // Add styles mixed in from this source - they could be multi-level ancestors,
+            // beyond the first-level "parents" defined in this style's `mix` list
+            Object.assign(mixed, mixed_source);
+        });
+
+        Object.assign(style.mixed!, mixed); // add all newly mixed styles
+
+        style.shaders = shaders; // assign back to style
+        return style;
+    }
+
+    // Create a new style
+    // name: name of new style
+    // config: properties of new style
+    // styles: working set of styles being built (used for mixing in existing styles)
+    create (name: string, config: StyleDefinition, styles: Record<string, StyleDefinition> = {}): StyleDefinition {
+        let style = mergeObjects({} as StyleDefinition, config); // deep copy
+        style.name = name;
+
+        // Style mixins
+        style = this.mix(style, styles);
+
+        // Has base style?
+        // Only renderable (instantiated) styles should be included for run-time use
+        // Others are intermediary/abstract, used during style composition but not execution
+        if (style.base && this.base_styles[style.base]) {
+            this.styles[name] = style = Object.assign(Object.create(this.base_styles[style.base]), style) as ManagedStyle;
+        }
+        else {
+            style.base = null; // null out invalid base style
+        }
+
+        return style;
+    }
+
+    // Called to create and initialize styles
+    build (styles_defs: Record<string, StyleDefinition>): Record<string, ManagedStyle> {
+        const styles = { ...styles_defs }; // copy to avoid modifying underlying object
+
+        // Un-register existing styles from cross-thread communication
+        if (this.styles) {
+            Object.values(this.styles)
+                .forEach(s => WorkerBroker.removeTarget(s.main_thread_target));
+        }
+
+        // Add default blend/base style pairs as needed
+        const blends = ['opaque', 'add', 'multiply', 'overlay', 'inlay', 'translucent'];
+        const bases = ['polygons', 'lines', 'points', 'text', 'raster'];
+        for (const blend of blends) {
+            for (const base of bases) {
+                const style = blend + '_' + base;
+                if (styles[style] == null) {
+                    styles[style] = { base, blend };
+                }
+            }
+        }
+
+        // Sort styles by dependency, then build them
+        let style_deps = Object.keys(styles).sort(
+            (a, b) => this.inheritanceDepth(a, styles) - this.inheritanceDepth(b, styles)
+        );
+
+        // Only keep built-in base styles
+        for (let sname in this.styles) {
+            if (!this.base_styles[sname]) {
+                // Rebuilt styles own programs and portable material buffers;
+                // release them before their last manager reference is removed.
+                this.styles[sname].destroy();
+                delete this.styles[sname];
+            }
+            else {
+                // Base styles are reused, but initStyles() replaces their
+                // program references. Retire owned GPU resources first.
+                this.styles[sname].destroy();
+                this.styles[sname].reset();
+            }
+        }
+
+        // Working set of styles being built
+        let ws: Record<string, StyleDefinition> = {};
+        style_deps.forEach(sname => {
+            ws[sname] = this.create(sname, styles[sname], ws);
+        });
+
+        return this.styles;
+    }
+
+    // Initialize all styles
+    initStyles (scene: import('./style-runtime-types').StyleInitOptions = {}): void {
+        // Initialize all
+        for (let sname in this.styles) {
+            this.styles[sname].init(scene);
+        }
+    }
+
+    // Given a style key in a set of styles to add, count the length of the inheritance chain
+    inheritanceDepth (key: string, styles: Record<string, StyleDefinition>): number {
+        let parents = 0;
+
+        for (;;) {
+            let style = styles[key];
+            if (!style) {
+                // this is a scene def error, trying to extend a style that doesn't exist
+                break;
+            }
+
+            // Dependency chain ends when this style isn't mixing in any others
+            if (!style.mix) {
+                break;
+            }
+
+            // Traverse next parent style
+            parents++;
+
+            if (Array.isArray(style.mix)) {
+                // If multiple mixins, find the deepest one
+                parents += Math.max(...style.mix.map(s => {
+                    // Trying to mix into itself!
+                    if (key === s) {
+                        return;
+                    }
+
+                    return this.inheritanceDepth(s, styles);
+                }) as number[]);
+                break;
+            }
+            else {
+                // Trying to mix into itself!
+                if (key === style.mix) {
+                    break;
+                }
+
+                // If single mixin, continue loop up the tree
+                key = style.mix;
+            }
+        }
+        return parents;
+    }
+
+}