Seção 1 — Fundamentos do WebGL

WebGL é uma interface JavaScript que expõe o pipeline gráfico da GPU. O fluxo básico envolve: criação de um contexto WebGL, compilação de shaders, criação de um programa, configuração de buffers de vértices e a emissão de chamadas de desenho. Em síntese, você transforma dados de vértices em pixels na tela via shaders executados na GPU.

• Vertex Shader: transforma vértices no espaço de tela.
• Fragment Shader: define a cor de cada pixel alvo.
• Program: entidade que combina shaders e gerencia entradas/saídas.
• Buffer objects: armazenam dados de vértices, cores e texturas.

Seção 2 — Preparando o ambiente e o canvas

O canvas HTML recebe o contexto gráfico via getContext(‘webgl2’) ou, se necessário, ‘webgl’. Recomenda-se WebGL2 para recursos modernos, mas WebGL1 é suficiente para fundamentos.

• Crie um canvas responsivo e ajuste o DPR (device pixel ratio) para manter a nitidez.
• Defina o viewport para o tamanho efetivo do canvas.
• Habilite extensões apenas quando necessário (por exemplo, formatos de textura).

Seção 3 — Shaders, buffers e o pipeline de renderização

Nesse núcleo, você constrói o pipeline: compila shaders, cria o programa, alimenta buffers com vértices e configura atributos/uniformes. Em WebGL2, você pode usar GLSL ES 3.00; em WebGL1, GLSL ES 1.00.

• Escreva shaders simples para começar: uma cor constante ou gradiente básico.
• Crie buffers, vincule-os e indique como os dados devem ser lidos pelos atributos.
• Linke o programa, use-o com gl.useProgram e chame gl.drawArrays ou gl.drawElements.

Seção 4 — Exemplo mínimo e práticas recomendadas

Abaixo está um esqueleto compacto de um programa WebGL que renderiza um triângulo. Use WebGL2 sempre que possível; caso utilize WebGL1, ajuste os shaders para GLSL ES 1.00 e as funções de atributo/uniform.

// WebGL2 — Renderização de um triângulo simples
const canvas = document.getElementById('glcanvas');
const gl = canvas.getContext('webgl2');
if (!gl) { throw new Error('WebGL2 não suportado'); }

const vsSource = `#version 300 es
layout(location = 0) in vec2 aPosition;
void main() { 
  gl_Position = vec4(aPosition, 0.0, 1.0);
}`;

const fsSource = `#version 300 es
precision mediump float;
out vec4 fragColor;
void main() { fragColor = vec4(0.2, 0.6, 1.0, 1.0); }`;

function createShader(gl, type, source) {
  const shader = gl.createShader(type);
  gl.shaderSource(shader, source);
  gl.compileShader(shader);
  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
    throw new Error('Erro no shader: ' + gl.getShaderInfoLog(shader));
  }
  return shader;
}
function createProgram(gl, vs, fs) {
  const program = gl.createProgram();
  gl.attachShader(program, vs);
  gl.attachShader(program, fs);
  gl.linkProgram(program);
  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
    throw new Error('Erro no link do programa: ' + gl.getProgramInfoLog(program));
  }
  return program;
}

const vertexShader = createShader(gl, gl.VERTEX_SHADER, vsSource);
const fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fsSource);
const program = createProgram(gl, vertexShader, fragmentShader);
gl.useProgram(program);

// Triângulo simples
const positions = new Float32Array([
  0.0, 0.5,
 -0.5,-0.5,
 0.5,-0.5
]);
const posBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, posBuffer);
gl.bufferData(gl.ARRAY_BUFFER, positions, gl.STATIC_DRAW);
gl.enableVertexAttribArray(0);
gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);

gl.viewport(0, 0, canvas.width, canvas.height);
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
gl.drawArrays(gl.TRIANGLES, 0, 3);

Boas práticas para seguir após o exemplo:

• Valide erros durante o desenvolvimento com gl.getError() e logs de shader/programa.
• Faça resize inteligente do canvas para manter a pixelização agradável em diferentes dispositivos.
• Quando possível, utilize gl.getExtension(…) apenas para recursos que tragam benefício direto ao seu caso de uso.
• Implemente um loop de render com requestAnimationFrame para animações suaves e estáveis.