prozessor13 / maplibre-gl-js Goto Github PK

Currently, when a new tile is loaded, all loaded tiles will be rerendered. This should be changed, and can be done in TerrainSourceCache.js at around line 80. I already started an approach, but it did not work correct. Those lines of code are currently commented out.

I am having an issue in the terrain3d branch where point label distribution does not seem to be working correctly.

This is my example with the terrain3d branch
https://stackblitz.com/edit/web-platform-wxkjfp?file=index.html

In this example, all the black circles should have a label, but you can see they are missing around the outer edge. If you move the screen around, the lables continue to stay in the center and out edge stays missing. Also, If you zoom in, you would expect more labels to be visible, but instead there are even less labels.

I have also tested this with the maplibre master branch (2.0.0 pre6) here
https://stackblitz.com/edit/web-platform-ddhwtr?file=index.html

In this second example, you can see the label distribution is more what you would expect. there is no missing border of labels and when you zoom in more labels can be seen

when calling the vertex-shader function get_elevation also check if the opacity is zero. if yes move the symbol and circle position away from screen.

I was testing some information about heatmaps today and found the heatmaps aren't working in the Terrain3d branch.

Here is my example
https://stackblitz.com/edit/web-platform-wgdui8?file=index.html

This is the same example the official release
https://stackblitz.com/edit/web-platform-mf4wfe?file=index.html

currently symbol, circle & fill-extrusion elevation is done via CPU. Switching to GPU should have a minor boost to performance.

Hello prozessor13,

your project is awesome and its working amazing.
I have an application with additional data as 3D-Tiles (b3dm-files). Visualization is taken care of via Javascript-Code (mainly Three.js).

In 2D-Maps the data is shown, but when i add 3D it seems as it is blocked.
I dont know if this problem is due to your or my Code.
So do you allow to put objects on top? Maybe you can tell me which code snippet i should look into.

Regards,
Hendrik

currently the farZ value is calculated via:

furthestDistance + elevation_in_pixels / cos(pitch)

but this formular do not work correct when pitching the map.

http://localhost:9966/debug/terrain.html#15.83/47.305778/11.351002/116/60

I am testing with a compiled version from ( b838fcd2e b838fcd2e29ed57c2bcfff1b8a35a1c07d43cf6e )

When Terrain is off I am seeing symbols and road names floating in the air. This url should be an example.

With Terrain on the symbols seem to clamp to the ground like they should be (most of the time)

