Using a mask to create custom hexagon terrain tiles

I can rotate the UV array 60, 120, 180, 240 and 300 degrees, so that is not a problem

Yes, when I perform a rotateZ, the textures rotate along with the geometry.
I assume the problem has to do with using a cylinder to create a hex shape.
I have tried changing the theta values, but that does not help.

It looks like I need to create a custom hexagon object.

As for canvases, apparently only 15 would be required to hold all the data for each different type of terrain. I assume that materials for all the hexagons could be created by referencing the specified canvas.

Does that make sense?

Not exactly, in rotating the geometry you’re also rotating the uvs of the geometry, you can either rotate the uvs back by the same amount, or, simply rotate the containing mesh (which may not be applicable to the overall scope in question)

You would still have to generate the uvs for this custom geometry…

You may be best off looking into texture atlases and using uv offsets (texture repeat and texture offset for each hexagon) eg if the overall texture is 10 hexagons wide you’d use texture.repeat.x = 0.1 and texture.offset.x each by the same factor… this gets a little mathematical after the first row of hexagonal cells as the next rows down are offset on y by an equation of r / 2 and even (not odd) rows on x by another equation

Here is a really good resource on hexmaps:

Some hex planets…

I solved the hex geometry problem by switching to a different geometry:
let hexGeo = new THREE.CircleGeometry(10,6,Math.PI/2,Math.PI*2);

What I will do now is create a texture with multiple maps (color, roughness, bump), load the the texture and then read and save the individual maps (or addresses to the maps). There should be no problem with over-writing. The only thing (I think) I need to confirm is that the maps can be used by multiple hexes.

UPDATE

I found a subroutine that is used to extract textures from a sprite sheet. This does not use a canvas. It seems to work well. I am hoping that it is not too slow or does not create a lot of textures in memory.

For now, I am using a single row with 4 different colored textures to be applied to 4 different hexes. However, I think it could be used where we have each of the 15 different texture types in a separate row. If each texture types has 4 maps each, that would be 15 rows x 4 columns. If the textures are 60 wide x 66 tall, they would fit on a single texture of 256 wide x 1024 tall.

Molleby, do you have some texture sets we could try? Maybe 2 or 3 rows? Are you using WebGPU NodeMatierals or just regular Materials?

This is great, simple and informative information!

Right now I only have forest and ocean, but I am working on adding more biomes. Will upload as soon as I have something

Another option instead of cloning the texture for each hex would be to manipulate the uvs themselves for each geometry…

Although this would mean building a management system in order to manipulate uvs per geometry instance of the entire merged hexasphere which may be complex…

That is what I am doing now. I have a general UV-map for a hexagon. I then shrink it down according to the overall texture atlas size, taking into account the width and height of the hexagon. Then I move it around on the texture atlas. I also give it a random rotation between 0 and 300 degrees to get some variation.

Just regular materials.

This is the texture atlas so far:

That’s true and it sounds like a much more efficient option since it does not involve cloning or copying textures. It’s just not something I have ever done. So I am glad that Molleby is working on that. I would be very interested in seeing the results.

It sounds like all he would have to do is create a set of rules for each of the 20 or so texture types. He would then go through all of the 50k hexagons and, depending on the texture type selected for that hexagon, adjust the UV settings to one of the 20 options.

In addition to the colors, I was hoping to see the other maps, like the bump and roughness maps. Then I could create a partial example of a big texture map.

FYI - If you eventually want to create some more realistic-looking textures, a great (and often overlooked) source would be one of the older MS flight simulations, like FSX. They literally have thousands of seamless texture types, including different types of variations for oceans and land. This includes seasonal variations and (I believe) examples of beaches. Since they are squares you would have to modify them to work with hexagons.

The roughness map right now only has the ocean as smooth, so not much to see there.

The textures you mention sound very interesting. Are they free to use?

My plan to get more varied terrain is simply to make about 5-10 different version of each biome. There is plenty of room on the texture atlas

Roughness map:

I doubt MS would care if you use a handful of their textures. Since you would be making modifications to make them work with hexagons, you could say that you are merely using them as references.

Alternatively, you could probably find textures on a site like SimAviation. Anything on there is basically free to use (I contributed a few ship models to their library many years ago). Some people have created “better” textures which should be free to use.

How big are your planets supposed to be? If they are as big as earth, those textures might represent too small an area to yield much detail. But I suspect you are going for something much smaller.

This is the size I’m currently working with, but the hexasphere library can take any input as size:

Cool! At that scale, no need for detailed textures. And you might want to use normal maps instead of bump maps. I can see how you would want different roughness maps for the land and the oceans since the oceans are smoother and more reflective.

What is the purpose of the black and white masks?

To make more interesting and varied coastal zones so everything seems a little more “organic”

Small update: managed to move my current map rendering from standard material and into a shader. Works great. Next step is the masking part. Will hopefully have an update soon.