DEMData class and height PNG Results in weird interpretation

[pcace]

Hi,

i am trying to generate Terrain Mesh using the DEMData class by

• fetching a height png for example this one https://web3d.basemap.de/maplibre/dgm5-rgb/14/8797/5379.png
• then generating new DEMData more or less like so:

  const blob = new Blob([tileImageBuffer.buffer], { type: 'image/png' })

  // Erstellen eines ImageBitmap-Objekts aus dem Blob
  const imageBitmap = await createImageBitmap(blob)

  let canvas = new OffscreenCanvas(imageBitmap.width, imageBitmap.height)
  let context = canvas.getContext('2d')
  if (!context) {
    throw new Error('Failed to get 2D context')
  }
  context.drawImage(imageBitmap, 0, 0)

  let width = imageBitmap.width
  let height = imageBitmap.height

// ...some canvas cutting and splitting...

  const finalImageData = context.getImageData(0, 0, canvas.width, canvas.height)

  // Erstellen eines RGBAImage-Objekts für das skalierte Bild
  const scaledRgbaImage = new RGBAImage(
    { width: finalImageData.width, height: finalImageData.height },
    new Uint8Array(finalImageData.data.buffer)
  )

  const scaledDemData = new DEMData(
    `${tileImageBuffer.sourceTile.canonical.z}_${tileImageBuffer.sourceTile.canonical.x}_${tileImageBuffer.sourceTile.canonical.y}`,
    scaledRgbaImage,
    'mapbox' as DEMEncoding
  )

  // Dispose imageBitmap and canvas
  imageBitmap.close()
  canvas.width = 0
  canvas.height = 0

  return scaledDemData

it more or less works quite good, but there is one issue i dont know how to solve: the resulting mesh is not as smooth as i would expect it to be. there are crazy spikes in there:

(the mesh in the screenshot is simplified, but the spikes remain)

i imagin its the areas with hard color switches like this one:

this is the same source i use for the maplibre terrain - where it is butter smooth. so i guess i am missing some kind of value clamping or so? What am i missing here? Or what is the problem here?

Thanks a lot!!

[HarelM]

Maplibre sometimes uses a lower resolution DEM tiles (lower zoom), but otherwise, I would check the network to see what you get, I would also check the render test here if you want to see how this specific tile might look. I can't think of other stuff that can cause this...

[pcace]

Hi there, i have found the issue. it had nothing to do with maplibre. i was using an offscreen canvas to scale the png and then process its demdata. Scaling the image did break it. Not scaling it makes a butter smooth mesh.