Esse tutorial foi inspirado no conteúdo do site learningwebgl e todos os arquivos de código fonte estarão disponíveis neste repositório do GitHUB.
Vamos falar agora de como trabalhar com os valores que as Shaders processam, e para falar disso precisamos falar dos tipos de variáveis.
No começo do código da Shader onde declaramos as variáveis, existem três tipos de variáveis que podem ser usadas:
Attributes
Atributes são caraterísticas exclusivas de cada vértice e só podem ser usadas na Vertex Shader, representam características como posicionamento, cor, direção da normal e etc, informações que cada vértice tem diferente.
Uniforms
Podem ser vistas como constantes, estão disponíveis tanto na Vertex Shader quanto na Fragment Shader, seu valor não pode ser alterado de dentro das Shaders e será o mesmo para todos os vértices. Um exemplo disso é a direção e a cor da luz, não importa de qual vértice estamos falando, a luz chega até eles da mesma forma.
Varyings
Varyings são variáveis que você declara na Vertex Shader para usa-las na Fragment Shader. É a forma que temos de passar um valor para a Fragment Shader, se você quer especificar a cor de um vértice por exemplo, você recebe a cor dele em um Attribute, passa o valor para uma Varying e acessa esse valor na Fragment Shader.
Varyings precisam estar declaramas em ambas Shaders e ser do mesmo tipo.
Vamos começar a entender melhor estes conceitos, se quisermos renderizar um triângulo na cena precisamos definir 3 informações básicas sobre ele:
Vertex Position
Esses são os vértices do triângulo que vamos renderizar, os números representam as coordenadas em relação ao seu próprio centro.
Model View Matrix
Em uma situação real nós queremos constantemente fazer transformações nos nossos objetos, como movimenta-los, rotaciona-los e etc, para isso recorremos a uma matriz de transformações.
As transformações desse tipo que geralmente queremos fazer são transformações aplicadas em todo o nosso objeto, como move-lo para um canto, gira-lo e etc, então essa matriz de transformação pode ser vista como uma variável comum a todos os vértices, afinal, todos eles serão movidos da mesma forma, por isso usamos uma Uniform para recuperar essa matriz, geralmente chamamos essa matriz de ModelViewMatrix (Matriz de Visualização do Modelo).
Para trabalhar com essa matrizes usamos uma bibliotequinha genial chamada gl-matrix.
Por definição, começamos com uma matriz identidade 4x4 e em seguida usamos as funções de transformação que a própria biblioteca nos fornece:
Projection Matrix
E por último, precisaremos de uma matriz de transformação que representa a perspectiva da câmera:
Depois que separarmos esses valores, tudo o que precisamos fazer é multiplicar essas matrizes de transformação pela posição do vértices, esse é o tipo de cálculo perfeito para nossa placa de vídeo!
Vamos escrever nossa Vertex Shader:
Vamos nos atentar ao que acontece:
- aVertexPosition é um attribute porque CADA VÉRTICE tem a sua posição exclusiva.
- uModelViewMatrix e uProjectionMatrix são uniforms porque o valor delas é o mesmo para TODOS OS VÉRTICES que estamos renderizando.
Com essa simples shader já temos o suficiente para renderizar um modelo e posiciona-lo na tela!
Mas e a cor?
Vamos adicionar então o suporte a um gradiente bem psicodélico de cores a esse triangulo:
Atualizando nossa Vertex Shader:
E agora a Fragment Shader:
O que mudou?
- aVertexColor é um attribute porque CADA VÉRTICE tem a sua cor
- vColor é a varying que será usada para informar a fragment shader qual é a cor que será usada, logo ela é uma variável de transporte de informação da Vertex Shader para a Fragment Shader, por isso ela precisa ser declarada nas duas shaders
Muito bacana não é mesmo?
Na próxima parte veremos enfim como executar essas shaders, passar os valores pra elas e ver a mágica da renderização acontecer diante nossos olhos!
0 comentários:
Postar um comentário