Interpolation - How to map to a small heightmap?


I have a sphere approximated from an octahedron. To map a heightmap on to the surface I go through the unordered list (vertexbuffer) of positions, calculate the spherical coordinates of it, convert the spherical coordinates to 2D cartesian coordinates and map them to a small heightmap. Thus I get a very edgy sphere, although I want a smooth terrain. I want to interpolate the height values. But how do you do that mathematically? Do I have to look how near I’m to the next pixel in the heightmap and merge the values somehow?
(When I get home I’ll post a pic)


Can’t you use something like blender to generate it for you ? Or is it created in code so you have to generate it dynamicaly ?

This might help you:
Perlin Noise generation

Look at the erode and smoothen methods, this might actualy be just what you need.

Standard linear interpolation is easy:

function lin_interpolate(float start, float end, float alpha){
   return start * alpha + (1 - alpha) * end;

The alpha value should be between 0 and 1 and it describes how far between two samples you are.

I do interpolation on my heightmap generation ( in my case TerrainQuads )
quite often I was scaling up an image 4x or 8x and wanted a smoother terrain so after many googles and trial’n’error I came up with this:

// grab each tile chunk and put it into its own heightmap array
float hMap[] = new float[(qSize + 1) * (qSize + 1)];
float mH = 0;
for (int z = 0; z < qSize + qPz; z++) {
for (int x = 0; x < qSize + qPx; x++) {
int ix = (x + tx * qSize) / mapScale; // image x
int iy = (z + tz * qSize) / mapScale; // image y
float imgV, imgVx, imgVy, imgVz;
imgV = mapArray.get(ix + imgH * (imgH - iy - 1));
imgVx = imgVy = imgVz = imgV;
if (ix < imgW - 1) {
imgVx = mapArray.get(ix + 1 + imgH * (imgH - iy - 1));
if (iy < imgH - 1) {
imgVy = mapArray.get(ix + imgH * (imgH - iy - 2));
if (ix < imgW - 1 & iy mH) {
mH = imgV;

Where you see mapArray.get() I originally had imgRaster.getPixel(x,z).r but since I’m dealing with 16-bit gray maps I instead converted the image to a float array and read from that instead…

It works for me quite well, tho the math is all fuzzy in my head now :wink:

If you need to see the full context see here:

Not sure it will work in your case but there it is anyways.

1 Like

Bilinear Interpolation is what I was looking for.
Thank you very much for your hints!

If Bilinear interpolation is not smooth enough, you can try S-Curves interpolation, that’s what is used in Perlin Noise algorithm.