affichage de texte 2D

**yvesall** · 06/08/2009, 14h08

bonjour tout le monde !

comme à ma grande habitude je me pose des questions existentielle dans le développement en tout genre, c'est donc suite à cette série de questions que je suis amené auprès de ce merveilleux forum pour la Nième fois

bon ! pour écourter ce topic, je fais de l'affichage de texte 2D en openGL (jusque là rien de surprenant).

j'utilise une méthode traditionnelle sans glut, ou autre lib additionnelle, qui consiste a découper un fragment de texture contenant tout mon alphabet (et un peu plus), puis de l'apposer sur un Quad pour enfin créer une image aux allures de caractère alphabétique

c'est là que mon problème se pose, plus les caractères sont petits, plus ils apparaissent flou.
je suppose donc que cela vient soit :
- d'un filtrage des textures lors de leur affichage
- d'un filtrage lors de la création de la texture (sachant que ma texture est parfaite sous mon éditeur d'image, je parle donc du chargement sous OpenGL)

voici en premier lieu ma fonction de chargement d'image, elle est faite maison, et est inspirée d'à peu près tout les tuto trouvé sur le Net
(il est a noter que ma lib de fenêtrage et d'événement est SDL)

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
 
GLuint  LoadTexture(const char *path)
{
    SDL_Surface*	surface = IMG_Load(path);
    GLuint			texture = 0;
 
    if (surface)
    {
		SDL_Surface*	fliped_surface = SDL_CreateRGBSurface(SDL_SWSURFACE, surface->w,surface->h, surface->format->BitsPerPixel, surface->format->Rmask, surface->format->Gmask, surface->format->Bmask, surface->format->Amask);
		SDL_LockSurface(surface);
		SDL_LockSurface(fliped_surface);
		int pitch = surface->pitch;
		for (int current_line = 0; current_line < surface->h; ++current_line)
		memcpy(&((unsigned char*)fliped_surface->pixels)[current_line * pitch], &((unsigned char*)surface->pixels)[(surface->h - 1  - current_line) * pitch], pitch);
		SDL_UnlockSurface(fliped_surface);
		SDL_UnlockSurface(surface);
		SDL_FreeSurface(surface);
		surface = fliped_surface;
 
		glGenTextures(1, &texture);
		glBindTexture(GL_TEXTURE_2D, texture);
 
		glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_REPEAT);
		glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_REPEAT);
		glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);
		glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);
 
		if (surface->format->BitsPerPixel == 32)
			glTexImage2D(GL_TEXTURE_2D, 0, 4, surface->w, surface->h, 0, GL_RGBA, GL_UNSIGNED_BYTE, surface->pixels);
		else
			glTexImage2D(GL_TEXTURE_2D, 0, 3, surface->w, surface->h, 0, GL_RGB, GL_UNSIGNED_BYTE, surface->pixels);
		SDL_FreeSurface(surface);
    }
	else
		std::cerr << "Error: " << path << " file dosen't exists" << std::endl;
    return (texture);
}

puis une ébauche de ma fonction d'affichage de texte

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
 
//Start 2D
glDisable(GL_DEPTH_TEST);
glMatrixMode(GL_PROJECTION);
glPushMatrix();
glLoadIdentity();
gluOrtho2D(0, width, 0, height);
glMatrixMode(GL_MODELVIEW);
glPushMatrix();
glLoadIdentity();
 
glEnable(GL_BLEND);
glEnable(GL_COLOR_MATERIAL);
glEnable(GL_TEXTURE_2D);
 
glBindTexture(GL_TEXTURE_2D, _tex[id]);
 
for (int i = 0; i < len; ++i) 
{
/*codecodecode*/
glPushMatrix();
glRotated(disp->rot, 0, 0, 1);
glTranslated(trans * disp->size, -col * disp->size, 0);
glBegin(GL_QUADS);
glColor4ub(tmpColor.R, tmpColor.G, tmpColor.B, tmpColor.A);
 
glTexCoord2d(ax * lx, (_numCharByCol - 1 - ay) * ly);
glVertex2d(disp->x, disp->y);
 
glTexCoord2d(ax * lx, (_numCharByCol - ay) * ly);
glVertex2d(disp->x, disp->size * STRHEIGHTRATIO + disp->y);
 
glTexCoord2d((ax + 1.0 ) * lx, (_numCharByCol - ay) * ly);
glVertex2d(disp->size + disp->x, disp->size * STRHEIGHTRATIO + disp->y);
 
glTexCoord2d((ax + 1.0 ) * lx, (_numCharByCol - 1 - ay) * ly);
glVertex2d(disp->size + disp->x, disp->y);
glEnd();
glPopMatrix();
}
glBindTexture(GL_TEXTURE_2D, NULL);
 
glDisable(GL_TEXTURE_2D);
glDisable(GL_COLOR_MATERIAL);
glDisable(GL_BLEND);
 
