Vamos aprender WebGL?! – Parte 1 – Primeiros passos
Olá pessoal. Tudo certo?!
Conhece WebGL– um “OpenGL para browsers”? Então, daremos, juntos, os primeiros passos com essa tecnologia.
UPDATE:
Resolvi converter esse post em início de uma nova série. Não pretendo abordar aqui fundamentos de matemática, computação gráfica ou OpenGL. Há diversas fontes de informação qualificadas para este fim.
Estou aprendendo WebGL e esta série será indicativo do que estou aprendendo. Convido você a me acompanhar.
Nesse primeiro post mostro como criar e configurar uma viewport e desenhar um triângulo simples. Trata-se de um exemplo recorrente que pode ser encontrado em diversos livros sobre o assunto.
Embora apresente o código em fragmentos, ele pode ser obtido integralmente aqui: https://gist.github.com/3113676
O que é WebGL?
Seguindo a definição do site oficial:
WebGL is a cross-platform, royalty-free web standard for a low-level 3D graphics API based on OpenGL ES 2.0, exposed through the HTML5 Canvas element as Document Object Model interfaces. Developers familiar with OpenGL ES 2.0 will recognize WebGL as a Shader-based API using GLSL, with constructs that are semantically similar to those of the underlying OpenGL ES 2.0 API. It stays very close to the OpenGL ES 2.0 specification, with some concessions made for what developers expect out of memory-managed languages such as JavaScript.
WebGL brings plugin-free 3D to the web, implemented right into the browser. Major browser vendors Apple (Safari), Google (Chrome), Mozilla (Firefox), and Opera (Opera) are members of the WebGL Working Group.
De forma mais simples, trata-se de um “port” do OpenGL para browsers.
Não roda no IE?!
Não. E, aparentemente, não vai rodar. Afinal, a Microsoft não considera a especificação segura. Segundo a empresa,
We believe that WebGL will likely become an ongoing source of hard-to-fix vulnerabilities. In its current form, WebGL is not a technology Microsoft can endorse from a security perspective.
We recognize the need to provide solutions in this space however it is our goal that all such solutions are secure by design, secure by default, and secure in deployment.
WebGL roda em um Canvas HTML5
WebGL precisa do canvas do HTML5 para funcionar. Logo, se deseja trabalhar com WebGL, essa é a marcação mínima que você precisa:
Certo?!
Iniciando o contexto
Agora que temos o canvas, precisamos iniciar o contexto. Trata-se da interface que iremos utilizar para acessar a API da WebGL. Eis o código necessário:
Vejamos o que esse código faz:
- Tenta obter contexto, primeiro com nome “webgl”, depois “experimental-webgl”. Essas são as designações utilizadas pelos diversos browsers que suportam a especificação;
- Caso não consiga encontrar um contexto adequado, informa ao usuário que o browser não oferece suporte;
- Caso tenha sucesso, determina largura e altura do contexto conforme a largura e altura do elemento canvas.
Compilando e carregando shaders
Agora, vamos carregar e configurar shaders no WebGL. Shaders são parte fundamental de qualquer aplicacação WebGL. Eles definem como nossos objetos apareceram na viewport.
Veja os shaders desenvolvidos para esse exemplo
Sabe o que são shaders? Não? Que tal dar uma olhada no post que falo sobre shaders no XNA.
No WebGL há dois tipos de shaders: Vertex Shaders (manipulando vértices) e Fragment Shaders.
Shaders WebGL são escritos em uma linguagem aproximada de CSGL (bem próxima do C). Eles são necessários em qualquer programa com WebGL e são “o segredo” para criar renderizações impressionantes. Os que mostro aqui são suficientes apenas para completar o exemplo de hoje.
Inicializando os buffers
Com shaders carregados, hora de inicializar os buffers. Ou seja, os dados que serão necessários para fazer o desenho. Observe:
Entenda: tudo o que fizemos foi adicionar ao buffer coordenadas de pontos que iremos utilizar para fazer o desenho.
A viewport padrão do WebGL tem a origem (ponto 0,0) no centro. Além disso, o range vai de –1,1, tanto na horizontal, quanto na vertical. Agora as coordenadas fazem mais sentindo para você?
Desenhando
Abaixo, snippet para efetivar o desenho
Fica claro que:
- obtemos o canvas html5;
- obtemos o contexto WebGL;
- carregamos os shaders (pixel e fragment) em um programa;
- carregamos os dados de desenho (nos buffers);
- limpamos a viewport (especificando uma cor);
- efetuamos o desenho;
Pegou a idéia?
Para essa primeira parte, era isso.
Pingback: Vamos aprender WebGL?! – Parte 2 – Usando o elemento script para armazenar código de shaders « Elemar DEV