2D to 3D perlin noise, I'm not sure I get it

Question

I've been using 2d perlin noise to generate height maps for a little isometric terrain experiment. The noise value is directly related to the z-layer a tile will appear in: Math.floor(noise * 10). Perlin is great but height is now always linear and I'm not sure how to change this.

One thing I tried was making the height value go up exponentially, producing a map akin to the image attached. Now my maintains are larger and more interesting looking, but this obviously produces gaps. I'm not sure how to "pad" or 3D-ify those layers. Any pointers?

    var diff = .04;
    var zz = Math.random() * 100;
    var x, y, xx, yy;

    for (var y = 0; y < maxY; y++) {
        this.grid[y] = new Array(maxX);
        for (var x = 0; x < maxX; x++) {
            xx = 0 + x * diff;
            yy = 0 + y * diff;

            this.grid[y][x] = Math.floor(Math.pow(simplex.noise(xx, yy, zz) * 4), 2.3));
        }
    }
    return this.grid;

edit: i'm sorry i'm not more clear. i'm not entirely sure what i'm asking because i'm not entirely understanding the maths. the terrain i've been trying to make starts at the base level with water. then some layers of grassy types, going into mountains. i'm not building minecraft here, i don't intend to dig around in it, but i would like to be able to rotate it sometime (replacing the tiles with cubes). right now, simplified, i'm expressing x and y as a 2d grid, with the value representing z, like so. z is really just my tile height.

var grid = [
    [1,1,1],
    [1,3,1],
    [1,1,1]
]

in this example i will draw 9 tiles, with the middle one at a height of 3 creating the gaps you see in the image. i was thinking the image would be more complete if this was a 3d grid.

var grid = [
    [
        [1,1,1],
        [1,1,1],
        [1,1,1],
    ],
    [
        [ , , ],
        [ ,2, ],
        [ , , ],
    ],
    [
        [ , , ],
        [ ,3, ],
        [ , , ],
    ]
]

blanks in this case will not be drawn. the values in the array could represent the type of tile for instance. i tried this with 3D noise but i'm very unsure how to interpret the density values (from -1 to 1). Drawing all density values under 0 (as the same tile) got me the image below which is cool, but not what i was hoping for. So far everything i've read about this does not explain what the values actually mean. translating the density values into into 'types' of terrain generates mostly nonsense, with random bits of water all over the place. the whole thing just looks like a giant cube with holes in it.

maybe i'm not making sense because what i want does not make sense, this is entirely possible. the internets is letting me down and i'm hoping some smart people can point me in the right direction.

Answer 1

Your tile positions are calculated according to your isometric transformation function.

If you want to "3d-ify" this, you will need to do the following:

Determine the screen positions of the four corner points of each tile. Since every corner point is bounded by four tiles, you need to take the heights of those four tiles, and average them to get the height / screen position of the corner point that they share. You can do this either before or after your isometric transformation; it makes little difference.

Now, per tile, get these four newly calculated corner points, and perform a fill between them (polygonal fill, most easily achieved as a scanline fill). You may get pixel gaps here and there. To avoid these use point-on-side-of-line detection while scanline-filling across the entire viewport. This way you will never miss a pixel.

Now all you need to do is make sure that you do this from back to front (painter's algorithm) and you should get what you want. This will, by the way, draw backfaces. Since your display is only 2D anyway, I wouldn't worry about that bit of overdraw. It likely won't be a showstopper.

P.S. In order for characters to move smoothly between tile centres, you would linearly interpolate (lerp) them from one tile-centre height to another.