1. Seja bem-vinda(o)!

Seja bem-vinda(o) à disciplina de Introdução à Computação Gráfica!

Essas notas de aula buscam concentrar, em um único lugar, o conteúdo teórico das aulas da disciplina. Recomendamos a leitura desse conteúdo antes de cada aula presencial, como forma de preparação para a aula.

Queremos, desde já, agradecer o Professor Dave Mount pelo seu apoio a esse projeto e seu consentimento de utilizar suas notas de aula como base desse material em português. Além de atualizadas, estendemos alguns tópicos e incluimos novos exemplos usando WebGL e JavaScript.

Além das notas do Prof. Mount, vários exemplos foram baseados no livro Interactive Computer Graphics. A top-down approach with WebGL de Dave Shreiner and Edward Angel, e no material sobre WebGL do Khronos Group.

1.1. Objetivos

Essa disciplina visa introduzir conceitos de computação gráfica, fornecendo conhecimento teórico para a criação de imagens sintéticas e também experiência prática no desenvolvimento de programas gráficos interativos. Os principais assuntos a serem cobertos ao longo do curso são (não necessariamente nessa ordem):

• Fundamentos: histórico e aplicações, interfaces gráficas, dispositivos gráficos, e o pipeline gráfico.
• Padrões para representação de imagens e cores.
• Representação e construção de objetos geométricos.
• Geometrias, sistema de coordenadas e transformações geométricas.
• Recortes e janelas.
• Visibilidade, oclusão, buffer de profundidade.
• Ray-tracing.
• Mapeamento de texturas.
• Representação de curvas e superfícies.
• Representação de objetos tridimensionais.
• Animação.

Os exemplos e exercícios serão desenvolvidos em WebGL e JavaScript. Dessa forma, os programas poderão ser executados em qualquer navegador moderno.

1.2. Pré-requisitos

Para fazer essa disciplina vamos assumir que você já seja um programador de nível intermediário, ou seja, que tenha realizado com sucesso ao menos 2 semestres de cursos introdutórios de programação usando uma linguagem imperativa como C/C++, Java ou Python. Além disso, nessa disciplina você terá a oportunidade de aplicar os seus conhecimentos sobre algoritmos, estruturas de dados, geometria e álgebra linear.

No entanto, apesar dos exemplos serem em WebGL e JavaScript, não é necessário nenhuma experiência prévia com OpenGL ou JavaScript.

1.3. O que é “Computação Gráfica”?

A computação gráfica (CG) é uma área da computação que trata de assuntos relacionados à produção de imagens e animações (ou sequências de imagens) por meio de um computador.

A CG teve início no final da década de 1950 quando Ivan Sutherland, um dos pioneiros da área, desenvolveu o Sketchpad como resultado de sua tese de doutorado. Usando um hardware e software muito simples para os padrões atuais, o Sketchpad permitia produzir desenhos de linhas como ilustrado na Figura Fig. 1.1. Além de grande impacto na CG, as ideias introduzidas pelo Sketchpad influenciaram também as áreas de CAD (computer aided design – design assistido por computador), HCI (human computer interaction – interação humano-computador) e programação orientada a objetos. Por essas contribuições, Ivan Sutherland recebeu o prêmio de Turing em 1988 e o prêmio de Kyoto em 2012.

Fig. 1.1 Skethpad. (Imagem reproduzida da Wikipedia)

Como tantas outras áreas da computação a Computação Gráfica se desenvolveu muito nas últimas décadas, tanto no hardware quanto no software, e continua se desenvolvendo com grande rapidez. Hoje, por exemplo, é impossível imaginar a área de entretenimento, como jogos eletrônicos, cinema e TV, sem a CG. A evolução é tamanha que hoje é possível produzir imagens que são praticamente indistinguíveis de imagens fotográficas ou, pelo menos, criam uma ilusão de realidade bastante convincente. Além disso, as placas gráficas se tornaram tão poderosas que são utilizadas na construção de supercomputadores e tem alavancado o desenvolvimento de outras áreas de aplicação como inteligência artificial e realidade mista.

Ainda assim, a produção de imagens foto-realistas continua sendo um desafio por ser um processo extremamente complexo. Nesse curso, vamos fornecer uma breve introdução sobre os sistemas de hardware e software, e cobrir alguns fundamentos para produzir imagens de objetos 3D. Ao final você vai ser capaz de aplicar esses conhecimentos na produção de animações interativas com objetos 3D usando WebGL. O WebGL é uma versão do OpenGL, uma biblioteca gráfica considerada hoje um padrão para o desenvolvimento de aplicativos gráficos, suportada pela maioria dos navegadores modernos.

Mas assim como o foco em nossos cursos de introdução à computação não é no ensino de uma linguagem de programação, o foco neste curso também não será em JavaScript ou WebGL, mas no desenvolvimento de habilidades para resolver problemas da CG. Por exemplo, vamos procurar compreender como fundamentos da matemática, da física, de algoritmos e estruturas de dados podem ser utilizados na produção de imagens digitais. Caso você esteja mais interessado na produção das imagens, ao invés dos fundamentos, há ferramentas computacionais mais específicas que você pode utilizar mas que não serão tratadas nessa disciplina.

1.3.1. Conteúdo da disciplina

