Discussion :

[ksta.k]

Bonjour,

Je viens vers vous suite à un problème que je n'arrive pas à trouver sur internet suite à recherche.

Mon problème :

J'ai un spriteSheet qui est composée d'icon et de plusieurs background de bouton, et je souhaite superposer un fond de bouton et un icon en même temps sur le même plane.
J'utilise un VBO qui fonctionne correctement.

J'ai vue qu'il fallait utiliser le MultiTexture mais tous les exemples que je trouve sur internet indique une deuxième texture alors que pour ma part j'ai la même image pour les deux.

C'est pourquoi j'aurais aimer savoir si il était possible de le faire mais avec une seul texture? si oui serait-il possible de me donner la démarche à suivre car en essayant de faire deux bind à la suite j'ai qu'une seul texture sur les deux qui apparait.

Je vous remercie d'avance.

[LittleWhite]

Bonjour,

Oui, vous pouvez le faire avec la même texture, par contre, pensez bien à envoyer un second tampon de coordonnées de texture, pour la seconde texture.

[ksta.k]

Merci pour votre réponse,

Je suis contant que l'on puisse le faire car je ne voulais pas refaire un spritesheet plus gros .

J'ai essayer d'envoyer le deuxième le deuxième tempon de coordonnées mais impossible d'afficher les deux textures en même temps sur les même vertices il y a que la deuxième images qui s'affiche mais la premiere.

voici le spritesheet :


Voici la façon pour le moment que je fait pour les afficher.

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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
 
//////////////////////
// Bind
 
// définition de la taille mémoire pour les vertices
glBindBuffer(GL_ARRAY_BUFFER, m_vboIds[ENUM_InfosVBO::VERTICES]);
glBufferData(GL_ARRAY_BUFFER, m_vertices.size() * sizeof(vector3f), &m_vertices[0], GL_DYNAMIC_READ);
 
// définition de la taille mémoire pour la texture (SpriteSheet)
glBindBuffer(GL_ARRAY_BUFFER, m_vboIds[ENUM_InfosVBO::TEXTURE_0]);
glBufferData(GL_ARRAY_BUFFER, m_textures.size() * sizeof(vector2f), &m_textures[0], GL_STREAM_DRAW);
 
// définition de la taille mémoire pour les index
glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, m_vboIds[ENUM_InfosVBO::INDICES]);
glBufferData(GL_ELEMENT_ARRAY_BUFFER, m_indices.size() * sizeof(unsigned int), &m_indices[0], GL_STREAM_DRAW);
 
 
//////////////////////
// UnBind
glBindBuffer(GL_ARRAY_BUFFER, 0);
glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, 0);
glBindTexture(GL_TEXTURE_2D, 0);
 
//////////////////////
// Draw
 
// vertices
glEnableClientState(GL_VERTEX_ARRAY);
glBindBuffer(GL_ARRAY_BUFFER, m_vboIds[ENUM_InfosVBO::VERTICES]);
glVertexPointer(3, GL_FLOAT, 0, 0);
 
// Texture background
glEnableClientState(GL_TEXTURE_COORD_ARRAY);
glBindBuffer(GL_ARRAY_BUFFER, m_vbo->getVboIdsById(C_GLVbo::ENUM_InfosVBO::TEXTURE_0));
glTexCoordPointer(2, GL_FLOAT, 0, 0);
glEnable(GL_TEXTURE_2D);
 
// Dessine
glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, m_vbo->getVboIdsById(C_GLVbo::ENUM_InfosVBO::INDICES));
glDrawElements(GL_QUADS, m_vbo->getIndices().size(), GL_UNSIGNED_INT, 0);
 
//////////////////////
// End Dranw
glBindTexture(GL_TEXTURE_2D, 0);
glDisableClientState(GL_TEXTURE_COORD_ARRAY);
 
/////////////////////
// J'ai réécrie le même code en dessous sauf m_textures qui est remplacer par m_coorsdIcon
 
