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

package/src/styles/polygons/polygons.ts

@@ -0,0 +1,268 @@
+// Tangram
+// SPDX-License-Identifier: MIT
+// Copyright (c) 2013-2016 Brett Camper and Mapzen
+// Copyright (c) 2026 vis.gl contributors
+
+// Polygon rendering style
+
+import type {GeometryStyleRuntime, GeometryFeature, GeometryDraw, RawGeometryDraw, GeometryContext, GeometryMeshVariant, PolygonFeatureStyle, GeometryBuildMesh, GeometryExtrusion} from '../geometry-style-types';
+import type {GeometryPolygon} from '../../builders/geometry-types';
+
+import {Style} from '../style';
+import StyleParser from '../style_parser';
+import gl from '../../gl/constants'; // web workers don't have access to GL context, so import all GL constants
+import VertexLayout from '../../gl/vertex_layout';
+import {buildPolygons, buildExtrudedPolygons} from '../../builders/polygons';
+import Geo from '../../utils/geo';
+
+import polygons_vs from './polygons_vertex.glsl';
+import polygons_fs from './polygons_fragment.glsl';
+import {buildPolygonsWGSL} from './polygons_wgsl';
+import {GLOBE_PROJECTION_GLSL, TERRAIN_DRAPING_GLSL} from '../../scene/projection_shaders';
+
+export const Polygons: GeometryStyleRuntime = Object.create(Style);
+
+Object.assign(Polygons, {
+    name: 'polygons',
+    built_in: true,
+    vertex_shader_src: polygons_vs.replace('#pragma tangram: projection', GLOBE_PROJECTION_GLSL + TERRAIN_DRAPING_GLSL),
+    fragment_shader_src: polygons_fs,
+    selection: true, // enable feature selection
+
+    getWGSLShaderSource(this: GeometryStyleRuntime, selection = false) {
+        return buildPolygonsWGSL({ raster: this.raster === 'color', lighting: this.portable_lighting_mode,
+            lightCount: this.portable_light_count, cpuProjection: Boolean(this.cpu_projection), terrain: Boolean(this.terrain), selection });
+    },
+
+    init(this: GeometryStyleRuntime) {
+        Style.init.apply(this, arguments as unknown as Parameters<typeof Style.init>);
+
+        // Tell the shader about optional attributes (shader is shared with lines style, which has different config)
+        this.defines.TANGRAM_NORMAL_ATTRIBUTE = true;
+        this.defines.TANGRAM_TEXTURE_COORDS = this.texcoords;
+        this.defines.TANGRAM_CPU_PROJECTED = Boolean(this.cpu_projection && ['polygons', 'raster'].includes(this.baseStyle()));
+        const positionBlocks = this.shaders?.blocks?.position;
+        const attributes = this.shaders?.attributes;
+        const hasPositionBlocks = Array.isArray(positionBlocks) ? positionBlocks.length > 0 : Boolean(positionBlocks);
+        const hasAttributes = attributes && typeof attributes === 'object' ? Object.keys(attributes).length > 0 : Boolean(attributes);
+        if (this.cpu_projection && ['polygons', 'raster'].includes(this.baseStyle()) &&
+            (hasPositionBlocks || hasAttributes)) {
+            throw new Error('CPU projection requires unlit polygons without position blocks or custom attributes');
+        }
+    },
+
+    _parseFeature (this: GeometryStyleRuntime, feature: GeometryFeature, draw: GeometryDraw, context: GeometryContext) {
+        var style = this.feature_style;
+
+        style.color = this.parseColor(draw.color, context);
+        if (!style.color) {
+            return null;
+        }
+
+        style.alpha = StyleParser.evalCachedProperty(draw.alpha, context) as number | undefined; // optional alpha override
+
+        style.variant = draw.variant; // pre-calculated mesh variant
+
+        style.z = (StyleParser.evalCachedDistanceProperty(draw.z, context) as number) || StyleParser.defaults.z;
+        style.z *= Geo.height_scale; // provide sub-meter precision of height values
+
+        style.extrude = StyleParser.evalProperty(draw.extrude, context) as GeometryExtrusion;
+        if (style.extrude) {
+            // use feature's height and min_height properties
+            if (style.extrude === true) {
+                style.height = feature.properties.height || StyleParser.defaults.height;
+                style.min_height = feature.properties.min_height || StyleParser.defaults.min_height;
+
+            }
+            // explicit height, no min_height
+            else if (typeof style.extrude === 'number') {
+                style.height = style.extrude;
+                style.min_height = 0;
+            }
+            // explicit height and min_height
+            else if (Array.isArray(style.extrude)) {
+                style.min_height = style.extrude[0];
+                style.height = style.extrude[1];
+            }
+
+            style.height *= Geo.height_scale;       // provide sub-meter precision of height values
+            style.min_height *= Geo.height_scale;
+        }
+
+        if (this.cpu_projection) {
+            const heights = style.extrude ? [style.z + style.min_height, style.z + style.height] : [style.z];
+            if (heights.some(height => !Number.isFinite(height) || height < -32768 || height > 32767)) {
+                throw new Error('Projected polygon height exceeds signed 16-bit meter packing');
+            }
+            if (!this.cpu_projection.allowElevation && heights.some(height => height !== 0)) {
+                throw new Error('Projected polygon elevation requires allowElevation');
+            }
+        }
+        style.tile_edges = draw.tile_edges; // usually activated for debugging, or rare visualization needs
+
+        return style;
+    },
+
+    _preprocess (this: GeometryStyleRuntime, draw: RawGeometryDraw) {
+        draw.color = StyleParser.createColorPropertyCache(draw.color);
+        draw.alpha = StyleParser.createPropertyCache(draw.alpha);
+        draw.z = StyleParser.createPropertyCache(draw.z, StyleParser.parseUnits);
+        this.computeVariant(draw);
+        // Cache creation is the normalization boundary for authored draw values.
+        return draw as GeometryDraw;
+    },
+
+    // Calculate and store mesh variant (unique by draw group but not feature)
+    computeVariant (this: GeometryStyleRuntime, draw: GeometryDraw | RawGeometryDraw) {
+        // Factors that determine a unique mesh rendering variant
+        const selection = (draw.interactive ? 1 : 0); // whether feature has interactivity
+        const normal = (draw.extrude != null ? 1 : 0); // whether feature has extrusion (need per-vertex normals)
+        const texcoords = (this.texcoords ? 1 : 0); // whether feature has texture UVs
+        const blend_order = this.getBlendOrderForDraw(draw);
+        const key = [selection, normal, texcoords, blend_order].join('/');
+        draw.variant = key;
+
+        if (this.variants[key] == null) {
+            this.variants[key] = {
+                key,
+                blend_order,
+                mesh_order: 0,
+                selection,
+                normal,
+                texcoords
+            };
+        }
+    },
+
+    // Override
+    // Create or return desired vertex layout permutation based on flags
+    vertexLayoutForMeshVariant (this: GeometryStyleRuntime, variant: GeometryMeshVariant) {
+        if (this.vertex_layouts[variant.key] == null) {
+            const portable_normal = this.shader_language === 'wgsl';
+            // Attributes for this mesh variant
+            // Optional attributes have placeholder values assigned with `static` parameter
+            const attribs = [
+                { name: 'a_position', size: 4, type: gl.SHORT, normalized: false },
+                {
+                    name: 'a_normal',
+                    size: portable_normal ? 4 : 3,
+                    type: gl.BYTE,
+                    normalized: true,
+                    static: (variant.normal || portable_normal ? null : [0, 0, 1])
+                }, // gets padded to 4-bytes
+                { name: 'a_color', size: 4, type: gl.UNSIGNED_BYTE, normalized: true },
+                { name: 'a_selection_color', size: 4, type: gl.UNSIGNED_BYTE, normalized: true, static: (variant.selection || portable_normal ? null : [0, 0, 0, 0]) },
+                { name: 'a_texcoord', size: 2, type: gl.UNSIGNED_SHORT, normalized: true, static: (variant.texcoords ? null : [0, 0]) }
+            ];
+
+            this.addCustomAttributesToAttributeList(attribs);
+            if (this.cpu_projection && ['polygons', 'raster'].includes(this.baseStyle())) {
+                attribs.push({name: 'a_projected_position', size: 3, type: gl.FLOAT, normalized: false});
+                attribs.push({name: 'a_projected_normal', size: 3, type: gl.FLOAT, normalized: false});
+            }
+            this.vertex_layouts[variant.key] = new VertexLayout(attribs);
+        }
+        return this.vertex_layouts[variant.key];
+    },
+
+    // Override
+    meshVariantTypeForDraw (this: GeometryStyleRuntime, draw: Pick<GeometryDraw, 'variant'>) {
+        return this.variants[draw.variant]; // return pre-calculated mesh variant
+    },
+
+    /**
+     * A "template" that sets constant attibutes for each vertex, which is then modified per vertex or per feature.
+     * A plain JS array matching the order of the vertex layout.
+     */
+    makeVertexTemplate(this: GeometryStyleRuntime, style: PolygonFeatureStyle, mesh: GeometryBuildMesh) {
+        let i = 0;
+
+        // a_position.xyz - vertex position
+        // a_position.w - layer order
+        this.vertex_template[i++] = 0;
+        this.vertex_template[i++] = 0;
+        this.vertex_template[i++] = style.z || 0;
+        this.vertex_template[i++] = this.scaleOrder(style.order);
+
+        // a_normal.xyz - surface normal
+        // only stored per-vertex for extruded features (hardcoded to 'up' for others)
+        if (mesh.variant.normal || this.shader_language === 'wgsl') {
+            this.vertex_template[i++] = 0;
+            this.vertex_template[i++] = 0;
+            this.vertex_template[i++] = 1 * 127;
+            if (this.shader_language === 'wgsl') {
+                this.vertex_template[i++] = 0;
+            }
+        }
+
+        // a_color.rgba - feature color
+        this.vertex_template[i++] = style.color[0] * 255;
+        this.vertex_template[i++] = style.color[1] * 255;
+        this.vertex_template[i++] = style.color[2] * 255;
+        this.vertex_template[i++] = (style.alpha != null ? style.alpha : style.color[3]) * 255;
+
+        // a_selection_color.rgba - selection color
+        if (mesh.variant.selection || this.shader_language === 'wgsl') {
+            this.vertex_template[i++] = style.selection_color[0] * 255;
+            this.vertex_template[i++] = style.selection_color[1] * 255;
+            this.vertex_template[i++] = style.selection_color[2] * 255;
+            this.vertex_template[i++] = style.selection_color[3] * 255;
+        }
+
+        // a_texcoord.uv - texture coordinates
+        if (mesh.variant.texcoords) {
+            this.vertex_template[i++] = 0;
+            this.vertex_template[i++] = 0;
+        }
+
+        this.addCustomAttributesToVertexTemplate(style, i);
+        if (this.cpu_projection) {
+            const projectedIndex = mesh.vertex_data.vertex_layout.index.a_projected_position;
+            this.vertex_template[projectedIndex] = 0;
+            this.vertex_template[projectedIndex + 1] = 0;
+            this.vertex_template[projectedIndex + 2] = 0;
+            const normalIndex = mesh.vertex_data.vertex_layout.index.a_projected_normal;
+            if (normalIndex !== undefined) {
+                this.vertex_template[normalIndex] = 0;
+                this.vertex_template[normalIndex + 1] = 0;
+                this.vertex_template[normalIndex + 2] = 1;
+            }
+        }
+        return this.vertex_template;
+    },
+
+    buildPolygons(this: GeometryStyleRuntime, polygons: GeometryPolygon[], style: PolygonFeatureStyle, context: GeometryContext) {
+        let mesh = this.getTileMesh(context.tile, this.meshVariantTypeForDraw(style));
+        let vertex_data = mesh.vertex_data;
+        let vertex_layout = vertex_data.vertex_layout;
+        let vertex_template = this.makeVertexTemplate(style, mesh);
+        let options = {
+            texcoord_index: vertex_layout.index.a_texcoord,
+            texcoord_normalize: 65535, // scale UVs to unsigned shorts
+            remove_tile_edges: !style.tile_edges,
+            tile_edge_tolerance: Geo.tile_scale * context.tile.pad_scale * 4,
+            winding: context.winding
+        };
+
+        // Extruded polygons (e.g. 3D buildings)
+        if (style.extrude && style.height) {
+            return buildExtrudedPolygons(
+                polygons,
+                style.z, style.height, style.min_height,
+                vertex_data, vertex_template,
+                vertex_layout.index.a_normal,
+                127, // scale normals to signed bytes
+                options
+            );
+        }
+        // Regular polygons
+        else {
+            return buildPolygons(
+                polygons,
+                vertex_data, vertex_template,
+                options
+            );
+        }
+    }
+
+} satisfies Partial<GeometryStyleRuntime>);

