Ponto V!

Home WebGL A WebGL e o Pipeline Programável
Vinícius Godoy de Mendonça
A WebGL e o Pipeline ProgramávelImprimir
Escrito por Vinícius Godoy de Mendonça

A WebGL permite a programação de aplicações gráficas 3D em HTML5, utilizando o navegador. Ela incorpora os recursos do pipeline programável da OpenGL, desde sua reformalação na versão 3.2 da API. Neste artigo, primeiro de uma série, começaremos a explorar essa nova API e suas inúmeras possibilidades.

Antes de começar

Desde que publicamos nossa série de artigos sobre a OpenGL, muita coisa mudou no ramo da computação gráfica:

  • A OpenGL passou por várias mudanças em sua versão 3.2, introduzindo o pipeline programável ;
  • Surgiu a OpenGL/ES, uma versão enxuta da API para dispositivos móveis;
  • O JavaScript consolidou-se como linguagem para navegadores e ganhou muito, muito poder de fogo;
  • O padrão HTML5 se desenvolveu, criando elementos como o canvas, acesso a arquivos e capacidades de animação e até transformações via css;

Por isso, iniciamos aqui uma série de artigos que visam explicar como usar a WebGL para desenvolver aplicações gráficas ou games. Antes de começar, entretanto, precisamos contextualiza-lo sobre o que esperamos que você saiba:

  1. Esperamos que você conheça HTML e Css;
  2. Esperamos que você tenha conhecimentos em JavaScript;
  3. Esperamos que você tenha pelo menos lido os artigos sobre matrizes e vetores da nossa seção de matemática.

O desenvolvimento desses artigos usará como referência o navegador Chrome. Além de fornecer um ótimo ambiente para depuração dos scripts, o Chrome tem hoje a implementação de maior performance da WebGL. Ele também é um dos navegadores com maior suporte ao HTML5.

O que é o pipeline programável?

Uma das principais mudanças ocorridas na OpenGL foi a introdução do que chamamos de pipeline programável. O pipeline nada mais é do que o conjunto de funções que a própria OpenGL chama para transformar seus comandos de pintura em desenhos no monitor.

Nas primeiras versões da API, todo esse processamento era automaticamente feito pela própria OpenGL. Comandos de iluminação, transformações de matrizes, colorização, texturização e até mesmo efeitos como neblina, estavam todos embutidos na API. Isso gerava diversos transtornos, seja para os desenvolvedores, seja para os fabricantes do hardware de vídeo:

  • Os fabricantes eram obrigados a desenvolver muito software;
  • Cada fabricante lançava diversas extensões, desvirtuando o propósito do padrão e do mecanismo de extensões;
  • As empresas de jogos pressionavam a indústria de hardware a incluir diversos recursos;
  • Não havia proteção do investimento: Se um estúdio de games criasse um recurso visual novo e quisesse integrado ao hardware, deveria padroniza-lo e divulga-lo aos concorrentes;
  • Os games ficavam parecidos, inclusive com os da concorrência. Os estúdios estavam amarrados ao que as placas faziam;

Para resolver esse problema, a solução encontrada foi tornar a placa de vídeo programável. Ou seja, adicionar nela alguns passos no pipeline que permitiam ao programador executar o programa que ele quisesse. Assim, os recursos passariam a ser de responsabilidade exclusivamente do desenvolvedor, e não mais do padrão. Ao mesmo tempo, essa decisão permitiu enxugar a API. A OpenGL ficaria restrita apenas à comunicação e controle do hardware, e a transformação e rasterização, sem maiores preocupações com efeitos ou pintura.

O resultado final foi um pipeline com essa forma:

programmablePipeline

Todas as áreas em azul são de controle da própria OpenGL, e não dão qualquer tipo de liberdade ao programador. O programador interage com a API, que é o conjunto de todas as funções da biblioteca. A API encaminha os dados de vértices e texturas para o processamento de primitivas. Esses vértices são agrupados em estruturas chamadas Vertex Buffer Objects. O pipeline gerencia se esses objetos estão na memória da CPU ou de vídeo, e faz as transferências necessárias.

