Como desenhar uma textura como um fundo 2D no OpenGL ES 2.0?

Question

Estou apenas começando com o OpenGL ES 2.0, o que eu gostaria de fazer é criar uma saída 2D simples. Dada uma resolução de 480x800, como posso desenhar uma textura de fundo?

Meu ambiente de desenvolvimento é Java / Android, então exemplos diretamente relacionados a isso seria melhor, mas outros idiomas ficariam bem.

Answer 1

Mesmo que você esteja no Android, criei um aplicativo de amostra do iPhone que faz isso para os quadros de vídeo entrando. Você pode baixar o código para esta amostra de aqui. Eu tenho uma redação sobre este aplicativo, que faz rastreamento de objetos baseado em cores usando vídeo ao vivo, que você pode ler aqui.

Neste aplicativo, desenho dois triângulos para gerar um retângulo e depois textura que usando as seguintes coordenadas:

   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,
    };

Para passar pelo quadro de vídeo como uma textura, uso um programa simples com o seguinte shader:

attribute vec4 position;
attribute vec4 inputTextureCoordinate;

varying vec2 textureCoordinate;

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

e o seguinte shader de fragmento:

varying highp vec2 textureCoordinate;

uniform sampler2D videoFrame;

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

O desenho é uma questão simples de usar o programa certo:

glUseProgram(directDisplayProgram);

Definindo o uniforme de textura:

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

glUniform1i(uniforms[UNIFORM_VIDEOFRAME], 0);   

Definindo os atributos:

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 depois desenhando os triângulos:

glDrawArrays(GL_TRIANGLE_STRIP, 0, 4);

Answer 2

Você realmente não desenha um fundo, em vez disso, desenha um retângulo (ou, ainda mais corretamente: dois triângulos formando um retângulo) e define uma textura para isso. Isso não é diferente, desde desenhar qualquer outro objeto na tela.

Existem muitos lugares mostrando como isso é feito, talvez até um projeto de exemplo do Android mostrando isso.

A parte complicada é conseguir algo para exibir na frente ou atrás de outra coisa. Para que isso funcione, você precisa configurar um buffer de profundidade e ativar o teste de profundidade (GLENABLE (GL_DEPTH_TEST)). E seus vértices precisam ter uma coordenada Z (e dizer aos elementos de Grdrawlements que seus vértices são compostos de três valores, não dois).

Se você não fizer isso, os objetos serão renderizados na ordem que suas funções GldrawElements () são chamadas (o que significa que o que você desenharei por último acabará obscurecendo o resto).

Meu conselho é não ter uma imagem de fundo ou fazer nada extravagante até que você pegue o jeito. O OpenGL ES 2.0 tem uma espécie de curva de aprendizado acentuada, e os tutoriais no ES 1.x realmente não ajudam a fazer com que o 3D funcione porque eles podem usar funções auxiliares como o Gluperspective, o que o 2.0 simplesmente não tem. Comece com a criação de um triângulo em um fundo de nada. Em seguida, faça -o um quadrado. Então, se você já quiser ser chique, adicione uma textura. Brinque com posições. Veja o que acontece quando você altera o valor z de seus vértices. (Dica: não muito, se você não tiver testes de profundidade ativados. E mesmo assim, se você não tiver projeção de perspectiva, os objetos não ficarão menores quanto mais eles estiverem fora, então ainda parecerá que nada ocorrido)

Depois de alguns dias, deixa de ser tão frustrante, e você finalmente "pega", principalmente.