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


16

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

entrez la description de l'image ici entrez la description de l'image ici

Fondamentalement, je recherche cet effet:

entrez la description de l'image ici

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.


Pourriez-vous expliquer ce que vous entendez par «effet de fusion»?
wondra

Bien sûr, si vous regardez les personnages en haut à droite de la capture d'écran, les décalcomanies ne se croisent pas, mais les deux à gauche traversent leur cercle bleu et sont fusionnés. J'ai ajouté une nouvelle capture d'écran pour montrer l'effet.
MaT

Insistez-vous sur une solution de shader? Sinon, vous venez de le résoudre dans votre dernière photo.
wondra

La dernière capture d'écran montre uniquement l'effet que je cible. Le résultat final devrait ressembler aux captures d'écran précédentes.
MaT

1
Oui, je suis d'accord, je pense qu'ils construisent dynamiquement un cercle de maillage avec la texture puis coupent le maillage pour les fusionner. C'est aussi une bonne solution mais je pense que c'est plus limité en termes d'effet que vous pouvez faire.
MaT

Réponses:


8

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.


La technique Z-Buffer est intéressante mais je ne comprends pas comment le premier cercle transparent peut couper les décalcomanies au sol.
MaT

0

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.


1
Je suppose que vous avez ignoré la partie de votre réponse - pour passer tous les emplacements et rayons des cercles au shader.
Kromster dit soutenir Monica

@Krom Si OP exprime un quelconque intérêt pour la solution, je suis heureux de donner plus de détails.
JarkkoL

0

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.


J'ai une idée générale mais comme vous le dites, c'est un peu abstrait pour moi concernant les cercles fusionnés :)
MaT

0

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);

0

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.


Oui, j'y ai pensé aussi :) mais comme vous l'avez dit, ce n'est pas une solution de shader et ce n'est pas une solution très générique. Mais merci !
MaT

C'est une description assez vague
Kromster dit soutenir Monica

0

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.


Merci! Donc, au lieu de dessiner d'abord les parties visibles, je devrais commencer par rendre les cercles transparents dans le pochoir. Mais comment rendre des cercles transparents ronds? Je ne peux pas limiter les parties de l'image à rendre dans le gabarit. Quand je rends au pochoir, tout y va, ai-je raison?
Doodlemeat

Oui, c'est pourquoi la deuxième passe (la partie visible) est agrandie: ses limites sont donc plus grandes que le tampon de gabarit. Il vous suffit d'appliquer un sommet scalaire dans la deuxième passe (recherchez les shaders de contour, la plupart utilisent le scalaire plus simple auquel je fais référence). Vous ne pouvez pas non plus modifier le tampon de gabarit si la couleur est transparente. Vous aurez probablement besoin d'un deuxième masque de texture dans ce cas ou vous pouvez faire un calcul à distance pour déterminer le cercle à la place. J'aurais besoin de quelques heures et d'un accès à Unity pour fournir n'importe quel code.
Draco18s ne fait plus confiance au SE

Hmm, que diriez-vous d'avoir une image noir / blanc juste pour écrire dans le tampon du pochoir lors de la première passe afin que le noir devienne 0 et le blanc devienne 1 dans le pochoir. Est-ce que c'est possible?
Doodlemeat

C'est ce que je voulais dire par un deuxième masque de texture. Je suis sûr que cela fonctionnerait, je ne peux pas vraiment vérifier sans avoir Unity devant moi, ce que je n'aurai pas pendant plus de 24 heures.
Draco18s ne fait plus confiance au SE
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.