O próximo passo é calcular a transformação desses vértices do espaço de modelo (aquele usado pelos modeladores no Maya, Blender) para o espaço de coordenadas de projeção. Para isso, os vértices tem que ser multiplicados pela matriz de modelo (rotação, translação e escala), visão (posicionamento da câmera) e projeção (que planifica as coordenadas 3D em 2D). Toda essa transformação, no pipeline programável, é feita pelo programador, num programa enviado para a placa conhecido como Vertex Shader.

A placa então monta as primitivas num buffer e parte para a fase de rasterização. Nessa fase, os objetos passam a ser pintados no monitor. O rasterizador determina que áreas dos objetos estão visíveis, quais estão dentro da tela e o que exatamente deve ser pintado. E inicia a pintura.

Para que a pintura seja realizada, é necessário calcular a cor do pixel com base em sua posição, nas luzes, efeitos, etc. Esse cálculo, antigamente feito pela própria OpenGL, agora é de responsabilidade do programador, em outro programa, chamado Fragment Shader (ou pixel shader).

A OpenGL faz o processamento final, o que envolve definir as áreas que serão efetivamente aplicadas na imagem final (stenciling), misturar as cores do que está sendo desenhado com o que já está desenhado (blending), ajustar a imagem ao espaço de cores do monitor (dithering) e então, encaminhar a imagem para a tela ou outra área de memória (frame buffer).

Finalmente, é importante dizer que tanto a OpenGL/ES quanto a WebGL implementam apenas o pipeline programável.

Vertex e Fragment Shader

Você deve ter notado que falamos que agora seria responsabilidade do programador incluir dois programas:

  • O Vertex Shader: Que tem como principal papel calcular a transformação do pixel do espaço de modelo para o espaço de projeção. Ele também pode realizar alguns cálculos relacionados aos vértice, como o de normais.
  • O Fragment Shader: Que tem como principal papel calcular a cor final do pixel. E, para isso, temos que fazer os cálculos de iluminação, aplicação de texturas, etc.

Esses programas são escritos numa linguagem conhecida como GLSL. Essa linguagem tem sintaxe intencionalmente similar ao C. O programa é compilado pela OpenGL para o assembly da placa.

Os shaders foram os grandes responsáveis pela qualidade gráfica obtida nos jogos hoje em dia, e pelas diferenças significativas de desenho que existe hoje em um estúdio e outro. Ser um programador especialista em gráficos, atualmente, tem como grande parte a tarefa de criar bons shaders. E isso também explica porque hoje a diferença entre a OpenGL e o DirectX, em termos de recursos gráficos, não é mais relevante. Os recursos gráficos, agora, são responsabilidade exclusiva do programador, não mais do fabricante da API gráfica.

Para finalizar

Nos próximos artigos, veremos como inicializar e criar objetos usando a WebGL. Iremos trabalhar inicialmente com a WebGL pura, com o auxílio apenas de uma biblioteca matemática. A idéia é cobrir todo conteúdo exposto em nosso tutorial de pipeline fixo mas, ao mesmo tempo, mostrar técnicas mais modernas de iluminação e texturização.


Comentários (2)
  • WW  - QWDWWWADWDWWDWWDADWDDWWWWWWWWWW
    avatar
    Código:
    :idea: :arrow: :?: : :woohoo: :confused: :whistle: :dry: :silly: [u][/u]S
    Citou:

    View imageView imageView imageView image[img][/img][img][/img][img][/img][img][/img][img][/img][img][ /img][img][/img][img][/img][img][/img][img][/img][img][/img]

Escrever um comentário
Your Contact Details:
Gravatar enabled
Comentário:
[b] [i] [u] [url] [quote] [code] [img]   
:angry::0:confused::cheer:B):evil::silly::dry::lol::kiss::D:pinch::(:shock:
:X:side::):P:unsure::woohoo::huh::whistle:;):S:!::?::idea::arrow:
Security
Por favor coloque o código anti-spam que você lê na imagem.
LAST_UPDATED2  

Busca

Linguagens

Twitter