AED - WEBGL - Computação Gráfica

Prévia do material em texto

AED - WebGL 
 
 
 
 
 
 
 
 
 
 
 
Aluno: Arthur Guilherme De Sousa Alves 
 
 
 
 
 
 
 
 
 
Goiânia 
2018 
Introdução 
 
WebGL é uma API (Application Program Interface - do inglês, Interface de Programação de 
Aplicativos) em JavaScript para a renderização de um contexto 3D para a web [1]. Possui as 
mesmas funcionalidades do OpenGL ES 2.0 por ser derivada deste, porém aplicadas num 
contexto HTML. A utilização dessa nova tecnologia foi possível recentemente junto com o 
lançamento do elemento Canvas do padrão HTML 5, em 2014, e possui a proposta de 
possibilitar à plataforma web o desenvolvimento de aplicações que utilizem computação gráfica, 
somente com o uso de navegadores. Isso aumenta a portabilidade dos softwares desenvolvidos, 
uma vez que o mesmo código que funciona em um laptop, por exemplo, funcione em um 
smartphone com os recursos necessários. 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Conceito Geral 
 
Num conceito geral, o WebGL possibilida exibir gráficos 3D em tempo real no navegador, porém, 
o WebGL é uma API 2D, e não uma API 3D, pois o mesmo só se preocupa com as Coordenadas do 
espaço de disco em 2D e cores, onde o programador fornece as informações necessárias para o WebGL. 
Para isso, deve-se fornecer dois “shaders” para que o processo acima seja realizado. Um 
sombreador Vertex que fornece coordenadas do espaço de clipes e um sombreador de fragmento que 
fornece as cores. 
As coordenadas do espaço de disco sempre vão de -1 a +1, independentemente do tamanho da 
sua tela 
Devemos nos atentar também, para alguns outros fatores, responsáveis por permitir a execução 
dos códigos dentro do navegador, criando os resultados desejados, como por exemplo: 
 
Shaders 
 
Nas APIs gráficas, um sombreador é um programa de computador usado para sombreamento: a 
produção de níveis apropriados de cor em uma imagem, ou seja, Shaders são programas que são 
executados no hardware gráfico. Em APIs gráficas modernas, elas são partes obrigatórias do pipeline 
gráfico (o pipeline fixo não é mais suportado). Cada pixel desenhado para a tela deve ser processado por 
shaders, não importa quão frágil ou frio seja. Alguns tipos de shader são opcionais e podem ser 
ignorados, mas não todos. 
Quanto processamento é feito em shaders e quanto é feito na CPU, cabe ao desenvolvedor 
decidir. Pode-se ter shaders muito simples e fazer tudo na CPU. Outra opção é dividir a carga entre os 
dois. Ou talvez faça tudo em shaders. Enquanto cabe ao desenvolvedor decidir, o que o desenvolvedor 
escolher afetará significativamente o desempenho do aplicativo.  
Pipeline Gráfico para o WebGL 
 
Como o WebGL deve ser executado em navegadores, ele deve ser universal o suficiente para 
funcionar em computadores e dispositivos móveis. Portanto, WebGL e OpenGL ES compartilham muito. O 
WebGL 1.0 é baseado e equivalente ao OpenGL ES 2.0, e o WebGL 2.0 é baseado e equivalente ao 
OpenGL ES 3.0. A linguagem de sombreamento usada no WebGL é a mesma usada no OpenGL ES. É 
chamado de GLSL ES (OpenGL Shading Language). Portanto, esse também é o pipeline do WebGL​. 
 
