How to light hexagon (or an specific zone) in height map floor?

Hi, I have a map created with a height map. The map is basically an hexagon grid (a lot of hexagons), but I create a single image because rendering every hexagon is not performant.

The map uses a height map to be rendered with heights.

But in some scenarios I have to “light” certain hexagons (when a unit is selected I need to show all the hexagons to which that unit can go). But because I’m using a height map, I’m not sure how to do the lighting into those hexagons so it looks ok with the brackground.

Is there a way to “light” just a part of an image which is rendered through a heighMap? I’d need that “zone” to have the shape of an heestosevemal xagon, but also distorted so it looks ok with the height map.

Please let me know if anything I’ve written is not clear, the problem it’s a bit hard to explain. I’m attaching an image that shows one map I’m rendering, the map is a 2d image built with hexagons and then distorted through a heightMap so it shows in 3d.

You might need a custom shader for that and play with UVs or play with vertex colors maybe ???

Adding our artist @PatrickRyan which will have more insight on this.

@hhaamm, welcome to the forum! I apologize for the delay in my response, but your problem is an interesting one so I took some time to put together a demo for you. @sebavan is right in that the best thing for you is to create custom shader using our new node material editor. That is the approach I took and decided to make a full demo because trying to describe the method with words would have taken a long time and been hard to follow. So this is what I did:

This is a simple texture set with a diffuse texture that is primarily the same green with some darker green in the cavities, a simple height map, normal map derived from height, and a super simple specular/gloss map. I didn’t spend much time on these as I just needed to quickly recreate something similar to what you have.

The bit I did spend some time working out was the hex grid and the mask to highlight a specific cell and enable you to highlight individual cells around it. I just did one ring around the center cell, but you could modify this to do whatever you need. The system works so that no matter what cell is active, the six cells around it are the ones eligible for highlight and each can be enabled or disabled like so:

The simple UI on screen will allow you to scrub through the cells and the checkboxes allow you to show or hide cells around the active cell. All of this is handled in one shader and when you run the playground, the node material is selected for you. Simply open the node material editor with the button in the inspector to look at the shader.

The key to the technique are the two masks that are fed into the shader channel packed in one texture:

The mask on the left allows us to isolate the interior of the hexagon and the mask on the right allows us to remove all cells but the one I am interested in. Basically we are using two step functions, one on the left mask to set the minimum value which will isolate from the chosen value up to to white. Then we do another step function on the right mask with the value from the next highest cell and subtract that result from the first. This allows me to isolate each cell individually. Note that the mask on the right does not have the breaks for the strokes on the grid and this is to make sure we remove all edge pixels from around the other cells. If we didn’t do this, the step function would leave some stray pixels edging the unwanted cells due to aliasing.

The biggest challenge is setting up the art for the hex grid so that the UV offset of the texture falls cleanly within the grid. And I would normally create custom meshes to work hand in hand with the grid, but in this case for speed, I just used our ground mesh which isn’t UVed the way I would have liked. So there are some work arounds in the code to make this system work, but you should get the idea from looking at the code and shader.

From there, you can expand this to do a lot of extra things like animate the strength value of the surrounding cells so that you get a pulse, hook into the glow layer to make available cells glow, create custom animations for wipes or pulses from the center cell. Basically the sky is the limit from here.

Let me know if you have other questions about the system or node material in general. Right now, node material is only available for blinn/phong lighting models, but the team is currently working on the PBR version of node material so it won’t be long before some of those nodes start popping into preview. Hope this is what you were looking for. I will likely do a video on the technique for our channel just to show the flexibility of node material. Take care, enjoy the playground below, and feel free to ping me with questions!

https://playground.babylonjs.com/#JYK4D0

5 Likes

Hi Patrick! The demo looks awesome and although I’ll need some time to understand it it looks exactly what I need. Thanks a lot!

1 Like

If this is useful to anyone in the future, I resolved what I wanted to do using a custom shader and ShaderMaterial.