Texture Affiche 2D Transparence

**XAMLdev** · 16/07/2013, 20h54

Bonjour à tous et à toutes.

Je me suis mis à faire une petite bibliothèque de dessin 2d de sprites et de primitives en utilisant OpenGl 1.x.

J'utilise comme langage le C# et une vieille bibliothèque nommée TAO qui me fait un mapping 1-1 avec l'OpenGl classique (ce qui est mon but).

J'ai réussit (mais c'est simple) à faire des tracés de rectangles (pleins ou vides), de cercles, de lignes, de points.

Je me suis penché sur la problématique d'affichage de sprite 2d (purement).

J'utilise la séquence d'initialisation suivante :
Elle utilise un fichier de mon cru qui contient les infos qu'il me faut pour charger une texture (qui est une classe aussi de mon cru) en plus des initialisations pour un affichage 2d 640 par 480.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

 public static bool InitGL()
        {
            Gl.glClearColor(0.0f, 0.0f, 0.0f, 0.0f);
            Gl.glGenTextures(1, _textureIds);

            _currentTexture = LoadTexture("A.pof");  // Chargement de mon fichier perso
                                                                                      // dans ma classe Texture perso
            Gl.glEnable(Gl.GL_TEXTURE_2D);
            Gl.glEnable(Gl.GL_ALPHA_TEST);
            Gl.glAlphaFunc(Gl.GL_GREATER, 0);

            Gl.glDisable(Gl.GL_DEPTH_TEST);
            Gl.glDisable(Gl.GL_LIGHTING);
            Gl.glDisable(Gl.GL_DITHER);

            Gl.glMatrixMode(Gl.GL_PROJECTION);
            Gl.glLoadIdentity();
            Gl.glOrtho(0, 640, 480, 0, 0, 1);
            Gl.glMatrixMode(Gl.GL_MODELVIEW);

            Gl.glTexEnvi(Gl.GL_TEXTURE_ENV, Gl.GL_TEXTURE_ENV_MODE, Gl.GL_REPLACE);
           
            return true;
        }

J'utilise la fonction suivante pour afficher un sprite :
Je passe une référence à ma classe Texture qui en fait contient l'identifiant OpenGl de la texture, une structure Point pour l'emplacement d'affichage et enfin un byte qui est censé donner l'alpha d'affichage : 0 (sprite invisible) ---- 128 (translucide) --- 255 (silde) etc..

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
 
 public static void DrawTexture(Texture texture, Point point, byte alpha)
        {
            Gl.glBindTexture(Gl.GL_TEXTURE_2D, texture.GetIndex());
 
            Gl.glBegin(Gl.GL_QUADS);
 
            Gl.glTexCoord2d(0, 0);
            Gl.glVertex2f(point.X, point.Y);
 
            Gl.glTexCoord2d(1, 0);
            Gl.glVertex2f(point.X + texture.GetWidth(), point.Y);
 
            Gl.glTexCoord2d(1, 1);
            Gl.glVertex2f(point.X + texture.GetWidth(), point.Y + texture.GetHeight());
 
            Gl.glTexCoord2d(0, 1);
            Gl.glVertex2f(point.X, point.Y + texture.GetHeight());
 
            Gl.glEnd();
        }

Voici ma classe perso texture

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
 
 
    public sealed class Texture
    {        
        private Color _alphaColor;
        private int _width;
        private int _height;
        private int _index;
 
        public Color GetAlphaColor()
        {
            return _alphaColor;
        }
 
        public int GetWidth()
        {
            return _width;
        }
 
        public int GetHeight()
        {
            return _height;
        }
 
        public int GetIndex()
        {
            return _index;
        }
 
        public Texture(int width, int height, int index, ref Color alphaColor)
        {
            _alphaColor = alphaColor;
            _width = width;
            _height = height;
            _index = index;
        }
    }

Mon problème est le suivant :

Dans ma petite bibliothèque, je voudrais afficher des sprites qui ont des parties invisible et avec un degré de transparence. Par exemple, imaginons une piece de monnaie dans une image carré dont le fond serait en rouge.

Il faudrait que le fond rouge ne s'affiche pas et que la piece de monnaie puisse s'afficher avec des degré de transparence paramétré.

Jusqu'ici, j'ai réussit à rendre le fond de mon image invisible grace à

Gl.glEnable(Gl.GL_ALPHA_TEST);
Gl.glAlphaFunc(Gl.GL_GREATER, 0);

et

Gl.glTexEnvi(Gl.GL_TEXTURE_ENV, Gl.GL_TEXTURE_ENV_MODE, Gl.GL_REPLACE);

mais je ne vois pas comment faire pour faire varier la transparence avec mon paramètre alpha dans ma fonction

public static void DrawTexture(Texture texture, Point point, byte alpha)

J'ai tournée en rond et je vous demande humblement votre aide .....

Marci à tous !

**ShevchenKik** · 17/07/2013, 09h44

Bonjour,

dans votre exemple vous utilisez l'Alpha test, mais pour ce que vous voulez obtenir c'est le Blending qu'il faut utiliser.

