bad position of 3D model when 3D terrain is enabled #1654

767160 · 2022-09-17T00:14:39Z

The position of the 3D model and the map are not synchronized.
The problem appears both in Firefox and Chrome

It is illustrated in the videos below:

bug2.mp4

bug1.mp4

767160 · 2022-09-17T00:17:12Z

Here is the code I use.
This is a merge of documentation's examples of 3d terrain and THREE objet


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>3D Terrain</title>
		<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
		<script src="https://unpkg.com/[email protected]/dist/maplibre-gl.js"></script>
		<link href="https://unpkg.com/[email protected]/dist/maplibre-gl.css" rel="stylesheet">
		<style>
	body { margin: 0; padding: 0; }
	#map { position: absolute; top: 0; bottom: 0; width: 100%; }

		</style>
	</head>
	<body>
		<script src="https://unpkg.com/[email protected]/build/three.min.js"></script>
		<script src="https://unpkg.com/[email protected]/examples/js/loaders/GLTFLoader.js"></script>
		<div id="map"></div>
		<script>
    var map = (window.map = new maplibregl.Map({
        container: 'map',
        zoom: 18,
        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: '&copy; OpenStreetMap Contributors',
                    maxzoom: 19
                },
                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
                }
            },
            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,
        antialias: true
    }));

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

    map.addControl(
        new maplibregl.TerrainControl({
            source: 'terrainSource',
            exaggeration: 1
        })
    );
    
    
    // parameters to ensure the model is georeferenced correctly on the map
var modelOrigin = [11.39085, 47.27574];
var modelAltitude = 0;
var modelRotate = [Math.PI / 2, 0, 0];
 
var modelAsMercatorCoordinate = maplibregl.MercatorCoordinate.fromLngLat(
modelOrigin,
modelAltitude
);
 
// transformation parameters to position, rotate and scale the 3D model onto the map
var modelTransform = {
translateX: modelAsMercatorCoordinate.x,
translateY: modelAsMercatorCoordinate.y,
translateZ: modelAsMercatorCoordinate.z,
rotateX: modelRotate[0],
rotateY: modelRotate[1],
rotateZ: modelRotate[2],
/* Since our 3D model is in real world meters, a scale transform needs to be
* applied since the CustomLayerInterface expects units in MercatorCoordinates.
*/
scale:  modelAsMercatorCoordinate.meterInMercatorCoordinateUnits()
};
 
var THREE = window.THREE;
 
// configuration of the custom layer for a 3D model per the CustomLayerInterface
var customLayer = {
id: '3d-model',
type: 'custom',
renderingMode: '3d',
onAdd: function (map, gl) {
this.camera = new THREE.Camera();
this.scene = new THREE.Scene();
 
// create two three.js lights to illuminate the model
var directionalLight = new THREE.DirectionalLight(0xffffff);
directionalLight.position.set(0, -70, 100).normalize();
this.scene.add(directionalLight);
 
var directionalLight2 = new THREE.DirectionalLight(0xffffff);
directionalLight2.position.set(0, 70, 100).normalize();
this.scene.add(directionalLight2);
 
// use the three.js GLTF loader to add the 3D model to the three.js scene
var loader = new THREE.GLTFLoader();
loader.load(
'https://maplibre.org/maplibre-gl-js-docs/assets/34M_17/34M_17.gltf',
function (gltf) {
this.scene.add(gltf.scene);
}.bind(this)
);
this.map = map;
 
// use the MapLibre GL JS map canvas for three.js
this.renderer = new THREE.WebGLRenderer({
canvas: map.getCanvas(),
context: gl,
antialias: true
});
 
this.renderer.autoClear = false;
},
render: function (gl, matrix) {
var rotationX = new THREE.Matrix4().makeRotationAxis(
new THREE.Vector3(1, 0, 0),
modelTransform.rotateX
);
var rotationY = new THREE.Matrix4().makeRotationAxis(
new THREE.Vector3(0, 1, 0),
modelTransform.rotateY
);
var rotationZ = new THREE.Matrix4().makeRotationAxis(
new THREE.Vector3(0, 0, 1),
modelTransform.rotateZ
);
 
var m = new THREE.Matrix4().fromArray(matrix);
var l = new THREE.Matrix4()
.makeTranslation(
modelTransform.translateX,
modelTransform.translateY,
modelTransform.translateZ
)
.scale(
new THREE.Vector3(
modelTransform.scale,
-modelTransform.scale,
modelTransform.scale
)
)
.multiply(rotationX)
.multiply(rotationY)
.multiply(rotationZ);
 
this.camera.projectionMatrix = m.multiply(l);
this.renderer.state.reset();
this.renderer.render(this.scene, this.camera);
this.map.triggerRepaint();
}
};
 
map.on('style.load', function () {
map.addLayer(customLayer);
});

		</script>
	</body>
</html>

767160 · 2022-09-17T00:17:38Z

My company would be happy to hire someone to fix this issue

767160 · 2022-09-17T00:27:58Z

Maybe the problem is just the altitude

bug3.mp4

HarelM · 2022-09-17T03:44:29Z

We've just merged a removal of the elevationOffset, it might help (although not high chances).
Can you try this example with the latest code base?
If you can find someone who can look into it that it can be great, 3D and buildings etc is not an easy problem :-)

HarelM · 2022-09-17T03:49:16Z

Probably related or duplicate of #1294

