maplibre-gl-js
maplibre-gl-js copied to clipboard
maplibre
change internal extend to 16384 for better rendering quality
Terminology
- MVT-Extent: the width and height of a MVT-Tile in integer coordinates. See the spec for more details
- Maplibre-Extent: the width and height of the internal coordinate system for each tile inside maplibre.
Background
Most MVT Datasets are limited to zoom-level 14. Generating higher zoom levels for large areas is very demanding. If you want to keep more details in MVT while staying on the same zoom-level, it is possible to increase the MVT-extent of layers for better overzooming. This became very easy to do with ST_AsMVT. Since Maplibre uses an internal extent of 8192, details of bigger MVT-Extents get lost.
PR
In this PR the internal extent of Maplibre is doubled from 8192 to 16384. This improves the quality of layers with a MVT-Extent greater 8192. This is done by using one more bit of the 16-Bit value, passed to WebGL. This bit was used so far only as an hack in the line layer, to pass additional attributes. This hack is removed in the first commit.
Screenshots
This shows the difference of main and this PR on Tiles with max-zoom 14, MVT-Extent of 16384 on Zoom-Level 21.
Before:
After:
The building is much more detailed and lines are more parallel.
Performance
Increasing the extent itself should not mess with the performance in any way.
Removing the hack in the line layer can have an impact on performance. There are two additional attributes passed to WebGL. On the other hand, the shader has a few instructions less. I wasn't able to measure any real difference because the line performance test is too noisy.
Status
This PR is at the moment not quite ready to be merged. I still have to run all tests and make the same changes in maplibre-gl-native to stay compatible with the shaders. I would like to ask for feedback, if this change is welcome and if there are more things I have to do.
Launch Checklist
- [x] Confirm your changes do not include backports from Mapbox projects (unless with compliant license) - if you are not sure about this, please ask!
- [x] Briefly describe the changes in this PR.
- [x] Include before/after visuals or gifs if this PR includes visual changes.
- [x] Post benchmark scores.
- [x] Manually test the debug page.
- [x] Suggest a changelog category: bug/feature/docs/etc. or "skip changelog".: feature
- [x] Add an entry inside this element for inclusion in the
maplibre-gl-jschangelog:<changelog></changelog>. - [x] Update rendering tests
- [x] make the same change in maplibre-gl-native: https://github.com/maplibre/maplibre-gl-native/pull/289
There were a few changes recently to the sharers including terrain 3D which are missing in the native code, so I'm not sure you be able to test the sharers. I personally don't see the difference in the pictures, but the code looks a lot cleaner. :-)
Bundle size report:
Size Change: +25 B Total Size Before: 202 kB Total Size After: 202 kB
| Output file | Before | After | Change |
|---|---|---|---|
| maplibre-gl.js | 193 kB | 193 kB | +25 B |
| maplibre-gl.css | 9.47 kB | 9.47 kB | 0 B |
ℹ️ View Details
| Source file | Before | After | Change |
|---|---|---|---|
| src/style-spec/error/validation_error.ts | 119 B | 3.56 kB | +3.45 kB |
| node_modules/gl-matrix/esm/vec4.js | 418 B | 514 B | +96 B |
| src/render/uniform_binding.ts | 646 B | 720 B | +74 B |
| src/symbol/symbol_size.ts | 574 B | 645 B | +71 B |
| src/util/actor.ts | 813 B | 871 B | +58 B |
| node_modules/gl-matrix/esm/mat4.js | 2.77 kB | 2.79 kB | +26 B |
| src/data/bucket/fill_attributes.ts | 92 B | 112 B | +20 B |
| src/symbol/symbol_layout.ts | 3.63 kB | 3.65 kB | +20 B |
| src/util/util.ts | 1.83 kB | 1.85 kB | +19 B |
| node_modules/murmurhash-js/murmurhash2_gc.js | 250 B | 263 B | +13 B |
| node_modules/gl-matrix/esm/vec3.js | 802 B | 815 B | +13 B |
| src/symbol/projection.ts | 1.82 kB | 1.83 kB | +12 B |
| node_modules/quickselect/index.js | 349 B | 360 B | +11 B |
| src/data/bucket/fill_extrusion_attributes.ts | 125 B | 136 B | +11 B |
| src/render/painter.ts | 4 kB | 4.01 kB | +11 B |
| src/data/feature_index.ts | 1.74 kB | 1.75 kB | +10 B |
| src/style-spec/expression/definitions/step.ts | 692 B | 701 B | +9 B |
| src/render/program/terrain_program.ts | 602 B | 611 B | +9 B |
| src/style-spec/expression/types.ts | 502 B | 510 B | +8 B |
| src/style/properties.ts | 1.87 kB | 1.87 kB | +8 B |
| node_modules/murmurhash-js/index.js | 68 B | 76 B | +8 B |
| src/render/draw_hillshade.ts | 1.15 kB | 1.15 kB | +8 B |
| src/render/program/fill_extrusion_program.ts | 792 B | 799 B | +7 B |
| src/shaders/encode_attribute.ts | 80 B | 86 B | +6 B |
| src/render/image_atlas.ts | 834 B | 839 B | +5 B |
| src/style/style_layer/custom_style_layer.ts | 485 B | 490 B | +5 B |
| src/render/program/fill_program.ts | 565 B | 570 B | +5 B |
| src/render/draw_heatmap.ts | 1.03 kB | 1.04 kB | +5 B |
| src/ui/handler/handler_util.ts | 105 B | 110 B | +5 B |
| src/style-spec/expression/stops.ts | 189 B | 193 B | +4 B |
| src/style-spec/expression/definitions/in.ts | 447 B | 451 B | +4 B |
| src/style/zoom_history.ts | 178 B | 182 B | +4 B |
| src/source/source_cache.ts | 3.99 kB | 3.99 kB | +4 B |
| src/source/pixels_to_tile_units.ts | 99 B | 103 B | +4 B |
| src/render/program/heatmap_program.ts | 554 B | 558 B | +4 B |
| src/render/draw_terrain.ts | 1.81 kB | 1.81 kB | +4 B |
| src/ui/control/scale_control.ts | 742 B | 746 B | +4 B |
| src/style-spec/expression/definitions/assertion.ts | 680 B | 683 B | +3 B |
| src/style-spec/expression/definitions/collator.ts | 434 B | 437 B | +3 B |
| src/style-spec/validate/validate_property.ts | 546 B | 549 B | +3 B |
| node_modules/gl-matrix/esm/common.js | 179 B | 182 B | +3 B |
| src/style/style_layer/line_style_layer_properties.g.ts | 275 B | 278 B | +3 B |
| node_modules/ieee754/index.js | 564 B | 567 B | +3 B |
| node_modules/potpack/index.mjs | 351 B | 354 B | +3 B |
| src/source/tile_id.ts | 1.15 kB | 1.15 kB | +3 B |
| src/symbol/path_interpolator.ts | 308 B | 311 B | +3 B |
| src/source/terrain_source_cache.ts | 972 B | 975 B | +3 B |
| src/shaders/shaders.ts | 1.48 kB | 1.49 kB | +3 B |
| src/render/program/clipping_mask_program.ts | 104 B | 107 B | +3 B |
| src/render/program/background_program.ts | 470 B | 473 B | +3 B |
| src/render/draw_circle.ts | 612 B | 615 B | +3 B |
| src/ui/handler/tap_drag_zoom.ts | 481 B | 484 B | +3 B |
| src/util/debug.ts | 161 B | 164 B | +3 B |
| src/util/smart_wrap.ts | 234 B | 237 B | +3 B |
| src/style-spec/expression/types/formatted.ts | 413 B | 415 B | +2 B |
| src/style-spec/util/interpolate.ts | 169 B | 171 B | +2 B |
| src/style-spec/expression/definitions/index_of.ts | 543 B | 545 B | +2 B |
| src/style-spec/expression/index.ts | 1.61 kB | 1.61 kB | +2 B |
| src/style-spec/validate/validate_boolean.ts | 120 B | 122 B | +2 B |
| src/style-spec/validate/validate_glyphs_url.ts | 169 B | 171 B | +2 B |
| src/style/validate_style.ts | 152 B | 154 B | +2 B |
| src/data/extent.ts | 33 B | 35 B | +2 B |
| src/style/style_layer/circle_style_layer_properties.g.ts | 225 B | 227 B | +2 B |
| src/data/bucket/heatmap_bucket.ts | 82 B | 84 B | +2 B |
| src/data/bucket/pattern_bucket_features.ts | 323 B | 325 B | +2 B |
| src/style/style_layer/fill_style_layer_properties.g.ts | 191 B | 193 B | +2 B |
| node_modules/@mapbox/vector-tile/lib/vectortilelayer.js | 429 B | 431 B | +2 B |
| src/symbol/one_em.ts | 29 B | 31 B | +2 B |
| src/style/style_layer/heatmap_style_layer.ts | 351 B | 353 B | +2 B |
| src/geo/lng_lat_bounds.ts | 612 B | 614 B | +2 B |
| src/source/image_source.ts | 1.11 kB | 1.11 kB | +2 B |
| src/source/canvas_source.ts | 1.02 kB | 1.02 kB | +2 B |
| src/shaders/collision_circle.vertex.glsl.g.ts | 545 B | 547 B | +2 B |
| src/shaders/debug.vertex.glsl.g.ts | 161 B | 163 B | +2 B |
| src/shaders/fill_pattern.vertex.glsl.g.ts | 387 B | 389 B | +2 B |
| src/shaders/fill_extrusion_pattern.fragment.glsl.g.ts | 415 B | 417 B | +2 B |
| src/shaders/hillshade.vertex.glsl.g.ts | 138 B | 140 B | +2 B |
| src/shaders/line_pattern.fragment.glsl.g.ts | 705 B | 707 B | +2 B |
| src/shaders/symbol_text_and_icon.fragment.glsl.g.ts | 596 B | 598 B | +2 B |
| src/gl/stencil_mode.ts | 152 B | 154 B | +2 B |
| src/gl/cull_face_mode.ts | 155 B | 157 B | +2 B |
| src/geo/transform.ts | 4.44 kB | 4.44 kB | +2 B |
| src/ui/handler_inertia.ts | 822 B | 824 B | +2 B |
| src/ui/handler/tap_zoom.ts | 367 B | 369 B | +2 B |
| src/ui/handler/touch_zoom_rotate.ts | 966 B | 968 B | +2 B |
| src/ui/control/attribution_control.ts | 1.08 kB | 1.09 kB | +2 B |
| src/style-spec/util/color.ts | 319 B | 320 B | +1 B |
| src/style-spec/expression/types/collator.ts | 207 B | 208 B | +1 B |
| src/style-spec/expression/types/resolved_image.ts | 151 B | 152 B | +1 B |
| src/style-spec/expression/values.ts | 497 B | 498 B | +1 B |
| src/style-spec/expression/definitions/coercion.ts | 804 B | 805 B | +1 B |
| src/style-spec/expression/compound_expression.ts | 761 B | 762 B | +1 B |
| src/style-spec/expression/definitions/case.ts | 469 B | 470 B | +1 B |
| src/style-spec/expression/definitions/length.ts | 371 B | 372 B | +1 B |
| src/style-spec/validate/validate_light.ts | 288 B | 289 B | +1 B |
| src/style-spec/validate/validate_formatted.ts | 60 B | 61 B | +1 B |
| src/util/web_worker_transfer.ts | 951 B | 952 B | +1 B |
| src/data/bucket/pattern_attributes.ts | 138 B | 139 B | +1 B |
| src/style/style_layer/hillshade_style_layer_properties.g.ts | 161 B | 162 B | +1 B |
| src/style/style_layer/fill_extrusion_style_layer.ts | 925 B | 926 B | +1 B |
| src/symbol/clip_line.ts | 300 B | 301 B | +1 B |
| src/style/style_layer/symbol_style_layer_properties.g.ts | 652 B | 653 B | +1 B |
| src/style/style_layer/symbol_style_layer.ts | 1.02 kB | 1.02 kB | +1 B |
| src/style/style_layer/hillshade_style_layer.ts | 137 B | 138 B | +1 B |
| src/geo/mercator_coordinate.ts | 348 B | 349 B | +1 B |
| src/data/dem_data.ts | 832 B | 833 B | +1 B |
| src/source/query_features.ts | 1.21 kB | 1.21 kB | +1 B |
| src/source/tile.ts | 1.99 kB | 1.99 kB | +1 B |
| src/data/bucket.ts | 194 B | 195 B | +1 B |
| src/util/worker_pool.ts | 416 B | 417 B | +1 B |
| src/shaders/terrain.vertex.glsl.g.ts | 172 B | 173 B | +1 B |
| src/shaders/circle.fragment.glsl.g.ts | 409 B | 410 B | +1 B |
| src/shaders/circle.vertex.glsl.g.ts | 557 B | 558 B | +1 B |
| src/shaders/fill.fragment.glsl.g.ts | 176 B | 177 B | +1 B |
| src/shaders/raster.vertex.glsl.g.ts | 200 B | 201 B | +1 B |
| src/shaders/symbol_icon.vertex.glsl.g.ts | 948 B | 949 B | +1 B |
| src/shaders/symbol_sdf.fragment.glsl.g.ts | 553 B | 554 B | +1 B |
| src/render/program/collision_program.ts | 723 B | 724 B | +1 B |
| src/gl/framebuffer.ts | 220 B | 221 B | +1 B |
| src/gl/color_mode.ts | 172 B | 173 B | +1 B |
| src/util/throttle.ts | 143 B | 144 B | +1 B |
| src/ui/handler/touch_pan.ts | 437 B | 438 B | +1 B |
| src/ui/control/logo_control.ts | 502 B | 503 B | +1 B |
| src/ui/control/navigation_control.ts | 1.61 kB | 1.61 kB | +1 B |
| src/ui/marker.ts | 2.88 kB | 2.88 kB | +1 B |
| src/style-spec/expression/evaluation_context.ts | 311 B | 310 B | -1 B |
| src/style-spec/expression/definitions/within.ts | 1.38 kB | 1.38 kB | -1 B |
| src/style-spec/expression/definitions/slice.ts | 491 B | 490 B | -1 B |
| src/style-spec/expression/definitions/index.ts | 1.62 kB | 1.62 kB | -1 B |
| src/style-spec/validate/validate_object.ts | 392 B | 391 B | -1 B |
| src/style-spec/validate/validate_number.ts | 222 B | 221 B | -1 B |
| src/style-spec/feature_filter/index.ts | 893 B | 892 B | -1 B |
| src/style-spec/validate/validate_layer.ts | 864 B | 863 B | -1 B |
| src/style-spec/validate/validate_terrain.ts | 241 B | 240 B | -1 B |
| src/style-spec/validate/validate_color.ts | 141 B | 140 B | -1 B |
| src/style-spec/validate_style.min.ts | 293 B | 292 B | -1 B |
| src/data/bucket/fill_extrusion_bucket.ts | 1.43 kB | 1.43 kB | -1 B |
| src/style/style_layer/line_style_layer.ts | 815 B | 814 B | -1 B |
| src/symbol/shaping.ts | 3.62 kB | 3.62 kB | -1 B |
| src/symbol/check_max_angle.ts | 287 B | 286 B | -1 B |
| src/util/resolve_tokens.ts | 97 B | 96 B | -1 B |
| src/util/dictionary_coder.ts | 153 B | 152 B | -1 B |
| src/util/vectortile_to_geojson.ts | 251 B | 250 B | -1 B |
| src/util/web_worker.ts | 43 B | 42 B | -1 B |
| src/shaders/heatmap.fragment.glsl.g.ts | 267 B | 266 B | -1 B |
| src/shaders/heatmap_texture.vertex.glsl.g.ts | 144 B | 143 B | -1 B |
| src/shaders/collision_circle.fragment.glsl.g.ts | 259 B | 258 B | -1 B |
| src/shaders/fill_pattern.fragment.glsl.g.ts | 395 B | 394 B | -1 B |
| src/shaders/fill_extrusion_pattern.vertex.glsl.g.ts | 829 B | 828 B | -1 B |
| src/shaders/hillshade_prepare.vertex.glsl.g.ts | 192 B | 191 B | -1 B |
| src/shaders/line.fragment.glsl.g.ts | 325 B | 324 B | -1 B |
| src/shaders/raster.fragment.glsl.g.ts | 439 B | 438 B | -1 B |
| src/shaders/terrain_depth.fragment.glsl.g.ts | 197 B | 196 B | -1 B |
| node_modules/gl-matrix/esm/mat3.js | 222 B | 221 B | -1 B |
| src/render/program/line_program.ts | 1.16 kB | 1.16 kB | -1 B |
| src/render/program/symbol_program.ts | 1.3 kB | 1.3 kB | -1 B |
| src/gl/vertex_buffer.ts | 540 B | 539 B | -1 B |
| src/render/draw_fill.ts | 1.01 kB | 1.01 kB | -1 B |
| src/render/draw_custom.ts | 339 B | 338 B | -1 B |
| src/ui/handler/keyboard.ts | 571 B | 570 B | -1 B |
| src/ui/handler/click_zoom.ts | 241 B | 240 B | -1 B |
| src/style-spec/expression/parsing_error.ts | 91 B | 89 B | -2 B |
| src/style-spec/expression/definitions/var.ts | 336 B | 334 B | -2 B |
| src/style-spec/validate/validate_enum.ts | 209 B | 207 B | -2 B |
| src/style-spec/validate/validate_paint_property.ts | 56 B | 54 B | -2 B |
| src/style-spec/validate/validate_image.ts | 62 B | 60 B | -2 B |
| src/data/evaluation_feature.ts | 97 B | 95 B | -2 B |
| src/util/intersection_tests.ts | 942 B | 940 B | -2 B |
| src/style/style_layer/circle_style_layer.ts | 531 B | 529 B | -2 B |
| src/util/image.ts | 680 B | 678 B | -2 B |
| src/util/classify_rings.ts | 246 B | 244 B | -2 B |
| src/data/bucket/fill_bucket.ts | 1.09 kB | 1.09 kB | -2 B |
| node_modules/@mapbox/vector-tile/lib/vectortile.js | 186 B | 184 B | -2 B |
| node_modules/@mapbox/vector-tile/index.js | 94 B | 92 B | -2 B |
| src/geo/lng_lat.ts | 588 B | 586 B | -2 B |
| node_modules/@mapbox/whoots-js/index.mjs | 273 B | 271 B | -2 B |
| src/source/video_source.ts | 877 B | 875 B | -2 B |
| src/symbol/placement.ts | 4.8 kB | 4.8 kB | -2 B |
| src/style/style.ts | 6.85 kB | 6.85 kB | -2 B |
| src/shaders/background.vertex.glsl.g.ts | 105 B | 103 B | -2 B |
| src/shaders/fill_outline.vertex.glsl.g.ts | 218 B | 216 B | -2 B |
| src/shaders/hillshade.fragment.glsl.g.ts | 555 B | 553 B | -2 B |
| src/shaders/symbol_icon.fragment.glsl.g.ts | 228 B | 226 B | -2 B |
| src/render/vertex_array_object.ts | 580 B | 578 B | -2 B |
| src/render/program/pattern.ts | 614 B | 612 B | -2 B |
| src/render/program/debug_program.ts | 194 B | 192 B | -2 B |
| src/render/draw_raster.ts | 1.04 kB | 1.04 kB | -2 B |
| src/render/draw_line.ts | 1.04 kB | 1.04 kB | -2 B |
| src/ui/handler/tap_recognizer.ts | 537 B | 535 B | -2 B |
| src/util/task_queue.ts | 268 B | 266 B | -2 B |
| src/ui/map.ts | 6.33 kB | 6.33 kB | -2 B |
| src/ui/anchor.ts | 218 B | 216 B | -2 B |
| src/ui/popup.ts | 1.91 kB | 1.91 kB | -2 B |
| src/style-spec/expression/definitions/format.ts | 729 B | 726 B | -3 B |
| src/style-spec/expression/definitions/image.ts | 296 B | 293 B | -3 B |
| src/style-spec/expression/definitions/at.ts | 402 B | 399 B | -3 B |
| src/style-spec/validate/validate.ts | 393 B | 390 B | -3 B |
| src/util/transferable_grid_index.ts | 1.02 kB | 1.01 kB | -3 B |
| src/style/evaluation_parameters.ts | 390 B | 387 B | -3 B |
| src/data/bucket/circle_attributes.ts | 95 B | 92 B | -3 B |
| src/util/verticalize_punctuation.ts | 587 B | 584 B | -3 B |
| node_modules/pbf/index.js | 2.81 kB | 2.81 kB | -3 B |
| src/source/source_state.ts | 605 B | 602 B | -3 B |
| src/symbol/grid_index.ts | 1.35 kB | 1.35 kB | -3 B |
| src/render/terrain.ts | 2.27 kB | 2.27 kB | -3 B |
| src/style/load_sprite.ts | 409 B | 406 B | -3 B |
| src/shaders/fill.vertex.glsl.g.ts | 174 B | 171 B | -3 B |
| src/render/program/hillshade_program.ts | 882 B | 879 B | -3 B |
| src/gl/index_buffer.ts | 300 B | 297 B | -3 B |
| src/gl/context.ts | 1.28 kB | 1.28 kB | -3 B |
| src/gl/depth_mode.ts | 135 B | 132 B | -3 B |
| src/render/draw_collision_debug.ts | 1.13 kB | 1.13 kB | -3 B |
| node_modules/gl-matrix/esm/mat2.js | 227 B | 224 B | -3 B |
| src/ui/handler/box_zoom.ts | 719 B | 716 B | -3 B |
| src/ui/handler_manager.ts | 2.47 kB | 2.46 kB | -3 B |
| src/style-spec/expression/runtime_error.ts | 113 B | 109 B | -4 B |
| src/style-spec/expression/definitions/match.ts | 912 B | 908 B | -4 B |
| src/index.ts | 866 B | 862 B | -4 B |
| src/style-spec/validate/validate_constants.ts | 116 B | 111 B | -5 B |
| src/style-spec/util/color_spaces.ts | 762 B | 757 B | -5 B |
| src/data/bucket/line_attributes.ts | 121 B | 116 B | -5 B |
| src/style/style_layer/background_style_layer.ts | 65 B | 60 B | -5 B |
| src/source/source.ts | 356 B | 351 B | -5 B |
| src/ui/hash.ts | 943 B | 938 B | -5 B |
| src/util/is_char_in_unicode_block.ts | 885 B | 879 B | -6 B |
| node_modules/@mapbox/vector-tile/lib/vectortilefeature.js | 1.01 kB | 1.01 kB | -6 B |
| src/symbol/quads.ts | 1.89 kB | 1.88 kB | -6 B |
| src/style/style_layer/background_style_layer_properties.g.ts | 116 B | 110 B | -6 B |
| src/data/segment.ts | 453 B | 446 B | -7 B |
| src/render/draw_debug.ts | 1.13 kB | 1.13 kB | -7 B |
| src/data/bucket/line_bucket.ts | 2.41 kB | 2.4 kB | -9 B |
| src/render/draw_fill_extrusion.ts | 840 B | 831 B | -9 B |
| node_modules/csscolorparser/csscolorparser.js | 2.06 kB | 2.05 kB | -11 B |
| src/shaders/line.vertex.glsl.g.ts | 707 B | 696 B | -11 B |
| src/util/primitives.ts | 1.01 kB | 1 kB | -11 B |
| src/data/feature_position_map.ts | 567 B | 553 B | -14 B |
| src/shaders/line_gradient.vertex.glsl.g.ts | 736 B | 722 B | -14 B |
| src/shaders/line_sdf.vertex.glsl.g.ts | 809 B | 794 B | -15 B |
| src/shaders/line_pattern.vertex.glsl.g.ts | 789 B | 773 B | -16 B |
| node_modules/murmurhash-js/murmurhash3_gc.js | 368 B | 350 B | -18 B |
| node_modules/earcut/src/earcut.js | 2.64 kB | 2.62 kB | -19 B |
| src/data/array_types.g.ts | 2.82 kB | 2.8 kB | -20 B |
| src/render/program/program_uniforms.ts | 950 B | 930 B | -20 B |
| src/util/ajax.ts | 2.37 kB | 2.34 kB | -35 B |
| src/style/create_style_layer.ts | 387 B | 348 B | -39 B |
| src/source/rtl_text_plugin.ts | 859 B | 801 B | -58 B |
| src/style/parse_glyph_pbf.ts | 395 B | 333 B | -62 B |
| src/util/tile_request_cache.ts | 930 B | 849 B | -81 B |
| src/util/performance.ts | 785 B | 698 B | -87 B |
| src/util/evented.ts | 3.94 kB | 504 B | -3.44 kB |
![github-actions[bot] avatar](https://avatars.githubusercontent.com/in/15368?v=4 "Published by a pub.dev verified publisher"){kind=small}
Just out of curiosity, what are your use-cases @candux for zoom levels higher than 14?
Just out of curiosity, what are your use-cases @candux for zoom levels higher than 14?
@wipfli this doesn't change the typical z14 for datasets / z18+ for visualizations. This PR only makes overzooming (z15+) crispier.
There were a few changes recently to the sharers including terrain 3D which are missing in the native code, so I'm not sure you be able to test the sharers.
Thanks for the heads-up. I try to prepare everything in https://github.com/maplibre/maplibre-gl-native/pull/289 , so it can just be merged when the shaders in native get updated to the latest version of js.
I personally don't see the difference in the pictures, but the code looks a lot cleaner. :-)
The changes are most visible in the building. The lines are crispier and more parallel.
Just out of curiosity, what are your use-cases @candux for zoom levels higher than 14?
We are mostly interested to show more indoor details of train-stations
this doesn't change the typical z14 for datasets / z18+ for visualizations. This PR only makes overzooming (z15+) crispier.
Yes, exactly. We want to avoid creating a new dataset just for indoor visualization which complicates the style and exporting the whole world on z15+ is quite difficult.
I currently work on fixing all rendering regressions. Unfortunately there are a few places which use magic numbers which depend on the extent. Refactoring these to use the globally defined constant would be a great maintenance improvement for the future.
I think it would be a good moment to put the magic number 8192 or its new value into a unchangeable global variable or something like that.
One sideeffect of the greater extent would be, that the vectortiles will increase in size, because in protobuf-format bigger numbers will use more bytes. I dont know if this effect is major or minor, do you? In general i like this PR!
I think it would be a good moment to put the magic number 8192 or its new value into a unchangeable global variable or something like that.
it's already in https://github.com/maplibre/maplibre-gl-js/pull/1244/files#diff-27fcda492afcb31d627de1fdef3e3dd88eac4e122ed6cc2fb8fe7b4b2e0bee9f
One sideeffect of the greater extent would be, that the vectortiles will increase in size, because in protobuf-format bigger numbers will use more bytes. I dont know if this effect is major or minor, do you? In general i like this PR!
we increased the tile extent from 4094 to 16384 for some openmaptiles layers (buildings, transportation). The size increase was only a few percents, but the quality improved a lot
Finally, all tests pass. A lot of results had to be updated but it should always be justified because of better precision. viewport-text-depthtest looks like a change in behavior but the new result is correct.
From my perspective, this is ready to be merged. I would be very happy if someone could review or test this PR.
Can you post the benchmark results? I recently fixed them so maybe you need to merge main first...
Please comment on the apparent difference in test/integration/render/tests/text-pitch-alignment/viewport-text-depthtest/expected.png
@candux have you use one of the native platforms in the past? I would like to be able to update native when the shaders in GL JS change. See https://github.com/maplibre/maplibre-gl-native/pull/315
Any help on the native stuff would be really helpful for pull requests that change the shaders in GL JS.
Can you post the benchmark results? I recently fixed them so maybe you need to merge main first...
Unfortunatly they always get stuck for me at some point. This also happens on main. Doesn't matter if they run in the browser or headless. I will try it on another system.
Please comment on the apparent difference in test/integration/render/tests/text-pitch-alignment/viewport-text-depthtest/expected.png
I put the explanation in the git commit:
the text below the red line is what is expected from the style. It already looks like that on main, but the diff wasn't big enough to trigger a fail. Minor changes of the position pushed to the test to fail
I can also make new PR with just that commit to update the expected results
have you use one of the native platforms in the past? I would like to be able to update native when the shaders in GL JS change. See https://github.com/maplibre/maplibre-gl-native/pull/315 Any help on the native stuff would be really helpful for pull requests that change the shaders in GL JS.
Unfortuantly, I'm not familiar with native and only use it in tileserver-gl. I will take a look if I can help but that not really my expertise.
Would be great if you could update the render test in a separate pull request. Thanks for catching this.
On a first benchmark run on my laptop, http://0.0.0.0:9966/bench/versions?compare=main#WorkerTransfer seems roughly 10 percent slower. @HarelM is that the one which is always 10 percent slower in the second run?
In order to avoid issues with benchmarks I run 3 version comparison, the first version is "dummy" in order to make the comparison good between the second and the third version.
Yes, I agree. We should discuss this in our next steering committee meeting, as the GL-JS is far ahead of the native when it comes to the shaders and we need to decide what to do there...
This bit was used so far only as an hack in the line layer, to pass additional attributes. This hack is removed in the first commit.
Maybe this bit hack was a performance optimization. @candux what do you think, is it possible that with this pull request the rendering gets slower?
This PR is stale because it has been open 60 days with no activity. Remove stale label or comment or this will be closed in 30 days.
Stale or not - don't auto-close. We need to get maplibre-gl-js is updated in maplibre-gl-native, and the shaders aligned, and the gl-js benchmarks fixed, in order to get a better picture of the performance implications of this, because this visual improvement would be great to have - especially this building on the image seems to be visibly much more accurate.
It's worth mentioning that native is no longer using the shaders that are here. So there is no block from this part. cc @ChrisLoer
I've been looking into rebasing this. I find this is one of these cases where we might have moved a bit too much to the style-spec, because these changes there (values should go from ~8k to 16k) in order for these tests to pass: https://github.com/search?q=repo%3Amaplibre%2Fmaplibre-style-spec%208192&type=code
I've been looking into rebasing this.
if https://github.com/maplibre/maplibre-gl-js/issues/2507 gets finished, this PR would become obsolete. But maybe this PR is still useful for the short-term.
@candux interesting - if the other solution is in development, I think it's best to land it first and reassess the situation. I got reminded of this ticket again yesterday when I tried to add a point to an intersection - and it seemed like the level of accuracy needed to get it right simply wasn't supported, even though my coordinates have high precision.