Hex material transitions

Hey guys,

I want to create transition between hex materials similar to this screenshot

I’m trying to create this via multimaterials but in this tutorial (Multi-Materials | Babylon.js Documentation) there is submeshes created by vertices number and i don’t think it’s suitable for me. As i understand i need something like alpha blend with multiple materials, like there is main material + 0-6 materials added above it for each hex side. Question is how to create such multimaterial or maybe i missing something and there is better way?

I’ve created playground with two hexes

Could you please help?

At the moment i’m thinking to create multiple hexes on the same coordinates each with his own texture. Main hex will have main hex texture and all other hexes above it will have parts with opacity texture. So visually it will be one hex with beautiful transitions between different hexes.

I believe you may try to use Mix material - Mix Material | Babylon.js Documentation

1 Like

Sounds a bit too complex for me. I would overlay the hex and use mix mat for the ground. Of course, my opinion only.

Not sure how mix mat can be applied here.
Each hex have his own layout. Somewhere it need transition because near hex is different type somewhere it doesn’t. And it’s to high number of possble cases
So each hex should have his own unique RGBA mix texture which is not possible because number is high.

In short we don’t know what is a correct RGBA mix texture for each hex.

I’m not sure if you have resolved this already, but you could generate the mix textures on the fly to avoid having to calculate each one. You’d just have to mark which hexes are “transition” ones and which materials they are mixing. I put together a quick example here:
Fun With Hex Tiles | Babylon.js Playground (babylonjs.com)

Thanks for answer, It’s not what i needed but it was pointed me to solution.
I’ve created node material for my case https://nme.babylonjs.com/#PRV6JY#4

It has 4 texture (can be easily increased if someone needs)
Node material computes what is visilbe at each pixel. for example we have 4 pngs with alpha channels.
Order of textures determines layers. So second texture will be above first and third above 2nd etc.
But if pixel of third texture transparent, node material will show pixel of second material, if second texture pixel also transparent it will show first texture pixel etc.

Example:


1- first texture which is overrided by every texture if possible
2- second texture which is overrided by 2,3,4 textures
3- third texture which is overrided by 3,4 textures
4 texture is empty. it’s ok
Not sure why pictures are mirrored in node material editor but it works correctly in my project (it’s not mirrored)

1 Like

Happy it worked, thanks for sharing the node material! :smiley: