Skip to content

Hidden faces with Mapbox DEM #445

Description

@PMeschenmoser-HSLU

Hi!

Describe the bug
I've been putting glb models on top of the Mapbox DEM terrain. Sometimes all or a few faces of the objects are not shown, even though the models are placed clearly above the terrain.

Image Image Image Image

To Reproduce
Steps to reproduce the behavior:

  • "Luckily" this behavior can be even observed in https://github.com/jscastro76/threebox/blob/master/examples/21-terrain.html . Simply pan/rotate/zoom (eventually quite wildly) around the glacier (potentially while Mapbox elevation data gets queried in the background). You will remark the behavior once the interaction is done (e.g. with moveend)
  • Tested with Mapbox GL JS v2.2.0/v3.14.0 and Chrome v139.0.7258.139

Expected behavior

  • Entire models are visible, even after map was moved, resp. Mapbox put new/refined terrain elevation data to the map .

Relevant Code or Code Sandbox
This only happens with terrain:true or a manually added terrain:


		window.tb = new Threebox(map, map.getCanvas().getContext('webgl'),
			{
				realSunlight: true,
				sky: true,
				enableSelectingObjects: true,
				enableTooltips: true, 
				orthograghic: false, 
				terrain:true
			}
		);

I'm adding the scene/models with following properties:

							child.material = new THREE.MeshNormalMaterial({
									side: THREE.DoubleSide,
									depthTest: true,
									depthWrite: true, 
								});
					
								child.translateY(child.userData['DACH_MIN']);
								if (layerName.includes('roofs')) {
									child.translateY(4.2);
								}
								child.visible = true;
								child.castShadow = false; 
								child.receiveShadow = false;

I've tried to let the hidden faces appear after certain Mapbox events, so after 'mapmove' or e.g.:

map.on('sourcedata', (e) => {
  if (e.sourceId === 'mapbox-dem' && e.isSourceLoaded) {
    console.log("New DEM data loaded", e);
    rerenderScene();
  }
});

and potential fixes to make the models appear afterwards in its entirety again, such as

		function rerenderScene() {
			scene.traverse(child => {
				if (child.isMesh) {
					child.updateMatrixWorld(true);
					child.material.needsUpdate = true;
					child.position.y += Number.EPSILON;
				}
			});
			scene.setCoords(modelOrigin)
			//tb.update();
			map.triggerRepaint();
		}

Though the models remain incomplete/hidden. Do you have ideas to a) avoid the artifact with DEM + hidden faces at all or b) show the hidden faces again once the artifact occurs?

Metadata

Metadata

Assignees

No one assigned

    Labels

    🪲 bugSomething isn't working

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions