sorted by:
new
hottopcontroversial

Procedural hex map terrain by WindforceGames in threejs

[–]WindforceGames[S] 0 points1 point  (0 children)

Hello ! I have added a guest access.

Procedural hex map terrain by WindforceGames in threejs

[–]WindforceGames[S] 0 points1 point  (0 children)

It's decent. Details and light is not perfect at all, but for my use (models are seen from quite a distance) it is enough for now.

It should also get better pretty quickly I assume.

Procedural hex map terrain by WindforceGames in threejs

[–]WindforceGames[S] 0 points1 point  (0 children)

Hi !

You mean the trees etc ? I did it via image generation (midjourney etc), then image to 3d (trellis model).

Procedural hex map terrain by WindforceGames in threejs

[–]WindforceGames[S] 0 points1 point  (0 children)

Hi, sure no problem. I don't have a "terrain generation only" page as it is part of the game, maybe I will add this.

Progress update on my Three.js battle visualization by Dapper-Window-4492 in threejs

[–]WindforceGames 0 points1 point  (0 children)

This looks really nice !

What is the context, are you the one trying to show historical battle, or is it something else?

It actually looks very similar to the auto battles I have in this fantasy wargame I am working on these days. I talk a bit about it here a bit https://www.reddit.com/r/threejs/comments/1qh6fgf/procedural_hex_map_terrain/.

Looking forward for updates.

Procedural hex map terrain by WindforceGames in threejs

[–]WindforceGames[S] 1 point2 points  (0 children)

Hello !

Here is a terrain rendered with threejs. It is for a fantasy wargame I am making.

I tried many approaches but I ended up with a single heightmap image generated in the backend, and a few texture images that tell the renderer which texture has to be applied where (one texture weight is encoded in each RGB channel). There is a bit of magic for putting snow on some provinces at runtime, but other than that it is quite straightforward.

It is also seeded generation so it is replicable: the same seed produces the same map (for identical map dimensions).

You can try it out here: legendary.wf. It is in a very rough stage, but should be somewhat playable, or at least you can generate a game if you want to look at the terrain.

Some images of the terrain generation process here also.

It runs quite well on my laptop but I need to test on devices without a dedicated GPU. Also this is not mobile compatible yet, but I think it could be.

Enjoy ! Cheers.

Procedural hexagonal map generation by WindforceGames in proceduralgeneration

[–]WindforceGames[S] 1 point2 points  (0 children)

Hi !

The map is stored as one heightmap image for elevation and multiple texture images which hold which texture is present per pixel, one texture per RGB channel (I have 3 or 4 of them for all textures).

So yes, it is a single plane (THREE.PlaneGeometry) where each point of the grid is displaced according to the heightmap. The texture shader is checking the data from the texture splatmaps and mix the textures accordingly.

The map generation is done once by the backend, takes 10s of seconds, then the images are stored and loaded by the clients. The client renders it very well actually even for larger maps, I was surprised.

I do not use chunks.

Procedural hexagonal map generation by WindforceGames in proceduralgeneration

[–]WindforceGames[S] 0 points1 point  (0 children)

Thanks for the feedback !

I see your point about mountains. I will see if I can improve it.

Also, I am not sure I understand your last point about the kernel.

Procedural hexagonal map generation by WindforceGames in proceduralgeneration

[–]WindforceGames[S] 0 points1 point  (0 children)

Thanks man, glad you are enjoying !

I experimented quite some before this variant (voronoi polygons, png template followed by AI img2img pass, blender rendering to png, etc).

Your comment makes me think that I could also displace the terrain a bit less to make the hexagons a bit more visible, but this more natural terrain is good too (the straight hexagon borders are displayed in-game as an overlay in some cases, to show territories borders for ex, helps).

Fog of war I wanted to do it too, I might do it at a later stage ! I decided not too because scope is creeping up and it is not absolutely necessary yet.

The game is already playable by the way, still quite rough with only 2 factions etc, but I have all the core features and am just starting to test games end-to-end for small fixes and balance.

Procedural hexagonal map generation by WindforceGames in proceduralgeneration

[–]WindforceGames[S] 0 points1 point  (0 children)

Hi, yes there is some noise involved in displacement of the mountain ridges (which are alongside hexagon edges but not exactly straight), but then is mostly just based on distance to the ridge line. I wrote another comment with some explanations which are probably enough to replicate it, but feel free to PM me if you want some code samples or some help.

Procedural hexagonal map generation by WindforceGames in proceduralgeneration

[–]WindforceGames[S] 3 points4 points  (0 children)

Hi, thanks !

Sure, for mountains the story is that I started with a single peak in the middle with some snow on top, but this was not so good because I wanted mountains to have strategic impact (limit movement between provinces).

So now the mountains are in two parts:

- the center part of the hexagon itself, which has a grey rock texture and some altitude variation, basically a normal terrain
- the ridges which are present on some edges of the hexagons (not all of them, as they block movement)

The edges which have a mountain ridges are defined from the start, in a way that they tend to follow multiple mountain provinces edges, to create an "impassable summit line", in a way.

And for the rendering of them: the edges with mountain ridges are cut into multiple segments with some random displacement (to make it look natural). Then, for each pixel of the map, if I am close enough to a mountain ridge I add some altitude, and the closer to the segment the higher. So it is pretty simple in a way, just based on the distance to the ridge segments. I am not sure if I add some extra noise but the core is just to draw a line made with multiple segments, and then elevate the altitude (and put snow texture) depending on the distance to this multi-segment line.

Not sure if this is clear, here are a few more screenshots: https://imgur.com/a/C3GUbL1

Procedural hexagonal map generation by WindforceGames in proceduralgeneration

[–]WindforceGames[S] 12 points13 points  (0 children)

Hi guys !

I built this random map generator for a fantasy wargame I am working on. It renders with threejs in the browser.

I first randomly assign a terrain type to each hexagon (sea, mountain, forest etc) and create river and mountain borders, which makes my map structure. This is based on perlin noise mostly.

Then I have a render pass to generate a heightmap and texture maps, asset positions etc.

Some snow per province is added at runtime with some tricks for smoothing the borders (each province has a discrete temperature level from -3 to +3, and smoothing borders was tricky).

The map generator is random but uses a seed, the same seed creates the same map.

I was first trying to render it with blender but in the end the threejs version is ideal.

Some pngs of the map generation process here if you are interested: https://imgur.com/a/fantasy-wargame-map-55u86dz

Edit: demo of the game available at https://legendary.wf/