Gérer les couleurs dans OpenGL SE sous Android

Jusqu'à présent, la définition de la couleur était faîte directement dans le fragment shader via la variable gl_FragColor qui est un vecteur vec4.

La couleur est donc composée de 4 éléments qui sont: le rouge, vert, bleu et alpha pour la transparence. C'est le classique RGBA.

Couleur uniforme

Il serait intéressant de fournir cette couleur en paramètre à ce fragment shader pour permettre de définir une couleur sur l'objet que l'on veut afficher.

Une solution consiste à utiliser une variable uniforme.

Le code du shader se présente alors ainsi:

uniform vec4 uColor; void main() { gl_FragColor = uColor; }

Il reste ainsi plus qu'à déterminer la position de cette variable uniforme après compilation du code des shaders en un programme:

uColor = GLES20.glGetUniformLocation(p1GLSL.getNumProgram(), UCOLOR);

avec UCOLOR: private static final String UCOLOR = "uColor";

et enfin passer une couleur au shader: GLES20.glUniform4fv (uColor, 1, maCouleur, 0);

avec maCouleur: private final float[] maCouleur = { 255, 255, 0, 0 }; // Composantes rouge, vert, bleu et alpha

D'où les codes modifiés de la classe Triangle...

package fr.free.supertos; import java.nio.ByteBuffer; import java.nio.ByteOrder; import java.nio.FloatBuffer; import android.opengl.GLES20; public class Triangle { private FloatBuffer vertexBuffer; static final int NB_VERTEX = 3; // 3 vertice pour un triangle ! static final int NB_COORDS_PAR_VERTEX = 3; // 3 coordonnées par vertex static final int BYTES_PER_FLOAT = 4; // Un float occupe 4 octets private static final String UCOLOR = "uColor"; // Un triangle private float triangleCoords[] = { 0.0f, 1.0f, 1.0f, -1.0f, -1.0f, 1.0f, 1.0f, -1.0f, 1.0f }; public float[] getTriangleCoords() { return triangleCoords; } public void setTriangleCoords(float[] triangleCoords) { this.triangleCoords = triangleCoords; vertexBuffer.put(this.triangleCoords); // Et retransmission des coordonnées // enfin initialiser le pointeur à 0 vertexBuffer.position(0); } private int indexAPosition=0; // Index de l'attribut aPosition private final ProgramGLSL prgGLSL; private final int uPVMatrixLocation; private final float[] mPVMatrix; private float[] maCouleur = { 255 , 255 , 0 , 0 }; public float[] getMaCouleur() { return maCouleur; } public void setMaCouleur(float[] maCouleur) { this.maCouleur = maCouleur; } private int uColor; public Triangle(ProgramGLSL program, int uPVMatrixLocation, float[] mPVMatrix,){ // Création d'un byte buffer ByteBuffer bb = ByteBuffer.allocateDirect(triangleCoords.length * BYTES_PER_FLOAT); // Utiliser l'ordre correspondant à la plateforme bb.order(ByteOrder.nativeOrder()); // creer un buffer de type flottant depuis le ByteBuffer vertexBuffer = bb.asFloatBuffer(); // Et transmission des coordonnées vertexBuffer.put(triangleCoords); // enfin initialiser le pointeur à 0 vertexBuffer.position(0); prgGLSL=program; this.uPVMatrixLocation=uPVMatrixLocation; this.mPVMatrix=mPVMatrix; this.uColor=GLES20.glGetUniformLocation(program.getNumProgram(), UCOLOR); } public void draw() { int mProgram=prgGLSL.getNumProgram(); GLES20.glUniformMatrix4fv(uPVMatrixLocation, 1, false, mPVMatrix, 0); GLES20.glUniform4fv (uColor, 1, maCouleur, 0); // Indiquer les programmes shader à utiliser... GLES20.glUseProgram(mProgram); // Création d'un attribut aPosition à l'index 0 GLES20.glBindAttribLocation(mProgram, 0, "aPosition"); // Récupération de l'index, c'est juste pour l'exemple, puisqu'ici, il est déjà connu ! indexAPosition = GLES20.glGetAttribLocation(mProgram, "aPosition"); // Indiquer que l'attribut va pointer sur un buffer GLES20.glEnableVertexAttribArray(indexAPosition); // Et précision sur la construction du buffer GLES20.glVertexAttribPointer(indexAPosition, // Index de l'attribut NB_COORDS_PAR_VERTEX, // 3 informations par vertex (correspondant à x, y et z) GLES20.GL_FLOAT, // De type float false, NB_COORDS_PAR_VERTEX * BYTES_PER_FLOAT, // La taille occupée en byte par un vertex est donc 3 * taille d'un float vertexBuffer); // Et un pointeur sur le buffer // Ok, on peut dessiner maintenant ! GLES20.glDrawArrays(GLES20.GL_LINE_LOOP, 0, NB_VERTEX); // Disable du vertex array GLES20.glDisableVertexAttribArray(indexAPosition); } }

... pour mettre la multi instances de triangles avec des couleurs et des coordonnées que l'on peut passer en paramètre...

et du Renderer...

package fr.free.supertos; import static android.opengl.GLES20.GL_COLOR_BUFFER_BIT; import static android.opengl.GLES20.glClear; import static android.opengl.GLES20.glClearColor; import static android.opengl.GLES20.glViewport; import java.util.ArrayList; import java.util.List; import javax.microedition.khronos.egl.EGLConfig; import javax.microedition.khronos.opengles.GL10; import android.opengl.GLES20; import android.opengl.GLSurfaceView.Renderer; import android.opengl.Matrix; import android.util.Log; public class GLES20Renderer implements Renderer { private final static String GLES20RENDERER = "GLES20Renderer"; // Nom d'une variable unfirome qui contiendra le résultat de la matrice projection x matrice view private final static String UPVMATRIX = "uPVMatrix"; Shader s1Vertex=null; Shader s1Fragment=null; private ProgramGLSL p1GLSL=null; private final float[] mPVMatrix = new float[16]; private int uPVMatrixLocation; private Triangle mTriangle; private Triangle mTriangle1; private final String vertexShaderCode = "uniform mat4 uPVMatrix;" + "attribute vec4 aPosition;\n" + "void main() {" + " gl_Position = uPVMatrix * aPosition;" + "} "; private final String fragmentShaderCode = "precision mediump float;" + "uniform vec4 uColor;" + "void main() {" + " gl_FragColor = uColor;" + "}"; @Override public void onDrawFrame(GL10 gl10) { // Log.d ("Renderer", "onDrawFrame..." ); // gl10 inutilisé car nous travaillons en 2.0 glClear(GL_COLOR_BUFFER_BIT); if (mTriangle != null) { mTriangle.draw(); mTriangle1.draw(); } else { Log.d (GLES20RENDERER, "onDrawFrame inactif, pas de triangle à dessiner."); } } @Override public void onSurfaceChanged(GL10 gl10, int width, int height) { Log.d (GLES20RENDERER, "onSurfaceChanged."); glViewport(0, 0, width, height); float ratio = (float) width > height ? (float) width / (float) height : (float) height / (float) width; // Calcul de la matrice de projection final float[] mProjectionMatrix = new float[16]; if (width > height) Matrix.frustumM(mProjectionMatrix, 0, -ratio, ratio, -1, 1, 1, 7); else Matrix.frustumM(mProjectionMatrix, 0, -1, 1, -ratio, ratio, 1, 7); // ...de la matrice view final float[] mViewMatrix = new float[16]; Matrix.setLookAtM(mViewMatrix, 0, 0, 0, -1, 0f, 0f, 0f, 0f, 1.0f, 0.0f); // et la matrice résultante de la multiplication des deux précédentes Matrix.multiplyMM(mPVMatrix, 0, mProjectionMatrix, 0, mViewMatrix, 0); } @Override public void onSurfaceCreated(GL10 gl, EGLConfig eglConfig) { Log.d (GLES20RENDERER, "onSurfaceCreated"); glClearColor(0.0f, 0.0f, 0.0f, 1.0f); // Création presque à la main d'un shader vertex s1Vertex= new Shader (GLES20.GL_VERTEX_SHADER); Log.d (GLES20RENDERER, "GL_VERTEX_SHADER création:"+s1Vertex.getError()); // Compilation du shader vertex s1Vertex.compileSourceShader(vertexShaderCode); Log.d (GLES20RENDERER, "GL_VERTEX_SHADER compilation:"+s1Vertex.getError()); if (s1Vertex.getCodeError() == Shader.SHADERNOERROR) { // Pas d'erreur, alors on continue sur le fragment s1Fragment = FactoryShader.FragmentShader(fragmentShaderCode); Log.d (GLES20RENDERER, "Fragment shader:"+s1Fragment.getError() + "=" + s1Fragment.getTailleError()); if (s1Fragment.getCodeError() == Shader.SHADERNOERROR) { // Ok, le fragment est maintenant créé, donc // Création d'une liste de shader List <Shader> listShader=new ArrayList <Shader> (); listShader.add(s1Vertex); listShader.add(s1Fragment); // Que l'on injecte ensuite dans un programme shader ProgramGLSL p1GLSL= FactoryProgramGLSL.genererProgramGLSL(listShader); Log.d (GLES20RENDERER, "Programme shader:"+p1GLSL.getError() + "=" + p1GLSL.getTailleError()); if (p1GLSL.getCodeError() != ProgramGLSL.PROGRAMNOERROR) { // Bug dans le code produit, on arrête tout ! p1GLSL.detruireProgramGLSL(); p1GLSL=null; } // Les shaders sources ne serviront plus maintenant, erreur ou pas ... s1Vertex.deleteShader(); s1Vertex=null; s1Fragment.deleteShader(); s1Fragment=null; // Initialisation d'un triangle if (p1GLSL != null) { // Récupération de la localisation de uPVMatrix uPVMatrixLocation = GLES20.glGetUniformLocation(p1GLSL.getNumProgram(), UPVMATRIX); Log.d (GLES20RENDERER, "Localisation de " + UPVMATRIX + " : " + uPVMatrixLocation); Log.d (GLES20RENDERER, "Création d'une instance de triangle"); mTriangle = new Triangle(p1GLSL, uPVMatrixLocation, mPVMatrix); mTriangle1 = new Triangle(p1GLSL, uPVMatrixLocation, mPVMatrix); float [] autreCouleur = {0, 0, 255, 0}; float triangleCoords[] = { 0.0f, 1.5f, 1.0f, -1.0f, -0.5f, 1.0f, 1.0f, -0.5f, 1.0f }; mTriangle1.setTriangleCoords(triangleCoords); mTriangle1.setMaCouleur( autreCouleur ); } } else { // Si erreur sur fragment shader, pas la peine de continuer ! s1Vertex.deleteShader(); s1Vertex=null; s1Fragment.deleteShader(); s1Fragment=null; } } else { // Si erreur sur vertex shader, pas la peine de continuer ! s1Vertex.deleteShader(); s1Vertex=null; } } }

Pour créer deux instances de triangles et au passage mettre le fond en noir, car le rouge devient insupportable !

Au passage, on ressent de plus en plus l'utilité d'une classe abstraite pour gérer les triangles et autres figures ...

Définir la couleur au niveau des vertice

Il est possible d'indiquer une couleur à un vertex. Dans ce cas, le fragment shader va traiter la couleur entre deux vertice des pixels de la façon suivante: affichage de la couleur du premier vertex puis, pour chaque pixel entre les vertices, la couleur va varier de la couleur du premier vertex vers la couleur du second vertex. Il en sera de même pour tous les pixels d'une surface...

Pour y parvenir, la couleur sera donc passée au vertex shader via une variable de type attribut, puisque c'est lui qui traite les vertices. Ce sera ensuite à lui d'indiquer au fragment shader cette couleur, mais en passant par une variable de type "variable" (à lire dans la langue de Shakespeare). C'est en effet dans ce type de variable que la couleur pourra évoluer de pixel en pixel entre deux vertice correspondant.

Exemple de deux triangles ayant une couleur définie au niveau des vertice:

Le vertex shader:

uniform mat4 uPVMatrix; attribute vec4 aPosition; attribute vec4 aColor; varying vec4 vColor; void main() { vColor = aColor; gl_Position = aPosition * uPVMatrix; }

Et le fragment shader:

varying vec4 vColor; void main() { gl_FragColor = vColor; };

Reste à passer ces informations au vertex shader dans la classe Triangle. Deux solutions existent:

Utilisation de 2 buffers

Le principe est simple, réserver 2 buffers pour transmettre les données à OpenGL. Une pour les vertice, la seconde pour les couleurs.

private FloatBuffer colorBuffer;

private static final int NB_COORDS_PAR_COULEUR = 4; // 4 couleurs par vertex: r,v,b et alpha

private float triangleColors[] = {
0.0f, 1.0f, 1.0f, 1.0f,
1.0f, 0.0f, 0.0f, 1.0f,
0.0f, 0.0f, 1.0f, 1.0f
};

Ensuite un ajout dans le constructeur la réservation de la mémoire utilisée entre DALVIK et le système natif après celle utilisée pour les coordonnées des vertice:

// réutilisation de l'instance byte buffer pour les couleurs
bb = ByteBuffer.allocateDirect(triangleColors.length * BYTES_PER_FLOAT);

// Utiliser l'ordre correspondant à la plateforme
bb.order(ByteOrder.nativeOrder());

// creer un buffer de type flottant depuis le ByteBuffer
colorBuffer = bb.asFloatBuffer();

// Et transmission des couleurs
colorBuffer.put(triangleColors);
// enfin initialiser le pointeur à 0
colorBuffer.position(0);

Lors de l'appel à la méthode draw:

GLES20.glBindAttribLocation(mProgram, 1, "aColor");

indexAColor = GLES20.glGetAttribLocation(mProgram, "aColor");

GLES20.glEnableVertexAttribArray(indexAColor);

GLES20.glVertexAttribPointer(indexAColor, // Index de l'attribut
NB_COORDS_PAR_COULEUR, // 4 informations par couleur (correspondant à r, v, b et alpha)
GLES20.GL_FLOAT, // De type float
false,
NB_COORDS_PAR_COULEUR * BYTES_PER_FLOAT, // La taille occupée en byte par un vertex est donc 4 * taille d'un float
colorBuffer); // Et un pointeur sur le buffer

pour enfin dessiner l'objet

// Ok, on peut dessiner maintenant !
GLES20.glDrawArrays(GLES20.GL_TRIANGLES, 0, NB_VERTEX);

et

// Disable des attributs du vertex array
GLES20.glDisableVertexAttribArray(indexVPosition);
GLES20.glDisableVertexAttribArray(indexAColor);

Utilisation d'un seul buffer

Bonne nouvelle, les shaders ne changent pas. Nous avons donc toujours les deux attributs comme point d'entrée pour la position et la couleur dans le vertex shader...

Par contre, il faudra être bien ordonnées dans ce que vous faîtes. Dans ce buffer sera transmis à la fois les vertice et les couleurs.

float triangle[] = {
0.0f, 1.5f, 1.0f, 3.0f, 0.0f, 1.0f, 1.0f, 1.0f,
-1.0f, -0.5f, 1.0f, 1.0f, 1.0f,1.0f,1.0f, 1.0f,
1.0f, -0.5f, 1.0f, 1.0f, 1.0f, 0.0f, 1.0f, 1.0f
};

Déjà le tableau est plus difficile à lire non ?

Les 4 premières informations sont les coordonnées homogènes d'un vertex, puis les 4 suivantes sont les composantes rouge, vert, bleu et alpha de la couleur du vertex...

La définition du buffer reste classique:

// Création d'un byte buffer pour les vertice
ByteBuffer bb = ByteBuffer.allocateDirect(triangle.length * BYTES_PER_FLOAT);

// Utiliser l'ordre correspondant à la plateforme
bb.order(ByteOrder.nativeOrder());

// creer un buffer de type flottant depuis le ByteBuffer
vertexBuffer = bb.asFloatBuffer();

// Et transmission des coordonnées
vertexBuffer.put(triangle);
// enfin initialiser le pointeur à 0
vertexBuffer.position(0);

C'est dans la phase affichage qu'il faudra faire attention:

Un tableau, mais deux pointeurs...

// Création d'un attribut aPosition à l'index 0
GLES20.glBindAttribLocation(mProgram, 0, "aPosition");
GLES20.glBindAttribLocation(mProgram, 1, "aColor");

// Récupération de l'index, c'est juste pour l'exemple, puisqu'ici, il est déjà connu !
indexVPosition = GLES20.glGetAttribLocation(mProgram, "aPosition");
indexAColor = GLES20.glGetAttribLocation(mProgram, "aColor");

// Indiquer que l'attribut va pointer sur un buffer
GLES20.glEnableVertexAttribArray(indexVPosition);

GLES20.glEnableVertexAttribArray(indexAColor);

C'est là que se trouve le plus important:

// Dans le tableau, les coordonnées commencent à la position 0

vertexBuffer.position (0);
GLES20.glVertexAttribPointer(indexVPosition, // Index de l'attribut

// Pas de changement ici
NB_COORDS_PAR_VERTEX, // 4 informations par vertex (correspondant à x, y, z et w)
GLES20.GL_FLOAT, // De type float
false,

// Par contre, le pas lui change, il faut en effet "sauter les couleurs", car on ne traite que les positions ici. Le pas devra donc comprendre la taille occupé par les positions + celle des couleurs,

// Mais il s'agit d'un pas dont l'unité et l'octet: il faut donc multiplier le résultat précédent par la taille d'un float en octet
(NB_COORDS_PAR_VERTEX + NB_COORDS_PAR_COULEUR) * BYTES_PER_FLOAT, // La taille occupée en byte par un vertex est donc 3 * taille d'un float
vertexBuffer); // Et un pointeur sur le buffer

// Pour les couleurs, la position n'est pas en 0, mais commence à 4, les 4 premières informations sont toujours les coordonnées ! C'est extrémement important, sinon, vous obtiendrez n'importe quoi comme rendu !

vertexBuffer.position (NB_COORDS_PAR_VERTEX);

GLES20.glVertexAttribPointer(indexAColor, // Index de l'attribut

// Rien de particulier ici

NB_COORDS_PAR_COULEUR, // 4 informations par couleur (correspondant à r, v, b et alpha)
GLES20.GL_FLOAT, // De type float
false,

// Là aussi, calculé le pas en octet en n'oubliant pas qu'il faut se d"placer de la taille qu'occupe les coordonnées et la couleur
(NB_COORDS_PAR_VERTEX + NB_COORDS_PAR_COULEUR) * BYTES_PER_FLOAT, // La taille occupée en byte par un vertex est donc 4 * taille d'un float
vertexBuffer); // Et un pointeur sur le buffer

Restera à dessiner le triangle

GLES20.glDrawArrays(GLES20.GL_TRIANGLES, 0, NB_VERTEX);

et

// Disable des attributs du vertex array
GLES20.glDisableVertexAttribArray(indexVPosition);
GLES20.glDisableVertexAttribArray(indexAColor);

Annexes

Une classe intéressante: Color sous Android (Déjà abordé dans Dessiner sous Android dans le développement sous Android).