Support `line` layer on Globe with Terrain3D #4970

birkskyum · 2024-11-03T17:52:44Z

Context for this series of PRs

Towards

[Feat] Support Terrain in Globe projection #4927

For the Globe with Terrain3D, I have been working on getting all the layers working.

These changes generally touches the draw_[layer].ts, and in rare cases the [layer]_program.ts too.

The fixes for these layers have each their own complexities. Luckily they can be reviewed and applied individually, which I think is the better way to go about it.

The line is the simplest, so I've tried to prepare a PR here with the bare minimum of changes needed to get it going.

Support `line` layer on Globe with Terrain3D

I set the ignoreGlobeMatrix flag in this case, to avoid applying the globeMatrix twice, since it's also applied to the Terrain3D.

Repro example using Liberty style from OpenFreeMap

<!DOCTYPE html>
<html lang="en">
<head>
    <title>3D Terrain</title>
    <meta property="og:description" content="Go beyond hillshade and show elevation in actual 3D." />
    <meta charset='utf-8'>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel='stylesheet' href='../../dist/maplibre-gl.css' />
    <script src='../../dist/maplibre-gl-dev.js'></script>
    <style>
        body { margin: 0; padding: 0; }
        html, body, #map { height: 100%; }
    </style>
</head>
<body>
<div id="map"></div>
<script>
    const map = (window.map = new maplibregl.Map({
        container: 'map',
        zoom: 12,
        center: [11.39085, 47.27574],
        pitch: 70,
        hash: true,
        
        maxZoom: 18,
        maxPitch: 85
    }));

    map.setStyle('https://tiles.openfreemap.org/styles/liberty', {
            transformStyle: (previousStyle, nextStyle) => {
                
                nextStyle.sources = {
                    ...nextStyle.sources, terrainSource: {
                        type: 'raster-dem',
                        url: 'https://demotiles.maplibre.org/terrain-tiles/tiles.json',
                        tileSize: 256
                    },
                    hillshadeSource: {
                        type: 'raster-dem',
                        url: 'https://demotiles.maplibre.org/terrain-tiles/tiles.json',
                        tileSize: 256
                    }
                }
                nextStyle.terrain = {
                    source: 'terrainSource',
                    exaggeration: 1
                }

                // nextStyle.sky = {}

                // nextStyle.layers.push({
                //     id: 'hills',
                //     type: 'hillshade',
                //     source: 'hillshadeSource',
                //     layout: { visibility: 'visible' },
                //     paint: { 'hillshade-shadow-color': '#473B24' }
                // })

                return nextStyle
            }
        })

    map.addControl(
        new maplibregl.NavigationControl({
            visualizePitch: true,
            showZoom: true,
            showCompass: true
        })
    );

    map.addControl(
        new maplibregl.GlobeControl()
    );

    map.addControl(
        new maplibregl.TerrainControl({
            source: 'terrainSource',
            exaggeration: 1
        })
    );
</script>
</body>
</html>

Before

After

Launch Checklist

Confirm your changes do not include backports from Mapbox projects (unless with compliant license) - if you are not sure about this, please ask!
Add an entry to CHANGELOG.md under the ## main section.

codecov-commenter · 2024-11-03T17:55:07Z

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 90.88%. Comparing base (927dd71) to head (622c509).
Report is 1 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #4970      +/-   ##
==========================================
+ Coverage   90.41%   90.88%   +0.46%     
==========================================
  Files         266      266              
  Lines       38164    38170       +6     
  Branches     3217     3187      -30     
==========================================
+ Hits        34507    34689     +182     
+ Misses       2669     2561     -108     
+ Partials      988      920      -68

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

HarelM · 2024-11-03T19:50:07Z

Do you think we should create a branch in this repo to allow merging everything to that branch like we did with the globe feature?

birkskyum · 2024-11-03T20:00:13Z

I actually don't think it's necessary. Unlike with the globe, it appear that it's quite possible to land the improvements in an incremental manner - independently of each other.

The layers are quite well separated in the code.

HarelM · 2024-11-03T20:04:56Z

What about adding a render test? Even a single geojson and zero elevation tiles should do, right?

birkskyum · 2024-11-03T20:26:16Z

@HarelM I have added 3 render tests. They do render the line correctly.

They show up a bit odd for now, since the fill and background layers aren't supported yet, so the globe itself is still missing, but they can be updated once background/fill works too.

HarelM · 2024-11-03T20:36:13Z

I think @louwers is using either the globe or terrain folders to ignore parity for gender tests, can you use globe/terrain/... Or the other way around?

birkskyum · 2024-11-03T20:43:48Z

Yes, they actually fit in nicely besides the existing globe+terrain test of the raster layer

src/render/draw_line.ts

birkskyum requested review from ibesora and HarelM November 3, 2024 17:53

Fix line layer on terrain globe

06bcd17

birkskyum force-pushed the support-line-layer-on-globe-with-terrain3d branch from beee0a3 to 06bcd17 Compare November 3, 2024 19:27

birkskyum mentioned this pull request Nov 3, 2024

[Feat] Support Terrain in Globe projection #4927

Closed

globe-terrain render tests

71f650e

move to globe/terrain/line-x

67bf3b7

HarelM reviewed Nov 3, 2024

View reviewed changes

src/render/draw_line.ts Outdated Show resolved Hide resolved

birkskyum force-pushed the support-line-layer-on-globe-with-terrain3d branch from d98378c to 67bf3b7 Compare November 3, 2024 20:52

single bool globeWithTerrain

622c509

HarelM approved these changes Nov 3, 2024

View reviewed changes

birkskyum mentioned this pull request Nov 3, 2024

Hybrid terrain example #4971

Merged

1 task

birkskyum merged commit e4760d0 into maplibre:main Nov 3, 2024
15 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Support `line` layer on Globe with Terrain3D #4970

Support `line` layer on Globe with Terrain3D #4970

birkskyum commented Nov 3, 2024 •

edited

Loading

codecov-commenter commented Nov 3, 2024 •

edited

Loading

HarelM commented Nov 3, 2024

birkskyum commented Nov 3, 2024

HarelM commented Nov 3, 2024

birkskyum commented Nov 3, 2024 •

edited

Loading

HarelM commented Nov 3, 2024

birkskyum commented Nov 3, 2024 •

edited

Loading

Support line layer on Globe with Terrain3D #4970

Support line layer on Globe with Terrain3D #4970

Conversation

birkskyum commented Nov 3, 2024 • edited Loading

Context for this series of PRs

Support line layer on Globe with Terrain3D

Launch Checklist

codecov-commenter commented Nov 3, 2024 • edited Loading

Codecov Report

HarelM commented Nov 3, 2024

birkskyum commented Nov 3, 2024

HarelM commented Nov 3, 2024

birkskyum commented Nov 3, 2024 • edited Loading

HarelM commented Nov 3, 2024

birkskyum commented Nov 3, 2024 • edited Loading

Support `line` layer on Globe with Terrain3D #4970

Support `line` layer on Globe with Terrain3D #4970

birkskyum commented Nov 3, 2024 •

edited

Loading

Support `line` layer on Globe with Terrain3D

codecov-commenter commented Nov 3, 2024 •

edited

Loading

birkskyum commented Nov 3, 2024 •

edited

Loading

birkskyum commented Nov 3, 2024 •

edited

Loading