I have created a planet made of 25.000 hexagons using hexasphere.js . It works great on my gaming computer, but not so much on my basic laptop. I think there is a lot of room for optimization. I have been looking at the following: 1 - InstanceMesh. With 25.000 hexagons it seems the way to go. Howeve…

The hexasphere object comes with neighbour tiles information for all tiles, so pathfinding should be pretty simple using something like A*

yeah. I wrote an astar for this, it was tricky to get right. :slight_smile: [image]

[image] Molleby: They get a little stretched and squished here and there to fit together. I’m wondering if it’s possible to apply skewing to the instances via their transformation matrices, though that would depend on the type of data returned by hexasphere.js.

That’s where I’m a little confused; when using instances are you only allowed to changes meshes using transforms, or can you also change specific points of the geometry so that the points are identical to what i get from the hexasphere object? If not, I don’t think I can get the hexagons to line up…

Skewing the matrices is an option and doesn’t affect the vertices, and no, you can’t update the vertices, when instancing, any change to the original geometry will be reflected in all instances! I know how to skew a square or a cube, but I’ve never tried it with a hexagon. Since your hexes are flat…

Yeah I think it would be tough to pull off by instancing… since each hex is a slightly different shape. All of this is pretty academic tho.. this is best implemented as just a single mesh + geometry imo.

@vielzutun.ch how do you call a projection inside a center? eg. for cubic it is simple: top, floor; left, right; front, rear

Good technical thread on Mastodon here, with advice about rendering hexagons: Joni Korpi (@jonikorpi@mastodon.gamedev.place) Graphics programmers: if you were given the job to render heightmap hex terrain like this _efficiently_, how would you do it? Constraints: - Each hex on the gri…

[image] manthrax: Yeah I think it would be tough to pull off by instancing You were right, the idea of skewing instances was appealing, and I spent way too much time fiddling with it, but that’s just not how it works! (You can’t blame me, I did predict it would fail :sweat_smile:) On the bri…

Best rendering optimization strategy for 25.000 hexagons?

Questions

prisoner849 June 5, 2025, 9:28am 11

Well… I tried it.

A single InstancedBufferGeometry for hexagons and pentagons.
Pentagon is hexagon, but with one degenerated triangle.

Demo: https://codepen.io/prisoner849/full/azOBGKq

Just had a thought, that there is also BatchedMesh. Which might be an option

Topic		Replies	Views
Using a mask to create custom hexagon terrain tiles Questions	43	296	March 28, 2026
Issue About Performance in Three Fiber Questions materials , geometry , gltf-loader	3	646	March 31, 2022
InstancedMesh - can it be used to draw hundreds of planes with different textures? Questions textures , geometry , instanced-mesh	16	8379	October 13, 2022
Ideas on performing fast per-instance frustum culling on InstancedMesh Questions instancedmesh	14	767	July 21, 2025
InstancedMesh2 - Easy handling and frustum culling Discussion	42	4855	October 25, 2024

Best rendering optimization strategy for 25.000 hexagons?

Related topics