Nesta aula veremos a função glVertex3f que serve para construir vértices. Vamos usá-la para construir primeiramente um quadrado e mais para frente um cubo ;D Também brincaremos um pouco mais com as funções glColor3ub e a usaremos para fazer um degradê estiloso no quadrado ;D

Explicando a Função

A função glColor3f como já disse antes constrói um vértice. Se eu quero construir um quadrado com 10 pixels por exemplo, devo criar os quatro vértices com valores 5 usando quatro vezes a função glVertex3f. O primeiro vértice é o do lado superior direito, o segundo é o do lado superior esquerdo, o terceiro o lado inferior esquerdo e o quatro (obviamente) o lado inferior direito. Vamos dar uma olhada na imagem abaixo para termos uma idéia:

O comando deve ser chamado da seguinte forma: glVertex3f(x,y,z), onde x é a largura, y a altura e z a profundidade. Para criarmos o quadrado de 10 pixels vamos usar 4 vezes a função glVertex3f seguindo a ordem dos vértices, ou seja, o primeiro glVertex3f cuidará do primeiro vértice, o segundo cuidará do segundo e assim por diante. Portanto, para montarmos nosso quadrado de 10 pixels usaremos o comando quatro vezes da seguinte forma:

glVertex3f(5,5,0);
glVertex3f(-5,5,0);
glVertex3f(-5,-5,0);
glVertex3f(5,-5,0);

Por enquanto podemos deixar o z (profundidade) como 0. Isto fará todo o quadrado com o mesmo valor de profundidade, ou seja, 0. Se quiser podemos trazer ele para mais perto de nós aumentando o valor para algo como 10 por exemplo ou então deixá-lo mais afastado colocando um valor como -10. Podemos também deixar apenas um dos vértices mais pertos fazendo algo como:

glVertex3f(5,5,0);
glVertex3f(-5,5,0);
glVertex3f(-5,-5,0);
glVertex3f(5,-5,10);

Pondo a mão na massa

Agora que temos uma idéia melhor de como usar a função glVertex3f, vamos brincar um pouco usando o código do arquivo estrutura_basica.c que foi passada na primeira aula:

Vamos apagar a parte onde está o bule de chá e o cubo e vamos fazer nosso próprio quadrado. Se quiser fazer o download do arquivo basta clicar aqui. Se quiser, também pode copiar o código do arquivo que foi postado na primeira aula, colar em algum editor e salvar.

Vamos agora editar o arquivo:

