1) Fundamentos: o fluxo básico do WebGL

Antes de qualquer projeto, é essencial internalizar o ciclo de renderização do WebGL. A sequência típica é:

• Obter o contexto WebGL do canvas (gl).
• Criar e compilar shaders (vertex e fragment).
• Linkar um programa a partir dos shaders e torná-lo ativo.
• Criar buffers para atributos (posição, cor, UVs, etc.) e enviar dados para a GPU.
• Configurar atributos e uniforms (matrizes de transformação, cores, sampling, etc.).
• Definir o estado de renderização (depth test, viewport, clear color) e iniciar o loop com requestAnimationFrame.

Neste post, avançamos através de exemplos práticos que consolidam cada etapa, começando por um triângulo colorido simples e expandindo para texturas e transformações 3D.

2) Projeto prático 1: Triângulo colorido com shaders simples

Objetivo: entender o pipeline mínimo, com vértices de posição e cor por vértice. Emula-se o fluxo de compilação de shaders, criação de buffers e desenho via drawArrays.

Shaders básicos (vertex e fragment) e o esqueleto essencial para desenhar um triângulo com cor por vértice:

// Vertex Shader
attribute vec2 aPosition;
attribute vec3 aColor;
varying vec3 vColor;

void main() {
  // Conversão de coordenadas para o espaço de clip
  gl_Position = vec4(aPosition, 0.0, 1.0);
  vColor = aColor;
}

// Fragment Shader
precision mediump float;
varying vec3 vColor;

void main() {
  gl_FragColor = vec4(vColor, 1.0);
}

Passos práticos resumidos (JavaScript, conceito-chave):

• Criar o canvas e obter o contexto WebGL.
• Compilar os shaders e criar o programa.
• Criar buffers para posição e cor, inserir dados e vincular a atributos.
• Configurar viewport, limpar a tela e renderizar com gl.drawArrays(gl.TRIANGLES, 0, 3).

Observação: o exemplo acima é o esqueleto mínimo. Em um projeto real, é comum encapsular a etapa de shader, criar utilitários para buffers e adicionar um loop de renderização com controle de tempo para animações simples.

3) Projeto prático 2: Texturas simples em WebGL

Avançar para texturas exige a inclusão de coordenadas de textura (UV) e o uso de um sampler no fragment shader. O fluxo envolve carregar uma imagem, criar uma textura na GPU e mapear a imagem sobre um quad.

Gestão básica de textura:

• Vertex shader recebe aTexCoord e transmite para o fragment shader.
• Fragment shader usa uniform sampler2D para amostrar a textura com vTexCoord.
• JavaScript: carregar a imagem, criar aTexture, definir parâmetros (min/mag filter), gerar mipmaps se aplicável e liberar dados para o shader via uniform.

Com a estrutura de shader existente, basta substituir a geometria pelo quad correspondente, adicionar as coordenadas UV e ligar a textura ao sampler uniform. O resultado é uma prática comum para entender mapeamento de textura, filtering e coordenação entre CPU e GPU.

4) Projeto prático 3: Cubo 3D com rotação e perspectiva

A próxima etapa é levar a aparência 3D adiante através de transformações de modelos e câmeras. Utilizamos matrizes 4×4 para Model-View-Projection (MVP). O cubo é um conjunto de vértices com índices que formam 12 triângulos.

Conceitos-chave:

• Criação de uma matriz de perspectiva para simular a distância da câmera.
• Definição de uma matriz de modelo para rotação e translação do cubo.
• Multiplicação das matrizes para obter a MVP que alimenta o shader como uniform.
• Atualização de tempo para animação suave.

Este projeto demonstra como combinar a matemática linear com o pipeline WebGL, resultando em uma cena que gira com iluminação básica (se desejado) e profundidade por meio de depth testing.