Aula Prática: Introdução à OpenGL
Disciplina: Computação Gráfica
Professora: Isabel Harb Manssour
 

O objetivo desta aula é aprender a utilizar a biblioteca OpenGL. Para isto, será utilizado o projeto JOGL, uma implementação de referência que permite o desenvolvimento de programas Java com OpenGL. Inicialmente, serão utilizados apenas objetos GL e GLU.

Nas aulas práticas será utilizado o ambiente de programação Eclipse. Em princípio, tanto este ambiente como a biblioteca JOGL já estão instalados no laboratório. Portanto, logo abaixo é explicado como utilizá-los. Caso queiras instalar a JOGL em casa, é necessário: fazer o download da JOGL clicando aqui ou aqui; descompactar o arquivo zip; modificar a variável CLASSPATH para incluir o caminho completo para os arquivos jogl.jar e gluegen-rt.jar; modificar a variável PATH para incluir o caminho para a pasta lib criada ao descompactar o arquivo zip.

Para implementação de aplicações OpenGL na linguagem de programação Java utilizando o Eclipse é necessário configurar o projeto da seguinte maneira: (1) Criar um novo projeto; (2) Indicar que os arquivos .jar devem ser incluídos como "External JAR" (Menu Project -> Opção Properties -> Item Java Build Path -> Aba Libraries -> Botão Add External JARs); (3) Incluir as DLLs existentes na pasta lib, criadas quando o arquivo zip da JOGL foi descompactado, no diretório Windows/System32 ou no próprio projeto (Menu File -> Opção import -> Item general, file system -> Selecionar as DLLs); (4) Inserir os arquivos .java. Clicando aqui, você pode obter os códigos fontes que serão utilizados na aula de hoje. Para informações mais detalhadas de como configurar o Eclipse, clique aqui (meus agradecimentos ao Régis Araújo e ao prof. Marcelo Cohen). Para informações mais detalhadas de como configurar o JOGL com o Eclipse no Linux, clique aqui (meus agradecimentos ao Diego Medaglia que elaborou o tutorial).

Inicialmente, verifique o conteúdo do programa fonte fornecido para tentar entender o seu conteúdo. Depois, compile e execute o programa que abrirá uma janela com fundo branco e um triângulo, conforme mostra a próxima figura.

Observe atentamente o código para entender o seu funcionamento, considerando a estrutura básica de um programa OpenGL:

  • Criação de uma janela swing com um GLCanvas;
  • Criação de um objeto que irá gerenciar os eventos (GLEventListener);
  • Implementação da classe responsável pelo rendering e pelo gerenciamento dos eventos (no exemplo, a Renderer2D.java);

Agora altere o código fonte conforme descrito a seguir e, a cada alteração, execute novamente o programa para verificar os resultados obtidos. Em caso de dúvida, consulte a professora ou o tuturial de introdução à OpenGL disponível em http://www.inf.pucrs.br/~manssour/OpenGL/Tutorial.html.

  • Troque a cor de fundo da janela, modificando os argumentos da chamada da função gl.glClearColor(0.0f, 0.0f, 0.0f, 1.0f), e as cores do desenho (gl.glColor3f(1.0f, 0.0f, 0.0f);); Deixe a cor de fundo como preto;
  • Ao invés de passarmos três números float para especificar a cor do desenho, é possível passar três números inteiros, entre 0 e 255, ou seja, um byte. Para isso, altere a chamada da função gl.glColor3f para gl.glColor3ub e passe números entre 0 e 255 para especificar a cor do objeto (use um cast para byte, como, por exemplo, gl.glColor3ub((byte)0, (byte)0, (byte)255));
  • Desenhe duas linhas que representem os eixos cartesianos do universo (use gl.glBegin(GL_LINES) e gl.glEnd(), acrescentando os quatro vértices necessários para o desenho dos eixos); Considere que as coordenadas mínimas e máximas são, respectivamente, -1.0 e 1.0. Importante: todas as rotinas de desenho devem ser chamadas a partir do método display;
  • Substitua a chamada à função gl.glBegin(GL_TRIANGLES);....gl.glEnd(); pelo desenho de um triângulo e de um quadrado, que devem ser definidos de maneira a formar uma casinha, como mostra a próxima figura. Os comandos para desenhar o "telhado" da casinha são apresentados a seguir. Tente desenhar o resto da casinha usando GL_LINE_LOOP. Observe que quando a cor é trocada de um vértice para o outro, OpenGL faz um degrade entre as cores.
    gl.glLineWidth(3); // Determina a espessura da linha que será desenhada
    gl.glBegin(GL.GL_TRIANGLES);
        gl.glColor3f(0.0f, 0.0f, 1.0f);
        gl.glVertex2f(-0.2f,0.1f);
        gl.glColor3f(1.0f, 0.0f, 0.0f);
        gl.glVertex2f(0.0f,0.22f);
        gl.glColor3f(0.0f, 0.0f, 1.0f);
        gl.glVertex2f(0.2f,0.1f);
    gl.glEnd();
  • Aplique uma tranformação geométrica de translação na casinha para mudá-la de lugar utilizando o método gl.glTranslatef(float, float, float) (importante: a translação, bem como as transformações de escala e rotação, deve ser aplicada antes que a casinha seja desenhada).

Como fazer para interagir com o programa sem que seja necessário alterar e executar o código cada vez que o objeto, por exemplo, é trocado de lugar? Neste caso, é necessário gerenciar eventos do teclado e/ou mouse. Assim como já é feito com a tecla ESC, vamos tratar o evento de outras teclas para que o usuário possa interagir com a aplicação.

Em seguida, declare os seguintes atributos na classe Renderer2D que serão inicializados, por default, com 0:
private float translacaoX, translacaoY;

Agora altere os parâmetros passados para o método gl.glTranslatef que é chamado no método display, para que sejam passados estes atributos, da seguinte maneira:
gl.glTranslatef(translacaoX, translacaoY, 0f);

Finalmente, para fazer o tratamento dos eventos, complemente a implementação do método keyPressed de maneira a permitir transladar o objeto para cima, para baixo, para a esquerda e para a direita sempre que o usuário pressionar cada uma das teclas de setas (incremente e decremente as variáveis translacaoX e translacaoY)

	public void keyPressed(KeyEvent e)
	{
		switch (e.getKeyCode())
		{	
			case KeyEvent.VK_RIGHT:	   
							break;
			case KeyEvent.VK_LEFT:	   
							break;     
			case KeyEvent.VK_UP:	   
							break;                              
			case KeyEvent.VK_DOWN:	   
							break; 		
			case KeyEvent.VK_ESCAPE:System.exit(0);
							break;
		}  
		glDrawable.display();
	}

 ../../Imagens/emban15.png (1469 bytes)

../../Imagens/E-MAIL.JPG (3237 bytes) Comentários, dúvidas, sugestões, envie um mail para [email protected]

../../Imagens/emban15.png (1469 bytes)

[Homepage CG]  [Homepage CG-SI]

Última alteração em 16 de março de 2008.