@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
xagon, but also distorted so it looks ok with the height map.
