Front cutoff properties for fill extrusions and buildings.

source-max-zoom layout property. (internal-11356)

GitOrigin-RevId: 1c29f1223670427f4547d02ecab8ba2ca77bd1fb

Author: astojilj

3d-style/data/bucket/building_bucket.ts

@@ -840,13 +840,20 @@ export class BuildingBucket implements BucketWithGroundEffect {
                     building.layoutColorArray.uint16[(partVertexOffset + v) * 2 + 1] = c2;
                 }
 
-                const cx = Math.floor(centroid.x);
-                const cy = Math.floor(centroid.y);
+                const cx = Math.min(8191, Math.max(0, Math.floor(centroid.x)));
+                const cy = Math.min(8191, Math.max(0, Math.floor(centroid.y)));
                 const ch = Math.floor(height);
+                // Encode span (2 bits per axis) into lower bits of cx/cy: encoded = cx * 4 + spanBits
+                // Each span bit represents ~20 meters; max 3 bits = ~60m
+                const spanBucketMeters = 20;
+                const spanX = Math.min(3, Math.round((bboxMax.x - bboxMin.x) * this.tileToMeter / spanBucketMeters));
+                const spanY = Math.min(3, Math.round((bboxMax.y - bboxMin.y) * this.tileToMeter / spanBucketMeters));
+                const cxEncoded = cx * 4 + spanX;
+                const cyEncoded = cy * 4 + spanY;
                 for (let v = 0; v < partVertexCount; ++v) {
                     const idx = (partVertexOffset + v) * 3;
-                    building.layoutCentroidArray.int16[idx] = cx;
-                    building.layoutCentroidArray.int16[idx + 1] = cy;
+                    building.layoutCentroidArray.int16[idx] = cxEncoded;
+                    building.layoutCentroidArray.int16[idx + 1] = cyEncoded;
                     building.layoutCentroidArray.int16[idx + 2] = ch;
                 }
 

3d-style/render/draw_building.ts

@@ -8,7 +8,7 @@ import StencilMode from '../../src/gl/stencil_mode';
 import {getMetersPerPixelAtLatitude} from '../../src/geo/mercator_coordinate';
 import {Debug} from '../../src/util/debug';
 import {DevTools} from '../../src/ui/devtools';
-import {drawGroundEffect as fillExtrusionDrawGroundEffect, GroundEffectProperties, frustumCullShadowCaster} from '../../src/render/draw_fill_extrusion';
+import {drawGroundEffect as fillExtrusionDrawGroundEffect, GroundEffectProperties, frustumCullShadowCaster, computeFrontCutoffParams} from '../../src/render/draw_fill_extrusion';
 import Color from '../../src/style-spec/util/color';
 import ColorMode from '../../src/gl/color_mode';
 import {PerformanceUtils} from '../../src/util/performance';
@@ -55,6 +55,14 @@ function drawTiles(params: DrawParams) {
         defines = defines.concat('RENDER_CUTOFF');
     }
 
+    const frontCutoffArray = layer.paint.get('building-front-cutoff');
+    const frontCutoffEnabled = frontCutoffArray[2] < 1.0 && !painter.terrain;
+    const frontCutoffParams = computeFrontCutoffParams(painter.transform.pitch, frontCutoffArray, !!painter.terrain);
+    if (frontCutoffEnabled) {
+        defines = defines.concat('RENDER_FRONT_CUTOFF');
+        painter.maxFrontCutoffRawStart = Math.max(painter.maxFrontCutoffRawStart, frontCutoffArray[0]);
+    }
+
     if (params.floodLightIntensity > 0.0) {
         defines = defines.concat('FLOOD_LIGHT');
     }
@@ -120,7 +128,7 @@ function drawTiles(params: DrawParams) {
                 mercCameraPos.z * tiles * EXTENT
             ];
 
