开发者

Mapping a texture on a hexagon

I'm trying to map a texture onto a hexagon, but I can't figure out the texture coordinates.

These are my vertices:
private float vertices[] = {     0.0f,   0.0f, 0.0f,    //center
      开发者_JS百科                           0.0f,   1.0f, 0.0f,    // top
                                -1.0f,   0.5f, 0.0f,    // left top
                                -1.0f,  -0.5f, 0.0f,    // left bottom
                                 0.0f,  -1.0f, 0.0f,    // bottom
                                 1.0f,  -0.5f, 0.0f,    // right bottom
                                 1.0f,  0.5f,  0.0f};   // right top

The hexagon's "base" is vertical. (Mainly because I couldn't be bothered to figure out how to rotate the damn thing XD) Now the thing is, I have no idea how to figure out the texture coordinates. I've looked all over the web, but still wasn't succesful.

I'd really appreciate if someone could explain to me how to figure out texture coordinates, because apart from texturing a simple square I just cannot figure it out I'm afraid.

Note: It's a "square" hexagon, so not based on a circle. EDIT: The hexagon is drawn using LG_TRIANGLE_STRIP.

PROBLEM SOLVED. I now understand how to figure out these coordinates. Here are the ones that worked for me:

private float texture[] = {     0.5f, 0.5f,
                                0.5f, 0.0f,
                                0.0f, 0.25f,
                                0.0f, 0.75f,
                                0.5f, 1.0f,
                                1.0f, 0.75f,
                                1.0f, 0.25f };


Texture coordinates work almost like percentages from 0.0 to 1.0 where (0.0, 0.0) is in the lower left. If your texture image is 128 x 128 pixels, then the point (0.25, 0.25) would be 32 pixels in from the left and bottom. Working with what you had there, if you were trying to have the hexagon inscribed exactly inside a square texture graphic, your coordinates should look something like this:

private float textureCoords = { 0.5f, 0.5f,
                                0.5f, 0.0f,
                                0.0f, 0.25f,
                                0.0f, 0.75f,
                                0.5f, 0.0f,
                                1.0f, 0.75f,
                                1.0f, 0.25f };

If I recall correctly, you also want the image flipped vertically.


I've been struggling with this same problem for a few days now and I think I've just about got my head around it. If you imagine the points on your hexagon as A(and DGJ) in the centre, B at 12 o'clock and CEFHIK the other points rotating anti-clockwise around the centre.

Your vertices need to be listed in the order - ABC DEF GHI J

A, D, G and J are all the same coordinates (your center point)

Your texture needs to be stitched in this order - AEF DCB GIH JK

A, D, G and J are again your centre point. K should be the same as E so the texture lines up with itself correctly.

edit: Looking at this back, I think it may make more sense to only swap each second and third coordinate and subtract each y coord from 1.0f.

edit 2: Yeah I've had time to check now. Simply setting each texture y coordinate to be "-(vertices/polygon height)" seems to work. You don't have to even swap each second and third point. You still need to add the extra point on the end of the texture coords array; set to the same as the second point.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