Vertex Shader 
Um shader de vértice é dado a cada um desses vértices e pode mexer com eles. Cabe ao shader 
de vértices o que ele realmente faz com cada um, mas tem uma responsabilidade: ele deve em algum 
momento definir algo chamado ​gl_Position​​, um vetor 4D float, que é a posição final do vértice na tela. Por 
si só, é um processo de obtenção de uma posição 3D (um vértice com x, y, z) para uma tela 2D ou 
projetada para ela. 
Fragment Shader 
Muito parecido com o shader de vértice, o shader de fragmento também tem apenas um trabalho 
obrigatório: ele deve definir ou descartar a variável gl_FragColor , outro vetor 4D float, que é a cor final de 
nosso fragmento, ou seja, Um Fragment Shader é o estágio Shader que processará um Fragment gerado 
pela Rasterização em um conjunto de cores e um único valor de profundidade. 
O fragment shader é o estágio do pipeline OpenGL depois que uma primitiva é rasterizada. Para 
cada amostra dos pixels cobertos por um primitivo, um "fragmento" é gerado. Cada fragmento possui uma 
posição de espaço na janela , alguns outros valores e contém todos os valores de saída por vértice 
interpolados do último estágio de processamento de vértice . 
A saída de um sombreador de fragmento é um valor de profundidade, um possível valor de 
estêncil (não modificado pelo sombreador de fragmento) e zero ou mais valores de cores a serem 
potencialmente gravados nos buffers nos framebuffers atuais. 
Os shaders de fragmento usam um único fragmento como entrada e produzem um único 
fragmento como saída. 
 
 
Variáveis do Shader 
1. Uniformes​​ são enviados para ​ambos os​​ shaders de vértice e fragment shaders e contêm valores 
que permanecem os mesmos em todo o quadro que está sendo renderizado. Um bom exemplo 
disso pode ser a posição de uma luz. 
 
2. Atributos​​ são valores aplicados a vértices individuais. Atributos estão disponíveis ​apenas​​ para o 
shader de vértice. Isso poderia ser algo como cada vértice ter uma cor distinta. Atributos têm um 
relacionamento de um para um com vértices. 
 
3. Variáveis​​ são variáveis ​​declaradas no shader de vértice que queremos compartilhar com o shader 
de fragmento. Para fazer isso, certificamos-nos de declarar uma variável variável do mesmo tipo e 
nome no shader de vértice e no shader de fragmento. Um uso clássico disso seria um vértice 
normal, já que isso pode ser usado nos cálculos de iluminação. 
 
 
 
 
 
 
API 
 
Para compreendermos o conceito geral do WebGL, deve-se entender o conceito de API: 
API é um conjunto de rotinas e padrões de programação para acesso a um aplicativo de software ou 
plataforma baseado na Web. A sigla API refere-se ao termo em inglês "Application Programming Interface" 
que significa em tradução para o português "Interface de Programação de Aplicativos" 
Através das APIs, os aplicativos podem se comunicar uns com os outros sem conhecimento ou 
intervenção dos usuários. Elas funcionam através da comunicação de diversos códigos, definindo 
comportamentos específicos de determinado objeto em uma interface. A API liga as diversas funções em 
um site de maneira que possam ser utilizadas em outras aplicações. Sistemas de pagamento online são 
um bom exemplo de funcionalidade das APIs que rodam de maneira automática. De modo geral, a API é 
composta de uma série de funções acessíveis somente por meio de programação. 
Recentemente, a utilização das APIs tem se espalhado nos plugins, que complementam a 
funcionalidade de um determinado programa. Os desenvolvedores de um programa principal criam uma 
API específica e fornecem a outros criadores, que desenvolvem plugins para aumentar o potencial e as 
funcionalidades do programa. 
 
Canvas 
O “Canvas” elemento e o WebGL não são suportados em alguns navegadores mais antigos, mas 
são suportados em versões recentes de todos os principais navegadores. Para desenhar gráficos na tela, 
usamos um objeto de contexto JavaScript, que cria gráficos dinamicamente 
​Resumindo, o Canvas é “uma tela de bitmap dependente de resolução que pode ser usada para a 
renderização de elementos gráficos ou outras imagens visuais rapidamente”. Em termos leigos, o canvas 
é um elemento novo em HTML5, que permite que se desenhem elementos gráficos usando JavaScript. 
Ele pode ser usado para renderizar texto, imagens, gráficos, linhas gradientes e outros efeitos 
dinamicamente. Desenhar na tela se dá através da ​API de tela 2D​. Essa API contém uma variedade de 
funções que fornecem o poder de se desenhar praticamente o que se queira na tela. Atualmente, a tela 
suporta uma interface 2D, não 3D 
 
 
Processamento de Imagens WebGL 
Para desenhar imagens no WebGL, precisamos usar texturas. Da mesma forma que o WebGL 
espera coordenadas do espaço de clipes ao renderizar em vez de pixels, o WebGL espera coordenadas 
de textura ao ler uma textura. As coordenadas de textura vão de 0,0 a 1,0,independentemente das 
dimensões da textura. 
Para desenhar apenas um único retângulo (bem, 2 triângulos), deve-se informar ao WebGL qual é 
o lugar na textura a que cada ponto no retângulo corresponde. 
Ao passar essa informação do shader de vértice para o shader de fragmento usando um tipo 
especial de variável chamado "variando". É chamado de variável porque varia. O WebGL interpola os 
valores fornecidos no shader de vértice conforme desenha cada pixel usando o shader de fragmento. 
Usando o shader de vértice do final da seção anterior, precisamos adicionar um atributo para 
passar coordenadas de textura e, em seguida, passá-las para o shader de fragmento 
 
 
 