-            uniformValues = buildingUniformValues(matrix, normalMatrix, params.opacity, params.facadeAOIntensity, cameraPos, bucket.tileToMeter, params.facadeEmissiveChance, params.floodLightColor, params.floodLightIntensity);
+            uniformValues = buildingUniformValues(matrix, normalMatrix, params.opacity, params.facadeAOIntensity, cameraPos, bucket.tileToMeter, params.facadeEmissiveChance, params.floodLightColor, params.floodLightIntensity, frontCutoffParams);
 
             programWithoutFacades =  painter.getOrCreateProgram('building',
                 {config: programConfiguration, defines, overrideFog: false});
@@ -225,7 +233,7 @@ class DrawBuildingsDebugParams {
     }
 }
 
-function drawGroundEffect(painter: Painter, source: SourceCache, layer: BuildingStyleLayer, coords: Array<OverscaledTileID>, aoPass: boolean, opacity: number, aoIntensity: number, aoRadius: number, floodLightIntensity: number, floodLightColor: [number, number, number], attenuationFactor: number, replacementActive: boolean, renderNeighbors: boolean) {
+function drawGroundEffect(painter: Painter, source: SourceCache, layer: BuildingStyleLayer, coords: Array<OverscaledTileID>, aoPass: boolean, opacity: number, aoIntensity: number, aoRadius: number, floodLightIntensity: number, floodLightColor: [number, number, number], attenuationFactor: number, replacementActive: boolean, renderNeighbors: boolean, frontCutoffParams?: [number, number, number]) {
     const lerp = (a: number, b: number, t: number) => { return (1 - t) * a + t * b; };
 
     const gl = painter.context.gl;
@@ -242,15 +250,15 @@ function drawGroundEffect(painter: Painter, source: SourceCache, layer: Building
         const stencilSdfPass = new StencilMode({func: gl.ALWAYS, mask: 0xFF}, 0xFF, 0xFF, gl.KEEP, gl.KEEP, gl.REPLACE);
         const colorSdfPass = new ColorMode([gl.ONE, gl.ONE, gl.ONE, gl.ONE], Color.transparent, [false, false, false, true], gl.MIN);
 
-        fillExtrusionDrawGroundEffect(groundEffectProps, painter, source, layer, coords, depthMode, stencilSdfPass, colorSdfPass, CullFaceMode.disabled, aoPass, 'sdf', opacity, aoIntensity, aoRadius, floodLightIntensity, floodLightColor, attenuation, conflateLayer, false);
+        fillExtrusionDrawGroundEffect(groundEffectProps, painter, source, layer, coords, depthMode, stencilSdfPass, colorSdfPass, CullFaceMode.disabled, aoPass, 'sdf', opacity, aoIntensity, aoRadius, floodLightIntensity, floodLightColor, attenuation, conflateLayer, false, undefined, frontCutoffParams);
     }
 
     {
         // Draw the effects.
         const stencilColorPass = showOverdraw ? StencilMode.disabled : new StencilMode({func: gl.EQUAL, mask: 0xFF}, 0xFF, 0xFF, gl.KEEP, gl.DECR, gl.DECR);
         const colorColorPass = showOverdraw ? painter.colorModeForRenderPass() : new ColorMode([gl.ONE_MINUS_DST_ALPHA, gl.DST_ALPHA, gl.ONE, gl.ONE], Color.transparent, [true, true, true, true]);
 
-        fillExtrusionDrawGroundEffect(groundEffectProps, painter, source, layer, coords, depthMode, stencilColorPass, colorColorPass, CullFaceMode.disabled, aoPass, 'color', opacity, aoIntensity, aoRadius, floodLightIntensity, floodLightColor, attenuation, conflateLayer, false);
+        fillExtrusionDrawGroundEffect(groundEffectProps, painter, source, layer, coords, depthMode, stencilColorPass, colorColorPass, CullFaceMode.disabled, aoPass, 'color', opacity, aoIntensity, aoRadius, floodLightIntensity, floodLightColor, attenuation, conflateLayer, false, undefined, frontCutoffParams);
     }
 }
 
@@ -422,11 +430,14 @@ function draw(painter: Painter, source: SourceCache, layer: BuildingStyleLayer,
             floodLightColor
         });
 
