Esse texto vai ser um pouco mais teórico que os anteriores, por isso acredito que podem achar um pouco complexo no início, mas acredito estar bem resumido. Sente-se e relaxe, enquanto adentra no mundo da computação gráfica.
O que é computação gráfica?
A computação gráfica é um conjunto de métodos e técnicas computacionais para a representação de uma forma gráfica, através de um computador, de objetos de um mundo, seja ele real ou virtual.
Isto implica em:
- Um modelo interno deste mundo a ser representado
- Um conjunto de transformações para representar este modelo em um dispositivo de saída de um computador (vídeo, plotter, etc)
História
A representação gráfica detalhada e realista de modelos em um mundo virtual surgiu com a necessidade de se substituir a prancheta de desenhos. No final da década de 1950 e início da década de 1960, principalmente na indústria automobilística, começou a haver uma concorrência acirrada entre os fabricantes de automóveis, onde praticamente todos os fabricantes se viram forçados em cada uma de suas linhas (luxo, grande, médio, pequeno, etc) lançar cerca de 2 modelos por ano. Isso significa que cada empresa de automóveis. Se a gente pensar só na forma de modelagem da época, precisava-se fazer esborços detalhados em papel e depois criar modelos ou em argila ou em madeira (inclusive em tamanho real) e a partir daí se construía o carro real, alterando detalhes conforme os desejos dos designers.
Cada modelo de argila demorava em torno de 3 meses das concept arts originais até a apresentação do modelo aos designers. Isso era tempo demais, um problema para a indústria da época, e motivou o surgimento do Projeto Auxiliado por Computador - CAD (Computer Aided Design).
Um exemplo de software criado para fazer tais modelagens é o IBM Catia:
As vantagens do uso da computação para fazer essas modelagens se tornou óbvia em pouco tempo. No papel você pode até modelar uma engrenagem, mas não tem como prever o comportamento dela, enquanto a computação permite essa previsão. Os eventos que se seguiram envolveram principalmente o aumento do poder computacional, dos usos diferenciados e dos algoritmos usados para esse uso da computação, como a implementação e o uso de algoritmos de ray tracing, aplicação em jogos e filmes, simulação de ambientes quadridimensionais, simulação de física realista, entre outros.
Displays vetoriais
Os primeiros dispositivos desenvolvidos para representar objetos gráficos foram os displays vetoriais (random scan displays). Eles não tinham memória de vídeo, cada objeto era desenhado separadamente pelo canhão de vídeo e o canhão precisava redesenhar a tela inteira toda hora.
O "raio" (o elétron acelerado) disparado pelo canhão excita o fósforo que acende e brilha, e, dependendo da impureza, a cor desse brilho muda.
A sua televisão antiga funciona seguindo o mesmo princípio, mas desenhando os itens linha a linha, e não randomicamente, como o display acima.
Esse modelo de display levou a criação de um arquivo chamado Display File, que é uma lista de todos os objetos constantemente redesenhados na tela. Essa lista era percorrida por um algoritmo, que lia ela e desenhava cada objeto na tela. Era dessa forma que funcionava a computação gráfica na década de 60. O conceito de loop infinito que existia antes ainda existe, muito embora ele seja usado hoje de formas diferentes.
Assim como aconteceu com a largura das estradas romanas e a largura do chassi dos automóveis, a estrutura de dados Display File ainda é usada para armazenar objetos em displays mais modernos.
Um Raster Scan Display é um tipo diferente de display onde o canhão sempre faz a mesma operação de varredura, como os canhões das TVs de tubo (TRC) antigas, que desenhavam o mesmo quadro 30 vezes por segundo(30 Htz). Nos computadores a frequência era maior: 60 Htz.
Mesmo que tenham semelhanças, as TVs de tubo recebiam as imagens de um aparelho chamado telecine, que convertia sinais de fitas cassete ou de outras formas de armazenamento para os quadros mostrados ao usuário, enquanto no computador, o processo era um pouco diferente. Quando a memória dos computadores passou a se tornar mais pagável, uma parte da memória passou a ser usada como memória de vídeo (Frame Buffer para os íntimos). Essa memória é usada para armazenar uma matriz de pixels, que é listada após a leitura do vídeo pelo hardware.
A transmissão desses dados era feita usando os cabos VGA e ainda funciona assim, inclusive, se você usa a entrada VGA do seu monitor LCD em sua casa, você está mandando comandos de movimento de canhão para o monitor, que interpreta e converte em sinal digital (inclusive, como esse processo não é o melhor possível, recomenda-se sempre usar a entrada digital ao invés da analógica).
Representação do Display File no vídeo (Frame Buffer)
É um processo realizado pelo sistema operacional e pelo hardware da máquina (um pouco cada), como leitura e escrita na memória de vídeo, aceleração gráfica, leitura dos objetos na forma de pixels, tudo isso é realizado a baixo nível e você não precisará se preocupar muito com isso.
A transformação em viewport é uma parte bem interessante, e parcialmente realizada pelo sistema gráfico. Observe a imagem abaixo:
Imagine que no meu vídeo eu tenha um monte de pixels:
E uma série de objetos dentro de um display file a serem mostrados nesse quadro de pixels:
Como o meu mundo pode ser uma coisa gigantesca que pode nem ao menos caber na tela do meu computador, a primeira coisa que eu vou fazer é definir o recorte do mundo que eu vou olhar (chamamos esse recorte de Window, a "janela para o mundo"), e isso acontece mesmo em 2D. A melhor forma de se pensar nessa window é vê-la como uma janela que fica passando por cima do mundo, onde os objetos vão ser posicionados usando o sistema de coordenadas do mundo (Xw, Yw), que vai representar uma medida qualquer definida pelo usuário. Se for em um projeto arquitetônico, pode ser em centímetros ou metros, se for em um projeto automobilístico pode ser em milímetros, se for em um mapa de uma cidade ele pode ser em quilômetros, se for um projeto de uma placa de circuitos pode ser em uma fração de milímetros, indiferente, a aplicação vai ter um padrão, mas, na prática, vai ser apenas um sistema de coordenadas cartesiano.
A window tem também como características, além de ser um recorte de um mundo 2D, ser representado em um sistema de coordenadas cartesiano e ter um tamanho variável (zoom) e uma posição variável (navegação). Podemos mantê-la dentro do display file como uma estrutura que não irá ser renderizada na tela, mas representará os limites do que será desenhado.
Na hora que formos passar isso para o frame buffer, teremos uma surpresa, inclusive que foi descoberta em 1932, quando a BBC de Londres estava experimentando as primeiras transmissões experimentais de TV, e precisavam definir como o canhão da tela precisava funcionar, para que os sinais fossem transmitidos via ondas de rádio para serem mostrados na TV das pessoas. Nesse momento, definiram que seria mostrado no mesmo sentido em que se lê um papel.
Ou seja, o ponto {0, 0} está localizado no ponto superior esquerdo, e aumentar o Y fará o objeto ser jogado para baixo (um pouco contraintuitivo, mas ok), e esse padrão é usado até hoje. A partir daí você altera o sistema para mostrar os objetos na escala que você escolheu.
A viewport é outra estrutura de dados da nossa tela, um retângulo global, que não está dentro do display file, e que dá a resolução gráfica do sistema gráfico daquele momento. Se levarmos em conta o editor do P5 mostrado abaixo, por exemplo, a viewport seria a área em preto onde o jogo é renderizado.
Quando estamos programando, colocamos um objeto gráfico na tela, chamado comumente de canvas ou subcanvas (uma área de desenho), e a viewport será a área em que o programador decidirá desenhar dentro desse canvas.
A window será representada por uma estrutura de dados, com as opções:
- Xwmin
- Ywmin
- Xwmax
- Ywmax
Enquanto a viewport será representada por uma outra estrutura de dados contendo:
- Xvpmin
- Yvpmin
- Xvpmax
- Yvpmax
Uma outra forma de ver seria a window sendo a representação do que será desenhado na viewport. Se diminuirmos o tamanho da window, teremos o efeito de zoom in, se aumentarmos o tamanho teremos o zoom out, se movermos a window veremos outras partes do mundo, e assim por diante. Quando formos para o 3D a window será o que você estará olhando.
A fórmula a seguir representa a transformada de viewport:
Como pode ver, o Xvp é uma regra de três simples, enquanto o Yvp tem algumas pequenas diferenças para inverter o eixo e corrigir o posicionamento dos objetos que foi mostrado anteriormente. A maioria das fórmulas e detalhes aplicados a computação gráfica precisam de fórmulas matemáticas simples passadas durante o ensino fundamental e médio.
Mas e aí? Já sabia de tudo isso? Conta pra mim aí nos comentários. No próximo guia, vamos iniciar a programação de objetos em um canvas usando a biblioteca p5.
