HTerrain: Generating a seamless random heightmap

MirceaKitsune

This is a question for the heightmap terrain plugin for Godot 3.2. I don't know if its author @Zylann is around to help with this one, but if anyone has an answer I'd be very grateful.

I'm using the HTerrain node to create a procedurally generated terrain. It's working well with the terrain and splatmap both being generated accordingly! I'm trying to do something a little unusual however: I want the heightmap to be seamless and possible to loop horizontally. The plan is to use renderer portals (will open a thread about those later) in order to make it feel like a tiny planet, where once you reach an edge you come out the other end without noticing the border. For this I need each side and corner of the terrain to connect with the opposite side and corner.

I'm not sure what adjustments I'd need to make to the heightmap generation function to make it seamless, in a form that accounts for the terrain size and resolution. I'm starting from the noise function suggested in the Github docs:

for z in heightmap.get_height():
	for x in heightmap.get_width():
		# Generate height
		var h = noise_multiplier * noise.get_noise_2d(x, z)

		# Getting normal by generating extra heights directly from noise,
		# so map borders won't have seams in case you stitch them
		var h_right = noise_multiplier * noise.get_noise_2d(x + 0.1, z)
		var h_forward = noise_multiplier * noise.get_noise_2d(x, z + 0.1)
		var normal = Vector3(h - h_right, 0.1, h_forward - h).normalized()

		# Generate texture amounts
		# Note: the red channel is 1 by default
		var splat = splatmap.get_pixel(x, z)
		var slope = 4.0 * normal.dot(Vector3.UP) - 2.0
		# Sand on the slopes
		var sand_amount = clamp(1.0 - slope, 0.0, 1.0)
		# Leaves below sea level
		var leaves_amount = clamp(0.0 - h, 0.0, 1.0)
		splat = splat.linear_interpolate(Color(0,1,0,0), sand_amount)
		splat = splat.linear_interpolate(Color(0,0,1,0), leaves_amount)

		heightmap.set_pixel(x, z, Color(h, 0, 0))
		normalmap.set_pixel(x, z, HTerrainData.encode_normal(normal))
		splatmap.set_pixel(x, z, splat)

I could also use help with introducing a seed to represent each random result. As well as better quality looking terrain with proper mountains, currently this only achieves simple random bumps.

Zylann

If you want it to loop, then you have to find a noise formula that can loop in the same way. This is down to texture generation, and is not something the plugin will help you with.

Godot can generate NoiseTextures that can loop using the seamless property. Sadly, you cannot use this for a heightmap (unless it has format RH). You kind of can grab the data from the graphics card, convert it to 16-bit and paste it on the heightmap, but the result will be blocky and inefficient.

You have to somehow cross-fade the noise on borders so that it loops back properly. Tinmanjuggernaut experimented this in a PR: https://github.com/godotengine/godot/pull/35144#issuecomment-593099623. You will have to understand how that works and code it, because right now there is no solution out of the box.

MirceaKitsune

@Zylann Thank you for your answer. That sounds a bit complicated indeed; If I can't manage it or find another solution, I might opt for flattening the border, although this will create a visible seam where the terrain is flat.

Zylann

Yeah, probably we'd need a make_seamless function in Image so such work would be taken care of.

MirceaKitsune

@Zylann said: Yeah, probably we'd need a make_seamless function in Image so such work would be taken care of.

I was thinking of an alternative that would be less optimal but work still: The last pixels on an edge can progressively copy the height of the first pixels on that edge. For instance, if smoothing out over 4 vertices on the X axis for a 256 scale terrain, the height logic would look something like this:

pos 256 copies pos 0 by 100% pos 255 copies pos 1 by 75% pos 254 copies pos 2 by 50% pos 253 copies pos 3 by 25%

I was wondering what interpolation function I could use. What would be the simplest code to mirror a number of pixels on one side of heightmap image to those on another side with gradual interpolation? Note that I run the plugin from Git, so if you're thinking of implementing such a feature in the plugin itself I can test it.

Zylann

I was thinking of an alternative that would be less optimal but work still: The last pixels on an edge can progressively copy the height of the first pixels on that edge

That is basically what such function would do, and what I meant by "cross fade". Once you have a heightmap image you can run that logic in a second pass, more or less far away depending on your requirements.

