Pipeline gráfico (GPU)

Uma fábrica de pixels

O pipeline gráfico é como uma linha de montagem: vértices entram num extremo e pixels saem no outro. Cada estágio processa os dados de um jeito diferente — alguns em hardware fixo, outros em shaders programáveis. O que torna a GPU tão rápida é que essa "linha de montagem" tem milhares de trabalhadores em paralelo, cada um processando um vértice ou pixel diferente ao mesmo tempo.

A CPU manda os pedidos (draw calls) com os vértices, texturas e matrizes. O vertex shader transforma cada vértice para espaço de tela. O rasterizador (hardware fixo) converte triângulos em fragmentos. O fragment shader decide a cor final de cada pixel. O Z-buffer descarta pixels ocultos. O framebuffer é a tela.

Explore cada estágio

Clique em cada etapa do pipeline para ver o que acontece nela, o que entra, o que sai, e dicas de performance.

WebGL: um triângulo do zero

// Setup mínimo de WebGL — um triângulo
const gl = canvas.getContext("webgl");

// 1. Compilar shaders
const vs = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vs, `
  attribute vec2 aPos;
  void main() { gl_Position = vec4(aPos, 0, 1); }
`);
gl.compileShader(vs);

const fs = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fs, `
  precision mediump float;
  void main() { gl_FragColor = vec4(1,0.4,0.4,1); }
`);
gl.compileShader(fs);

// 2. Linkar programa
const prog = gl.createProgram();
gl.attachShader(prog, vs);
gl.attachShader(prog, fs);
gl.linkProgram(prog);

// 3. Enviar vértices (VBO)
const vbo = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
gl.bufferData(gl.ARRAY_BUFFER,
  new Float32Array([0,0.5, -0.5,-0.5, 0.5,-0.5]),
  gl.STATIC_DRAW
);

// 4. Draw call → dispara o pipeline inteiro!
gl.useProgram(prog);
gl.drawArrays(gl.TRIANGLES, 0, 3);

Técnicas de otimização

// Técnicas de otimização do pipeline

// 1. Batching: um draw call, muitos objetos
gl.drawArraysInstanced(gl.TRIANGLES, 0, 3, 10000); // 10k instâncias

// 2. Frustum culling: não enviar o que não aparece
for (const obj of objects) {
  if (frustum.contains(obj.bounds)) {
    drawObject(obj);  // só renderiza se visível
  }
}

// 3. Early-z: GPU descarta fragmentos ocultos ANTES do fragment shader
// Renderize objetos opacos de frente para trás
opacos.sort((a, b) => a.distCam - b.distCam); // front-to-back

// 4. LOD: modelos simplificados para objetos distantes
const lod = dist > 100 ? "low" : dist > 30 ? "mid" : "high";
drawMesh(meshes[lod]);

Primeiro triângulo em WebGL

Mini projeto: renderize um triângulo colorido em WebGL do zero — sem bibliotecas. Escreva o vertex shader e fragment shader em GLSL, compile, linke o programa e faça o draw call.

Projeto principal: renderize um cubo 3D em WebGL com rotação animada. Implemente as matrizes MVP em JavaScript (use gl-matrix para as utilidades), passe como uniforms ao vertex shader, e desenhe com drawElements e um Index Buffer Object (IBO).

Desafio extra: implemente instanced rendering com drawArraysInstanced: renderize 10.000 cubos, cada um com posição e cor diferentes, num único draw call. Compare o FPS com 10.000 draw calls individuais.

Teste sua intuição

Onde você encontra isso