30 septembre 2010
Documentation sur l’assemblage d’une image stéréoscopique
à partir de plusieurs éléments
graphiques avec transparence
pour affichage en mode stéréoscopique rouge-cyan
Lorsque l'on applique une seule image contenant de la transparence sur un
canevas solide, cela peut se faire en une seule étape.
Mais lorsque l'on doit fait un montage de plusieurs images contenant de
la transparence sur un canevas solide, on doit obligatoirement utiliser une
image temporaire contenant des couleurs pré-multipliées pour combiner toutes les
images contenant de la transparence et seulement à la fin fusionner cette image
avec le canevas solide.
Pour simplifier mes explications ci-dessous, je prends pour acquis que les
valeurs minimales et maximales qu'un canal (rouge, vert, bleu ou alpha) peut
contenir vont de 0.0 à 1.0. Bien
entendu à l'interne les ordinateurs utilisent des valeurs de 0 à 255.
Donc, par exemple, (1.0 - alpha) signifie l'inverse de la valeur du canal
alpha.
D’abors un peu de vocabulaire…
ImageFinale
L’ImageFinale est une image solide (canal alpha à 1.0) qui sera copiée
simplement à l’endroit désiré dans la page du fureteur.
Pour un mode d’affichage stéréoscopique rouge-cyan, l’ImageFinale
est créée à partir du canal rouge de l’ImageFinaleGauche, des caneaux
vert et bleu de l’ImageFinaleDroite et d’un canal alpha solide ajusté à
1.0.
ImageCanevas
L’ImageCanevas
est simplement une copie du rectangle du canevas solide (background) de la page
du fureteur, rectangle qui sera recouvert par l’ImageFinale.
ImageFinaleGauche
L’ImageFinaleGauche
est une image solide (canal alpha à 1.0) qui est créée en fusionnant l’ImageTamponGauche
avec une copie de l’ImageCanevas.
ImageFinaleDroite
L’ImageFinaleDroite
est une image solide (canal alpha à 1.0) qui est créée en fusionnant l’ImageTamponDroite
avec une copie de l’ImageCanevas.
ImageTamponGauche
L’ImageTamponGauche est une image transparente dont les caneaux rouge
vert et bleu contiennent des valeurs pré-multipliées par les valeurs du canal
alpha. Les quatres caneaux de l’ImageTamponGauche
sont initialisés à 0.0 au début avant d’y fusionner les éléments graphiques de
l’image gauche.
ImageTamponDroite
L’ImageTamponDroite est une image transparente dont les caneaux rouge
vert et bleu contiennent des valeurs pré-multipliées par les valeurs du canal
alpha. Les quatres caneaux de l’ImageTamponDroite
sont initialisés à 0.0 au début avant d’y fusionner les éléments graphiques de
l’image droite.
Comment
fusionner des éléments graphiques dans une image tampon
L’ImageTampon doit obligatoirement être initialisée à RVBA( 0.0,
0.0, 0.0,
0.0 ) au début. Pour
simplifier je vais considérer nos éléments graphiques comme étant de simples
pixels de couleur avec une valeur de transparence et toujours positionnés dans
notre image à la position X = 0 et
Y = 0.
Commençons par un pixel rouge à 30% opaque.
L’élément graphique source est donc RVBA( 1.0,
0.0, 0.0,
0.3 ).
Le pixel de destination dans l’image tampon est présentement de RVBA( 0.0,
0.0, 0.0,
0.0 ).
Le calcul du nouveau pixel de destination va comme suit:
(n = Nouveau,
s = Source,
d = Destination)
Rn
= (Rd + (Rs * As))
= (0.0 + (1.0 * 0.3))
= 0.3
Vn = (Vd + (Vs * As))
= (0.0 + (0.0 * 0.3))
= 0.0
Bn = (Bd + (Bs * As))
= (0.0 + (0.0 * 0.3))
= 0.0
An = (Ad + (As * (1.0 - Ad)))
= (0.0 + (0.3 * (1.0 -
0.0))) =
0.3
Ensuite ajoutons un pixel bleu à 20% opaque.
L’élément graphique source est donc RVBA( 0.0,
0.0, 1.0,
0.2 ).
Le pixel de destination dans l’image tampon est présentement de RVBA( 0.3,
0.0, 0.0,
0.3 ).
Le calcul du nouveau pixel de destination va comme suit:
Rn
= (Rd + (Rs * As))
= (0.3 + (0.0 * 0.2))
= 0.3
Vn = (Vd + (Vs * As))
= (0.0 + (0.0 * 0.2))
= 0.0
Bn = (Bd + (Bs * As))
= (0.0 + (1.0 * 0.2))
= 0.2
An = (Ad + (As * (1.0 - Ad)))
= (0.3 + (0.2 * (1.0 -
0.3))) =
0.44
Ensuite ajoutons un pixel aquamarine à 60% opaque.
L’élément graphique source est donc RVBA( 0.3,
0.6, 0.5,
0.6 ).
Le pixel de destination dans l’image tampon est présentement de RVBA( 0.3,
0.0, 0.2,
0.44 ).
Le calcul du nouveau pixel de destination va comme suit:
Rn
= (Rd + (Rs * As))
= (0.3
+ (0.3 * 0.6))
= 0.48
Vn = (Vd + (Vs * As))
= (0.0
+ (0.6 * 0.6))
= 0.36
Bn = (Bd + (Bs * As))
= (0.2
+ (0.5 * 0.6))
= 0.50
An = (Ad + (As * (1.0 - Ad)))
= (0.44 + (0.6 * (1.0 -
0.44))) =
0.776
Comment
fusionner une image tampon avec une image canevas
Il faut simplement se rappeler que l’ImageTampon contient des valeurs de
couleur pré-multipliées par les valeurs du canal alpha.
Donc les formules de fusionnement vont comme suit:
(f = Final,
t = Tampon,
c = Canevas)
Rf
= (Rt + (Rc * (1.0 - At))
Vf = (Vt + (Vc * (1.0 - At))
Bf = (Bt + (Bc * (1.0 - At))
Af = 1.0
Comment
fusionner les images de gauche et de droite
Les formules pour un fusionnement standard vont comme suit:
(f = Final, g = Gauche,
g = Droite)
Rf
= Rg
Vf = Vd
Bf = Bd
Af = 1.0
On peut également utiliser quelque chose comme ci-dessous pour améliorer le
visionnement. Cela réduit la
saturation mais permet à chaque oeil de percevoir de l’information qu’il ne
verrait pas autrement.
Rf
= ((Rg * 0.66) + (Vd * 0.17) + (Bd * 0.17))
Vf = ((Rg * 0.17) + (Vd * 0.66) + (Bd
* 0.17))
Bf = ((Rg * 0.17) + (Vd * 0.17) + (Bd
* 0.66))
Af = 1.0
Conclusion
J’espère que ces informations vous auront permis de mieux comprendre les calculs
internes qu’il faut effectuer pour afficher en mode rouge-cyan des images
stéréoscopiques contenant de la transparence.
|