Comment fusionner les cercles de sélection d'unité?

Je voudrais savoir comment faire cet effet de la sélection de cercles fusionnés. Voici des images pour illustrer:

Fondamentalement, je recherche cet effet:

Comment l'effet de fusion des cercles peut-il être obtenu? Je n'ai trouvé aucune explication concernant cet effet. Je sais que pour projeter ces textures, je peux développer un système de décalcomanies mais je ne sais pas comment créer l'effet de fusion.

Si possible, je recherche une solution purement shaders.

Vous pouvez effectuer quelques astuces:

Z-buffer

Après avoir rendu tous les autres objets, pour chaque unité, restituez un cercle transparent de plus petite taille avec une valeur Z maximale. Rendez ensuite les décalcomanies des cercles de sélection au sol. Puisqu'ils sont en dessous dans l'ordre Z, ils seront défaussés lorsqu'ils sont sous les unités.

Être totalement transparent signifie que le cercle est écrit uniquement dans le tampon Z (valeur Z maximale). Maintenant, lorsque vous effectuez le rendu des décalcomanies, elles sont testées par rapport aux valeurs du tampon Z, et si elles réussissent le test, elles sont rendues (ce qui ne se produit qu'en dehors des cercles)

Pochoir

Identique à l'approche précédente, mais cette fois, utilisez un tampon de gabarit. Rendre des cercles plus petits pour les unités avec une certaine valeur de gabarit, puis rendre les décalcomanies de sélection. Configurez le gabarit pour supprimer tous les éléments avec votre valeur de gabarit.

Vous pouvez par exemple archiver le pixel shader de rendu des décalcomanies s'il y a une intersection avec d'autres décalcomanies et tuer le pixel si c'est le cas. C'est assez efficace à faire pour ce genre de décalcomanies circulaires.

Tu veux dire ces cercles bleus au sol?

Il peut y avoir un moyen plus intelligent de le faire, mais considérez ma solution comme un exemple de la façon dont cela peut être fait. Rendez vos cercles à une texture vide distincte de la taille de l'écran. À ce stade, vous pouvez les mélanger ensemble, comme vous le souhaitez. Selon vos besoins, vous pouvez écrire en couleur ou simplement les informations indiquant qu'un cercle est présent à un pixel donné. Cependant, vous aurez certainement besoin d'une information de profondeur pour chaque pixel que vous écrivez si vous voulez un effet de test Z.

Lorsque vous effectuez le rendu du terrain après l'étape précédente, vous pouvez échantillonner la texture créée précédemment, en utilisant les coordonnées d'écran dans le pixel shader, sous forme d'UV. Vous savez maintenant que le cercle doit ou non être projeté à un pixel donné du terrain. Cependant, de cette façon, cela fonctionnera comme si le test Z était désactivé, donc un terrain ne peut cacher aucun cercle. Si vous souhaitez qu'un terrain masque les cercles qui se trouvent derrière, effectuez un test de profondeur avant de mélanger un cercle avec la texture du terrain. Vous pouvez utiliser un petit biais pour activer le rendu des cercles qui sont juste un peu sous le terrain, mais vous souhaitez tout de même qu'ils soient rendus.

Modifier: Maintenant, pour obtenir l'effet des cercles fusionnés, ce que vous devez faire est le suivant: lors du rendu sur la texture séparée, vous devez vérifier s'il existe déjà un cercle rendu là où vous essayez d'en rendre un nouveau. (Vérifiez si la texture a une valeur là-bas) si c'est le cas, effacez ce pixel. Cela devrait donner l'effet de "contour" lorsque deux ou plusieurs cercles se chevauchent. Pour que cela fonctionne correctement, vous devrez cependant effectuer ce test uniquement pour l'intérieur du cercle, pas pour la bordure. Ainsi, lors du rendu des cercles, écrivez une valeur spécifique dans la texture de sortie, ce qui indique qu'il s'agit d'un cercle à l'intérieur. Ensuite, il vous suffit de ne rien rendre sur le cercle à l'intérieur et vous devriez être bon.

Edit2: Pour votre simple exemple rouge / vert: Avant de rendre un pixel, vérifiez si ce pixel n'est pas déjà vert. Si c'est le cas, ne restituez pas. Ça fera l'affaire. En fait, lors de l'écriture sur la texture, vous pouvez même utiliser du rouge / vert pour l'extérieur / l'intérieur du cercle, puis pendant le rendu du terrain, lisez ces valeurs et convertissez-les en une couleur souhaitée.

Si ma réponse est trop abstraite par hasard, faites-le moi savoir.

Il y a quelques options. En tant que méthode générale, les tampons de pochoir sont souvent très utiles lorsque certains dessins doivent être masqués, comme le contour où les cercles se chevauchent dans votre exemple.

Dans ce cas, je pense que cela peut être fait tout aussi facilement sans tampon de gabarit. Vous pouvez utiliser le tampon de profondeur pour éliminer le contour là où les cercles se chevauchent. L'idée est que vous dessinez l'intérieur des cercles uniquement dans le tampon de profondeur (car nous ne voulons pas voir l'intérieur), puis dessinez le contour. De cette façon, la partie du contour qui chevauche un autre cercle sera éliminée par le test de profondeur.

La seule mise en garde est que vous devez faire attention aux combats en profondeur. Vous pouvez utiliser un petit décalage pour vous assurer que les contours sont bien derrière l'intérieur et qu'ils sont éliminés par le test de profondeur. Une alternative serait d'utiliser glPolygonOffset().

Disons que vous avez deux cercles parallèles au plan xy, avec des centres à (x1, y1, z) et (x2, y2, z). Et vous avez ces fonctions de dessin:

// Draw interior part of circle, shown in green in the schematic in the question.
drawInterior(x, y, z);

// Draw outline of circle, shown in red in the schematic in the question.
drawOutline(x, y, z);

La séquence de dessin ressemble alors à ceci, avec deltaun petit décalage:

glColorMask(GL_FALSE, GL_FALSE, GL_FALSE, GL_FALSE);
drawInterior(x1, y1, z + delta);
drawInterior(x2, y2, z + delta);
glColorMask(GL_TRUE, GL_TRUE, GL_TRUE, GL_TRUE);
drawOutline(x1, y1, z);
drawOutline(x2, y2, z);

Du haut de ma tête, si ces décalcomanies sont dessinées sous forme de disques, je testerais chaque cercle pour l'intersection les uns contre les autres, et mettrais les points d'intersection dans un tableau. Tracez ensuite des arcs qui ne se trouvent pas à l'intérieur d'une intersection. Ce n'est cependant pas une solution de shader.

Vous voulez pochoir ici. Votre premier passage rend les cercles dans le tampon de pochoir. La deuxième passe rend le contour visible , partout où le tampon de gabarit n'a pas changé. La deuxième passe doit utiliser une géométrie plus grande que la première passe, dans ce cas, un simple scalaire linéaire suffit.

Bien que la solution que j'ai pour dessiner des contours ici soit plus que nécessaire (car ce shader transforme chaque bord de maillage en un quadruple complet), il suit cette approche: dessiner le modèle d'origine dans le tampon de pochoir, puis rendre une version plus grande où le tampon de gabarit est toujours 0.