Comeando com WebGL

Prxima

WebGL permite que o contudo web use uma API baseada em OpenGL ES 2.0 para realizar renderizao 3D em um canvas HTML em browsers que o suportam sem o uso de plugins. Programas WebGL consistem em um cdigo de controle escrito em JavaScript e cdigos de efeitos especiais (shader code) que executado na Unidade Grfica de Processamento (GPU) de um computador. Elementos WebGL podem ser utilizados junto com outros elementos HTML e com outras partes da pgina ou do fundo.

Esse artigo vai introduzir o bsico sobre o uso do WebGL. Acredita-se que voc j possui entendimento da matemtica que envolve os grficos 3D, e que este artigo no tem a pretenso de tentar ensinar-lhe OpenGL em si.

Os exemplos de cdigo deste tutorial tambm podem ser encontrados no Exemplos de WebGL no repositrio do GitHub.

Preparando-se para renderizar em 3D

A primeira coisa que voc precisa para para renderizao do WebGL, a inicializao do canvas. O fragmento HTML abaixo declara um canvas em que nosso exemplo ser desenhado.

html

<body>
  <canvas id="glCanvas" width="640" height="480"></canvas>
</body>

Preparando o contexto WebGL

A funo main() em nosso cdigo JavaScript chamada quando nosso script carregado. O objetivo configurar o contexto do WebGL e comear a renderizar o contedo.

main();

//
// comea aqui
//
function main() {
  const canvas = document.querySelector("#glCanvas");
  // Inicializa o contexto GL
  const gl = canvas.getContext("webgl");

  // S continua se o WebGL estiver disponvel e funcionando
  if (!gl) {
    alert(
      "Incapaz de inicializar o WebGL.Seu navegador ou sua mquina no suporta.",
    );
    return;
  }

  // Define a cor para preto totalmente opaca (sem transparncia)
  gl.clearColor(0.0, 0.0, 0.0, 1.0);
  // Limpa o buffer de cores com uma cor especfica
  gl.clear(gl.COLOR_BUFFER_BIT);
}

A primeira coisa que ns fazemos aqui obter a referncia para o canvas, atribuindo-a para a varivel chamada canvas.

Uma vez que ns temos o canvas, ns tentamos obter um WebGLRenderingContext para ele chamando o getContext e passando a string "webgl". Se o browser no suportar o webgl getContext vai retornar null nesse caso ns mostraremos uma mensagem para o usurio e sair.

Se o contexto for inicializado com sucesso, a varivel gl nossa referncia para ele. Nesse caso, ns altermos a cor para preto, e o contexto para aquela cor (redesenhando o canvas com a cor de fundo).

Nesse ponto, voc tem cdigo suficiente para o contexto WebGL ser inicializado com sucesso, e voc deve visualizar uma grande caixa preta vazia, pronta e esperando para receber contedo.

Veja o cdigo completo | Abra a demo em uma nova pgina

Veja tambm

Uma introduo 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 renderizao), e introduz algumas bibliotecas do WebGL.
Fundamentos do WebGL
Uma introduo para o OpenGL moderno: Uma sroe de bons artigos sobre OpenGL escrita por Joe Groff, provendo uma introduo clara para o OpenGL a partir de sua histria at os importantes conceitos de pipeline de grficos, e tambm inclui alguns exemplos demonstrativos sobre como o OpenGL funciona. Se voc no tem ideia do que seja OpenGL, esse um bom lugar para comear.

Prxima

Help improve MDN

Was this page helpful to you?

Yes No

Learn how to contribute

This page was last modified on 17 de dez. de 2024 by MDN contributors.

View this page on GitHub Report a problem with this content

Comeando com WebGL

In this article

Preparando-se para renderizar em 3D

Preparando o contexto WebGL

Veja tambm

Help improve MDN