birkskyum · 2022-09-18T14:10:45Z

It's still an issue after the latest changes.

prozessor13 · 2022-10-15T16:02:47Z

I think on every redraw call you have to grab the elevation with:

map.transform.getElevation(lngLat, map.terrain)

a refetch is necessary because in different zoomlevels with different terrain-tiles the elvation-values are not the same. Then there exists the

map.transform.elevation

variable with the center-altitdue. In maplibre the proj-matrix is translated by this value in negative z-direction. So this has to somehow merged into the altitude of the 3d-model. May

modelAltitude = map.transform.getElevation(modelOrigin, map.terrain) - map.transform.elevation;

do the trick, but did not tested this, just a guess.

Note: The jump on the moveend event is, because the center-altitude is only updated at moveend. This is to let the camera in the same height during dragging. Then, on moveend, the zoom-level is recalculated, to let the camera on its position.

HarelM · 2023-03-03T20:10:13Z

I've assigned a M bounty.
Link to parent Bounty: maplibre/maplibre#189

manhcuongincusar1 · 2023-03-04T03:41:26Z

Hi @HarelM, I am Cuong (call me Stefan) at devs pool. Can I assign this issue?

HarelM · 2023-03-04T07:04:28Z

Sure! please keep me posted on your progress.

manhcuongincusar1 · 2023-03-04T07:35:55Z

Sure, thank you

manhcuongincusar1 · 2023-03-13T03:20:39Z

@HarelM I added queryTerrainElevation into camera.ts. This method allows user to get elevation of a point at specific transform's elevation. Can you check this pull request, thanks

Specical thank for your support @hami9x @prozessor13

hami9x · 2023-03-13T03:42:41Z

This is demo code that shows 3d model working with queryTerrainElevation (included in Stefan's pull request)
https://github.com/maplibre/maplibre-gl-js/blob/7bab10e8dfd1680471126b02b4849423a5f50365/test/debug-pages/terrain-3d-object.html

HarelM · 2023-03-16T08:23:26Z

@manhcuongincusar1 please submit an expense report in open collective in order to get the bounty.
Also please link the report here so that we'll know it was you who filed it.
THANKS!

manhcuongincusar1 · 2023-03-16T08:53:20Z

@HarelM Thank you very much, this is the expense link: https://opencollective.com/maplibre/expenses/128542

HarelM added bug Something isn't working PR is more than welcomed Extra attention is needed terrain labels Sep 17, 2022

HarelM mentioned this issue Sep 17, 2022

3D model loading problem in the terrain map - MapLibre V2 - #1294

Closed

birkskyum mentioned this issue Sep 18, 2022

Terrain 3d model example #1658

Closed

HarelM mentioned this issue Mar 2, 2023

When I load terrain and 3D model offset visual angle height jump #2240

Closed

HarelM added the 💰 bounty M Medium Bounty, USD 250 label Mar 3, 2023

HarelM assigned manhcuongincusar1 Mar 4, 2023

This was referenced Mar 13, 2023

Add queryTerrainElevation method #2264

Closed

Add queryTerrainElevation #2279

Merged

HarelM closed this as completed in #2279 Mar 16, 2023

neodescis mentioned this issue Nov 30, 2023

Adding some explanations to example for CustomLayer with Threejs #3427

Closed

sbachinin mentioned this issue Mar 13, 2024

map.queryTerrainElevation not returning expected values #3736

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

bad position of 3D model when 3D terrain is enabled #1654

bad position of 3D model when 3D terrain is enabled #1654

767160 commented Sep 17, 2022

767160 commented Sep 17, 2022

767160 commented Sep 17, 2022

767160 commented Sep 17, 2022

HarelM commented Sep 17, 2022

HarelM commented Sep 17, 2022

birkskyum commented Sep 18, 2022

prozessor13 commented Oct 15, 2022 •

edited

Loading

HarelM commented Mar 3, 2023

manhcuongincusar1 commented Mar 4, 2023

HarelM commented Mar 4, 2023

manhcuongincusar1 commented Mar 4, 2023

manhcuongincusar1 commented Mar 13, 2023 •

edited

Loading

hami9x commented Mar 13, 2023 •

edited

Loading

HarelM commented Mar 16, 2023

manhcuongincusar1 commented Mar 16, 2023

bad position of 3D model when 3D terrain is enabled #1654

bad position of 3D model when 3D terrain is enabled #1654

Comments

767160 commented Sep 17, 2022

767160 commented Sep 17, 2022

767160 commented Sep 17, 2022

767160 commented Sep 17, 2022

HarelM commented Sep 17, 2022

HarelM commented Sep 17, 2022

birkskyum commented Sep 18, 2022

prozessor13 commented Oct 15, 2022 • edited Loading

HarelM commented Mar 3, 2023

manhcuongincusar1 commented Mar 4, 2023

HarelM commented Mar 4, 2023

manhcuongincusar1 commented Mar 4, 2023

manhcuongincusar1 commented Mar 13, 2023 • edited Loading

hami9x commented Mar 13, 2023 • edited Loading

HarelM commented Mar 16, 2023

manhcuongincusar1 commented Mar 16, 2023

prozessor13 commented Oct 15, 2022 •

edited

Loading

manhcuongincusar1 commented Mar 13, 2023 •

edited

Loading

hami9x commented Mar 13, 2023 •

edited

Loading