//Stop 2D
glMatrixMode(GL_PROJECTION);
glPopMatrix();
glMatrixMode(GL_MODELVIEW);
glPopMatrix();
glEnable(GL_DEPTH_TEST);

bon j'espère que tout ce code vous permettra de comprendre comment je fonctionne, et si vous pouviez m'aider, ou simplement m'expliquer pourquoi des petites Font deviennent flou, vous me seriez d'une grande aide.

pour finir voici l'image que je map pour mes caractères

EDIT : oups ! l'image est en png avec un canal Alpha, donc du blanc sur blanc, c'est pas terrible pour voir

merci

**TanEk** · 06/08/2009, 19h24

Tu as essaye en changeant :

Code :

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

1
2
3
 
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);

par :

Code :

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

1
2
3
 
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_NEAREST);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_NEAREST);

?

**yvesall** · 06/08/2009, 20h26

bonjour Tanek et merci de t'intéresser a mon souci.

oui j'avais déjà essayé ça mais le résultat en est moins bon, le rescale semble être fait sans aucun type d'interpolation, les lettres apparaissent donc tronquées.

ne devrais-je pas travailler au pixel, à la main, pour avoir un résultat optimal ?

**TanEk** · 07/08/2009, 02h01

Est-ce que je peux voir le resultat de l'affichage d'une de tes polices ?

**yvesall** · 07/08/2009, 12h20

à gauche, le résultat du chargement de texture en GL_LINEAR
à droite, le résultat en GL_NEAREST

**TanEk** · 07/08/2009, 22h28

Personnellement j'ai une appreciation differente de l'affichage de tes caracteres : plus ils apparaissent petits plus ils ont l'air tronques (et non pas flous comme tu le dis dans le premier post). La seule difference entre nearest et linear est que l'on voit le "tronquage" plus tot dans la pyramide.

Pour eviter cela il faut faire ce qui est appele la technique du mipmapping qui consiste a rendre floue ton image de base (et oui

) et ensuite a la reduire en taille (ca evitera les "tronquages"... si tu as fais un peu d'analyse du signal le phenomene que tu vois sur l'ecran s'appelle un repliement de spectre).

OpenGL a deja des fonctions pour faire ca tout automatiquement, tout est marque dans la doc.

**yvesall** · 07/08/2009, 23h50

j'applique déjà le principe du mipmapping, à partir de la 8ème ligne en partant du haut, j'utilise une image en 256*256 plutôt que celle en 512*512, d'ailleurs cela ce voit sur la lettre 'A' qui souffre d'un artefact sur la gauche de la lettre.

mon erreur est sans doute d'utiliser 2 images sans passer par les fonctionnalités d'OpenGL, je vais donc de ce pas, m'essayer à faire un mipmapping correcte.

je débrief dès que possible !

merci

**oxyde356** · 09/08/2009, 05h12

http://www.opengl.org/resources/features/fontsurvey/
Enjoy

Perso j'ai essayé FTGL c'est très bien, je crois que la plupart sont en OpenSource (si ce n'est tous j'ai pas trop regardé), si ça peut t'éviter de réinventer la roue

ou au pire ça peut t'aider à avancer

**yvesall** · 09/08/2009, 15h44

très intéressant comme ressources, je te remercies

**yvesall** · 12/08/2009, 17h34

bon pour continuer dans le concept de mipmapping, j'ai fait le teste suivant danse mon loader d'image :

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
 
		bool	useMipmap = true;
		bool	useNearest = false;
 
		if (useMipmap)
		{
			glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_REPEAT);
			glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_REPEAT);
			if (useNearest)
			{
				glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR_MIPMAP_NEAREST);
				glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR_MIPMAP_NEAREST);
			}
			else
			{
				glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR_MIPMAP_LINEAR);
				glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR_MIPMAP_LINEAR);
			}
		}
		else
		{
			glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_REPEAT);
			glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_REPEAT);
			if (useNearest)
			{
				glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_NEAREST);
				glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_NEAREST);
			}
			else
			{
				glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);
				glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);
			}
		}

et voici le résultat (j'ai au passage désactiver mon concept de mipmapping qui avait pour but de changer d'image à partir d'une certaine taille de police)

à gauche le Linear / à droite le Nearest

j'ai encore du boulot >_<

**TanEk** · 12/08/2009, 22h55

j'ai encore du boulot >_<

Non

Ce n'est pas si grave que cela. Cela veut dire que tu vas devoir generer ta mipmap manuellement (mais que la mipmap... pas la facon dont l'appliquer). Donc au lieu d'utiliser gluBuildMipMap, tu vas devoir generer ton image de police pour differentes tailles et les envoyer manuellement a ta texture. Tu as une explication ici :

http://www.cs.uiowa.edu/~cwyman/clas.../OGLmipmap.pdf

affichage de texte 2D

OpenGL

Discussions similaires

Partager

Partager