Diferenças entre OpenGL e WebGL 
 
O WebGL é baseado na especificação OpenGL ES 2.0 e mantém a semântica do OpenGL ES para 
maximizar a portabilidade para dispositivos móveis. Existem algumas diferenças significativas no 
comportamento de APIs semelhantes entre o OpenGL ES 2.0 e a API OpenGL em sistemas de desktop. 
Muitos programadores OpenGL estão familiarizados com a semântica na área de trabalho e podem não 
conhecer essas diferenças de comportamento 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Abaixo, mostraremos um exemplo do uso do WebGL. 
 
 
//Inicialização - 
 
struct VertexShaderInput 
{ 
 float4 Position : POSITION0; 
 float4 Normal : NORMAL0; 
 float2 texcoords : Texcoord0; 
}; 
 
struct VertexShaderOutput 
{ 
 float4 Position : POSITION0; 
 float2 texcoords : Texcoord0; 
}; 
 
// código do vertex shader 
VertexShaderOutput VertexShaderFunction(VertexShaderInput input) 
{ 
 VertexShaderOutput output; 
 output.Position = mul(input.Position, ModelViewProj); 
 output.texcoords = input.texcoords; 
 
 return output; 
} 
 
 
//geração de cores/texturas - Textura de um quadrado 
 
float4 CreateRectTexture(VertexShaderOutput input) : COLOR0 
{ 
 float4 color; 
 if( input.texcoords.x < 0.05 || input.texcoords.y < 0.05 || 
 input.texcoords.y > 0.95 || input.texcoords.x > 0.95 ){ 
 color= float4( 1,0,0,1 ); 
 } else{ 
 color = float4(0,0,0,0); 
 } 
 
 return color;; 
} 
 
//Representação gráfica 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Referências Bibliográficas 
 
<​https://www.html5rocks.com/en/tutorials/webgl/shaders/​> Acesso em: 10/12/2018 
 
<​https://www.khronos.org/registry/webgl/specs/latest/2.0/​>Acesso em: 10/12/2018 
 
<​https://www.khronos.org/opengl/wiki/Fragment_Shader​>Acesso em: 10/12/2018 
 
<​https://gamedevelopment.tutsplus.com/tutorials/getting-started-in-webgl-part-1-introduction-to-s
haders--cms-26208​>Acesso em: 10/12/2018 
 
<​https://mozillabr.org/2017/05/o-firefox-suporta-webgl-2-que-permite-uma-nova-geracao-de-grafi
cos-3d-na-web/​>Acesso em: 10/12/2018 
 
 
 
https://www.html5rocks.com/en/tutorials/webgl/shaders/
https://www.khronos.org/registry/webgl/specs/latest/2.0/
https://www.khronos.org/opengl/wiki/Fragment_Shader
https://gamedevelopment.tutsplus.com/tutorials/getting-started-in-webgl-part-1-introduction-to-shaders--cms-26208
https://gamedevelopment.tutsplus.com/tutorials/getting-started-in-webgl-part-1-introduction-to-shaders--cms-26208
https://mozillabr.org/2017/05/o-firefox-suporta-webgl-2-que-permite-uma-nova-geracao-de-graficos-3d-na-web/
https://mozillabr.org/2017/05/o-firefox-suporta-webgl-2-que-permite-uma-nova-geracao-de-graficos-3d-na-web/