UV mapping sur un polygone composé de deux triangles

Version imprimable

09/07/2013, 20h03
dawadam

UV mapping sur un polygone composé de deux triangles

Bonjour
J'utilise jPTC-AE pour faire de la 3D sous Android.
Mon problème est tout simple, j'ai un polygone composée de 4 vertices, cette face est faite avec deux triangles, car je n'ai pas le choix avec Open GL ES.
J'applique une texture dessus avec la technique UV mais on voit la séparation des deux triangles.

http://img11.hostingpics.net/pics/53...0709195953.png

Comment faire pour éviter ça ?
09/07/2013, 20h31
Gakusei

Bonjour,

Peut-on voir les coordonnées des vertices? Et le code aussi si vous pouvez.

Voici :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/** Vertices **/
				SimpleVector upperLeftFront = new SimpleVector(-3, -3.5, 2);
				SimpleVector upperRightFront = new SimpleVector(0.5, -3.5, 2);
				SimpleVector lowerLeftFront = new SimpleVector(0, 0, 0);
				SimpleVector lowerRightFront = new SimpleVector(2, 0, 0);
 
 
/** FACES **/
 
				// Front
				box.addTriangle(upperLeftFront, 0, 0, lowerLeftFront, 0, 1,
					upperRightFront, 1, 0, orangeID);
				box.addTriangle(upperRightFront, 1, 0, lowerLeftFront, 0, 1,
					lowerRightFront, 1, 1, orangeID);

Et donc on met les coordonnées UV dans la définition des faces.
Voir la javadoc de la méthode "addTriangle".

10/07/2013, 11h07
Gakusei

Les vertices appartiennent bien au même plan.

Je ne connais pas jPTC-AE mais peut-être que c'est dû à la définition des normales: normale par polygone (à mettre) ou normale par vertice (ton cas).
Logiquement si c'est le cas tu dois aussi voir apparaître la séparation sans la texture.

Du-coup j'ai fais un test avec Open GL ES, le soucis est le même :

http://img4.hostingpics.net/pics/326...0710113514.png

Ci-dessous le code (les vertices sont toujours sur le même plan) :

Code:

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
// Vertices
float[] vertices = { 
	-3, 3.5f, 2,
	0.5f, 3.5f, 2,
	0, 0, 0,
	2, 0, 0
};
 
// Indices
byte indices[] = {
	0, 1, 3, 0, 3,2
}
 
// Mapping
float texture[] = {
	0f, 0.0f, 0.0f, 1f, 1f, 0.0f, 1.0f, 1.0f,
}
 
		//
		ByteBuffer byteBuf = ByteBuffer.allocateDirect(vertices.length * 4);
		byteBuf.order(ByteOrder.nativeOrder());
		vertexBuffer = byteBuf.asFloatBuffer();
		vertexBuffer.put(vertices);
		vertexBuffer.position(0);
 
		//
		byteBuf = ByteBuffer.allocateDirect(texture.length * 4);
		byteBuf.order(ByteOrder.nativeOrder());
		textureBuffer = byteBuf.asFloatBuffer();
		textureBuffer.put(texture);
		textureBuffer.position(0);
 
		//
		indexBuffer = ByteBuffer.allocateDirect(indices.length);
		indexBuffer.put(indices);
		indexBuffer.position(0);

J'ajoute les méthodes draw et load texture (c'est un tutoriel) :

