Comments (3)
The error in the console seems related to matrix inversion if I understand correctly.
I'm no linear algebra expert, but it might be some edge case related to the projection matrix.
I would try and find an easy way to reproduce this, otherwise, you'll have a hard time understanding what causes this.
I'm not able to reproduce it using the terrain 3D demo example page unfortunately...
from maplibre-gl-js.
I can't reproduce this when using the example page on a macos with chrome:
https://maplibre.org/maplibre-gl-js/docs/examples/3d-terrain/
Can you try and create a jsbin that reproduces this?
Since geojsons.com might have some wrapper library that can cause issues I prefer to have a jsbin without any wrappers that reproduces this issue.
It's also worth trying to see if you can find a version that this bug doesn't happen in, so we can maybe find the relevant PR that caused this issue (assuming it was there from the initial introduction of the terrain code).
from maplibre-gl-js.
Hey @harel,
I'll investigate further on the first error (TypeError: this._tiles[T] is undefined
) which impacts me and happens almost instantly when i zoom in/out quickly. I'll try create a reproducible example.
However, for the demo crashing, did you try a non-demo terrain url? I was able to reproduce the error using maplibre.org/maplibre-gl-js/docs/examples/3d-terrain, as long as I used maptiler's tiles. Or just update MY_KEY_FROM_MAPTILER
in https://jsbin.com/romekiriho/1/edit?html,output to be your free Maptiler API key.
Here's a 15s video that is 2x speed of me just zooming in and out, and eventually the app crashes. So it took about 30 seconds, less problematic that the original error.
30-2x.mp4
I've also attached the html file, just update MY_KEY_FROM_MAPTILER
index.html
<!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='https://unpkg.com/[email protected]/dist/maplibre-gl.css' />
<script src='https://unpkg.com/[email protected]/dist/maplibre-gl.js'></script>
<style>
body { margin: 0; padding: 0; }
html, body, #map { height: 100%; }
</style>
</head>
<body>
<div id="map"></div>
<script>
const key = "MY_KEY_FROM_MAPTILER"
const map = (window.map = new maplibregl.Map({
container: 'map',
zoom: 12,
center: [11.39085, 47.27574],
pitch: 52,
hash: true,
style: {
version: 8,
sources: {
osm: {
type: 'raster',
tiles: ['https://a.tile.openstreetmap.org/{z}/{x}/{y}.png'],
tileSize: 256,
attribution: '© OpenStreetMap Contributors',
maxzoom: 19
},
// Use a different source for terrain and hillshade layers, to improve render quality
terrainSource: {
type: 'raster-dem',
url: `https://api.maptiler.com/tiles/terrain-rgb/tiles.json?key=${key}`,
tileSize: 256
},
hillshadeSource: {
type: 'raster-dem',
url: `https://api.maptiler.com/tiles/terrain-rgb/tiles.json?key=${key}`,
tileSize: 256
}
},
layers: [
{
id: 'osm',
type: 'raster',
source: 'osm'
},
{
id: 'hills',
type: 'hillshade',
source: 'hillshadeSource',
layout: {visibility: 'visible'},
paint: {'hillshade-shadow-color': '#473B24'}
}
],
terrain: {
source: 'terrainSource',
exaggeration: 1
}
},
maxZoom: 18,
maxPitch: 85
}));
map.addControl(
new maplibregl.NavigationControl({
visualizePitch: true,
showZoom: true,
showCompass: true
})
);
map.addControl(
new maplibregl.TerrainControl({
source: 'terrainSource',
exaggeration: 1
})
);
</script>
</body>
</html>
from maplibre-gl-js.
Related Issues (20)
- Having trouble writing a working `addProtocol` for a raster layer HOT 1
- Recoloring a raster source like a WMS or image. Such as in mapbox: raster-color & raster-color-mix HOT 7
- Modifying the results of map.getStyle() modifies the style HOT 1
- `line-width` is incorrectly rendered when used in conjunction with `line-offset` in certain line angles HOT 3
- 3D Terrain significantly decrease performance of the map HOT 2
- Use a secondary tile source for a specific bbox only HOT 1
- Per-feature fill-extrusion-opacity HOT 1
- Add 3DTiles as source for terrain layer HOT 2
- setFeatureState changes type of properties from feature and changes evaluation of unrelated properties. HOT 1
- Rendering of vector tiles in wrong y-order HOT 2
- [Feature] Allow "underzooming" to show entire map on non-square viewports when renderWorldCopies=false HOT 13
- Modularize graphics backend
- Can't disable all sky rendering when terrain is enabled HOT 1
- [Add 3D model Babylon]Part of 3D model which is with negative y is not visible HOT 1
- v4.0.0 silently swallows errors in load event HOT 3
- spector.js no longer able to capture a frame with maplibre-gl-js HOT 2
- 3D map freezes when camera is adjusted against map bounds (in dev environment only (?)) HOT 4
- Replace some manual script detection with regular expressions HOT 1
- Node 22 build issue - Import Attributes
- Hill Shading: Artifacts on Linux HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from maplibre-gl-js.