Vá até a função DISPLAY do programa e apague tudo o que estiver entre glPushMatrix() e glPopMatrix() (ou seja, as funções glColor3ub e glColor4f, que servem para definir a cor, e as funções glutSolidCube e glutSolidTeapot.

Agora copie o seguinte código dentro de glPushMatrix():

glBegin(GL_QUADS);
	glColor3ub(255,255,255);
	glVertex3f(5,5,0);
	glVertex3f(-5,5,0);
	glVertex3f(-5,-5,0);
	glVertex3f(5,-5,0);
glEnd();

Salve o arquivo, compile e rode. Se você, assim como eu, for um feliz usuário de Linux basta usar o gcc para compilar:

gcc -o quadrado -Wall -lglut -lGL -lGLU estrutura_basica.c

e para rodar apenas digite:

./quadrado

Se fez tudo certo, então já está vendo uma janelinha com o quadrado que fizemos. Como fizemos o quadrado dentro do código do arquivo estrutura_basica.c, pode parecer que ele não está certinho, mas isso é porque ele está sendo visto de cima já que o programinha onde fizemos o quadrado inicia com os valores 0, 10, 20 na função gluLookAt, ou seja, o x está em 0, o y em 10 e o z em 20, por isso vemos ele no meio e um pouco do alto (já que y está em 10). Como o z (profundidade) está em 20, também estamos vendo ele um pouco de longe.

Agora vamos treinar um pouco mudando os valores do glVertex3f. Lembra mais acima que dei um exemplo mudando o valor do z de um dos vértices? Agora é a hora de fazer isso! Vamos ver como vai ficar ;D

Como pode ver, o vértice onde o z está com outro valor ficou afastado do resto do quadrado Uma boa idéia é brincar um pouco com os valores (x, y e z) do glVertex3f antes de prosseguirmos.

Cores e degradê

Agora que já fizemos o quadrado e brincamos um pouco com o glVertex3f, vamos mexer um pouco com as cores e aplicar um degradê phodão.

Lembra que antes de criarmos o quadrado usamos a função glColor3ub? Na primeira aula já vimos um pouco sobre esta função já que foi usada no código para dar cor ao cubo e ao bule de chá.

Relembrando, esta função é usada da seguinte forma: glColor3ub(r,g,b) onde r significa vermelho, g significa verde e b significa azul (Red, Green, Blue). Bem óbvio, né? Cada valor vai de 0 (mais escuro) até 255 (mais claro). Se por exemplo usarmos 0,0,0, estaremos pintando de preto e se usarmos 255,255,255, estaremos pintando (um doce para quem adivinhar) de branco (dãããã).

Quando criamos nosso quadrado usamos o glColor3ub com os valores 255,255,255. Isso fez o quadrado ficar branco. Se trocarmos por 0,0,0 o quadrado ficará preto (e não veremos na tela, já que a janela onde o quadrado foi criado é preta hehehehehe). Vamos testar trocar os valores para 20, 0 e 100 deixando a função da seguinte forma: glColor3ub(20,0,100);

Agora nosso quadrado que antes era chato e sem cor está diferente com uma linda e estilosa cor azul. EMOCIONANTE!!!!

Mas como tenho certeza de que muitos de meus leitores (e paraquedistas) no fundo são verdadeiros artistas (minha linda namorada, dona do blog GNU/Fabi, também é artista e já pintou vários quadros lindos e perfeitos), não ficaremos limitados a apenas uma cor, vamos agora aplicar um degradê phodão!

Nos exemplos anteriores pintamos o quadrado com apenas uma cor colocando o glColor3ub antes dos quatro glVertex3f. Para fazermos um degradê basta usarmos mais vezes o glColor3ub. Da mesma forma que cada comando glVertex3f é usado para fazer um vértice, podemos usar o glColor3ub antes de cada glVertex3f para pintar cada um dos vértices da cor que quisermos.

Vamos fazer agora o quadrado com o código do exemplo abaixo:

glColor3ub(20,0,100);
glVertex3f(5,5,0);
glVertex3f(-5,5,0);
glColor3ub(220,100,100);
glVertex3f(-5,-5,0);
glVertex3f(5,-5,0);

Como podem ver, usamos mais de uma vez o glColor3ub e com valores diferentes. O primeiro glColor3ub pinta com os valores 20, 0 e 100 (aquele lindo azul) o primeiro e o segundo vértice. O segundo glColor3ub pinta o terceiro e o quarto vértice com os valores 220, 100, 100 (Um rosa Hello Kitty para os emos que estiverem perdidos aqui ficarem felizes). Agora vamos compilar e executar o programa. Como podem ver, os vértices de baixo do quadrado (terceiro e quarto vértices) vão indo em degradê do rosa para o azul dos vértices de cima (primeiro e segundo vértices).

É aconselhável brincar um pouco com o glColor3ub para treinar um pouco e entender melhor o uso desta função.

Exercício

Usar o glVertex3f e o glColor3ub para criar um cubo em degradê verde e preto dos vértices da esquerda para os da direita. Uma dica antes de começar: Para criar o quadrado usamos o glVertex3f quatro vezes, portanto, para criar um cubo devemos usar 24 vezes o glVertex3f, já que devemos construir seis quadrados de mesmas proporções, apenas alterando os valores x, y e desta vez o z (profundidade) ;D

A resolução está abaixo! Boa sorte

Resolução do Exercício

glBegin(GL_QUADS);

	glColor3ub(0,200,0);
	glVertex3f(5,5,0);
	glColor3ub(0,0,200);
	glVertex3f(-5,5,0);
	glColor3ub(0,0,200);
	glVertex3f(-5,-5,0);
	glColor3ub(0,200,0);
	glVertex3f(5,-5,0);

	glColor3ub(0,200,0);
	glVertex3f(5,5,-10);
	glColor3ub(0,0,200);
	glVertex3f(-5,5,-10);
	glColor3ub(0,0,200);
	glVertex3f(-5,-5,-10);
	glColor3ub(0,200,0);
	glVertex3f(5,-5,-10);

	glColor3ub(0,200,0);
	glVertex3f(-5,5,-10);
	glColor3ub(0,0,200);
	glVertex3f(-5,5,0);
	glColor3ub(0,0,200);
	glVertex3f(-5,-5,0);
	glColor3ub(0,200,0);
	glVertex3f(-5,-5,-10);

	glColor3ub(0,200,0);
	glVertex3f(5,-5,-10);
	glColor3ub(0,0,200);
	glVertex3f(5,-5,0);
	glColor3ub(0,0,200);
	glVertex3f(5,5,0);
	glColor3ub(0,200,0);
	glVertex3f(5,5,-10);

	glColor3ub(0,200,0);
	glVertex3f(5,-5,0);
	glColor3ub(0,0,200);
	glVertex3f(-5,-5,0);
	glColor3ub(0,0,200);
	glVertex3f(-5,-5,-10);
	glColor3ub(0,200,0);
	glVertex3f(5,-5,-10);

	glColor3ub(0,200,0);
	glVertex3f(-5,5,0);
	glColor3ub(0,0,200);
	glVertex3f(5,5,0);
	glColor3ub(0,0,200);
	glVertex3f(5,5,-10);
	glColor3ub(0,200,0);
	glVertex3f(-5,5,-10);

glEnd();

Se conseguiu fazer o exercício certinho, então seu cubo com degradê de verde para azul deve ter ficado mais ou menos como o da figura

Espero que tenham entendido melhor esta aula. Finalmente estou me sentindo mais seguro com essa matéria e até começando a gostar mais. Este semestre o professor de Computação Gráfica mudou completamente a forma de passar a matéria e agora está muito melhor e mais simples de entender. Ontem mesmo já falei para ele que melhorou muito a forma de passar a aula, que estou entendendo mais e que essa aula que antes era a que eu menos gostava se tornou a aula que mais gosto de assistir na faculdade ;D

Technorati Tags: Computação Gráfica, OpenGL, glVertex3f, quadrado, cubo, glColor3ub, GL_QUADS, glBegin, glEnd, Vértices, vértice, função, comando, funções, comandos, C, gcc, compila, compilar, imagem, 3D, gráfico, pixel, pixels, largura, altura profundidade

Powered by ScribeFire.