Game worlds creation questions

Hi all.
I’m new to browser game development.
In last days i remained stuck on a question for which i can’t find the answer. I would like to create a huge world for a strategy game. Where do i start ?
I read about the heightmaps but how can i generate them ?
How can i apply all the textures like terrain, mountains, rivers ecc. ?
How are the performances ? Is babylonjs able to handle such things ? I see many browser strategy games have a 2d world. Is 2d better for these kind of games ?

1 Like

Hey and welcome!

I would recommend checking this work by @jerome which could be a good starter:

2D or 3D are more about you. What do you want to do. Both can work.

And get prepare for a long journey: what you want to achieve will be cool but maybe complex sometimes


Hi and thanks for the link.
How are these detailed worlds i see in games are made ? Do they create the heightmap first and then cover it with a texture ?
What tools do you ususally use ?
Strange thing is i don’t see many information around for this. Maybe i should look at games made for pc first with unity or unreal ?

I would recommend that you read this: The World of Warcraft Diary by John Staats — Kickstarter

It is an insanely cool book about how they built WoW. You gonna learn about the ton of tricks thy used :slight_smile:


How can i choose the best combination of ground width, height and subdivisions ?
More subdivisions means i can make a more detailed terrain, right ?
What is the impact on performances ?

there is no good answer unfortunately. you will have to test and see how it goes.
also it may change on a per device basis.ore detailed here and less detailed there based on frame per second for instance

1 Like

We need more info. :grin:.

It depends on what type of world you imagine.

For example, do you want infinite map or 3D world?

Jerome made a great infinite map - and there are others like @nasimiasl with his Geometry Builder.

FIRST search the playgrounds for examples:

Also look for “terrain” … planet?

Also - search for great docs on terrain.

There are many options.

My world is a truncated cube:

We flip it between levels. Or raycast a rotation.

I’ll send PG links as I run across them randomly…


1 Like

What i would like to achive is something like this:

I’m sorry for these noob questions but i can’t find clear answers to my questions. I searched the documentation and here but there isn’t much.
Thank you for your support.

1 Like

the first to notice is that your example is not in perspective mode but in isometric mode, so it uses an orthographic camera : objects in the distance have the same size than objects in the foreground.

1 Like

Yes, noticed.
I would like to use the same camera and limit the zoom.
Do you think the mix material is best way to paint the terrain ?

1 Like

@manrix: I’m not sure if this answers your questions, but here is something I created a couple of years ago. It was built with Blender. The terrain came from survey data and is 64Kb - does not need to be that big - could be as low as 4Kb.The terrain texture was painted in Blender - not difficult for this particular terrain.

Queenston Battle Scene 1812

The trees, guns, soldiers and arrows are geometry instances. I never finished it but you can click the time-clock buttons to go through the story - but don’t scroll the camera into far as the buttons stop functioning (if they do scroll out again and try again). Ohh and the only active buttons are the ones with the green surround.

The red soldiers I have at two different sizes - just a test.

Never did finish the project - you will notice some text with “#add

Now it was built with Blender -as I’m not the greatest coder- you maybe looking for straight coding

cheers, gryff :slight_smile:


Cannon Battle!?!

That looks great @gryff - would love to see that at full implementation. : )

@aFalcon : Well initially it was a “cannon battle”, but rapidly developed into sniping, swords and bayonets as soldiers struggled to control the Queenston heights. The cannons’ role was reducing the number of attacking boats.(from 13->6).

For a while, the role of Chief Joseph Norton’s Mohawks - and their war cries - in keeping soldiers from crossing the river was important. In the final battle General Sheaffe probaby had one or two mobile 3 pound cannons, the Mohawks and also the Company Of Coloured Men - a unit of escaped slaves.

In many ways, it was an inept battle.

Maybe one day, I will go back and finish it :slight_smile:

cheers, gryff :slight_smile:

PS: Here is a song about Lieutenant Colonel John Macdonell - Brock’ Aide de Camp -who died in his attempts to recover the “heights”

MacDonnell On The Heights

Has some good images.

1 Like

@gryff, nice. :slight_smile:
Does blender export a mix map ?

1 Like

Btw, great story.

Root for the underdog.

One of the ways of painting and mixing textures in Blender is by creating a mask texture first. Then using cycles and two materials and mixing them using that mask texture as the “factor” for blending in Mix Shader node

The mask texture is created by simply painting a white colour onto a black or dark grey texture. The brush you choose will define how sharp or blended the boundaries are. Then saving this texture.

If you have such maps you could bring them into Blender and mix textures then bake out the final mix.

cheers, gryff :slight_smile:

1 Like

Looks like a complex thing. :frowning:
What are the advantages over mix maps ?

@manrix wrote:

What are the advantages over mix maps ?

Well my understanding of mixmaps is thatthey allow you to merge two materials/textures

Using a “mask” in Blender allows you to do the same thing. See image below.

  1. Top is the cycles render setup for merging two textures (T1 and T2, in this case a grass and gravel texture).
    2.Bottom right is the mask that controls the merging that was created by giving a terrain a dark grey texture then painting on the terrain mesh with a white coloured brush, then saving the texture.
  2. Bottom left is the end result of mixing the two textures using the cycles setup above. Stones mixed in with the grass.

I don’t think it is particularly complex, but it may, of course, depend on your experience with Blender.

Or maybe you are looking for some method that uses strictly coding for blending two textures/materials with a mixmap of some kind? In which case you need @Deltakosh and his crew

cheers, gryff :slight_smile:

1 Like

Thanks for explanation. :wink:
I’m currently playing with the mix extension to paint a terrain with several textures. But i’m limited at 8 textures (that could be enough at the end).
I’m always looking for better methods specially if there’s a tool that helps me (blender in this case).
If i understand well, first i create the terrain with a texture than i create masks to paint other textures on it (snow, sand, stone, ecc.), right ? But then blender exports an unique texture image that covers all the terrain ?
Why there’s few documentation about terrain painting in babylonjs world ? Terrain is one of most important things in games. :slight_smile: Or am i wrong and the best practice is to create the ground in modelling softwares and then import it ?

@manrix : In part, it all comes down to what you feel happy with. I’m not a coder, so I like using Blender and baking out finished mixed textures. Some people are more comfortable with coding. - and potentially using mix maps and a lot more other textures.

One other thought, if you are creating for a variety of devices, then there are other texture formats that can be used to optimize for those devices :dxt.ktx, etc2.ktx, pvrtc.ktx. I’m not sure how that would all work for creating/mixing textures - might involve creating a lot of textures (which can be done).

So, I think that it comes down to a personal decision. If you want a blend file, I can post one.

cheers, gryff :slight_smile: