Come disegnare una texture come sfondo 2D in OpenGL ES 2.0?

Question

Sono appena iniziato con OpenGL ES 2.0, quello che mi piacerebbe fare è creare qualche semplice uscita 2D. Dato una risoluzione di 480x800, come posso disegnare una trama di sfondo?

[Il mio ambiente di sviluppo è Java / Android, in modo da esempi direttamente relativi a tale sarebbe meglio, ma altre lingue andrebbe bene.]

Answer 1

Anche se sei su Android, ho creato un'applicazione di esempio iPhone che fa questo per fotogrammi del video in arrivo. È possibile scaricare il codice per questo esempio da here . Ho un interessante resoconto su questa applicazione, che fa il monitoraggio oggetto di colore a base di utilizzo di video dal vivo, che si può leggere qui .

In questa applicazione, traggo due triangoli per generare un rettangolo, quindi texture che utilizzando le seguenti coordinate:

   static const GLfloat squareVertices[] = {
        -1.0f, -1.0f,
        1.0f, -1.0f,
        -1.0f,  1.0f,
        1.0f,  1.0f,
    };

    static const GLfloat textureVertices[] = {
        1.0f, 1.0f,
        1.0f, 0.0f,
        0.0f,  1.0f,
        0.0f,  0.0f,
    };

Per passare attraverso il fotogramma video come texture, uso un semplice programma con il seguente vertex:

attribute vec4 position;
attribute vec4 inputTextureCoordinate;

varying vec2 textureCoordinate;

void main()
{
    gl_Position = position;
    textureCoordinate = inputTextureCoordinate.xy;
}

e il seguente frammento di shader:

varying highp vec2 textureCoordinate;

uniform sampler2D videoFrame;

void main()
{
    gl_FragColor = texture2D(videoFrame, textureCoordinate);
}

Il disegno è una semplice questione di usare il programma giusto:

glUseProgram(directDisplayProgram);

Impostazione della divisa texture:

glActiveTexture(GL_TEXTURE0);
glBindTexture(GL_TEXTURE_2D, videoFrameTexture);

glUniform1i(uniforms[UNIFORM_VIDEOFRAME], 0);   

impostando gli attributi:

glVertexAttribPointer(ATTRIB_VERTEX, 2, GL_FLOAT, 0, 0, squareVertices);
glEnableVertexAttribArray(ATTRIB_VERTEX);
glVertexAttribPointer(ATTRIB_TEXTUREPOSITON, 2, GL_FLOAT, 0, 0, textureVertices);
glEnableVertexAttribArray(ATTRIB_TEXTUREPOSITON);

e poi disegnare i triangoli:

glDrawArrays(GL_TRIANGLE_STRIP, 0, 4);

Answer 2

È in realtà non disegnare un fondo, invece si disegna un rettangolo (o, anche più correttamente: due triangoli che formano un rettangolo) e impostare una texture a quello. Questo non è affatto diverso dal disegno qualsiasi altro oggetto sullo schermo.

Ci sono un sacco di posti che mostrano come questo è fatto, forse c'è anche un progetto di esempio che mostra Android questo.

La parte difficile è ottenere qualcosa da display di fronte o dietro qualcos'altro. Per questo lavoro, è necessario impostare un buffer di profondità e consentire il test di profondità (glEnable (GL_DEPTH_TEST)). E i tuoi vertici bisogno di avere una coordinata Z (e dire che i vostri glDrawElements vertici sono costituiti da tre valori, non due).

Se non lo fai, gli oggetti sarà reso nell'ordine loro glDrawElements () funzioni sono chiamate (significato a seconda di quale si disegna ultimo finirà per oscurare tutto il resto).

Il mio consiglio è di non avere un'immagine di sfondo o fare nulla di fantasia fino ad ottenere il blocco di esso. OpenGL ES 2.0 è tipo di una curva di apprendimento ripida, e tutorial su ES 1.x non realmente di aiuto con ottenere 3D per il lavoro, perché possono utilizzare le funzioni di supporto come gluPerspective, che 2,0 semplicemente non ha. Inizia con la creazione di un triangolo su uno sfondo di nulla. Avanti, lo rendono un quadrato. Poi, se si vuole andare già fantasia, aggiungere una texture. Gioca con le posizioni. Vedi cosa succede quando si cambia il valore Z dei vostri vertici. (Suggerimento: Non molto, se non si dispone di test di profondità abilitato E anche allora, se non si dispone di proiezione prospettica, gli oggetti non otterrà più piccolo è il più sono lontani, così sarà ancora sembrerà come se nulla. successo)

Dopo alcuni giorni, smette di essere così dannatamente frustrante, e finalmente "get it", per lo più.