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.
expose the hex cells vertices directly (don’t add a mesh, compute indices & normals)
rendering these vertices directly seems to break the logic geometry calculations - really hard time figuring out why, I’m sure it has to do with the commented code that calculate normals
render a Ribbon mesh based on the lines -> here we see a tube-like shape instead of surface-like shape. Maybe I’m going at this all wrong
Hey @Andi First and foremost, welcome to the Babylon family! So good to have you here.
I’m not sure this answers your question directly, but let me tell you that hexes are awesome!
Here’s a video series we did this summer where we go through and construct hex grids and each hex is a tile that can be flipped over to possibly generate a random island on each one. Pretty fun!
This particular video in the series goes over the specifics of building a hex grid. Certainly not the only way, but A way.
Again not exactly answering your question about the ribbon piece, but hopefully there’s some helpful bits in here.
Hi @PirateJC, thank you for the introduction and sharing the videos. Actually, I’ve watched these when I started using Babylon, it’s been a great source of inspiration.
I think my question is a bit of an advanced subject, in regards to performance. My (learning) path so far has been:
create a mesh for each hex - works well, not so performant for big number of hexes
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).
This might already be on your list, but you might also consider extruding the hex faces downward to close up the gaps that are visible. Kind of like the old NES marble madness style:
@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
Nope you nailed it! I was originally thinking of extruding the mesh itself…which you can do if you’re creating the hexes in Babylon, but scaling in Y is a FAR better approach!
Super pumped to see this develop! Keep sending updates and let us know if we can help in any way!