Remplacez:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
Gl.glEnable(Gl.GL_ALPHA_TEST);
            Gl.glAlphaFunc(Gl.GL_GREATER, 0);

par

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
Gl.glEnable(Gl.GL_BLEND);
            Gl.glBlendFunc(Gl.GL_SRC_ALPHA, Gl.GL_ONE_MINUS_SRC_ALPHA);

Et dans ce cas votre Alpha correspondra au degré de transparence du pixel correspondant.

**XAMLdev** · 17/07/2013, 17h57

Bonjour,

Merci de votre aide, voici ce qui arrive avec votre suggestion :

EXPERIENCE 1
-------------

Avec l'initialisation suivante :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
 
 
public static bool InitGL()
        {            
            Gl.glClearColor(0, 0, 0, 1);
            Gl.glGenTextures(1, _textureIds);
 
            _currentTexture = LoadTexture("A.pof");
 
            Gl.glEnable(Gl.GL_TEXTURE_2D);
 
            Gl.glDisable(Gl.GL_DEPTH_TEST);
            Gl.glDisable(Gl.GL_LIGHTING);
            Gl.glDisable(Gl.GL_DITHER);
 
            Gl.glMatrixMode(Gl.GL_PROJECTION);
            Gl.glLoadIdentity();
            Gl.glOrtho(0, 640, 480, 0, 0, 1);
            Gl.glMatrixMode(Gl.GL_MODELVIEW);
 
            Gl.glTexEnvi(Gl.GL_TEXTURE_ENV, Gl.GL_TEXTURE_ENV_MODE, Gl.GL_REPLACE);
 
            return true;
        }

Et le code de dessin suivant :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
 
 
 public static void DrawTexture(Texture texture, Point point, byte alpha)
        {
            Gl.glEnable(Gl.GL_ALPHA_TEST);                               //Code de suppresion du fond bleu de l'image
            Gl.glAlphaFunc(Gl.GL_GREATER, 0);
 
            Gl.glEnable(Gl.GL_BLEND);
 
            Gl.glColor4b(255, 255, 255, alpha);                          //Utilisation de la valeur alpha ? 
 
            Gl.glBlendFunc(Gl.GL_SRC_ALPHA, Gl.GL_ONE_MINUS_SRC_ALPHA);  //Votre suggestion
 
            Gl.glBindTexture(Gl.GL_TEXTURE_2D, texture.GetIndex());
 
            Gl.glBegin(Gl.GL_QUADS);
 
            Gl.glTexCoord2d(0, 0);
            Gl.glVertex2i(point.X, point.Y);
 
            Gl.glTexCoord2d(1, 0);
            Gl.glVertex2i(point.X + texture.GetWidth(), point.Y);
 
            Gl.glTexCoord2d(1, 1);
            Gl.glVertex2i(point.X + texture.GetWidth(), point.Y + texture.GetHeight());
 
            Gl.glTexCoord2d(0, 1);
            Gl.glVertex2i(point.X, point.Y + texture.GetHeight());
 
            Gl.glEnd();
 
            Gl.glDisable(Gl.GL_ALPHA_TEST);
            Gl.glDisable(Gl.GL_BLEND);
        }

Et l'appel au dessin suivant :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
 
public static bool DrawGLScene()
        {
            Gl.glClear(Gl.GL_COLOR_BUFFER_BIT | Gl.GL_DEPTH_BUFFER_BIT);
 
            Point p1 = new Point(0, 0);
            Point p2 = new Point(30, 200);
 
            DrawTexture(_currentTexture, p1, 255);  
            DrawTexture(_currentTexture, p2, 64);  //Tentative de transparence 
 
            return true;
        }

J'obtiens le résultat montré imageA.png.
L'appel au dessin de la deuxieme texture devrait la rendre transparente mais ce n'est pas la cas.

EXPERIENCE 2
--------------------

Si je modifie dans le code de dessin comme ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
 
 
public static void DrawTexture(Texture texture, Point point, byte alpha)
        {
            Gl.glEnable(Gl.GL_ALPHA_TEST);
            Gl.glAlphaFunc(Gl.GL_GREATER, 0);
 
            Gl.glEnable(Gl.GL_BLEND);
 
            Gl.glColor4b(255, 255, 255, alpha);
 
            Gl.glBlendFunc(Gl.GL_SRC_ALPHA, Gl.GL_ONE_MINUS_SRC_COLOR);  // Un essai trouvé au hasard
 
            Gl.glBindTexture(Gl.GL_TEXTURE_2D, texture.GetIndex());
 
            Gl.glBegin(Gl.GL_QUADS);
 
            Gl.glTexCoord2d(0, 0);
            Gl.glVertex2i(point.X, point.Y);
 
            Gl.glTexCoord2d(1, 0);
            Gl.glVertex2i(point.X + texture.GetWidth(), point.Y);
 
            Gl.glTexCoord2d(1, 1);
            Gl.glVertex2i(point.X + texture.GetWidth(), point.Y + texture.GetHeight());
 
            Gl.glTexCoord2d(0, 1);
            Gl.glVertex2i(point.X, point.Y + texture.GetHeight());
 
            Gl.glEnd();
 
            Gl.glDisable(Gl.GL_ALPHA_TEST);
            Gl.glDisable(Gl.GL_BLEND);
        }