+        const geFrontCutoffArray = layer.paint.get('building-front-cutoff');
+        const geFrontCutoffParams = computeFrontCutoffParams(painter.transform.pitch, geFrontCutoffArray, !!painter.terrain);
+
         if (aoEnabled) {
-            drawGroundEffect(painter, source, layer, coords, true, opacity, aoIntensity, aoRadius, floodLightIntensity, floodLightColor, aoGroundAttenuation, conflateLayer, false);
+            drawGroundEffect(painter, source, layer, coords, true, opacity, aoIntensity, aoRadius, floodLightIntensity, floodLightColor, aoGroundAttenuation, conflateLayer, false, geFrontCutoffParams);
         }
         if (floodLightEnabled) {
-            drawGroundEffect(painter, source, layer, coords, false, opacity, aoIntensity, aoRadius, floodLightIntensity, floodLightColor, floodLightGroundAttenuation, conflateLayer, false);
+            drawGroundEffect(painter, source, layer, coords, false, opacity, aoIntensity, aoRadius, floodLightIntensity, floodLightColor, floodLightGroundAttenuation, conflateLayer, false, geFrontCutoffParams);
         }
     } else if (painter.renderPass === 'light-beam' && drawLayer) {
         const definesForPass: Array<DynamicDefinesType> = [

3d-style/render/program/building_program.ts

@@ -14,9 +14,10 @@ export type BuildingUniformsType = {
     ['u_facade_emissive_chance']: Uniform1f;
     ['u_flood_light_color']: Uniform3f;
     ['u_flood_light_intensity']: Uniform1f;
+    ['u_front_cutoff_params']: Uniform3f;
 };
 
-export type BuildingDefinesType = 'DEBUG_SHOW_NORMALS' | 'HAS_ATTRIBUTE_a_part_color_emissive' | 'HAS_ATTRIBUTE_a_bloom_attenuation' | 'BUILDING_FAUX_FACADE' | 'HAS_ATTRIBUTE_a_faux_facade_color_emissive';
+export type BuildingDefinesType = 'DEBUG_SHOW_NORMALS' | 'HAS_ATTRIBUTE_a_part_color_emissive' | 'HAS_ATTRIBUTE_a_bloom_attenuation' | 'BUILDING_FAUX_FACADE' | 'HAS_ATTRIBUTE_a_faux_facade_color_emissive' | 'RENDER_FRONT_CUTOFF';
 
 const buildingUniforms = (context: Context): BuildingUniformsType => ({
     'u_matrix': new UniformMatrix4f(context),
@@ -28,9 +29,10 @@ const buildingUniforms = (context: Context): BuildingUniformsType => ({
     'u_facade_emissive_chance': new Uniform1f(context),
     'u_flood_light_color': new Uniform3f(context),
     'u_flood_light_intensity': new Uniform1f(context),
+    'u_front_cutoff_params': new Uniform3f(context),
 });
 
-const buildingUniformValues = (matrix: mat4, normalMatrix: mat4, opacity: number, aoIntensity: number, cameraPos: [number, number, number], tileToMeter: number, emissiveChance: number, floodLightColor: [number, number, number], floodLightIntensity: number): UniformValues<BuildingUniformsType> => {
+const buildingUniformValues = (matrix: mat4, normalMatrix: mat4, opacity: number, aoIntensity: number, cameraPos: [number, number, number], tileToMeter: number, emissiveChance: number, floodLightColor: [number, number, number], floodLightIntensity: number, frontCutoffParams: [number, number, number] = [0, 0, 1]): UniformValues<BuildingUniformsType> => {
     const uniformValues = {
         'u_matrix': matrix as Float32Array,
         'u_normal_matrix': normalMatrix as Float32Array,
@@ -41,6 +43,7 @@ const buildingUniformValues = (matrix: mat4, normalMatrix: mat4, opacity: number
         'u_facade_emissive_chance': emissiveChance,
         'u_flood_light_color': floodLightColor,
         'u_flood_light_intensity': floodLightIntensity,
+        'u_front_cutoff_params': frontCutoffParams,
     };
 
     return uniformValues;

3d-style/shaders/building.fragment.glsl

@@ -9,6 +9,16 @@ in vec4 v_color;
 in highp vec3 v_normal;
 in highp vec3 v_pos;
 
+#ifdef RENDER_FRONT_CUTOFF
+in float v_front_cutoff_opacity;
+#endif
+
+#ifdef INDICATOR_CUTOUT
+#ifdef FEATURE_CUTOUT
+in vec4 v_ground_roof;
+#endif
+#endif
+
 #ifdef BUILDING_FAUX_FACADE
 in lowp float v_faux_facade;
 in highp float v_faux_facade_ed;
@@ -226,8 +236,29 @@ void main() {
     color *= u_opacity;
 
 #ifdef INDICATOR_CUTOUT
+#ifdef FEATURE_CUTOUT
+    {
+        float ditherOpacity = cutoutGroundRoofOpacity(v_ground_roof);
+        if (ditherOpacity < 1.0) {
+            int index = (int(gl_FragCoord.x) % 4) * 4 + (int(gl_FragCoord.y) % 4);
+            if (ditherOpacity < DITHER_THRESHOLDS[index]) {
+                discard;
+            }
+        }
+    }
+#else
     color = applyCutout(color, v_pos.z);
 #endif
+#endif
+
+#ifdef RENDER_FRONT_CUTOFF
+    if (v_front_cutoff_opacity < 1.0) {
+        int index = (int(gl_FragCoord.x) % 4) * 4 + (int(gl_FragCoord.y) % 4);
+        if (v_front_cutoff_opacity < DITHER_THRESHOLDS[index]) {
+            discard;
+        }
+    }
+#endif
 
 #ifdef FEATURE_CUTOUT
     color = apply_feature_cutout(color, gl_FragCoord, get_cutout_factors(gl_FragCoord).x);

3d-style/shaders/building.vertex.glsl

@@ -18,10 +18,22 @@ uniform mat4 u_matrix;
 uniform mat4 u_normal_matrix;
 uniform highp float u_tile_to_meter;
 
+#ifdef RENDER_FRONT_CUTOFF
+uniform vec3 u_front_cutoff_params; // [start, range, opacity]
+out float v_front_cutoff_opacity;
+#endif
+
+#ifdef INDICATOR_CUTOUT
+#ifdef FEATURE_CUTOUT
+out vec4 v_ground_roof;
+#endif
+#endif
+
 out vec4 v_color;
 out vec3 v_normal;
 out highp vec3 v_pos;
 
+
 #ifdef BUILDING_FAUX_FACADE
 out lowp float v_faux_facade;
 out highp float v_faux_facade_ed;
@@ -84,6 +96,12 @@ void main() {
 
     float hidden = 0.0;
     float depth_offset = 0.0;
+
+    // Decode centroid position and span from packed attribute.
+    // Encoding: cx_encoded = clamp(cx, 0, 8191) * 4 + spanXbits (2 bits per axis)
+    vec2 centroid_xy = vec2(a_centroid_3.xy >> 2);
+    vec2 spanBits = vec2(a_centroid_3.xy & 3);
+
 #ifdef BUILDING_FAUX_FACADE
     vec4 faux_facade_data = vec4(a_faux_facade_data);
     v_faux_facade = faux_facade_data.x;
@@ -114,8 +132,20 @@ void main() {
 #endif
     v_pos = a_pos_3f;
 
+#if defined(RENDER_CUTOFF) || defined(RENDER_FRONT_CUTOFF)
+    float halfSpanX = spanBits.x * 10.0 / u_tile_to_meter;
+    float halfSpanY = spanBits.y * 10.0 / u_tile_to_meter;
+    vec2 screenUpInTile = vec2(u_matrix[0][1], u_matrix[1][1]);
+    vec2 spanOffset = vec2(halfSpanX, halfSpanY) * sign(screenUpInTile);
+    vec2 cutoff_highestCorner = centroid_xy + spanOffset;
+    vec2 cutoff_lowestCorner = centroid_xy - spanOffset;
+#endif
+
+#if defined(RENDER_CUTOFF) || defined(RENDER_FRONT_CUTOFF)
+    vec4 ground = u_matrix * vec4(centroid_xy, 0.0, 1.0);
+#endif
+
 #ifdef RENDER_CUTOFF
-    vec4 ground = u_matrix * vec4(a_centroid_3.xyz, 1.0);
     v_cutoff_opacity = cutoff_opacity(u_cutoff_params, ground.z);
     hidden = float(v_cutoff_opacity == 0.0);
     v_pos.z *= v_cutoff_opacity;
@@ -135,6 +165,27 @@ void main() {
     v_fog_pos = fog_position(v_pos);
 #endif
 
+#ifdef RENDER_FRONT_CUTOFF
+    v_front_cutoff_opacity = 1.0;
+    {
+        hidden = max(hidden, float(ground.w <= 0.0));
+        float ndc_y = ground.y / max(ground.w, 0.001);
+        float threshold = u_front_cutoff_params.x * 2.0 - 1.0;
+        float range_ndc = u_front_cutoff_params.y * 2.0;
+        hidden = max(hidden, float(ndc_y < threshold - range_ndc));
+        float t = clamp((ndc_y - (threshold - range_ndc)) / max(range_ndc, 0.001), 0.0, 1.0);
+        v_front_cutoff_opacity = mix(u_front_cutoff_params.z, 1.0, t);
+    }
+#endif
+
     gl_Position = mix(u_matrix * vec4(v_pos, 1), AWAY, hidden);
     gl_Position.z -= depth_offset * gl_Position.w;
+
+#ifdef INDICATOR_CUTOUT
+#ifdef FEATURE_CUTOUT
+    vec4 ic_ground = u_matrix * vec4(v_pos.xy, 0.0, 1.0);
+    vec4 ic_roof = u_matrix * vec4(v_pos.xy, v_pos.z, 1.0);
+    v_ground_roof = vec4(ic_ground.xy / ic_ground.w, ic_roof.xy / ic_roof.w);
+#endif
+#endif
 }

3d-style/shaders/fill_extrusion_depth.vertex.glsl

@@ -60,7 +60,8 @@ vec3 pos;
     bool is_flat_height = centroid_pos.x != 0.0 && u_height_type == 1;
     bool is_flat_base = centroid_pos.x != 0.0 && u_base_type == 1;
     float ele = elevation(pos_nx.xy);
-    float c_ele = is_flat_height || is_flat_base ? (centroid_pos.y == 0.0 ? elevationFromUint16(centroid_pos.x) : flatElevation(centroid_pos)) : ele;
+    bool is_elevation_encoded = centroid_pos.y == 0.0 || (centroid_pos.y > 0.0 && int(centroid_pos.y) - (int(centroid_pos.y) / 8) * 8 == 7);
+    float c_ele = is_flat_height || is_flat_base ? (is_elevation_encoded ? elevationFromUint16(centroid_pos.x) : flatElevation(centroid_pos)) : ele;
     float h_height = is_flat_height ? max(c_ele + height, ele + base + 2.0) : ele + height;
     float h_base = is_flat_base ? max(c_ele + base, ele + base) : ele + (base == 0.0 ? -5.0 : base);
     float h = t > 0.0 ? max(h_base, h_height) : h_base;

3d-style/source/tiled_3d_model_source.ts

@@ -152,7 +152,7 @@ class Tiled3DModelSource extends Evented<SourceEvents> implements ISource {
             source: this.id,
             scope: this.scope,
             showCollisionBoxes: this.map.showCollisionBoxes,
-            isSymbolTile: tile.isSymbolTile,
+            renderSourceType: tile.renderSourceType,
             brightness: this.map.style ? (this.map.style.getBrightness() || 0.0) : 0.0,
             pixelRatio: browser.devicePixelRatio,
             promoteId: this.promoteId,