The Book of Shaders by Patricio Gonzalez Vivo & Jen Lowe

Bahasa Indonesia - Tiếng Việt - 日本語 - 中文版 - 한국어 - Español - Portugues - Français - Italiano - Deutsch - Русский - English


Matrizes 2D

Translação

No capítulo anterior, aprendemos como fazer algumas formas básicas - o macete para mover essas formas é mover o próprio sistema de coordenadas. Podemos fazer isso simplesmente adicionando um vetor à variável st que contém a localização de cada fragmento. Isso faz com que todo o sistema de coordenadas espaciais se mova.

Isso é mais fácil de ver do que explicar, então, veja por você mesmo:

Agora, tente o seguinte exercício:

Rotações

Para rotacionar objetos, também precisamos mover o sistema espacial inteiro. Para isso, vamos usar uma matriz. Uma matriz é um conjunto organizado de números em colunas e linhas. Vetores são multiplicados por matrizes seguindo um conjunto preciso de regras de forma a modificar os valores do vetor de maneira particular.

Wikipedia entry for Matrix (mathematics)

GLSL tem suporte nativo para matrizes de duas, três e quatro dimensões: mat2 (2x2), mat3 (3x3) and mat4 (4x4). GLSL também suporta multiplicação de matrizes (*) e uma função específica de matrizes (matrixCompMult()).

Baseado em como as matrizes se comportam, é possível construir matrizes para produzir comportamentos específicos. Por exemplo, podemos usar uma matriz para transladar um vetor:

Mais interessante ainda: podemos usar uma matriz para rotacionar o sistema de coordenadas:

Dê uma olhada no código a seguir para ver uma função que constrói uma matriz de rotação 2D. Essa função segue a fórmula acima para vetores de duas dimensões, para rotacionar as coordenadas em torno do ponto vec2(0.0).

mat2 rotate2d(float _angle){
    return mat2(cos(_angle),-sin(_angle),
                sin(_angle),cos(_angle));
}

De acordo com a forma como estamos desanhando nossas formas, não é isso, exatamente, o que queremos. Nossa forma de cruz é desenhada no meio da tela, o que corresponde à posição vec2(0.5). Então, antes de rodarmos o espaço, precisamos mover a forma do center para a coordenada vec2(0.0), rotacionar o espaço, e finalmente mover de volta para o lugar original.

Isso se parece com o seguinte código:

Tente os exersícios a seguir:

Escala (scale)

Vimos como as matrizes são usadas para transladar e rotacionar objetos no espaço (ou, mais precisamente, transformar o sistema de coordenadas para rotacionar e mover objetos). Se você já usou softwares de modelagem 3D ou as funções de push e pop no Processing, já sabe que as matrizes também podem ser usadas para escalar o tamanho de um objeto.

Seguindo a fórmula anterior, você pode calcular como fazer uma matriz para escalar em 2D:

mat2 scale(vec2 _scale){
    return mat2(_scale.x,0.0,
                0.0,_scale.y);
}

Tente os seguintes exersícios para entender mais a fundo como isso funciona.

Outros usos para matrizes: cores YUV

YUV é um espaço de cores usado para codificação analógica de fotos e vídeos, que considera o faixa da percepção humana para reduzir a largura de banda dos componentes de crominância.

O código a seguir é uma oportunidade interessante para usar operações de matrizes em GLSL para transformar as cores de um modo para outro.

Como você pode ver, estamos tratando as cores como vetores, multiplicando-os com matrizes. Dessa forma, nós "movemos" os valores.

Neste capítulo, aprendemos como usar transformações de matrizes para mover, rotacionar e escalar vetores. Essas transformações serão essenciais para fazer composições com as formas que aprendemos no capítulo anterior. No próximo capítulo, vamos aplicar tudo o que aprendemos para fazer padrões procedurais bem bonitos. Você vai achar que a repetição e variação na programação podem ser uma prática excitante.