WebGL - Desenhando um modelo

Depois de associar os buffers aos sombreadores, a etapa final é desenhar as primitivas necessárias. WebGL fornece dois métodos, a saber,drawArrays() e drawElements() para desenhar modelos.

drawArrays ()

drawArrays()é o método usado para desenhar modelos usando vértices. Aqui está sua sintaxe -

void drawArrays(enum mode, int first, long count)

Este método leva os seguintes três parâmetros -

mode- No WebGL, os modelos são desenhados usando tipos primitivos. Usando o modo, os programadores precisam escolher um dos tipos primitivos fornecidos pelo WebGL. Os valores possíveis para esta opção são - gl.POINTS, gl.LINE_STRIP, gl.LINE_LOOP, gl.LINES, gl.TRIANGLE_STRIP, gl.TRIANGLE_FAN e gl.TRIANGLES.
first- Esta opção especifica o elemento inicial nas matrizes habilitadas. Não pode ser um valor negativo.
count - Esta opção especifica o número de elementos a serem renderizados.

Se você desenhar um modelo usando drawArrays() método, então WebGL, enquanto renderiza as formas, cria a geometria na ordem em que as coordenadas do vértice são definidas.

Exemplo

Se você deseja desenhar um único triângulo usando drawArray() método, então você tem que passar três vértices e chamar o drawArrays() método, conforme mostrado abaixo.

var vertices = [-0.5,-0.5, -0.25,0.5, 0.0,-0.5,];
gl.drawArrays(gl.TRIANGLES, 0, 3);

Isso produzirá um triângulo conforme mostrado abaixo.

Suponha que você queira desenhar triângulos contíguos, então você tem que passar os próximos três vértices em ordem no buffer de vértices e mencionar o número de elementos a serem renderizados como 6.

var vertices = [-0.5,-0.5, -0.25,0.5, 0.0,-0.5, 0.0,-0.5, 0.25,0.5, 0.5,-0.5,];
gl.drawArrays(gl.TRIANGLES, 0, 6);

Isso produzirá um triângulo contíguo conforme mostrado abaixo.

drawElements ()

drawElements()é o método usado para desenhar modelos usando vértices e índices. Sua sintaxe é a seguinte -

void drawElements(enum mode, long count, enum type, long offset)

Este método leva os seguintes quatro parâmetros -

mode- Os modelos WebGL são desenhados usando tipos primitivos. Usando o modo, os programadores precisam escolher um dos tipos primitivos fornecidos pelo WebGL. A lista de valores possíveis para esta opção são - gl.POINTS, gl.LINE_STRIP, gl.LINE_LOOP, gl.LINES, gl.TRIANGLE_STRIP, gl.TRIANGLE_FAN e gl.TRIANGLES.
count - Esta opção especifica o número de elementos a serem renderizados.
type - Esta opção especifica o tipo de dados dos índices que devem ser UNSIGNED_BYTE ou UNSIGNED_SHORT.
offset- Esta opção especifica o ponto de partida para renderização. Geralmente é o primeiro elemento (0).

Se você desenhar um modelo usando drawElements(), então o objeto de buffer de índice também deve ser criado junto com o objeto de buffer de vértice. Se você usar este método, os dados do vértice serão processados uma vez e usados quantas vezes forem mencionadas nos índices.

Exemplo

Se você quiser desenhar um único triângulo usando índices, você precisa passar os índices junto com os vértices e chamar o drawElements() método conforme mostrado abaixo.

var vertices = [ -0.5,-0.5,0.0, -0.25,0.5,0.0, 0.0,-0.5,0.0 ];
var indices = [0,1,2];

gl.drawElements(gl.TRIANGLES, indices.length, gl.UNSIGNED_SHORT,0);

Ele produzirá a seguinte saída -

Se você deseja desenhar triângulos contagiosos usando drawElements() método, basta adicionar os outros vértices e mencionar os índices para os vértices restantes.

var vertices = [
   -0.5,-0.5,0.0,
   -0.25,0.5,0.0,
   0.0,-0.5,0.0,
   0.25,0.5,0.0,
   0.5,-0.5,0.0 
];

var indices = [0,1,2,2,3,4];

gl.drawElements(gl.TRIANGLES, indices.length, gl.UNSIGNED_SHORT,0);

Ele produzirá a seguinte saída -

Operações Requeridas

Antes de desenhar uma primitiva, você precisa realizar algumas operações, que são explicadas a seguir.

Limpar a tela

Primeiro de tudo, você deve limpar a tela, usando clearColor()método. Você pode passar os valores RGBA de uma cor desejada como parâmetro para este método. Em seguida, o WebGL limpa a tela e a preenche com a cor especificada. Portanto, você pode usar este método para definir a cor de fundo.

Dê uma olhada no exemplo a seguir. Aqui estamos passando o valor RGBA da cor cinza.

gl.clearColor(0.5, 0.5, .5, 1);

Habilitar teste de profundidade

Habilite o teste de profundidade usando o enable() método, conforme mostrado abaixo.

gl.enable(gl.DEPTH_TEST);

Limpe o bit do buffer de cor

Limpe a cor, bem como o buffer de profundidade usando o clear() método, conforme mostrado abaixo.

gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

Definir a porta de visualização

A porta de visualização representa uma área retangular visível que contém os resultados da renderização do buffer de desenho. Você pode definir as dimensões da janela de visualização usandoviewport()método. No código a seguir, as dimensões da porta de visualização são definidas para as dimensões da tela.

gl.viewport(0,0,canvas.width,canvas.height);