Code:

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
74
75
76
77
78
79
80
81
/**
         * The object own drawing function. Called from the renderer to redraw this
         * instance with possible changes in values.
         * 
         * @param gl
         *            - The GL Context
         */
	public void draw(GL10 gl) {
		// Bind our only previously generated texture in this case
		gl.glBindTexture(GL10.GL_TEXTURE_2D, textures[0]);
 
		// Point to our buffers
		gl.glEnableClientState(GL10.GL_VERTEX_ARRAY);
		gl.glEnableClientState(GL10.GL_TEXTURE_COORD_ARRAY);
 
		// Set the face rotation
		gl.glFrontFace(GL10.GL_CCW);
 
		// Enable the vertex and texture state
		gl.glVertexPointer(3, GL10.GL_FLOAT, 0, vertexBuffer);
		gl.glTexCoordPointer(2, GL10.GL_FLOAT, 0, textureBuffer);
 
		// Draw the vertices as triangles, based on the Index Buffer information
		gl.glDrawElements(GL10.GL_TRIANGLES, indices.length,
				GL10.GL_UNSIGNED_BYTE, indexBuffer);
 
		// Disable the client state before leaving
		gl.glDisableClientState(GL10.GL_VERTEX_ARRAY);
		gl.glDisableClientState(GL10.GL_TEXTURE_COORD_ARRAY);
	}
 
	/**
         * Load the textures
         * 
         * @param gl
         *            - The GL Context
         * @param context
         *            - The Activity context
         */
	public void loadGLTexture(GL10 gl, Context context) {
		// Get the texture from the Android resource directory
		InputStream is = context.getResources()
				.openRawResource(R.drawable.orange);
		Bitmap bitmap = null;
		try {
			// BitmapFactory is an Android graphics utility for images
			bitmap = BitmapFactory.decodeStream(is);
 
		} finally {
			// Always clear and close
			try {
				is.close();
				is = null;
			} catch (IOException e) {
			}
		}
 
		// Generate one texture pointer...
		gl.glGenTextures(1, textures, 0);
		// ...and bind it to our array
		gl.glBindTexture(GL10.GL_TEXTURE_2D, textures[0]);
 
		// Create Nearest Filtered Texture
		gl.glTexParameterf(GL10.GL_TEXTURE_2D, GL10.GL_TEXTURE_MIN_FILTER,
				GL10.GL_NEAREST);
		gl.glTexParameterf(GL10.GL_TEXTURE_2D, GL10.GL_TEXTURE_MAG_FILTER,
				GL10.GL_LINEAR);
 
		// Different possible texture parameters, e.g. GL10.GL_CLAMP_TO_EDGE
		gl.glTexParameterf(GL10.GL_TEXTURE_2D, GL10.GL_TEXTURE_WRAP_S,
				GL10.GL_REPEAT);
		gl.glTexParameterf(GL10.GL_TEXTURE_2D, GL10.GL_TEXTURE_WRAP_T,
				GL10.GL_REPEAT);
 
		// Use the Android GLUtils to specify a two-dimensional texture image
		// from our bitmap
		GLUtils.texImage2D(GL10.GL_TEXTURE_2D, 0, bitmap, 0);
 
		// Clean up
		bitmap.recycle();
	}

Alors comment utiliser les normales ?

10/07/2013, 12h20
Gakusei

2 pièce(s) jointe(s)

En fait l'effet de séparation apparaît car les 2 triangles sont différents du coup le mapping vas interpoler la texture et les lignes des carreaux ne seront plus droites au niveau de la diagonale.
Si tu avais mis les vertices d'un parallélogramme, rectangle ou carré tu n'aurait pas ce problème.

Une solution ici serait que tu face une interpolation des u,v définissant les coins de sorte à garder la même largeur de carreau.

En gros ton quadrialtere ABCD aura comme coord de texture:
(0,0),
(0,1),
(1,0),
(1,AB/CD)
10/07/2013, 13h33
dawadam

1 pièce(s) jointe(s)

Je vois, mais cette solution ne convient pas, car je souhaite conserver la texture complète.
La déformer, sans la couper.
22/07/2013, 18h28
dawadam

2 pièce(s) jointe(s)

Déformation de texture
Je cherche à positionner une texture sur une face plane.
La face n'est pas rectangle et lorsque j'applique la texture sur les deux triangles qui la compose, on voit la séparation.
Comment afficher une texture sans cette séparation ?
En fichier joint, ma texture et le résultat.

Ci-dessous les vertices et le mapping UV correspondant :
Code:

1 2 3 4 5 6 7 8 9 10 11 // vertices 0, 0, 0, // bas gauche 3, 0, 0, // bas droite 1, 4, 2, // haut droite -4, 4, 2 // haut gauche // mapping UV 0, 1, 1, 1, 1, 0, 0, 0
23/07/2013, 10h15
LittleWhite

Bonjour,

Je dois dire que je ne vois pas comment la déformation pourrait être éviter, vous ne dessinez pas un rectangle alors que la texture est un rectangle. Il est donc obligé d'avoir une déformation.
23/07/2013, 10h24
dawadam

Merci pour la réponse (et la fusion des sujets).
Je souhaite conserver la déformation de la texture, qu'elle soit en forme de trapèze au lieu d'un rectangle me convient.
Le souci est concernant la séparation.
Étant donné que je ne peut la dessiner autrement qu'avec deux triangles, on voit apparaitre une arrête entre les deux.
Existe-il par exemple une autre solution de placage des textures ?
Différent qu'en UV mapping.
23/07/2013, 13h01
plegat

Salut,

Ca doit être le même soucis que là: http://www.developpez.net/forums/d25...tique-texture/, qui donne quelques explications. Mais ça utilise du glTexCoord2f et du glTexCoord4f...

Voir aussi ceci qui peut donner une piste...

Mais à adapter pour pouvoir être utilisé en OpenGL ES...