0

three.js の球体に適切にマッピングされるシンプレックス ベースの画像を動的に生成したいと考えていますが、極での歪みに問題があります。最初のマップ コードは次のとおりです。

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

これにより、横向きにタイル化されたマップを作成するデータが生成されますが、上下ではありません (理想的です)。

世界地図

これが three.js の球体にマッピングされると、問題が発生します。

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

UVMapping が行われるため、極の近くでピンチが発生します。

球にマッピング.

ピンチの問題を解決する最も簡単な方法は、ソース画像でメルカトル変換を使用することだと思いますが、私の人生では、それを実装する方法がわかりません.

誰か提案はありますか？試してみたい場合は、プロジェクトの完全なソースをここで見つけることができます。

更新: ウィキペディアの便利なUV マッピンググラフをThree.JS 球体マッピングの例と組み合わせて見ると、これらは開始するのに適した場所だと思います...

4

0 に答える 0