// définition de la taille mémoire pour la texture
glBindBuffer(GL_ARRAY_BUFFER, m_vbo->getVboIdsById(C_GLVbo::ENUM_InfosVBO::TEXTURE_1));
glBufferData(GL_ARRAY_BUFFER, m_coordsIcon.size() * sizeof(vector2f), &m_coordsIcon[0], GL_STREAM_DRAW);
glEnable(GL_TEXTURE_2D);
 
// Draw
glEnableClientState(GL_TEXTURE_COORD_ARRAY);
glBindBuffer(GL_ARRAY_BUFFER, m_vbo->getVboIdsById(C_GLVbo::ENUM_InfosVBO::TEXTURE_1));
glTexCoordPointer(2, GL_FLOAT, 0, 0);
glEnable(GL_TEXTURE_2D);

Je suis pas expert du vbo encore ni du la multi texture mais j'ai l'impression de mal faire quelque chose.

Si vous pouvez m'expliquer se que je fait de mal sa serai gentil.

Je vous remercie d'avance

[LittleWhite]

Pour l'instant, je ne vois qu'un seul envoie de coordonnées de texture :

Code :

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

1
2
3
4
5
// Texture background
glEnableClientState(GL_TEXTURE_COORD_ARRAY);
glBindBuffer(GL_ARRAY_BUFFER, m_vbo->getVboIdsById(C_GLVbo::ENUM_InfosVBO::TEXTURE_0));
glTexCoordPointer(2, GL_FLOAT, 0, 0);
glEnable(GL_TEXTURE_2D);

Faites un second tampon.
Regardez un tutoriel sur le multitexturing OpenGL, cela aide beaucoup

[ksta.k]

En effet j'ai pas tous afficher pour pas faire un gros code mais voici le code complet lors du bind et de l'affichage :

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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
 
 
//////////////////////
// Bind
 
// définition de la taille mémoire pour les vertices
glBindBuffer(GL_ARRAY_BUFFER, m_vboIds[ENUM_InfosVBO::VERTICES]);
glBufferData(GL_ARRAY_BUFFER, m_vertices.size() * sizeof(vector3f), &m_vertices[0], GL_DYNAMIC_READ);
 
// définition de la taille mémoire pour la texture du background (SpriteSheet)
glBindBuffer(GL_ARRAY_BUFFER, m_vboIds[ENUM_InfosVBO::TEXTURE_0]);
glBufferData(GL_ARRAY_BUFFER, m_textures.size() * sizeof(vector2f), &m_textures[0], GL_STREAM_DRAW);
 
// définition de la taille mémoire pour les index
glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, m_vboIds[ENUM_InfosVBO::INDICES]);
glBufferData(GL_ELEMENT_ARRAY_BUFFER, m_indices.size() * sizeof(unsigned int), &m_indices[0], GL_STREAM_DRAW);
 
// définition de la taille mémoire pour la texture de l'icon (SpriteSheet)
glBindBuffer(GL_ARRAY_BUFFER, m_vbo->getVboIdsById(C_GLVbo::ENUM_InfosVBO::TEXTURE_1));
glBufferData(GL_ARRAY_BUFFER, m_coordsIcon.size() * sizeof(vector2f), &m_coordsIcon[0], GL_STREAM_DRAW);
 
 
//////////////////////
// UnBind
glBindBuffer(GL_ARRAY_BUFFER, 0);
glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, 0);
glBindTexture(GL_TEXTURE_2D, 0);
 
//////////////////////
// Draw
 
// vertices
glEnableClientState(GL_VERTEX_ARRAY);
glBindBuffer(GL_ARRAY_BUFFER, m_vboIds[ENUM_InfosVBO::VERTICES]);
glVertexPointer(3, GL_FLOAT, 0, 0);
 
// Texture background
glEnableClientState(GL_TEXTURE_COORD_ARRAY);
glActiveTexture(GL_TEXTURE0);
glBindTexture(GL_TEXTURE_2D, m_idsTexture[0]);
glBindBuffer(GL_ARRAY_BUFFER, m_vboIds[ENUM_InfosVBO::TEXTURE_0]);
glTexCoordPointer(2, GL_FLOAT, 0, 0);
glEnable(GL_TEXTURE_2D);
 
