Hi all, I’m new here - this is actually my first question on the forum. I’ve started learning and using BabylonJS for a few months now, I’m really impressed with it. Thank all contributors for making this happen.
At the moment I’m working on generating a hex grid (yes, yet another one of those) and I’ve taken a few approaches keeping performance in mind every step. I’ve built an SPS and it supports up to 20k hexes (amazing!!) and now I’m looking to implement a similar terrain aesthetic but using the Dynamic Terrain extension. Ideally, I would only draw a few number of hexes (or vertices) at one point, allowing good FPS.
I’ve tried a few approaches, but my math skills are no where near as good as my coding skills. Right now I’m stuck at trying to create a Ribbon out of hexes + terraces.
I’ve followed this great example https://www.babylonjs-playground.com/#BC1PDM#6. Here, each hex is a mesh, and the first step was to get the actualy Vertices arrays out from the code, and into the Ribbon. The results are not great, since, I think the order of generating the vertices is not consecutive, and I always end creating tube-like shapes, instead of one surface shape.
Any pointers on how I could approach getting the Vertices data into a Ribbon, ideally to be used with the Dynamic Terrain extension? I’d like to create a ribbon with a hex-like surface, instead of a tube-like shape.
then create an SPS using the hexes. Similar to the Instances method, really reduced the draw calls, helped a lot in using multi-materials.
All these have been valid approaches, now I’m wondering how can I “stream” a hex-like grid into view, just like we do with Dynamic Terrain.
Dynamic Terrain uses a Ribbon underneath, thus I was wondering if I can generate a matrix of vertices, in the correct way and just send it to the DT ribbon so it can render it for me. I know the Ribbon fills in the information between vertices automatically, so I’m curious if we could actually render a line (or grid) of hex points as a surface on a ribbon.
Well, actually finding which hex you click on based on a curved surface it’s a whole new challenge in itself, but one thing at a time haha.
I’d like to send an update, maybe someone would stumble upon the same issues.
After many tries to get this right, I’ve went for an approach to draw the hex tiles on top of terrain points, using the built-in SPS of the Dynamic Terrain.
Basically, the distance between terrain points are hex distances, and each point on the map would get it’s own hex tile. The performance is decent, and the memory thumbprint is not too big. When scrolling the frame time can get up to 10ms, but that can be mitigated by using some DT tricks (LOD, sub zones offsets).
@PirateJC - thank you for the kind words and the suggestion. I would definitely love to do that.
I was thinking to approach it by setting the Y scale for each hex to be alongated, similar to your picture. At the same time I fear having all the hex faces larger might have a performance impact. I’ll definitely run some tests.
Out of curiosity, when you’re refering to ‘extruding’ the hex tiles, do you have in mind a certain technique or just using the Y scale should be fine?
I’m definitely loving the Babylon workflow - it’s such a lightweight layer on top of whatever scripting you wanna do on the side. Plus, tons of useful features - can’t wish for more