D'autres réponses suggèrent ici l'utilisation d'une texture. Voici une technique qui n'utilise pas de textures.
Vous voulez que les frontières entre les hexagones soient intéressantes. Il est plus facile de créer des limites intéressantes lorsque vous les déplacez au centre de ce que vous dessinez. Au lieu de dessiner les tuiles directement, vous dessinez le "double" de la tuile. Cette technique est appelée «tuiles d'angle» ( ici et ici et ici ). Le dual d'un hexagone est un triangle, donc nous dessinerions ces triangles au lieu des hexagones:
Les frontières entre les hexagones sont maintenant au milieu des triangles rendus, ce qui nous permettra de faire des choses plus intéressantes avec eux. Bonus: il vous suffit de dessiner deux triangles par hexagone, au lieu de six (ou vingt-quatre comme vous le faites actuellement).
À l'intérieur de chacun de ces triangles, nous voulons que le fragment shader dessine les hexagones. Nous pouvons le faire avec des coordonnées barycentriques . Mettez (1,0,0), (0,1,0) et (0,0,1) à chaque sommet du triangle. À l'intérieur du triangle, ces coordonnées seront interpolées. Le fragment shader recevra (a, b, c) et peut regarder pour voir quelle valeur est la plus grande - cela nous indiquera lequel des trois hexagones devrait être dessiné à ce point.
float max_n = max(barycentric.r, max(barycentric.g, barycentric.b));
if (max_n == barycentric.r) { color = v_color0; }
else if (max_n == barycentric.g) { color = v_color1; }
else if (max_n == barycentric.b) { color = v_color2; }
C'est pour les lignes droites.
Si vous voulez des bords bruyants, vous pouvez ajouter du bruit aux coordonnées barycentriques:
En jouant avec la longueur d'onde / fréquence d'amplitude du bruit, vous pouvez obtenir des effets sympas:
Vous devez être prudent avec le bruit, en vous assurant qu'il est cohérent à travers les limites du triangle. Une façon de le faire est de passer un identifiant hexadécimal et de l'utiliser comme valeur de départ pour chacune des trois valeurs de bruit ajoutées aux coordonnées barycentriques.
J'ai fait une démo interactive ici . (Pour la démo, je n'ai pas implémenté l'identifiant hexadécimal ou certaines des autres choses dont vous pourriez avoir besoin si vous faisiez ce travail dans un vrai projet - c'est juste une démo rapide et sale)