J'obtiens le résultat imageB.png.

Là ça marche mais uniquement dans la zone d'intersection des deux textures, ce que j'aurais aimé c'est que la texture transparente le soit aussi comme sur l'exemple imageC.png.

REMARQUE :
-----------------

J'utilise le code suivant :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
 
Gl.glEnable(Gl.GL_ALPHA_TEST);                          //Code de suppresion du fond bleu de l'image
Gl.glAlphaFunc(Gl.GL_GREATER, 0);

Pour éliminer le fond de ma texture, effectivement je voudrais avoir des texture avec fond invisible et degré de transparence paramétrée pour le reste de l'image.

Si jamais j'élimine le code ci dessus du code de dessin j'obtiens l'imageD.png.

**dragonjoker59** · 17/07/2013, 19h38

L'idéal pour avoir le rendu que tu souhaites serait d'avoir le canal alpha dans l'image et de faire le blending avec GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA

**XAMLdev** · 17/07/2013, 20h14

Juste une idée qui me vient comme ça ...

On ne pourrait pas utiliser une "texture vide" intermédiaire avec notre valeur alpha et la combiner à la texture à dessiner pour obtenir l'effet de transparence ?

La texture dite pourrait être de la taille de un pixel et extensible ...

Une sorte de masque ... par contre je ne sais pas du tout comment faire ...

**LittleWhite** · 17/07/2013, 21h06

Bonjour,

Cette nouvelle solution est possible principalement en utilisant des shaders (OpenGL 2/3 et 4). En OpenGL 1, je ne vois pas comment cela est possible.
D'ailleurs, avez vous une raison de rester en OpenGL 1 ?

**XAMLdev** · 18/07/2013, 19h44

Merci pour toutes vos suggestions.

Effectivement, je voudrais rester en OpenGl 1.x pour des raisons de compatibilités avec des vieux machins que j'aime bien.

Je viens du monde M$ et je suis un peu fatigué de la politique habituelle de mise en avant d'une technologie puis d'abandon soudain dont fait preuve cette firme.

Du coup ayant des connaissances XNA 3.1, je me suis dit que OpenGl serait plus stable ce qui est le cas puisque les versions nouvelles englobent les versions précédentes.

C'est quand même plus simple à suivre ...

Cependant, je suis très étonné que la possibilité de faire varier la transparence d'un texture déjà chargé ne soit pas présente directement dans cette version d'OpenGL.

Autant que je me souvienne, OpenGl a été crée en 1992 et la version 1.2 date de 1998 or en 1998, les jeux contenaient des textures à alpha variable ne serait ce qu'en affichage 2D "Please Wait ".... "Loading" ... "Get Ready" ....

https://www.opengl.org/wiki/History_...1.0_.281992.29

Pour le problème qui nous concerne, je n'ai pas trouvé d'autre méthode que de recharger la texture avec des données mises à jour.

Le truc est de garder en ram une seule texture OpenGL générée une fois et ensuite de la rafraichir :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
 
Gl.glTexImage2D(Gl.GL_TEXTURE_2D, 0, 4, texture.GetWidth(), texture.GetHeight(), 0, Gl.GL_RGBA, Gl.GL_UNSIGNED_BYTE, texture.GetUpdatedDatas(alpha));

Bien évidement ce n'est pas terrible car on perd des cycles sur les opérations de mises à jour et de rafraichissement : il me semble en fait que je viens de faire un "shader software"

Sur XNA 3.1 l'opération de dessin avec alpha paramétré prend 1000 fois moins de temps mais je les soupçonne de faire un appel à un shader encapsulé et caché dans leur framework.

Je vais encore fouiller un peu et si je ne trouve rien de plus je fermerais cette discussion.

Merci à tous.

**LittleWhite** · 18/07/2013, 21h07

Je viens de tilter (j'étais perdu à cause du rouge, un moment, enfin bref).

Pour information, si vous aimez XNA : http://jeux.developpez.com/index/red...andre-Laurent/ (rien n'est perdu

)

Pour OpenGL, il faut utiliser la technique de matériel coloré. On en trouvera une explication dans le tutoriel de NeHe : http://nehe.developpez.com/tutoriel/12-liste-affichage/

Il utilise une texture (de boite) et peut changer la couleur de rendu à la volée (sorte de teinte). Cela marche aussi pour la composante alpha

**XAMLdev** · 19/07/2013, 00h00

Est il possible d'avoir un exemple moins complexe ? Parce que là je suis un peu perdu ...

**LittleWhite** · 19/07/2013, 10h05

...

->

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
// A l'initialisation
glEnable(GL_COLOR_MATERIAL);    // Activation du coloriage matériel
 
glColor4f(/*votre couleur*/);
// Dessin de votre objet

À peu près.

**XAMLdev** · 28/07/2013, 02h48

merci ! ça suffira pour ma problématique.

Texture Affiche 2D Transparence [OpenGL 1.x]

OpenGL

Vue hybride

Discussions similaires

Partager

Partager