Just wanted to let you know that since the last merge with master, the terrain3d branch has this attribution bug ( maplibre#640 ) . I tested the upstream fix in my local copy and it works for me.

Other than that I wanted to comment that the 3d terrain has been working pretty well. My wifidb.net map is using the latest (ab0d337) with the fixes to attribution and I haven't had to many issues (except when i ran it on an older laptop...haha)

Currently the camera is at a constant height, relatively to the altitude of the center-coordinate.

This should be changed, to that the camera is always on the same hight, relatively to the sea-level. To render the scene correct, it is necessary to recalculate the zoom-level on every map-movement.

This seems to be a precision problem, or a render-sync problem.

Steps to reproduce:

• open terrain.html
• click into the map (= to create a marker)
• change pitch
• drag/zoom map

Motivation

Would it be possible to add toggle button for 3d terrain, similar to GeolocateControl or FullscreenControl that is built in to maplibre? I feel like this would make it easier to optionally use terrain.

Design

I have done this on my own site with this code and css. I used a terrain icon from svgrepo which looks good for show 3d terrain. For hide 3d terrain I removed the montains in the icon, which works but is kind of ugly (i had trouble thinking of something better)

javascript

/* Code to add a custom button. Idea from Stack Overflow https://stackoverflow.com/a/51683226  */
class MaplibreGLButtonControl {
  constructor({
	className = "",
	id = "",
	title = "",
	eventHandler = evtHndlr
  }) {
	this._className = className;
	this._id = id;
	this._title = title;
	this._eventHandler = eventHandler;
  }

  onAdd(map) {
	this._btn = document.createElement("button");
	this._btn.id = this._id;
	this._btn.className = "maplibregl-ctrl-icon" + " " + this._className;
	this._btn.type = "button";
	this._btn.title = this._title;
	this._btn.onclick = this._eventHandler;

	this._container = document.createElement("div");
	this._container.className = "maplibregl-ctrl-group maplibregl-ctrl";
	this._container.appendChild(this._btn);

	return this._container;
  }

  onRemove() {
	this._container.parentNode.removeChild(this._container);
	this._map = undefined;
  }
}

/* Toggle Terrain Function */
function terrain_toggle(event) {
	var el = document.getElementById(event.target.id);

	if ( el.classList.contains('maplibregl-terrain') )
	{
		map.addTerrain("terrain");
		el.title = "Hide 3d Terrain"
	} else {
		map.removeTerrain();
		el.title = "Show 3d Terrain"
	}

	el.classList.toggle('maplibregl-terrain');
	el.classList.toggle('maplibregl-terrain-hide');

}

/* Toggle Terrain Button */
const terrain_button = new MaplibreGLButtonControl({
  className: "maplibregl-terrain",
  id: "terrain_button",
  title: "Show 3d Terrain",
  eventHandler: terrain_toggle
});

map.addControl(terrain_button, "top-right");
/* End Custom Button to Toggle Terrain  */

css

.maplibregl-terrain {
	background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='25px' height='25px' viewBox='-4 -4 25 25' version='1.1'%3E%3Cg id='surface1'%3E%3Cpath style=' stroke:none;fill-rule:nonzero;fill:rgb(0%25,0%25,0%25);fill-opacity:1;' d='M 1.996094 15.234375 L 7.054688 9.722656 L 10.566406 13.234375 L 14.292969 16.957031 L 15.394531 15.855469 L 11.632812 12.089844 L 16.003906 7.410156 L 22.988281 15.234375 L 24.21875 15.234375 L 24.21875 14.265625 L 16.027344 5.089844 L 10.527344 10.984375 L 7.007812 7.464844 L 0.78125 14.246094 L 0.78125 15.234375 Z M 1.996094 15.234375 '/%3E%3Cpath style=' stroke:none;fill-rule:nonzero;fill:rgb(0%25,0%25,0%25);fill-opacity:1;' d='M 0.78125 19.140625 L 24.21875 19.140625 L 24.21875 20.703125 L 0.78125 20.703125 Z M 0.78125 19.140625 '/%3E%3C/g%3E%3C/svg%3E%0A");
}

.maplibregl-terrain-hide {
	background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='25px' height='25px' viewBox='-4 -4 25 25' version='1.1'%3E%3Cg id='surface1'%3E%3Cpath style=' stroke:none;fill-rule:nonzero;fill:rgb(0%25,0%25,0%25);fill-opacity:1;' d='M 0.78125 19.140625 L 24.21875 19.140625 L 24.21875 20.703125 L 0.78125 20.703125 Z M 0.78125 19.140625 '/%3E%3C/g%3E%3C/svg%3E%0A");
}

Mock-Up

Hi prozessor13,

great work on the 3d feature, looks beautiful!

When testing your branch I noticed some flickering when zooming in (using the toursprung/terrain.json style) which is quite noticeable. It seems like semi-transparent polygons are rendered twice and for a few frames and the opacity is therefore doubled.
Edit: It only seems to happen on the first zooming of an area, when all tiles are cached it doesn't happen.

Tile in the southeast with wrong opacity:

200ms later the tile is rendered correctly:

This doesn't happen with terrain disabled, I think it's related to some networking activity (new DEM or image tiles available).

Any idea where that may come from? Happy to help if you can point me in the right direction.

Regards,
Florian

Sometimes render to texture is done, even if not all resources are fully loaded. Due to caching this leads in incomplete renderings. Especially this happens if a rendered tile is not fully visible in the current viewport.