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.
Começando com uma breve introdução sobre o assunto, o guia do Mozilla descreve WebGL da seguinte forma:
WebGL permite que o conteúdo web use uma API baseada em OpenGL ES 2.0 para realizar renderização 3D em um canvas HTML em browsers que o suportam sem o uso de pluginsDessa forma, você poderá executar Shaders (programas que rodam na placa de vídeo) através de chamadas feitas a partir do seu código JavaScript usando uma API baseada em OpenGL.
Mas o que são Shaders? Como assim rodar código na placa de vídeo?
Você não leu errado, existem linguagens de programação específicas para gerar programas que rodam na placa de vídeo do seu computador e que são responsáveis pela exibição do conteúdo que você enxerga por aqui.
No nosso caso vamos falar de HLSL, uma linguagem parecida em C que será compilada e fará com que nossas formas tri-dimensionais ganhem vida através da API do WebGL
Vamos começar do básico ok? Esse código escrito em HLSL é o que chamamos de Shader e nós trabalhamos com 2 tipos de Shaders: a Vertex Shader e a Fragment Shader.
A Vertex Shader é responsável por calcular o posicionamento de cada vértice e face no ambiente tri-dimensional, é ele que calcula onde cada poligono vai ficar, onde cada ponto vai ser renderizado.
A Fragment Shader é responsável por determinar a cor que aquela face terá, se essa cor deve ser carregada de uma textura ou extraída de algum tipo de cálculo.
Essas Shaders são executadas em etapas diferentes pela placa de vídeo, primeiro a Vertex Shader determina a posição e depois a Fragment Shader determina a cor.
Agora que pegamos o básico sobre a teoria, vamos ver um exemplo:
Esse é um exemplo de Vertex Shader bastante simples, como podem ver, temos um atributo aVertexPosition e tudo o que fazemos a atribuir o valor desse atributo para gl_Position
Vejam esses programas de maneira clássica, temos entradas e esperamos que ele forneça uma saída, no nosso caso a entrada será o atributo aVertexPosition, que indica a posição de um vértice no plano tri-dimensional, percebam que ele é do tipo vec3, esse atributo será enviado para a Shader através do nosso JavaScript, como se fosse uma chamada de função passando o VertexPositiom como parâmetro.
Já a saída que esperamos desse programa, como se trata de uma Vertex Shader, é a posição de um vértice calculada no plano tri-dimensional, para dar essa saída, atribuímos o valor final do vértice para gl_Position.
Com isso, nossa placa de vídeo já tem o suficiente para renderizar 1 vértice no canvas!
Mas só 1 ponto? Eu não tenho um polígono gigante com milhares de vértices? Como eu faço?
Calma jovem Padawan, você consegue se lembrar neste momento quantos núcleos/processadores sua placa de vídeo tem? Muitos não é mesmo?
É assim que a performance das placas de vídeo são levadas ao extremo, cada Shader é programada pensando no tratamento de um único vértice, dessa forma sua placa de vídeo pode executar o mesmo programa simultaneamente, uma instancia em cada núcleo, para cada vértice existente no objeto desejado de acordo com a capacidade da placa, então imagine que cada núcleo da sua placa pegará um vértice do seu modelo 3D para processar o cálculo da Shader dele, e depois que todos os vértices forem processados, a placa se encarregará de ir para a próxima fase do processo que envolve a renderização deles.
Exemplificando:
Imagem tirada do site http://webglfundamentals.org/
Tendo entendido o processo, vemos que não existe muita diferença da Fragment Shader:
Como foi dito anteriormente, a única diferença é a responsabilidade, ao invés de calcular a posição, a Fragment Shader é responsável pela cor, e é executada após a execução da Vertex Shader e pensando em um único vértice da mesma forma!
Vamos dar uma pausa por aqui pra que não fique muito extenso, quero deixar esse guia bem separadinho para facilitar o acesso ao conteúdo específico.
Espero que tenham gostado e que tirem algum proveito sobre o tema do tutorial, por favor deixem suas críticas e sugestões nos comentários.
Obrigado.
0 comentários:
Postar um comentário