// Texture icon
glEnableClientState(GL_TEXTURE_COORD_ARRAY);
glBindBuffer(GL_ARRAY_BUFFER, m_vbo->getVboIdsById(C_GLVbo::ENUM_InfosVBO::TEXTURE_1));
glTexCoordPointer(2, GL_FLOAT, 0, 0);
glEnable(GL_TEXTURE_2D);
 
 
// Dessine
glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, m_vbo->getVboIdsById(C_GLVbo::ENUM_InfosVBO::INDICES));
glDrawElements(GL_QUADS, m_vbo->getIndices().size(), GL_UNSIGNED_INT, 0);
 
 
//////////////////////
// End Dranw
 
// End icon
glBindTexture(GL_TEXTURE_2D, 0);
glDisableClientState(GL_TEXTURE_COORD_ARRAY);
 
// End Vertex
glDisableClientState(GL_VERTEX_ARRAY);
 
// End Texture Background
glBindTexture(GL_TEXTURE_2D, 0);
glDisableClientState(GL_TEXTURE_COORD_ARRAY);
glDisable(GL_TEXTURE_2D);
 
// End Buffer
glBindBuffer(GL_ARRAY_BUFFER, 0);

En effet les tuto aide sur le multitexturage mais c'est la ou est mon problème car il indique tous le temps avec une texture différente mais pas un spritesheet et je n'arrive pas a comprendre la différence entre deux et une seul texture.

J'ai également essayer avec un vertex shader et fragment shader mais aucun résultat soit j'ai que l'icon qui apparait soit rien

voici se que j’obtiens avec le code ci-dessus :



Par contre je n'est pas le code d’essais avec le Shader ou glTextEnvi car j'ai également essayer avec la modification de l'environnement mais aucun résultat pour réussir a fusionner les deux image sur les même vertices

[LittleWhite]

Il faut suivre le tuto de multitexturing, mais en utilisant plusieurs fois la même texture (passer plusieurs fois le même ID de texture, puis une fois que cela marche, simplifier pour éliminer les ID de texture inutile et n'en garder plus qu'un). Ensuite, second point : il vous faut un fragment shader. C'est obligation pour que vous puissiez faire ce que vous souhaitez.

