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

package/src/styles/points/points_fragment.glsl

@@ -0,0 +1,126 @@
+// Tangram
+// SPDX-License-Identifier: MIT
+// Copyright (c) 2013-2016 Brett Camper and Mapzen
+
+uniform vec2 u_resolution;
+uniform float u_time;
+uniform vec3 u_map_position;
+uniform vec4 u_tile_origin;
+uniform float u_meters_per_pixel;
+uniform float u_device_pixel_ratio;
+uniform float u_visible_time;
+uniform mat3 u_normalMatrix;
+uniform mat3 u_inverseNormalMatrix;
+
+uniform sampler2D u_texture;
+uniform float u_point_type;
+uniform bool u_apply_color_blocks;
+
+varying vec4 v_color;
+varying vec2 v_texcoord;
+varying vec4 v_world_position;
+varying float v_alpha_factor;
+
+#ifdef TANGRAM_HAS_SHADER_POINTS
+    varying vec4 v_outline_color;
+    varying float v_outline_edge;
+    varying float v_aa_offset;
+#endif
+
+#ifdef TANGRAM_SHOW_HIDDEN_LABELS
+    varying float v_label_hidden;
+#endif
+
+#define TANGRAM_NORMAL vec3(0., 0., 1.)
+
+#pragma tangram: attributes
+#pragma tangram: camera
+#pragma tangram: material
+#pragma tangram: lighting
+#pragma tangram: raster
+#pragma tangram: global
+
+#ifdef TANGRAM_HAS_SHADER_POINTS
+    //l is the distance from the center to the fragment, R is the radius of the drawn point
+    float _tangram_antialias(float l, float R){
+        float low  = R - v_aa_offset;
+        float high = R + v_aa_offset;
+        return 1. - smoothstep(low, high, l);
+    }
+#endif
+
+void main (void) {
+    // Initialize globals
+    #pragma tangram: setup
+
+    vec4 color = v_color;
+
+    #ifdef TANGRAM_HAS_SHADER_POINTS
+        // Only apply shader blocks to point, not to attached text (N.B.: for compatibility with ES)
+        if (u_point_type == TANGRAM_POINT_TYPE_TEXTURE) { // sprite texture
+            color *= texture2D(u_texture, v_texcoord);
+        }
+        else if (u_point_type == TANGRAM_POINT_TYPE_LABEL) { // label texture
+            color = texture2D(u_texture, v_texcoord);
+            color.rgb /= max(color.a, 0.001); // un-multiply canvas texture
+        }
+        else if (u_point_type == TANGRAM_POINT_TYPE_SHADER) { // shader point
+            // Mask of outermost circle, either outline or point boundary
+            float _d = length(v_texcoord); // distance to this fragment from the point center
+            float _outer_alpha = _tangram_antialias(_d, 1.);
+            float _fill_alpha = _tangram_antialias(_d, 1. - (v_outline_edge * 0.5)) * color.a;
+            float _stroke_alpha = (_outer_alpha - _tangram_antialias(_d, 1. - v_outline_edge)) * v_outline_color.a;
+
+            // Apply alpha compositing with stroke 'over' fill.
+            #ifdef TANGRAM_BLEND_ADD
+                color.a = _stroke_alpha + _fill_alpha;
+                color.rgb = color.rgb * _fill_alpha + v_outline_color.rgb * _stroke_alpha;
+            #else // TANGRAM_BLEND_OVERLAY (and fallback for not implemented blending modes)
+                color.a = _stroke_alpha + _fill_alpha * (1. - _stroke_alpha);
+                color.rgb = mix(color.rgb * _fill_alpha, v_outline_color.rgb, _stroke_alpha) / max(color.a, 0.001); // avoid divide by zero
+            #endif
+        }
+    #else
+        // If shader points not supported, assume label texture
+        color = texture2D(u_texture, v_texcoord);
+        color.rgb /= max(color.a, 0.001); // un-multiply canvas texture
+    #endif
+
+    // Shader blocks for color/filter are only applied for sprites, shader points, and standalone text,
+    // NOT for text attached to a point (N.B.: for compatibility with ES)
+    if (u_apply_color_blocks) {
+        #pragma tangram: color
+        #pragma tangram: filter
+    }
+
+    color.a *= v_alpha_factor;
+
+    // highlight hidden label in fragment shader for debugging
+    #ifdef TANGRAM_SHOW_HIDDEN_LABELS
+        if (v_label_hidden > 0.) {
+            color.a *= 0.5;
+            color.rgb = vec3(1., 0., 0.);
+        }
+    #endif
+
+    // Use alpha test as a lower-quality substitute
+    // For opaque and translucent: avoid transparent pixels writing to depth buffer, obscuring geometry underneath
+    // For multiply: avoid transparent pixels multiplying geometry underneath to zero/full black
+    #if defined(TANGRAM_BLEND_OPAQUE) || defined(TANGRAM_BLEND_TRANSLUCENT) || defined(TANGRAM_BLEND_MULTIPLY)
+        if (color.a < TANGRAM_ALPHA_TEST) {
+            discard;
+        }
+    #endif
+
+    // Make points more visible in wireframe debug mode
+    #ifdef TANGRAM_WIREFRAME
+        color = vec4(vec3(0.5), 1.); // use gray outline for textured points
+        #ifdef TANGRAM_HAS_SHADER_POINTS
+            if (u_point_type == TANGRAM_POINT_TYPE_SHADER) {
+                color = vec4(v_color.rgb, 1.); // use original vertex color outline for shader points
+            }
+        #endif
+    #endif
+
+    gl_FragColor = color;
+}

