Adding displacement map to low poly mesh

Questions
1

Hi,

I’m creating a 3D map (with markers) from an SVG file and I’m trying to add a displacement map for elevation. However, given the low number of vertices on the surface, the displacement isn’t working correctly.

image
image845×522 37.1 KB

image
image949×580 61.4 KB

Is there a way to add more vertices or make the displacement work in some other way?.

Code for reference:

        const loader = new SVGLoader()
        loader.load(
          "map.svg",
          (data) => {
            let paths = data.paths
            let shapes = []
            for (let i = 0; i < paths.length; i++) {
              Array.prototype.push.apply(shapes, paths[i].toShapes())
            }
            const extrusionSettings = {
              depth: 8,
              steps: 2,
              bevelEnabled: true,
              curveSegments: 3,
            }
            const geometry = new THREE.ExtrudeBufferGeometry(
              shapes,
              extrusionSettings
            )
            const mesh = new THREE.Mesh(
              geometry,
              new THREE.MeshPhongMaterial({
                color: 0xff0000,
                wireframe: true,
                displacementMap: groundTexture,
                displacementScale: 20,
              })
            )
          scene.add(mesh)
          }

Thanks,

Yunus

3

Yes, I have exactly the same question. On the internet you can only find examples of how to apply a heightmap to a rectangular surface. But I have different shapes, e.g. a circle or a trapezoid. How would you apply a heightmap to such surfaces?

4

Y’all are probably out of luck doing that procedurally. Even if you got the mesh subdivided, it would still look weird with displacement since the topology/triangles are very uneven. For displacement to work well, you usually need a pretty even grid of triangles. You might be able to do something with a second overlaid grid mesh, somehow clipped/masked to the original surface, and do the displacement on that. Tricky problem to solve though.