Animation avec "fondu" entre deux images: gérer la transparence

[Armulis]

Bonjour!

J'utilise SFML pour réaliser des animations image-par-image, et jusque-là ça va pas mal.
Mais là, je m'attaque à un truc un peu coriace, et j'ai besoin de conseils.

Comme mes animations font 24 images par-seconde, ça me donne beaucoup de travail de dessin, et parfois pour pas grand chose.
Je voudrais donc implémenter une fonction de "remplissage" pour n'avoir à dessiner qu'une image sur deux (pour les animations qui le permettent raisonnablement).

Le fonctionnement doit être le suivant:
- Afficher la première image opaque, seule.
- Afficher la première image semi-transparente, et la deuxième image semi-transparente par-dessus.
- Afficher la deuxième image opaque, seule.
- Afficher la deuxième image semi-transparente, et la troisième image semi-transparente par-dessus.
- Afficher la troisième image opaque, seule.
-...

Vous imaginez bien que je peux jouer sur la pondération pour faire des "remplissages" plus longs ou asymétriques. C'est justement ce potentiel que je veux ajouter à mon programme (même si le rendu visuel risque de souffrir si on pousse trop).

J'ai fait des essais sur un logiciel de dessin, et apparemment, la superposition de deux images avec 50% d'opacité donne une image semi-transparente.
Est-il possible (à-part y aller à-tâton) de "prédire" l'opacité d'une pile d'images non-opaques?
Si je le cherche par tâtonnement, il faudra que je fasse un tâtonnement par cas (et si je fais des transitions complexes ou des effets visuels, ça va me donner vraiment beaucoup de boulot).
Note: j'ai déjà pensé à faire un algorithme qui "monte" les opacités jusqu'à ce que le rendu soit opaque, mais ça risque de plomber ma vitesse d'exécution (et pour les images qui ne sont pas opaques partout, ça sent déjà le bug).

Question subsidiaire: l'ordre d'empilement donne-t-il une prépondérance à l'image du dessus?

Voilà. C'est un problème un peu théorique, mais je pense qu'il y a de quoi apprendre pas mal de trucs intéressants.

[Laurent]

Est-il possible (à-part y aller à-tâton) de "prédire" l'opacité d'une pile d'images non-opaques?

Personnellement je ne comprends pas cette question, ni le lien avec l'algorithme que tu décris.

[kimci86]

Quel est ton problème précisément ?

[Armulis]

Bonjour!

Concrètement, le problème c'est que si je superpose deux images dont l'opacité est 128/255, le résultat n'est pas opaque.

Je cherche une méthode permettant de savoir quelle opacité (de deux images) permet d'obtenir un ensemble opaque.
Mais je ne peux pas chercher cette solution par tâtonnement, puisque je veux aussi pouvoir faire un système de pondération (pour avoir un résultat opaque en utilisant deux images dont l'une des deux fois plus opaque que l'autre).

C'est plus clair?

[kimci86]

Je crois comprendre que tu cherches à faire un barycentre de tes deux images (barycentre pixel par pixel).

En supposant que tes images n'ont que des pixels opaques, tu peux simplement afficher la première totalement opaque et la seconde par dessus avec une opacité choisie.

Dans les cas où tes images ont des pixels transparents, tu peux faire ce que tu veux avec un fragment shader qui calcule les barycentres pour chaque pixel.

[Armulis]

OK... j'ai jamais entendu parler de barycentre, ça commence bien.
Une image opaque et l'autre transparente, j'y ai pensé. Mais il y a un problème:

Imaginons que mon animation est une boule qui décrit un cercle en flottant dans les airs. Dans cet exemple, l'animation est faite sans déplacer de sprite (qui est essentiellement transparent puisqu'il englobe toute la zone "occupable" par la boule.
Le problème que je pressens, c'est que pendant la transition entre deux images, on verra toujours la boule à son emplacement de départ (celui de l'image numéro un), et en même temps, on en verra une "deuxième" (celle de l'image numéro deux) apparaître un peu à-côté.
Autrement-dit, cette méthode rend l'image "précédente" prépondérante vis-à-vis de l'image "suivante".
Moi je veux que la première image disparaisse (fondu), pendant que la deuxième apparaît (fondu inverse), mais que la "somme" des deux soit "100% d'opacité". Sinon, je crains que les objets aient l'air de devenir transparents pendant ces transitions.
Si on est à 99% d'opacité ça me dérange pas. Mais les essaie que j'ai faits sont de l'ordre de 60%; c'est inacceptable =)

[Laurent]

Moi je veux que la première image disparaisse (fondu), pendant que la deuxième apparaît (fondu inverse), mais que la "somme" des deux soit "100% d'opacité".

Il y a 3 endroits à définir : là où uniquement la boule précédente apparaît, là où uniquement la boule suivante apparaît, et là où les deux se superposent. A priori, dans la zone de chevauchement, l'opacité sera 100% puisque tu auras boule * 0.5 + boule * 0.5. Par contre, dans les deux autres zones, tu verras à moitié la boule, et à moitié le fond. Donc la question est la suivante : tu voudrais quel résultat exactement ?

Parce que, si on revient à la problématique initiale, je ne vois pas vraiment comment tu vas pouvoir simuler les trames d'une animation qui consiste en un mouvement, en faisant des fondus.

[Armulis]

Un mouvement n'est pas un déplacement. Je parle de combler les espaces entre deux "images" du même personnage, qui n'est pas dans la même position d'une image à l'autre (normal!). Mais le sprite ne change ni de taille, ni de position.
Et ce que je veux faire, c'est fluidifier un mouvement de 12 images par secondes, en faisant le remplissage nécessaire pour avoir 24 images à afficher (et dont une moitié sera construite en utilisant l'autre moitié).

[Laurent]

Un mouvement n'est pas un déplacement. Je parle de combler les espaces entre deux "images" du même personnage, qui n'est pas dans la même position d'une image à l'autre (normal!). Mais le sprite ne change ni de taille, ni de position.

Oui mais ce n'est pas un changement de couleur ou autre, c'est toujours bien un mouvement (des bras, jambes), non ?

Bref, tu auras toujours le même problème, certaines zones (celles qui ne se superposent pas entre les deux images) seront moins opaques. Un fragment shader pourrait éventuellement t'aider.

[Armulis]

OK pour le fragment shader, je vais regarder.
On m'a parlé de "draw" mes deux images dans une "RenderTexture" en utilisant le mode "BlendMultiply" pour les "mélanger". C'est une possibilité aussi?

[Laurent]

On m'a parlé de "draw" mes deux images dans une "RenderTexture" en utilisant le mode "BlendMultiply" pour les "mélanger". C'est une possibilité aussi?

Je ne vois pas trop où veut en venir la personne qui t'a parlé de ça. Si tu utilises un sf::RenderTexture pour faire un rendu intermédiaire, tu ne pourras pas conserver la transparence initiale de ton image, ie. les zones qui devront rester transparentes après mélange ne le seront plus. Et en ce qui concerne le mode BlendMultiply, ça ne me paraît pas du tout adapté. C'est bien un ajout que tu veux faire, pas une modulation de couleur.

[Armulis]

J'ai l'impression qu'on se comprend pas tout-à-fait.
Je veux faire ça (voir exemple ci-dessous). Le but est que je n'aie à dessiner que la première et la dernière image, et que le logiciel génère lui-même l'image centrale à-partir des deux autres.

[Laurent]

Si si, j'ai très bien compris ne t'inquiète pas