Increase max pitch for 3D scenarios

rbrundritt commented 1 week ago

User Story

As a city planner I can position the camera just above the ground and pitch it to look straight ahead or even upwards to some degree to get a first-person point of view of 3D data/terrain on map.

Rationale

Why is this feature needed?

With the growth from 2D map to 3D and addition of 3D data/terrain/models to the map, it is often desirable to be able have a first-person view at ground level to gain perspective. For example, what can I see if I was standing on the ground.
What are some example use cases?

This has a lot of uses cases, from real estate and city planning line of sight scenarios, to gaming and first-person player simulations.
Can it be done today? Is there a workaround?

Currently the max pitch allowed is 85 which was increased from 60 back in 2021 for 2.5D scenarios. With globe view and more 3D capabilities being added, the ability to increase the pitch beyond 85 will likely be highly desired. At a minimum, being able to look up 30 degrees above the horizon would be good for many scenarios. Being able to look straight up would allow for full view in all directions, removing the need to revisit this in the future as more user scenarios require more flexibility in how to move the camera.

Impact

Currently the pivot point of the map view is based on the center of the map. To truly support the this and similar camera positioning needs of 3D users, we may want to consider adding a camera position-based pivot point. Going down that path would allow for easier positioning of the camera to gain desired view points (e.g. position the camera 5 ft above the ground at a specific lon/lat and look towards lon/lat/elv position.

NathanMOlson commented 1 week ago

Hi @rbrundritt! I'm actively working on this feature, and it is nearing completion. See my PR here: https://github.com/maplibre/maplibre-gl-js/pull/4851, and please provide feedback if you have any.

rbrundritt commented 1 week ago

Awesome! I did search before posting but kept looking for "max pitch" but wasn't finding those other issues. This is great. Every time I added 3D models or extruded polygons I had been wanting a little bit more pitch. I'm now working on a side project that is a 3D simulation game and originally started with Cesium but ran into too many issues, then went pure babylon js but going that route is a ton of work. I had been wanting to use MapLibre and vector tiles but ruled it out due to the pitch limitation.

I'll close this item since there are other related issues open.

Samarth1696 commented 1 week ago

Hey, @rbrundritt !

I'm now working on a side project that is a 3D simulation game and originally started with Cesium but ran into too many issues, then went pure babylon js but going that route is a ton of work.

Babylon would be a good idea to work on but if you want something light weighted and in FPV then I am working on that, see the demo to get an idea of it: comment. After it gets ready you will be able to use it but it will need some time. Thank you!

rbrundritt commented 1 week ago

My main reason for going down the Babylon route was the need for a physics engine to handle collisions with the ground other models (trees). While digging into that approach I also found that I liked the idea of using materials and shaders to add more realness to the ground. However, given the high resolution of the course, I need to use a tile-based approach for the ground, and it makes sense to follow an existing tile schema than to create my own random one so that I have flexibility to use other existing tools. I also wanted to show the surrounding area in lower resolution 3D, and that's where using a map control like MapLibre or Cesium makes sense. I had already planned to use MapLibre for the overhead map view, and I've combined Babylon and three.js with MapLibre in the past to add custom 3D models, but this added pitch ability will certainly help. The approach I'm looking to at the moment is to render the terrain in MapLibre, use a WebGL layer to add 3D models, and then use an offscreen canvas that recreates a small portion of the course based on the direction the user is facing, and run the physics engine on that, capture the path and timings, then animate the ball in MapLibre. From there, I then may look at rendering the course terrain in babylon using the WebGL layer so that I can use shaders and material for advanced features, like grass similar to this demo: https://barthpaleologue.github.io/AssetScattering/ (use W/A/S/D to walk around). It's an infinite world, you can walk forever in any direction.

Here is another demo that I think is inspiring in terms of the potential performance possible with 3D maps in the browser: https://www.jdultra.com/google-tiles/index.html

I did see that other issue thread you mentioned and hope to see that in MapLibre in the future. The video reminded me of an old demo I made with Virtual Earth 3D in the browser back in 2009: https://rbrundritt.wordpress.com/2009/04/06/ve-3d-flight-simulator-version-1-1/

maplibre / maplibre-gl-js