package/src/styles/polygons/polygons_fragment.glsl

@@ -0,0 +1,173 @@
+// 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_meters_per_pixel;
+uniform float u_device_pixel_ratio;
+uniform mat3 u_normalMatrix;
+uniform mat3 u_inverseNormalMatrix;
+#ifndef TANGRAM_UNIFORM_BLOCK_TANGRAMVIEW
+uniform highp int u_projection_mode;
+#endif
+
+varying vec4 v_position;
+varying vec3 v_normal;
+varying vec4 v_color;
+varying vec4 v_world_position;
+varying vec2 v_tile_position;
+uniform vec4 u_tile_clip_bounds;
+
+#ifdef TANGRAM_EXTRUDE_LINES
+    uniform bool u_has_line_texture;
+    uniform sampler2D u_texture;
+    uniform float u_texture_ratio;
+    uniform vec4 u_dash_background_color;
+    uniform float u_has_dash;
+#endif
+
+#define TANGRAM_NORMAL v_normal
+
+#if defined(TANGRAM_TEXTURE_COORDS) || defined(TANGRAM_EXTRUDE_LINES)
+    varying vec2 v_texcoord;
+#endif
+
+#ifdef TANGRAM_MODEL_POSITION_BASE_ZOOM_VARYING
+    varying vec4 v_modelpos_base_zoom;
+#endif
+
+#if defined(TANGRAM_LIGHTING_VERTEX)
+    varying vec4 v_lighting;
+#endif
+
+#pragma tangram: attributes
+#pragma tangram: camera
+#pragma tangram: material
+#pragma tangram: lighting
+#pragma tangram: raster
+#pragma tangram: global
+
+void main (void) {
+    if (u_tile_clip_bounds.z > u_tile_clip_bounds.x &&
+        (any(lessThan(v_tile_position, u_tile_clip_bounds.xy)) ||
+         any(greaterThanEqual(v_tile_position, u_tile_clip_bounds.zw)))) discard;
+    // Initialize globals
+    #pragma tangram: setup
+
+    vec4 color = v_color;
+    // Interpolated radial/tangent normals are not unit length between vertices.
+    vec3 normal = u_projection_mode == 1 ? normalize(TANGRAM_NORMAL) : TANGRAM_NORMAL;
+
+    // Apply raster to vertex color
+    #ifdef TANGRAM_RASTER_TEXTURE_COLOR
+        vec4 _raster_color = sampleRaster(0);
+
+        #if defined(TANGRAM_BLEND_OPAQUE) || defined(TANGRAM_BLEND_TRANSLUCENT) || defined(TANGRAM_BLEND_MULTIPLY)
+            // Raster sources can optionally mask by the alpha channel, which will render with only full or no alpha.
+            // This is used for handling transparency outside the raster image in some blend modes,
+            // which either don't support alpha, or would cause transparent pixels to write to the depth buffer,
+            // obscuring geometry underneath.
+            #ifdef TANGRAM_HAS_MASKED_RASTERS   // skip masking logic if no masked raster sources
+            #ifndef TANGRAM_ALL_MASKED_RASTERS  // skip source check for masking if *all* raster sources are masked
+            if (u_raster_mask_alpha) {
+            #else
+            {
+            #endif
+                #if defined(TANGRAM_BLEND_TRANSLUCENT) || defined(TANGRAM_BLEND_MULTIPLY)
+                if (_raster_color.a < TANGRAM_EPSILON) {
+                    discard;
+                }
+                #else // TANGRAM_BLEND_OPAQUE
+                if (_raster_color.a < 1. - TANGRAM_EPSILON) {
+                    discard;
+                }
+                // only allow full alpha in opaque blend mode (avoids artifacts blending w/canvas tile background)
+                _raster_color.a = 1.;
+                #endif
+            }
+            #endif
+        #endif
+
+        color *= _raster_color; // multiplied to tint texture color
+    #endif
+
+    // Apply line texture
+    #ifdef TANGRAM_EXTRUDE_LINES
+    { // enclose in scope to avoid leakage of internal variables
+        if (u_has_line_texture) {
+            vec2 _line_st = vec2(v_texcoord.x, fract(v_texcoord.y / u_texture_ratio));
+            vec4 _line_color = texture2D(u_texture, _line_st);
+
+            // If the line has a dash pattern, the line texture indicates if the current fragment should be
+            // the dash foreground or background color. If the line doesn't have a dash pattern,
+            // the line texture color is used directly (but also tinted by the vertex color).
+            color = mix(
+                color * _line_color, // no dash: tint the line texture with the vertex color
+                mix(u_dash_background_color, color, _line_color.a), // choose dash foreground or background color
+                u_has_dash // 0 if no dash, 1 if has dash
+            );
+
+            // Use alpha discard test as a lower-quality substitute for blending
+            #if defined(TANGRAM_BLEND_OPAQUE)
+                if (color.a < TANGRAM_ALPHA_TEST) {
+                    discard;
+                }
+            #endif
+        }
+    }
+    #endif
+
+    #ifdef TANGRAM_PROJECTED_TRAFFIC
+        float direction = v_texcoord.x < .5 ? 1. : -1.;
+        float phase = direction > 0. ? 2.75 : 0.;
+        float coordinate = v_texcoord.y * .125 - u_time * 1.8 * direction + phase;
+        float vehicle_position = fract(coordinate / 6.);
+        float derivative = max(fwidth(vehicle_position), .001);
+        float half_length = max(.022, derivative * 1.35);
+        float distance = abs(vehicle_position - .5);
+        float body = 1. - smoothstep(half_length, half_length + derivative, distance);
+        float halo = 1. - smoothstep(half_length + derivative, half_length + derivative * 2.5, distance);
+        float lane_center = direction > 0. ? .28 : .72;
+        float lane_derivative = max(fwidth(v_texcoord.x), .01);
+        float half_width = clamp(lane_derivative * .45, .10, .22);
+        float lane_edge = clamp(lane_derivative * .35, .02, .18);
+        float lane = 1. - smoothstep(half_width, half_width + lane_edge, abs(v_texcoord.x - lane_center));
+        color.rgb = mix(color.rgb, vec3(.62, 1., .98), max(body, halo * .35) * lane * .98);
+    #endif
+
+    // First, get normal from raster tile (if applicable)
+    #ifdef TANGRAM_RASTER_TEXTURE_NORMAL
+        normal = normalize(sampleRaster(0).rgb * 2. - 1.);
+    #endif
+
+    // Second, alter normal with normal map texture (if applicable)
+    #if defined(TANGRAM_LIGHTING_FRAGMENT) && defined(TANGRAM_MATERIAL_NORMAL_TEXTURE)
+        calculateNormal(normal);
+    #endif
+
+    // Normal modification applied here for fragment lighting or no lighting,
+    // and in vertex shader for vertex lighting
+    #if !defined(TANGRAM_LIGHTING_VERTEX)
+        #pragma tangram: normal
+    #endif
+
+    // Color modification before lighting is applied
+    #pragma tangram: color
+
+    #if defined(TANGRAM_LIGHTING_FRAGMENT)
+        // Calculate per-fragment lighting
+        color = calculateLighting(v_position.xyz - u_eye, normal, color);
+    #elif defined(TANGRAM_LIGHTING_VERTEX)
+        // Apply lighting intensity interpolated from vertex shader
+        color *= v_lighting;
+    #endif
+
+    // Post-processing effects (modify color after lighting)
+    #pragma tangram: filter
+
+    gl_FragColor = color;
+}

package/src/styles/polygons/polygons_vertex.glsl

@@ -0,0 +1,213 @@
+// 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 float u_meters_per_pixel;
+uniform float u_device_pixel_ratio;
+#ifndef TANGRAM_UNIFORM_BLOCK_TANGRAMVIEW
+uniform highp 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_color;
+#ifdef TANGRAM_CPU_PROJECTED
+    attribute vec3 a_projected_position;
+    #ifndef TANGRAM_EXTRUDE_LINES
+        attribute vec3 a_projected_normal;
+    #endif
+#endif
+
+// Optional normal attribute, otherwise default to up
+#ifdef TANGRAM_NORMAL_ATTRIBUTE
+    attribute vec3 a_normal;
+    #define TANGRAM_NORMAL a_normal
+#else
+    #define TANGRAM_NORMAL vec3(0., 0., 1.)
+#endif
+
+// Optional dynamic line extrusion
+#ifdef TANGRAM_EXTRUDE_LINES
+    attribute vec2 a_extrude; // extrusion direction in xy plane
+    attribute vec2 a_offset;  // offset direction in xy plane
+
+    // Polygon and line styles have slightly different VBO layouts, saving memory by optimizing vertex packing.
+    // All lines have a width scaling factor, but only some have a height (position.z) or offset.
+    // The vertex height is stored in different attributes to account for this.
+    attribute vec2 a_z_and_offset_scale; // stores vertex height in x, and offset scaling factor in y
+    #ifdef TANGRAM_CPU_PROJECTED
+        attribute vec4 a_projected_stroke; // projected center.xy, CSS radius, nonzero pixel marker
+    #endif
+    #define TANGRAM_POSITION_Z a_z_and_offset_scale.x // vertex height is stored in separate line-specific attrib
+    #define TANGRAM_OFFSET_SCALING a_z_and_offset_scale.y // zoom scaling factor for line offset
+    #define TANGRAM_WIDTH_SCALING a_position.z // zoom scaling factor for line width (stored in position attrib)
+
+    uniform float u_v_scale_adjust; // scales texture UVs for line dash patterns w/fractional pixel width
+#else
+    #define TANGRAM_POSITION_Z a_position.z // vertex height
+#endif
+
+varying vec4 v_position;
+varying vec3 v_normal;
+varying vec4 v_color;
+varying vec4 v_world_position;
+varying vec2 v_tile_position;
+
+// Optional texture UVs
+#if defined(TANGRAM_TEXTURE_COORDS) || defined(TANGRAM_EXTRUDE_LINES)
+    attribute vec2 a_texcoord;
+    varying vec2 v_texcoord;
+#endif
+
+// Optional model position varying for tile coordinate zoom
+#ifdef TANGRAM_MODEL_POSITION_BASE_ZOOM_VARYING
+    varying vec4 v_modelpos_base_zoom;
+#endif
+
+#if defined(TANGRAM_LIGHTING_VERTEX)
+    varying vec4 v_lighting;
+#endif
+
+#define TANGRAM_UNPACK_SCALING(x) (x / 1024.)
+
+#pragma tangram: attributes
+#pragma tangram: camera
+#pragma tangram: material
+#pragma tangram: lighting
+#pragma tangram: raster
+#pragma tangram: global
+
+#pragma tangram: projection
+
+void main() {
+    // Initialize globals
+    #pragma tangram: setup
+
+    // Texture UVs
+    #ifdef TANGRAM_TEXTURE_COORDS
+        v_texcoord = a_texcoord;
+        #ifdef TANGRAM_EXTRUDE_LINES
+            v_texcoord.y *= u_v_scale_adjust;
+        #endif
+    #endif
+
+    // Pass model position to fragment shader
+    #ifdef TANGRAM_MODEL_POSITION_BASE_ZOOM_VARYING
+        v_modelpos_base_zoom = modelPositionBaseZoom();
+    #endif
+
+    // Position
+    vec4 position = vec4(a_position.xy, TANGRAM_POSITION_Z / TANGRAM_HEIGHT_SCALE, 1.); // convert height back to meters
+    #ifdef TANGRAM_TERRAIN_DRAPED
+        position.z += tangramTerrainHeight();
+    #endif
+
+    #ifdef TANGRAM_EXTRUDE_LINES
+        vec2 _extrude = a_extrude.xy;
+        vec2 _offset = a_offset.xy;
+
+        // Adjust line width based on zoom level, to prevent proxied lines
+        // from being either too small or too big.
+        // "Flattens" the zoom between 1-2 to peg it to 1 (keeps lines from
+        // prematurely shrinking), then interpolate and clamp to 4 (keeps lines
+        // from becoming too small when far away).
+        float _dz = clamp(u_map_position.z - u_tile_origin.z, 0., 4.);
+        _dz += step(1., _dz) * (1. - _dz) + mix(0., 2., clamp((_dz - 2.) / 2., 0., 1.));
+
+        // Interpolate line width between zooms
+        float _mdz = (_dz - 0.5) * 2.; // zoom from mid-point
+        _extrude -= _extrude * TANGRAM_UNPACK_SCALING(TANGRAM_WIDTH_SCALING) * _mdz;
+
+        // Interpolate line offset between zooms
+        // Scales from the larger value to the smaller one
+        float _dwdz = TANGRAM_UNPACK_SCALING(TANGRAM_OFFSET_SCALING);
+        float _sdwdz = sign(step(0., _dwdz) - 0.5); // sign indicates "direction" of scaling
+        _offset -= _offset * abs(_dwdz) * ((1.-step(0., _sdwdz)) - (_dz * -_sdwdz)); // scale "up" or "down"
+
+        // Scale line width and offset to be consistent in screen space
+        float _ssz = exp2(-_dz - (u_tile_origin.z - u_tile_origin.w));
+        _extrude *= _ssz;
+        _offset *= _ssz;
+
+        // Modify line width before extrusion
+        #ifdef TANGRAM_BLOCK_WIDTH
+            float width = 1.;
+            #pragma tangram: width
+            _extrude *= width;
+        #endif
+
+        position.xy += _extrude + _offset;
+        #ifdef TANGRAM_TERRAIN_DRAPED
+            position.z += tangramTerrainRibbonOffset(_extrude + _offset, a_position.xy);
+        #endif
+    #endif
+
+    // World coordinates for 3d procedural textures
+    v_tile_position = position.xy;
+    #ifdef TANGRAM_TERRAIN_DRAPED
+        position = tangramTerrainModelView(position, v_world_position);
+    #else
+        position = tangramModelView(position, v_world_position);
+    #endif
+    #ifdef TANGRAM_CPU_PROJECTED
+        position = vec4(a_projected_position, 1.);
+    #endif
+    // Geographic orientation requires absolute meters, before the procedural
+    // texture precision wrap changes v_world_position's origin.
+    vec3 surface_normal = TANGRAM_NORMAL;
+    #ifdef TANGRAM_TERRAIN_DRAPED
+        surface_normal = tangramTerrainNormal(surface_normal);
+    #endif
+    v_normal = u_projection_mode == 1
+        ? tangramGlobeNormal(v_world_position.xyz, surface_normal)
+        : normalize(u_normalMatrix * surface_normal);
+    #if defined(TANGRAM_CPU_PROJECTED) && !defined(TANGRAM_EXTRUDE_LINES)
+        v_normal = normalize(a_projected_normal);
+    #endif
+    v_world_position = wrapWorldPosition(v_world_position);
+
+    // Modify position before camera projection
+    #pragma tangram: position
+
+    // Setup varyings
+    v_position = position;
+    v_color = a_color;
+
+    #if defined(TANGRAM_LIGHTING_VERTEX)
+        // Vertex lighting
+        vec3 normal = v_normal;
+
+        // Modify normal before lighting
+        #pragma tangram: normal
+
+        // Pass lighting intensity to fragment shader
+        v_lighting = calculateLighting(position.xyz - u_eye, normal, vec4(1.));
+    #endif
+
+    // Camera
+    cameraProjection(position);
+    #if defined(TANGRAM_CPU_PROJECTED) && defined(TANGRAM_EXTRUDE_LINES)
+        if (a_projected_stroke.w > 0.) {
+            vec4 center = vec4(a_projected_stroke.xy, 0., 1.);
+            cameraProjection(center);
+            vec2 direction = (position.xy / position.w - center.xy / center.w) * u_resolution;
+            float magnitude = length(direction);
+            position.xy = center.xy + (magnitude > 0. ? direction / magnitude : vec2(0.)) *
+                a_projected_stroke.z * u_device_pixel_ratio * 2. / u_resolution * center.w;
+        }
+    #endif
+
+    // +1 is to keep all layers including proxies > 0
+    applyLayerOrder(a_position.w + u_tile_proxy_order_offset + 1., position);
+
+    gl_Position = position;
+}