Começando com WebGL
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 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
A primeira coisa que você precisa para para renderização do WebGL, é a inicialização do canvas. O fragmento HTML abaixo declara um canvas em que nosso exemplo será desenhado.
<body>
<canvas id="glCanvas" width="640" height="480"></canvas>
</body>
Preparando o contexto WebGL
A função main() em nosso código JavaScript é chamada quando nosso script é carregado. O objetivo é configurar o contexto do WebGL e começar a renderizar o conteúdo.
main();
//
// começa aqui
//
function main() {
const canvas = document.querySelector("#glCanvas");
// Inicializa o contexto GL
const gl = canvas.getContext("webgl");
// Só continua se o WebGL estiver disponível e funcionando
if (!gl) {
alert(
"Incapaz de inicializar o WebGL.Seu navegador ou sua máquina não suporta.",
);
return;
}
// Define a cor para preto totalmente opaca (sem transparência)
gl.clearColor(0.0, 0.0, 0.0, 1.0);
// Limpa o buffer de cores com uma cor específica
gl.clear(gl.COLOR_BUFFER_BIT);
}
A primeira coisa que nós fazemos aqui é obter a referência para o canvas, atribuindo-a para a variável chamada canvas.
Uma vez que nós temos o canvas, nós tentamos obter um WebGLRenderingContext para ele chamando o getContext e passando a string "webgl". Se o browser não suportar o webgl getContext vai retornar null nesse caso nós mostraremos uma mensagem para o usuário e sair.
Se o contexto for inicializado com sucesso, a variável gl é nossa referência para ele. Nesse caso, nós altermos a cor para preto, e o contexto para aquela cor (redesenhando o canvas com a cor de fundo).
Nesse ponto, você tem código suficiente para o contexto WebGL ser inicializado com sucesso, e você deve visualizar uma grande caixa preta vazia, pronta e esperando para receber conteúdo.
Veja também
- Uma introdução ao WebGL: Escrito por Luz Caballero, publicado por dev.opera.com. Esse artigo direciona sobre o que o WebGL é, explicando como o WebGL funciona (incluindo o conceito de pipeline de renderização), e introduz algumas bibliotecas do WebGL.
- Fundamentos do WebGL
- Uma introdução para o OpenGL moderno: Uma séroe de bons artigos sobre OpenGL escrita por Joe Groff, provendo uma introdução clara para o OpenGL a partir de sua história até os importantes conceitos de pipeline de gráficos, e também inclui alguns exemplos demonstrativos sobre como o OpenGL funciona. Se você não tem ideia do que seja OpenGL, esse é um bom lugar para começar.