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 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>&lt;canvas&gt;</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.

Etiquetas do documento e colaboradores

 Colaboradores desta página: Nathipg
 Última atualização por: Nathipg,