Enfin ... je viens de penser une autre méthode (et j'ai été naze de ne pas y penser avant). Pourquoi ne pas utiliser SFML/SDL, pour vos rendus, car ils ne semble qu'en 2D ? Sinon, si vous voulez garder OpenGL, pas de souci et je vous présente l'astuce : chaque fois que vous voulez dessiner un sprite, demandez à votre application de dessiner un carré à la bonne position avec les coordonnées de texture correspondant au sprite à afficher.

Sur un spritesheet de quatres sprites carrés (oui, il est naze mon spritesheet, mais c'est pour l'exemple), les coordonnées de texture seront, par exemple, pour le sprite en haut à droite :
0.5 ; 0.0
1.0 ; 0.0
1.0 ; 1.0
0.5 ; 1.0
(Je suis dans le sens des aiguilles d'une montre et le y est vert le bas.)
Et paf, vous aurez votre sprite, nickel, sur l'image et sans grande difficulté et sans multitexturing !

[ksta.k]

Je doit utiliser opengl car je suis en examen final de mon école et je doit rendre mon jeux fini mardi prochain. Les condition est d'utiliser opengl.

Pour éviter le multitexturing j'ai penser comme vous (faire un carrée et positionner les texture dessus) mais je pensais que sans multitexturing je pouvais le faire avec qu'un seul carrée. Donc la solution serait que je rajoute 4 autre vertex dans mon buffer et que je plaque une texture par vertex c'est bien sa?

Pour le moment en effet chaque icon à une position entre 0-1 (la dessus je les récupère bien)

j'ai en tous ceci :


v0 V1 T0-0 T0-1 T1-0 T1-1
+------+ +------+ +------+
| | | | | |
+------+ +------+ +------+
V2 V3 T0-2 T0-3 T1-2 T1-3


buffer Vextex = V0, V1, V2, V3 m_vboIds[VERTEX]
buffer Texture 0 = T0-0, T0-1, T0-2, T0-3 m_vboIds[TEXTURE_0]
buffer Texture 1 = T1-1, T1-1, T1-2, T1-3 m_vboIds[TEXTURE_1]


Donc Si j'ai bien compris je rajoute 4 vertex (rectangle) au buffer de vertices puis j'utilise la même méthode que je fait? Ou j'y vais avec GLBegin etc...

Je me pose également la question c'est est-ce que le fait d'avoir 4 vertices au ême endroit ne sera pas ambigue pour openGL quand je vais luis passer les deux texture?

Merci encore de votre aide.

[LittleWhite]

Bon, je vais totalement eclipser la technique du multitexturing, car elle n'est pas utile.
Vous devez afficher autant de carré que vous avez de sprite à afficher. Pour la création du buffer, il y a plusieurs techniques, j'imagine mais voici une :

• Créez un tampon d'une taille de 4 vertex (position/texture coords) * le nombre de sprite à afficher ;
• remplissez le tampon ;
• faites le draw call pour afficher.

Il faudra faire attention à l'ordre de remplissage, car c'est cela qui détermine l'ordre des sprites sur l'écran.

Sinon la seconde technique c'est de faire un tampon contenant un seul carré et de l'afficher autant de fois que vous avez de sprite. Mais bon, c'est lourd et moins facile je pense.

[ksta.k]

alors la sa j'y avais pas du tous penser

J'essaye de suite ceci et je reviens vers vous si j'ai des soucie ou même en cas de réussite pour vous informer

merci encore

[ksta.k]

Désoler pour le temps de réponse mais j'ai eu un soucie avec ma skybox je ne c'est pas pourquoi mais c'est régler

J'ai également tester votre aproche et elle fonctionne à merveille voici le résultat lorsque j'affiche mes icons dans opengl :



Maintenant j'essaye d'afficher l'icon play sur le fond du bouton orange mais impossible de les afficher l'un sur l'autre car il ont des positions différents

Si je l'est met à la même position avec 4 vertices pour chaque cela m'affiche que mon fond orange et pas l'icon play

Code :

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

1
2
3
4
5
6
7
8
9
10
 
                /////////////////////////
                //     En mettant ces indices j'arrive à avoir les deux icons mais en dessous de l'autre
                GLuint indices[8]{
			40,41,42,43,
			120,121,122,123
		};
 
		glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, m_vbo->getVboIdsById(C_GLVbo::ENUM_InfosVBO::INDICES));
		glDrawElements(GL_QUADS, 8, GL_UNSIGNED_INT, &indices);

voici le résultat avec ces indices :



Je suis désoler de vous embêter encore mais pouvez vous m'indiquer si je suis complètement à coter de la solution (si je fait pas du tous se qui faut...)

Car je n'arrive pas à comprendre comment fusionner les deux alors qu'ils ont tous les deux 4 vertices différents

[ksta.k]

C'est bon j'ai trouver le problème

en faite des que je superpose deux images du spriteSheet l'alpha disparait et se transforme en noire comme on peut le voire ci-dessous :


j'ai donc penser à modifier le Z-index de chaque vertices de l'icon et la magie sa marche


lorsque je parcoure le fichier qui contient les informations des (taille, position, etc...) j'ajoute à ce moment la un z-index -0.001 * i

Je sais pas du tous si cela est propre au niveau du code mais par hasard, est-ce que vous savez si il est possible sans modifier le z-index (et sans multexturing :p ) de faire en sorte que j'évite de modifier le z-index?

cela me permettrait d'avoir un système moins dépendant du z-index?

Je vous remercie également pour votre aide car grâce à cela j'ai appris beaucoup plus sur les VBO et leur utilisation

[ksta.k]

C'est bon j'ai enfin terminer avec ces icons l'erreur de venais du fait que je dessinais le fond apres l'icon dans mes index et donc l'alpha n'était pas pris en charge.

Je vous remercie de votre aide. Tous fonctionne à merveille, mais une fois mon examen final rendu je me pencherais plus sur le multitexture pour une meilleur optimisation.

Merci encore

[LittleWhite]

Bien joué