Durante essa série de posts apresentarei códigos de exemplo que estarão disponíveis neste repositório do GitHUB.
Hoje vamos começar a falar mais da API WebGL e suas funções em JavaScript, começaremos a ver código de verdade aparecendo.
Vamos começar preparando o contexto WebGL para utilização:
Agora temos uma variável de escopo global `gl` que tem todos os métodos necessários para utilização do WebGL.
Nosso próximo passo é a criação e compilação das Shaders, primeiro vamos preparar uma função que compila uma Shader pra gente:
Agora escreveremos nossas Shaders:
Obs: O `.join('\n')` concatena os elementos do array em uma string adicionando uma quebra de linha entre cada elemento.
Agora juntamos isso em uma função para compilar as Shaders e preparar um programa:
Programa e Shader criados e ativados! Agora vamos preparar as referências para nossos atributos e uniforms.
Para escrevermos valores nos atributos e uniforms das Shaders, primeiramente precisamos recuperar uma referência para essas variáveis, para isso usamos o método getUniformLocation da API do WebGL:
Um detalhe importante sobre os atributtes: eles precisam ser ativados usando enableVertexAttribArray:
Agora temos o nosso ambiente preparado! Nesse momento temos 2 variáveis globais importantes, a variável `gl` e a variável `shaderProgram`, vamos então chegar no ponto principal desse post, os Buffers!
Buffers são espaços de memória destinados ao armazenamento dos Attributes das Shaders e ficam localizados no contexto do WebGL (na placa de vídeo).
A quantidade de informação que seu programa costuma alocar em buffers serve de indicador para ajudar a determinar o requisito mínimo de memória que a placa de vídeo deve ter para executar seu programa.
Todo aquele conceito que vimos sobre o fato da Shader ser executada uma vez para cada vértices acontece porque todas as informações dos vértices estão registradas em buffers, assim o WebGL se encarrega se dividir os buffers e entregar as informações corretas para as Shaders.
Para criar um buffer no contexto WebGL basta usar o método createBuffer que retorna um inteiro que serve de indicador para o buffer criado na placa de vídeo:
Vamos criar uma função que será responsável por iniciar nossos buffers e registrar informações neles:
Percebam que para registrar um array em um buffer, primeiramente precisamos ativa-lo chamando o método bindBuffer. Em seguida registramos a informação usando o método bufferData.
É importante ressaltar que os buffers trabalham com tipos especiais de arrays como Float32Array, Uint32Array, e etc, então você precisa garantir essa conversão antes de registrar os dados.
Nossos Attributes então ficam registrados nos Buffers, já as Uniforms recebem um tratamento diferenciado, como elas tem o valor imutável e são as mesmas para todos os vértices, elas podem ser registradas diretamente no contexto do WebGL usando métodos específicos para cada tipo de Uniform.
Os métodos mais comuns para registrar uma uniform são:
- uniformMatrix4fv para matrizes 4x4
- uniformMatrix3fv para matrizes 3x3
- uniform4fv para vetores de 4 elementos
- uniform3fv para vetores de 3 elementos
- uniform1i para inteiros
- uniform1f para floats
Vamos preparar uma função para registrar nossas uniforms:
Tudo preparado, vamos para o processo de renderização:
A primeira coisa que fazemos é definir o tamanho da janela, que nesse caso será o mesmo tamanho do canvas.
Depois do tamanho definido, fazemos uma limpeza da tela chamando o método clear.
Em seguida iniciamos a ProjectionMatrix e a ModelViewMatrix deslocando nosso objeto em 7 unidades pra baixo e registramos as uniforms chamando a nossa função `setUniforms()`.
O ultimo trecho desse código é o mais interessante, note que primeiro ativamos o buffer, em seguida chamamos o método vertexAttribPointer. Esse método diz pro WebGL que o buffer atualmente ativado será usado por um atributo da Shader, então indicamos pra ele que o atributo em questão é o aVertexPosition, ele tem 3 elementos (ele é do tipo vec3 então a cada 3 elementos do buffer um vec3 será formado), é do tipo FLOAT, não deve ser normalizado, não existe espaçamento entre os elementos nem na primeira posição.
Você pode consultar mais informações sobre esse método consultando essa documentação
O que é importante saber sobre esse método é que um buffer precisa estar ativo, então o atributo indicado apontará para o buffer ativo, e também que aquele 3 deve ser informado corretamente.
Se o attribute fosse do tipo vec4, você precisaria indicar um 4 ao invés de 3, dessa forma a cada 4 elementos do buffer um vec4 pode ser formado.
E por último porém provavelmente o mais importante, a chamada ao método drawArrays!
O drawArrays recebe o tipo de renderização que será feita, no caso TRIANGLES, o primeiro item do array que será renderizado, no nosso caso o elemento 0, em seguida a quantidade de itens que serão renderizados, como temos um triangulo de 3 vertices, indicamos o número 3 para falar que a shader será executada em 3 vértices do buffer.
Agora só falta juntar tudo e por rodar:
E no HTML:
O nosso resultado:
O código fonte completo desse tutorial pode ser encontrado neste link
Nos próximos posts entrarei em mais detalhes sobre as formas de renderização e apresentarei algumas formas diferentes de se renderizar um objeto antes de entrarmos no processo de coloração e texturas.
Espero que tenham gostado, críticas e sugestões são vem vindas!
Obrigado.
0 comentários:
Postar um comentário