Square Seamless Texturing to Hexagon Tiles. How?

Troubleshooting
1

Hi I am trying to make Hexagon terrain system. As far now I can create hexagon tiles , subdivide it and apply textures to it.
The problem I am facing is how to align texture coordinates to any seamless textures.

So how to apply square seamless texture to hexagon so that it looks like seamless?

See the video https://youtu.be/hXHy_msolPQ

and here is texture I am using.

Check.png700×700 522 Bytes

java code for setting texture coordinates to hex.

   Vector2f texCenter = new Vector2f(0.5f, 0.5f);
    Vector2f[] texVertices = new Vector2f[7];
    texVertices[0] = texCenter;
    float texRadius = 1.0f;
    for (float i = 0; i < 6; i++) {
        float angle = 2.0f * (FastMath.PI / 6.0f) * (i + 0.5f);
        float vertex_x = texCenter.x + texRadius * FastMath.cos(angle);
        float vertex_y = texCenter.y + FastMath.sin(angle);
        texVertices[((int) i + 1)] = new Vector2f(vertex_x, vertex_y);
        System.out.println(vertex_x + " : " + vertex_y);
    }

    mesh.setBuffer(VertexBuffer.Type.Position, 3, BufferUtils.createFloatBuffer(vertices));
    mesh.setBuffer(VertexBuffer.Type.Normal, 3, BufferUtils.createFloatBuffer(normals));
    mesh.setBuffer(VertexBuffer.Type.TexCoord, 2, BufferUtils.createFloatBuffer(texVertices));
    mesh.setBuffer(VertexBuffer.Type.Index, 3, BufferUtils.createIntBuffer(indexes));
    mesh.updateBound();
2

You want to use a seamless rectangle texture for a hexagon grid?

If the texture is way bigger than the hexagon you could subdivide the rectangle, but normally you want to have every field have the same texture, but this would be impossible

3

Maybe try to make a seamless hexagon texture instead of trying to project the square one?

4

I used a hexagonal tiling grass texture and tiling ground texture for the sides of my hexagon tiles

uv unwraps like this :

each brown rectangle is a side (supposed to be same size), top and bottom tiled with the same grass texture.

tip: I found hand coding the uv’s simple if you look at the image with an 8x8 grid overlayed, each cell is 0.125 squre uv units :

2 Likes
5

If all the hexagons are aligned to each other (flat without any “steps”) and have the same seemless texture, why have multiple hexagon meshes in the first place?
You would save a lot of vertices and solve the texture problem, if you combine all affected hexagons into one single mesh.

6

As i mentioned earlier I am making Hexagon based terrain system. I have different idea for adding number of hexagon. here is related discussion… How to calculate IntBuffer? - #15 by MegaWolf

7

Should not be a big problem - just use a factor for the translation between x and y. (or x and z - usually it’s x and z). The rest will be done by the ‘wrapping’ of the texture which will be computed on the graphics card for you. Here is a sketch I made in a couple of seconds:

Hexfield_Texture_Mapping.png1221×1017 156 KB

8

Do you mean x = (2.0f / 3.0f) * x; y = (2.0f / 3.0f) * y; in my code?

9

Tried little similar approach. I changed the texture like this.

But in result its showing rectangular pattern instead of square.
here is output. How to make it square?

Untitled14.png1281×1045 119 KB

10

?

11

Nop… This doesn’t work.

Untitled15.png1285×879 130 KB

12

the uv mapping looks wrong, from that image the texture is not being 100% displayed horizontally. Make sure your uv’s extend all the way to the limits.

13

No. I mean u = (some factor) * x and v = (some factor) * y just as the sketch shows you.
Note that y is typically z in most 3D worlds (jME has default x,z-plane too).

It assumes that you have a different mesh for each hex field or use some very simple shader.
I think it’s called “planar projection of texture coordinates” or something like that.
Very simple thing - might be one of the simplest things in 3D mesh/shader writing.

14

Yes, each hex is separate tile. At this point I am not using shader right now. Can you guide me how to setup UV mapping by code? is it different than setting TexCoord as I shown in first post?
Sorry I am not good on this concept.

15

TexCoord is uv-mapping.
x-component of texture coordinate is called “u” instead of x
y-component of texture coordinate is called “v” instead of y
That’s it.
You simply set texture wrapping mode to repeat and assign some numbers to the u and v component of the tex coordinates.
Only problem: It will not wrap at the upper and lower border and left side and right side of the hex tile. It will wrap wherever the u coordinate increases by 1.0 and where the v coordinate increases by 1.0 (so it’s “modulo 1” if you know what modulo means).

16 
    float texRadius = 1.0f;
    Vector2f texCenter = new Vector2f(0.5f*texRadius, 0.5f*texRadius);
    Vector2f[] texVertices = new Vector2f[7];
    texVertices[0] = texCenter;
    /*for (float i = 0; i &lt; 6; i++) {
        float angle = 2.0f * (FastMath.PI / 6.0f) * (i + 0.5f);
        float vertex_x = texCenter.x + texRadius * FastMath.cos(angle);
        float vertex_y = texCenter.y + FastMath.sin(angle);
        texVertices[((int) i + 1)] = new Vector2f(vertex_x, vertex_y);
        System.out.println(vertex_x + " : " + vertex_y);
    } */
 texVertices[1] = new Vector2f(0.5f*texRadius, 0f);
 texVertices[2] = new Vector2f(1.0f*texRadius, 0.25f*texRadius);
 texVertices[3] = new Vector2f(1.0f*texRadius, 0.75f*texRadius);
 texVertices[4] = new Vector2f(0.5f*texRadius, 1.0f*texRadius);
 texVertices[5] = new Vector2f(0f, 0.75f*texRadius);
 texVertices[6] = new Vector2f(0f, 0.25f*texRadius);

something like that perhaps ?

17

Sorry for replying late… and thanks all of you… I am now able to get seamless texture.:slight_smile: