WebGL permite que o contéudo 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 plugins. Programas WebGL consistem em um código de controle escrito em JavaScript e códigos de efeitos especiais (shader code) que é executado na Unidade Gráfica de Processamento (GPU) de um computador. Elementos WebGL podem ser utilizados junto com outros elementos HTML e com outras partes da página ou do fundo.
Esse artigo vai introduzir o básico sobre o uso do WebGL. Acredita-se que você já possui entendimento da matemática que envolve os gráficos 3D, e que este artigo e este artigo não tem a pretensão de tentar ensinar-lhe OpenGL em si.
Os exemplos de código deste tutorial também podem ser encontrados no Exemplos de webgl no repositório do GitHub.
Preparando-se para renderizar em 3D
Para usar o WebGL parar renderizar em 3D, a primeira coisa de que você precisa é de um canvas. O fragmento HTML a seguir estabelece um canvas e cria um evento onload que será utilizado para iniciar nosso contexto WebGL.
<body onload="start()">
<canvas id="glcanvas" width="640" height="480">
Seu browser parece não oferecer suporte ao elemento
<code><canvas></code>.
</canvas>
</body>
Preparando o contexto WebGL
A função start(), em nosso código JavaScript, é chamada depois que o documento for carregado. Sua missão é contruir o contexto WebGL e começar a renderizar o conteúdo.
var gl; // Uma variável global para o contexto WebGL
function start() {
var canvas = document.getElementById("glcanvas");
// Inicializando o contexto GL
gl = initWebGL(canvas);
// Só continua se o WebGL estiver disponível e funcionando
if (gl) {
// Muda a cor para preto, completamente opaco
gl.clearColor(0.0, 0.0, 0.0, 1.0);
// Permite teste de profundidade
gl.enable(gl.DEPTH_TEST);
// Objetos próximos irão obscurecer objetos mais distantes
gl.depthFunc(gl.LEQUAL);
// Limpa a cor e o buffer de profundidade
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
}
}
Nossa primeira tarefa aqui é obter uma referência para o canvas, guardando-a em uma variável chamada canvas. Obviamente se você não precisa se referir ao canvas repetidamente, deve evitar guardar esse valor em uma variável global e apenas salvar em uma variável local ou em um atributo de um objeto.
Agora que temos o canvas, nós chamamos uma função chamada initWebGL(); esta é a função que nós iremos definir; seu trabalho é inicializar o contexto WebGL.
Se o contexto for inicializado com sucesso, gl é uma referencia para ele. Nesse caso, nós definimos que a cor de fundo será preta, então deixamos o contexto dessa cor. Depois disso, o contexto é configurado the context definindo parâmetros. Nesse caso, nós estamos permitindo testes de profundidade e especificando que objetos próximos irão obscurecer objetos mais distantes.
Para efeito dessa passagem inicial do código, isso é tudo que iremos fazer. Nós vamos ver como realmente começar a fazer alguma coisa mais tarde.
Criando um contexto WebGL
A função initWebGL() se parece com isso:
function initWebGL(canvas) {
gl = null;
try {
// Tentar obter o contexto padrão. Se falhar, tenta obter o experimental.
gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
}
catch(e) {}
// Se não obtivermos o contexto GL, desistir agora
if (!gl) {
alert("Incapaz de inicializar WebGL. Seu browser pode não suportá-lo.");
gl = null;
}
return gl;
}
Para obter o contexto WebGL para o canvas, nós pedimos o contexto chamado "webgl" do canvas. Se isto falhar, tentaremos o nome "experimental-webgl". Se isso também falhar, mostraremos um alerta para o usuário saber que aparentemente ele não tem suporte para WebGL. Isso é tudo. Nesse ponto, gl ou é nula (significando que não há contexto WebGL disponível) ou é uma referência para o contexto WebGL no qual iremos renderizar.
A partir desse momento, você terá código o bastante para o contexto WebGL ser iniciado com sucesso, e deve ter uma grande e vazia caixa preta pronta e esperando para receber conteúdo.
Ver código completo | Abrir esse demo em uma página nova
Redimensionando o contexto WebGL
Um novo contexto WebGL vai definir a resolução de sua janela de exibição para a altura e a largura do elemento canvas, sem CSS, no instante em que o contexto foi obtido. Editar o estilo do elemento canvas mudará suas dimensões mas não mudará sua resolução de renderização. Editar os atributos de largura (width) e altura (height) do elemento canvas depois que o contexto for criado também não mudará o número de pixels para desenhar. Para alterar a resolução na qual o WebGL renderiza, tal como quando o usuário redimensiona a janela de um documento inteiramente feito em canvas ou caso você queira fazer um aplicativo com gráficos ajustaveis, você precisará chamar a função viewport() do contexto WebGL para reconhecer a mudança.
Para mudar a resolução renderizada do contexto WebGL com variáveis gl e canvas como no exemplo a seguir:
gl.viewport(0, 0, canvas.width, canvas.height);
O canvas irá experimentar o dimensionamento quando este é renderizado em uma resolução diferente da que foi definida no estilo CSS fazendo com ocupe todo o visor. Redimensionar com CSS é mais útil para poupar recursos renderizando em uma resolução mais baixa e permitindo que o browser aumente a escala; diminuir a escala é possível e produzirá uma espécie de efeito antialiasing (SSAA) (embora com resultados básicos e um custo de desempenho grave). Geralmente é melhor confiar na MSAA e implementações de filtros de textura do browser do usuário, se disponível e apropriado, é melhor do que fazer isso por força bruta e torcer para a imagem do browser produzir uma redução com um resultado mais limpo.
Veja Também
- Uma introdução ao WebGL - Escrito por Luz Caballero na DEV.OPERA. Esse artigo trato sobre o que o WebGL é, como o WebGL funciona e o conceito de renderização canalizada e introduz algumas bibliotecas do WebGL.
- Uma introdução ao moderno OpenGL- Uma série de bons artigos sobre OpenGL. Joe apresenta uma introdução sobre OpenGL desde sua história até os importantes conceitos de gráficos canalizados e fornece alguns exemplos sobre como OpenGL funciona. Se você não souver o que OpenGL é, esse é um bom lugar para começar.