A produção de imagens foto-realistas é um processo bastante complexo pois envolve conhecimentos de diversas áreas do conhecimento, como física, biologia, geometria, álgebra linear e várias outras além da computação. Nesse curso vamos cobrir apenas alguns fundamentos da CG que permitam você manipular e renderizar (fazer o computador desenhar) uma cena composta por objetos tridimensionais. Como esses fundamentos são os mesmos utilizados na produção de efeitos especiais no cinema e na criação de jogos eletrônicos, você vai obter uma compreensão melhor sobre o funcionamento e produção desses efeitos e sistemas gráficos. Efeitos mais sofisticados em geral envolvem apenas uma modelagem física e da luz mais complexa e uso de técnicas mais avançadas de renderização.

Boa parte do curso está voltada ao entendimento do processo de produzir uma única imagem a partir de um modelo de cena bidimensional (2D) ou tridimensional (3D). Na verdade, este é um aspecto muito limitado da computação gráfica. Por exemplo, ele ignora o papel da CG em tarefas como a visualização de coisas que não podem ser descritas como “cenas”. Isso inclui a renderização de desenhos técnicos, incluindo gráficos de engenharia, de projetos arquitetônicos e visualização científica em geral que podem incluir, por exemplo, funções matemáticas, temperaturas do oceano, velocidades do vento e assim por diante.

Após dominar o processo de renderizar uma única imagem, podemos produzir animações simples por meio da produção de muitas imagens únicas. No entanto, questões mais específicas da animação, como motion blur (desfoque de movimento), morphing (transformação de forma), blending (mistura), anti-aliasing etc, não serão abordadas. Esses temas são costumeiramente tratados em cursos mais avançados.

O processo de geração de uma imagem a partir de um modelo é chamado de renderização. A renderização de uma cena 3D é ilustrado na Figura Fig. 1.2.

Fig. 1.2 Renderização de objetos 3D

O processo começa produzindo um modelo matemático do objeto a ser renderizado. Tal modelo deve descrever não apenas a forma do objeto, mas também várias outras propriedades como cor e tipo de acabamento da superfície como brilhante, fosco, transparente, difuso, escamoso, rochoso etc. Produzir modelos realistas é bastante complexo mas, felizmente, não é nossa principal preocupação. Vamos deixar isso para os artistas e modeladores.

O modelo de cena também deve incluir informações sobre a localização e as características das fontes de luz (sua cor, brilho) e a natureza atmosférica do meio pelo qual a luz viaja, como nevoeiro, água, fumaça etc.. Além disso, precisaremos saber a localização da câmera ou do olho do observador. Podemos pensar no observador como se estivesse segurando uma “câmera virtual” que tira uma “fotografia” da cena. Precisamos conhecer as características desta câmera como a sua distância focal e a razão de aspecto (aspect ratio), por exemplo.

Com base em todas essas informações, precisamos realizar uma série de etapas para produzir a imagem (“sintética”) desejada.

• Projeção: Projetar a cena 3D sobre o plano (2D) da imagem na câmera virtual.
• Cor e sombreamento: Para cada ponto da imagem é necessário calcular sua cor. A cor é uma função da cor da superfície do objeto, da sua textura, da posição relativa das fontes de luz e, em modelos mais complexos de iluminação, da reflexão indireta da luz sobre as superfícies dos demais objetos da cena.
• Remoção de superfícies escondidas: Elementos que estão mais próximos da câmera escondem os objetos que estão atrás, mais distantes da câmera. É necessário calcular quais superfícies estão visíveis e quais não estão.
• Rasterização: Uma vez calculadas as cores para pintar cada ponto da imagem, a etapa final é mapear essas cores para o nosso dispositivo de exibição (monitor).

Ao concluir a disciplina, você deve ter um entendimento básico de como cada uma das etapas é executada. Uma compreensão mais detalhada desses elementos vai além do escopo deste curso, até pela sua curta duração de um semestre. Mas, combinando o que vai aprender aqui com outros recursos (livros ou da Internet), você saberá o suficiente para, digamos, escrever um videogame simples, escrever um programa para gerar imagens altamente realistas ou produzir uma animação simples.

1.3.2. Principais tópicos

• Fundamentos
  • Programação gráfica: OpenGL (WebGL), funções gráficas primitivas, cor, observação, programação baseada em eventos, frame buffers.
  • Programação geométrica: revisão de álgebra linear, transformação afim, representação de pontos e vetores, coordenadas homogêneas, mudança de sistemas de coordenadas.
• Modelagem
  • Tipos: modelos poliédricos, hierárquicos, fractais e dimensão fractal.
  • Curvas e superfícies: representação de curvas e superfícies, interpolação, Bézier, B-splines, NURBS.
  • Acabamentos: mapeamento de textura, bump mapping.
• Projeção
  • Transformação 3D e perspectiva: escala, rotação, translação, projeção ortogonal e perspectiva, clipping.
  • Remoção de superfícies escondidas: algoritmo do pintor, back-face culling.
• Realismo
  • luz e sombreamento
  • ray-tracing
  • cor

1.4. Onde estamos e para onde vamos

Você deve ter agora um bom entendimento dos objetivos da disciplina e sua estrutura. Para saber outros detalhes, como critério de avaliação, consulte nossa página no sistema e-Ddisciplinas da USP.

Começamos descrevendo as principais etapas para produzir a imagem de um objeto e/ou cena 3D, que é um dos principais objetivos da CG.

Nosso próximo tópico será sobre sistemas gráficos e seus recursos básicos para desenhar imagens simples.

Para reforçar o conteúdo tratado nessas primeiras aulas, sugerimos as seguintes leituras:

• Computer Graphics: sobre a história da computação gráfica.
• Capítulo 1 do Livro do David Eck e/ou:
  • Capítulo 1 do livro “Interactive Computer Graphics” de Edward Angel.