Gráficos 2D e 3D
De pixels e bits de cor até vertex shaders, rasterização e fragment shaders — como a GPU transforma coordenadas matemáticas em imagens na tela.
O que você vai aprender
Toda imagem na tela começa com pixels — pequenas células de cor representadas como três números (R, G, B). Gráficos 2D transformam esses pixels com matrizes de transformação. Gráficos 3D adicionam uma dimensão extra e precisam de projeção para achatar o mundo tridimensional numa tela plana.
Mas o coração do rendering moderno é o pipeline gráfico da GPU: vértices passam pelo vertex shader, triângulos são convertidos em pixels pelo rasterizador, e cada pixel ganha sua cor final no fragment shader — tudo em paralelo, com milhares de threads simultâneas.
Pixels, cores e representação
Como monitores representam cor: RGB, canais de 8 bits, HSL e profundidade de cor.
Disponível 02Transformações 2D
Translação, rotação e escala com matrizes 3×3 e coordenadas homogêneas.
Disponível 03Projeção 3D
Como objetos 3D viram imagens 2D: projeção perspectiva e ortográfica.
Disponível 04Rasterização
Triângulos para pixels: scanline, Z-buffer e o algoritmo central da GPU.
Disponível 05Pipeline gráfico (GPU)
A jornada de um vértice até a tela: vertex shader, rasterizer, fragment shader.
Disponível 06Shaders e programabilidade
Fragment shaders: ruído, gradientes, ondas — programando o comportamento por pixel.
DisponívelProjetos desta trilha
Renderizador de triângulos
Implemente um rasterizador de triângulos em JavaScript puro usando Canvas 2D: projeção perspectiva, Z-buffer e iluminação flat shading — sem WebGL.
Cube rotator 3D
Renderize um cubo 3D com faces coloridas usando Canvas 2D: rotação por teclado (setas), projeção perspectiva e painter's algorithm para ordenação de faces.
Shader playground WebGL
Use WebGL para escrever seu próprio fragment shader em GLSL: experimente com ruído, gradientes, animações baseadas em tempo e efeitos de distorção.