MirceaKitsune

@Zylann said: That is basically what such function would do, and what I meant by "cross fade". Once you have a heightmap image you can run that logic in a second pass, more or less far away depending on your requirements.

Sounds ideal for my use case. What functions would you recommend for such interpolation in that formula? Might look into this later today and maybe find something that works.

Zylann

Just interpolation math? Something like lerp?

MirceaKitsune

@Zylann said: Just interpolation math? Something like lerp?

I managed to get it working with that. Calling my function separately on images now, after the noise loop:

func make_seamless(image, pixels, x_scale, z_scale):
    for x in x_scale:
        for z in z_scale:
            if x < x_scale - pixels and z < z_scale - pixels:
                continue

            var h = image.get_pixel(x, z)

            # X
            var x_blend = max(0, x - (x_scale - pixels)) / float(pixels - 1)
            if x_blend > 0:
                var h_x = image.get_pixel((x_scale - 1) - x, z)
                h = lerp(h, h_x, x_blend)

            # Z
            var z_blend = max(0, z - (z_scale - pixels)) / float(pixels - 1)
            if z_blend > 0:
                var h_z = image.get_pixel(x, (z_scale - 1) - z)
                h = lerp(h, h_z, z_blend)

            image.set_pixel(x, z, h)
    return image

That function is ran on every terrain texture, which it modifies with acceptable performance loss overall! This step takes place right before unlocking the maps and committing the modifications;

heightmap = make_seamless(heightmap, 16, x_scale, z_scale)
normalmap = make_seamless(normalmap, 16, x_scale, z_scale)
splatmap = make_seamless(splatmap, 16, x_scale, z_scale)
colormap = make_seamless(colormap, 16, x_scale, z_scale)

Mainly one issue left: My method doesn't seem to be very accurate and causes a tiny gap around the seams. Perhaps lerp() isn't the best choice for editing colors? Suggestions appreciated if anyone knows.

Zylann

Interpolation is a good way to go, it just seems like you had an off-by-one here. Put it simply, when you process a pixel on an edge, you must ensure it's got exactly the same value the other end has. This might be unintuitive but that's a thing that also happens inside the plugin (for other reasons), to stitch its LOD chunks together. They are 16x16 quads, which means they have 17x17 vertices, and so 17x17 pixels with the end ones being shared with neighbors. If you want to stitch a 512x512 heightmap to itself (which in fact is 513x513), it means borders will share their vertices. So the 513th pixel must be the same as the 0th.

Also I don't know how you are doing the stitching, but keep in mind the plugin does LOD. If you stand near an edge, polycount will be higher there than the other side of the terrain. If you want to use "portals" somehow to render that other side and show it where you stand, there is no way you can make it have as many polygons, they won't match.

MirceaKitsune

Think it took almost 3 days to figure out this little function but it should be the final version at last. Finally managed to get rid of all seams and structure everything in an optimized way. A 4096px terrain will take about 100 seconds to load overall, 1024 and lower have acceptable generation times.

func make_seamless(image, pixels, x_scale, z_scale):
	# To avoid gaps, the last two pixels on each edge must be set to the first
	if pixels == 0:
		return image
	var x_pixels = floor(x_scale * pixels)
	var z_pixels = floor(z_scale * pixels)

	# X
	for x in x_pixels:
		for z in z_scale:
			var p = image.get_pixel(x, z)
			var p_m = image.get_pixel(x_scale - x - 1, z)
			var p_m_b = 1 - x / x_pixels

			if p_m_b == 1:
				image.set_pixel(x, z, p_m)
				image.set_pixel(x_scale - 1, z, p_m)
				image.set_pixel(x_scale - 2, z, p_m)
			else:
				image.set_pixel(x, z, lerp(p, p_m, p_m_b))

	# Z
	for z in z_pixels:
		for x in x_scale:
			var p = image.get_pixel(x, z)
			var p_m = image.get_pixel(x, z_scale - (z + 0.5))
			var p_m_b = 1 - z / z_pixels

			if p_m_b == 1:
				image.set_pixel(x, z, p_m)
				image.set_pixel(x, z_scale - 1, p_m)
				image.set_pixel(x, z_scale - 2, p_m)
			else:
				image.set_pixel(x, z, lerp(p, p_m, p_m_b))

	return image