WebGL - Contexto

Para escrever um aplicativo WebGL, a primeira etapa é obter o objeto de contexto de renderização WebGL. Este objeto interage com o buffer de desenho WebGL e pode chamar todos os métodos WebGL. As seguintes operações são realizadas para obter o contexto WebGL -

Crie uma tela HTML-5
Obtenha o ID da tela
Obtenha WebGL

Criação de elemento HTML-5 Canvas

No Capítulo 5, discutimos como criar um elemento de tela HTML-5. No corpo do documento HTML-5, escreva uma tela, dê um nome a ela e passe-a como um parâmetro para o id do atributo. Você pode definir as dimensões da tela usando os atributos de largura e altura (opcional).

Exemplo

O exemplo a seguir mostra como criar um elemento de tela com as dimensões 500 × 500. Criamos uma borda para a tela usando CSS para visibilidade. Copie e cole o seguinte código em um arquivo com o nomemy_canvas.html.

<!DOCTYPE HTML>
<html>
   <head>
      <style>
         #mycanvas{border:1px solid blue;}
      </style>
   </head>
   <body>
      <canvas id = "mycanvas" width = "300" height = "300"></canvas>
   </body>
</html>

Isso produzirá o seguinte resultado -

Obtenha o ID da tela

Depois de criar a tela, você deve obter o contexto WebGL. A primeira coisa a fazer para obter um contexto de desenho WebGL é obter o id do elemento de tela atual.

O ID da tela é adquirido chamando o método DOM (Document Object Model) getElementById(). Este método aceita um valor de string como parâmetro, portanto, passamos o nome da tela atual para ele.

Por exemplo, se o nome da tela for my_canvas, então o ID da tela é obtido conforme mostrado abaixo−

var canvas = document.getElementById('my_Canvas');

Obtenha o contexto de desenho WebGL

Para obter o objeto WebGLRenderingContext (ou objeto de contexto de desenho WebGL ou simplesmente contexto WebGL), chame o getContext() método da corrente HTMLCanvasElement. A sintaxe de getContext () é a seguinte -

canvas.getContext(contextType, contextAttributes);

Passe as cordas webgl ou experimental-webgl Enquanto o contentType. ocontextAttributesparâmetro é opcional. (Ao prosseguir com esta etapa, certifique-se de que seu navegador implemente WebGL versão 1 (OpenGL ES 2.0)).

O fragmento de código a seguir mostra como obter o contexto de renderização WebGL. Aquigl é a variável de referência para o objeto de contexto obtido.

var canvas = document.getElementById('my_Canvas');
var gl = canvas.getContext('experimental-webgl');

WebGLContextAttributes

O parâmetro WebGLContextAttributesnão é obrigatório. Este parâmetro fornece várias opções que aceitam valores booleanos conforme listado abaixo -

Sr. Não.	Atributos e descrição
1	Alpha Se seu valor for verdadeiro, ele fornece um buffer alfa para a tela. Por padrão, seu valor é verdadeiro.
2	depth Se o valor for verdadeiro, você obterá um buffer de desenho que contém um buffer de profundidade de pelo menos 16 bits. Por padrão, seu valor é verdadeiro.
3	stencil Se o valor for verdadeiro, você obterá um buffer de desenho que contém um buffer de estêncil de pelo menos 8 bits. Por padrão, seu valor é falso.
4	antialias Se o valor for verdadeiro, você obterá um buffer de desenho que executa o anti-aliasing. Por padrão, seu valor é verdadeiro.
5	premultipliedAlpha Se o valor for verdadeiro, você obterá um buffer de desenho que contém cores com alfa pré-multiplicado. Por padrão, seu valor é verdadeiro.
6	preserveDrawingBuffer Se o valor for verdadeiro, os buffers não serão apagados e preservarão seus valores até que sejam apagados ou substituídos pelo autor. Por padrão, seu valor é falso.

O seguinte snippet de código mostra como criar um contexto WebGL com um buffer de estêncil, que não funcionará anti-aliasing.

var canvas = document.getElementById('canvas1');
var context = canvas.getContext('webgl', { antialias: false, stencil: true });

No momento da criação do WebGLRenderingContext, um buffer de desenho é criado. O objeto Context gerencia o estado OpenGL e renderiza no buffer de desenho.

WebGLRenderingContext

É a interface principal do WebGL. Ele representa o contexto de desenho WebGL. Esta interface contém todos os métodos usados para realizar várias tarefas no buffer de desenho. Os atributos desta interface são fornecidos na tabela a seguir.

Sr. Não.	Atributos e descrição
1	Canvas Esta é uma referência ao elemento canvas que criou este contexto.
2	drawingBufferWidth Este atributo representa a largura real do buffer de desenho. Pode ser diferente do atributo de largura do HTMLCanvasElement.
3	drawingBufferHeight Este atributo representa a altura real do buffer de desenho. Pode ser diferente do atributo de altura do HTMLCanvasElement.