package/src/styles/points/points_vertex.glsl

@@ -0,0 +1,230 @@
+// Tangram
+// SPDX-License-Identifier: MIT
+// Copyright (c) 2013-2016 Brett Camper and Mapzen
+// Copyright (c) 2026 vis.gl contributors
+
+uniform vec2 u_resolution;
+uniform float u_time;
+uniform vec3 u_map_position;
+uniform vec4 u_tile_origin;
+uniform float u_tile_proxy_order_offset;
+uniform bool u_tile_fade_in;
+uniform float u_meters_per_pixel;
+uniform float u_device_pixel_ratio;
+uniform float u_visible_time;
+uniform bool u_view_panning;
+uniform float u_view_pan_snap_timer;
+#ifndef TANGRAM_UNIFORM_BLOCK_TANGRAMVIEW
+uniform int u_projection_mode;
+#endif
+uniform mat4 u_model;
+uniform mat4 u_modelView;
+uniform mat3 u_normalMatrix;
+uniform mat3 u_inverseNormalMatrix;
+
+attribute vec4 a_position;
+attribute vec4 a_shape;
+attribute vec4 a_color;
+attribute vec2 a_texcoord;
+attribute vec2 a_offset;
+#ifdef TANGRAM_CPU_PROJECTED
+attribute vec3 a_projected_position;
+#endif
+
+uniform float u_point_type;
+
+#ifdef TANGRAM_CURVED_LABEL
+    attribute vec4 a_offsets;
+    attribute vec4 a_pre_angles;
+    attribute vec4 a_angles;
+#endif
+
+varying vec4 v_color;
+varying vec2 v_texcoord;
+varying vec4 v_world_position;
+varying float v_alpha_factor;
+
+#ifdef TANGRAM_HAS_SHADER_POINTS
+    attribute float a_outline_edge;
+    attribute vec4 a_outline_color;
+
+    varying float v_outline_edge;
+    varying vec4 v_outline_color;
+    varying float v_aa_offset;
+#endif
+
+#ifdef TANGRAM_SHOW_HIDDEN_LABELS
+    varying float v_label_hidden;
+#endif
+
+#define TANGRAM_PI 3.14159265359
+#define TANGRAM_NORMAL vec3(0., 0., 1.)
+
+#pragma tangram: attributes
+#pragma tangram: camera
+#pragma tangram: material
+#pragma tangram: lighting
+#pragma tangram: raster
+#pragma tangram: global
+
+vec2 rotate2D(vec2 _st, float _angle) {
+    return mat2(cos(_angle),-sin(_angle),
+                sin(_angle),cos(_angle)) * _st;
+}
+
+#pragma tangram: projection
+
+#pragma tangram: globe_visibility
+
+#ifdef TANGRAM_CURVED_LABEL
+    // Assumes stops are [0, 0.33, 0.66, 0.99];
+    float mix4linear(vec4 v, float x) {
+        x = clamp(x, 0., 1.);
+        return mix(mix(v[0], v[1], 3. * x),
+                   mix(v[1],
+                       mix(v[2], v[3], 3. * (max(x, .66) - .66)),
+                       3. * (clamp(x, .33, .66) - .33)),
+                   step(0.33, x)
+                );
+    }
+#endif
+
+void main() {
+    // Initialize globals
+    #pragma tangram: setup
+
+    // discard hidden labels by collapsing into degenerate triangle
+    #ifndef TANGRAM_SHOW_HIDDEN_LABELS
+        if (a_shape.w == 0.) {
+            gl_Position = vec4(0., 0., 0., 1.);
+            return;
+        }
+    #else
+        // highlight hidden label in fragment shader for debugging
+        if (a_shape.w == 0.) {
+            v_label_hidden = 1.; // label debug testing
+        }
+        else {
+            v_label_hidden = 0.;
+        }
+    #endif
+
+    v_alpha_factor = 1.0;
+    v_color = a_color;
+    v_texcoord = a_texcoord; // UV from vertex attribute
+
+    #ifdef TANGRAM_HAS_SHADER_POINTS
+        v_outline_color = a_outline_color;
+        v_outline_edge = a_outline_edge;
+
+        if (u_point_type == TANGRAM_POINT_TYPE_SHADER) { // shader point
+            // use point dimensions for UVs instead (ignore attribute), add antialiasing info for fragment shader
+            float _size = abs(a_shape.x / 128.); // radius in pixels
+            v_texcoord = sign(a_shape.xy) * (_size + 1.) / _size;
+            _size += 2.;
+            v_aa_offset = 2. / _size;
+        }
+    #endif
+
+    // Position
+    vec4 world_position;
+    #ifdef TANGRAM_CPU_PROJECTED
+    world_position = vec4(a_projected_position, 1.);
+    vec4 position = world_position;
+    #else
+    vec4 local_position = vec4(a_position.xyz, 1.);
+    #ifdef TANGRAM_TERRAIN_DRAPED
+        local_position.z += tangramTerrainHeight();
+    #endif
+    vec4 position = tangramModelView(local_position, world_position);
+    #endif
+    // Occlude the shared geographic anchor before screen-space offsets. This
+    // also applies to text and selection programs using this vertex shader.
+    if (u_projection_mode == 1 && tangramGlobeOccluded(position.xyz, world_position.z, u_eye)) {
+        gl_Position = vec4(2., 2., 2., 1.);
+        return;
+    }
+
+    // Apply positioning and scaling in screen space
+    vec2 _shape = a_shape.xy / 256.;                 // values have an 8-bit fraction
+    vec2 _offset = vec2(a_offset.x, -a_offset.y);    // flip y to make it point down
+    float _theta = a_shape.z / 4096.;
+
+    #ifdef TANGRAM_CURVED_LABEL
+        //TODO: potential bug? null is passed in for non-curved labels, otherwise the first offset will be 0
+        if (a_offsets[0] != 0.){
+            vec4 _angles_scaled = (TANGRAM_PI / 16384.) * a_angles;
+            vec4 _pre_angles_scaled = (TANGRAM_PI / 128.) * a_pre_angles;
+            vec4 _offsets_scaled = (1. / 64.) * a_offsets;
+
+            float _zoom = clamp(u_map_position.z - u_tile_origin.z, 0., 1.); //fract(u_map_position.z);
+            float _pre_angle = mix4linear(_pre_angles_scaled, _zoom);
+            float _angle = mix4linear(_angles_scaled, _zoom);
+            float _offset_curve = mix4linear(_offsets_scaled, _zoom);
+
+            _shape = rotate2D(_shape, _pre_angle); // rotate in place
+            _shape.x += _offset_curve;            // offset for curved label segment
+            _shape = rotate2D(_shape, _angle);     // rotate relative to curved label anchor
+            _shape += rotate2D(_offset, _theta);   // offset if specified in the scene file
+        }
+        else {
+            _shape = rotate2D(_shape + _offset, _theta);
+        }
+    #else
+        _shape = rotate2D(_shape + _offset, _theta);
+    #endif
+
+    // Fade in (if requested) based on time mesh has been visible.
+    // Value passed to fragment shader in the v_alpha_factor varying
+    #ifdef TANGRAM_FADE_IN_RATE
+        if (u_tile_fade_in) {
+            v_alpha_factor *= clamp(u_visible_time * TANGRAM_FADE_IN_RATE, 0., 1.);
+        }
+    #endif
+
+    // World coordinates for 3d procedural textures
+    v_world_position = world_position;
+    v_world_position.xy += _shape * u_meters_per_pixel;
+    v_world_position = wrapWorldPosition(v_world_position);
+
+    // Modify position before camera projection
+    #pragma tangram: position
+
+    cameraProjection(position);
+
+    #ifdef TANGRAM_LAYER_ORDER
+        // +1 is to keep all layers including proxies > 0
+        applyLayerOrder(a_position.w + u_tile_proxy_order_offset + 1., position);
+    #endif
+
+    // Apply pixel offset in screen-space
+    // Multiply by 2 is because screen is 2 units wide Normalized Device Coords (and u_resolution device pixels wide)
+    // Device pixel ratio adjustment is because shape is in logical pixels
+    position.xy += _shape * position.w * 2. * u_device_pixel_ratio / u_resolution;
+    #ifdef TANGRAM_HAS_SHADER_POINTS
+        if (u_point_type == TANGRAM_POINT_TYPE_SHADER) { // shader point
+            // enlarge by 1px to catch missed MSAA fragments
+            position.xy += sign(_shape) * position.w * u_device_pixel_ratio / u_resolution;
+        }
+    #endif
+
+    // Snap to pixel grid
+    // Only applied to fully upright sprites/labels (not shader-drawn points), while panning is not active
+    #ifdef TANGRAM_HAS_SHADER_POINTS
+    if (!u_view_panning && (abs(_theta) < TANGRAM_EPSILON) && u_point_type != TANGRAM_POINT_TYPE_SHADER) {
+    #else
+    if (!u_view_panning && (abs(_theta) < TANGRAM_EPSILON)) {
+    #endif
+        vec2 _position_fract = fract((((position.xy / position.w) + 1.) * .5) * u_resolution);
+        vec2 _position_snap = position.xy + ((step(0.5, _position_fract) - _position_fract) * position.w * 2. / u_resolution);
+
+        // Animate the snapping to smooth the transition and make it less noticeable
+        #ifdef TANGRAM_VIEW_PAN_SNAP_RATE
+            position.xy = mix(position.xy, _position_snap, clamp(u_view_pan_snap_timer * TANGRAM_VIEW_PAN_SNAP_RATE, 0., 1.));
+        #else
+            position.xy = _position_snap;
+        #endif
+    }
+
+    gl_Position = position;
+}

package/src/styles/points/points_wgsl.ts

@@ -0,0 +1,189 @@
+// tangram-layers
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+import {GLOBE_PROJECTION_WGSL, TERRAIN_DRAPING_WGSL} from '../../scene/projection_shaders';
+import {GLOBE_VISIBILITY_WGSL} from '../globe_visibility_wgsl';
+
+/**
+ * Build the portable point shader used by the luma.gl WebGPU renderer.
+ *
+ * One buffered point-type attribute selects sprite, attached-label, or shader
+ * circle rendering without scalar WebGL uniforms. All point variants share an
+ * all-buffered vertex layout so WebGPU never depends on constant attributes.
+ *
+ * @param cpuProjection Use preprojected ground anchors while retaining screen-space billboard shapes.
+ * @param selection Emit the worker selection key after visible-shape masking.
+ * @param terrain Add physical terrain height/morph attributes to the anchor.
+ * @returns {string} Complete WGSL source for Tangram's point style.
+ */
+export function buildPointsWGSL(cpuProjection = false, selection = false, terrain = false) {
+    return `
+@group(0) @binding(3) var u_texture: texture_2d<f32>;
+@group(0) @binding(4) var u_textureSampler: sampler;
+${GLOBE_PROJECTION_WGSL}
+${terrain ? TERRAIN_DRAPING_WGSL : ''}
+${GLOBE_VISIBILITY_WGSL}
+
+struct PointAttributes {
+    ${terrain ? '@location(14) a_terrain: vec4<f32>, @location(15) a_terrain_previous: vec4<f32>,' : ''}
+    @location(0) a_position: vec4<${terrain ? 'f32' : 'i32'}>,
+    @location(1) a_shape: vec4<i32>,
+    @location(2) a_texcoord: vec2<f32>,
+    @location(3) a_offset: vec2<i32>,
+    @location(4) a_color: vec4<f32>,
+    ${selection ? '@location(5) a_selection_color: vec4<f32>,' : ''}
+    @location(6) a_outline_color: vec4<f32>,
+    @location(7) a_outline_edge: f32,
+    @location(8) a_point_type: f32,
+    ${cpuProjection ? '@location(9) a_projected_position: vec3<f32>,' : ''}
+};
+
+struct PointVaryings {
+    @builtin(position) position: vec4<f32>,
+    @location(0) texcoord: vec2<f32>,
+    @location(1) color: vec4<f32>,
+    @location(2) outline_color: vec4<f32>,
+    @location(3) outline_edge: f32,
+    @location(4) aa_offset: f32,
+    @location(5) @interpolate(flat) point_type: u32,
+    ${selection ? '@location(6) @interpolate(flat) selection_color: vec4<f32>,' : ''}
+};
+
+fn rotate2D(point: vec2<f32>, angle: f32) -> vec2<f32> {
+    let cosine = cos(angle);
+    let sine = sin(angle);
+    return vec2<f32>(
+        cosine * point.x - sine * point.y,
+        sine * point.x + cosine * point.y
+    );
+}
+
+fn antialiasCircle(distance: f32, radius: f32, offset: f32) -> f32 {
+    return 1.0 - smoothstep(radius - offset, radius + offset, distance);
+}
+
+@vertex
+fn vertexMain(attributes: PointAttributes) -> PointVaryings {
+    var output: PointVaryings;
+    ${selection ? 'output.selection_color = attributes.a_selection_color;' : ''}
+    output.color = attributes.a_color;
+    output.outline_color = attributes.a_outline_color;
+    output.outline_edge = attributes.a_outline_edge;
+    output.point_type = u32(round(attributes.a_point_type));
+    output.aa_offset = 0.0;
+    output.texcoord = vec2<f32>(
+        attributes.a_texcoord.x,
+        1.0 - attributes.a_texcoord.y
+    );
+
+    if (attributes.a_shape.w == 0) {
+        output.position = vec4<f32>(2.0, 2.0, 2.0, 1.0);
+        return output;
+    }
+
+    var shape = vec2<f32>(attributes.a_shape.xy) / 256.0;
+    let offset = vec2<f32>(
+        f32(attributes.a_offset.x),
+        -f32(attributes.a_offset.y)
+    );
+    let theta = f32(attributes.a_shape.z) / 4096.0;
+
+    if (output.point_type == 3u) {
+        let point_size = max(abs(f32(attributes.a_shape.x)) / 128.0, 1.0);
+        output.texcoord = sign(vec2<f32>(attributes.a_shape.xy)) *
+            ((point_size + 1.0) / point_size);
+        output.aa_offset = 2.0 / (point_size + 2.0);
+    }
+
+    shape = rotate2D(shape + offset, theta);
+    let local_position = vec4<f32>(
+        f32(attributes.a_position.x),
+        f32(attributes.a_position.y),
+        f32(attributes.a_position.z) ${terrain ? '+ tangramTerrainHeight(attributes.a_terrain, attributes.a_terrain_previous)' : ''},
+        1.0
+    );
+    let projected_position = ${cpuProjection ? 'vec4<f32>(attributes.a_projected_position, 1.0)' : 'tangramModelView(local_position)'};
+    if (TangramView.u_projection_mode == 1 && tangramGlobeOccluded(projected_position.xyz,
+        (TangramTile.u_model * local_position).z, TangramCamera.u_eye)) {
+        output.position = vec4<f32>(2.0, 2.0, 2.0, 1.0);
+        return output;
+    }
+    var clip_position = TangramCamera.u_projection * projected_position;
+    ${cpuProjection ? 'clip_position.z = (clip_position.z + clip_position.w) * 0.5;' : ''}
+    let screen_offset = shape * clip_position.w * 2.0 *
+        TangramView.u_device_pixel_ratio / TangramView.u_resolution;
+    clip_position = vec4<f32>(
+        clip_position.xy + screen_offset,
+        clip_position.zw
+    );
+
+    if (output.point_type == 3u) {
+        let antialias_offset = sign(shape) * clip_position.w *
+            TangramView.u_device_pixel_ratio / TangramView.u_resolution;
+        clip_position = vec4<f32>(
+            clip_position.xy + antialias_offset,
+            clip_position.zw
+        );
+    }
+
+    output.position = clip_position;
+    return output;
+}
+
+@fragment
+fn fragmentMain(input: PointVaryings) -> @location(0) vec4<f32> {
+    var color = input.color;
+
+    if (input.point_type == 1u) {
+        color *= textureSampleLevel(
+            u_texture,
+            u_textureSampler,
+            input.texcoord,
+            0.0
+        );
+    }
+    else if (input.point_type == 2u) {
+        let atlas_color = textureSampleLevel(
+            u_texture,
+            u_textureSampler,
+            input.texcoord,
+            0.0
+        );
+        color = vec4<f32>(
+            atlas_color.rgb / max(atlas_color.a, 0.001),
+            atlas_color.a
+        );
+    }
+    else {
+        let distance = length(input.texcoord);
+        let outer_alpha = antialiasCircle(distance, 1.0, input.aa_offset);
+        let fill_alpha = antialiasCircle(
+            distance,
+            1.0 - input.outline_edge * 0.5,
+            input.aa_offset
+        ) * color.a;
+        let stroke_alpha = max(
+            outer_alpha - antialiasCircle(
+                distance,
+                1.0 - input.outline_edge,
+                input.aa_offset
+            ),
+            0.0
+        ) * input.outline_color.a;
+        let composed_alpha = stroke_alpha + fill_alpha * (1.0 - stroke_alpha);
+        let composed_rgb = mix(
+            color.rgb * fill_alpha,
+            input.outline_color.rgb,
+            stroke_alpha
+        ) / max(composed_alpha, 0.001);
+        color = vec4<f32>(composed_rgb, composed_alpha);
+    }
+
+    if (color.a < 0.001) {
+        discard;
+    }
+    return ${selection ? 'input.selection_color' : 'color'};
+}
+`;
+}