morgajel
morgajel

Reputation: 121

Transforming Simplex Map for UV mapping on a sphere

I would like to dynamically generate a simplex-based image that will map nicely on a sphere in three.js, however I'm having problems with distortion at the poles. Here is the initial map code:

def generate_map(seed,width=WIDTH,height=HEIGHT,xoffset=0.0,yoffset=0.0,zoom=1.0):
    """ Return a simple matrix of simplex noise from 0-255."""
    mapdata = []
    random.seed(seed)
    zoom=zoom * 100.0
    for x in xrange(height):
        row=[]
        for y in xrange (width):
            xparam=merc_x(float((x+xoffset)/zoom))
            yparam=merc_y(float((y+yoffset)/zoom))
            noisevalue=snoise2(xparam, yparam,  NOISEOCTAVES, 0.52,2.0, height/zoom*2, width/zoom, float(seed) )
            #convert 1.0...-1.0 to 255...0
            pixel=int((noisevalue+1)/2*PIXEL_DEPTH-1)
            cell={'height': pixel, 'x':x, 'y':y }

            row.append( cell )
        mapdata.append(row)

    return mapdata

This generates data which creates a map that tiles sideways, but not at the top and bottom (which is ideal).

world map

The problem arises when this is mapped on a sphere in three.js:

return new THREE.Mesh(
    new THREE.SphereGeometry(radius, segments, segments),
    new THREE.MeshPhongMaterial({
        map:         THREE.ImageUtils.loadTexture('/worldmap.png?seed='+seed),
    })
);

You end up with pinching near the poles due to UVMapping that takes place:

mapped on sphere.

I suspect the simplest way to solve the pinching issues is to use a mercator transformation on the source image, but for the life of me, I can't figure out how to implement it.

Does anyone have any suggestions? The full source of the project can be found here if you want to give it a try.

Update: Looking at the handy UV Mapping graph on wikipedia in combination with the Three.JS sphere mapping example, I think these are a good place to start...

Upvotes: 0

Views: 697

Answers (0)

Related Questions