.. _`sec:01`: Introduções =========== Seja bem vindo à disciplina de Introdução à Computação Gráfica! Nesse semestre, nossas aulas voltam a ser presenciais, nos seguintes horários: - 4as-feiras das 10:00 às 11:40 h; e - 6as-feiras das 08:00 às 09:40 h. Além das aulas, convidamos você para participar também das discussões no Discord enviando suas dúvidas, discutindo e respondendo às dúvidas de seus colegas. Caso precisar falar de algum assunto mais particular, use o link `converse com o Hitoshi `__ disponível na página da disciplina para enviar mensagens diretas para o Hitoshi. Para sua conveniência, alguns detalhes sobre a disciplina também estão na seção `informações sobre MAC0420 e MAC5744 `__. Em particular, a disciplina vai adotar o seguinte `critério de avaliação `__. Sobre MAC0420 e MAC5744 ----------------------- Essas duas disciplinas serão oferecidas em conjunto e visam 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. A avaliação da disciplina será baseada em provas, provinhas e exercícios-programa (EPs). O critério de avaliação está descrito em `critério de avaliação `__. Os EPs serão desenvolvidos em `WebGL `__ e JavaScript. Dessa forma, os programas poderão ser executados em qualquer navegador moderno compatível com HTML5. Etiqueta -------- Gostaríamos que todos participem das aulas da forma mais confortável e segura possível ao longo de todo o semestre, mas principalmente nesse período de readaptação ao ensino presencial. Por isso, por favor, siga as recomendações constantes no site `Retorno Seguro - como voltar às atividades presenciais com segurança `__. Caso você apresente sintomas e/ou teste positivo para qualquer variante do vírus SARS-CoV-2, mantenha-se afastado e comunique sua situação pelo link `converse com o Hitoshi `__. .. _pre-requisitos: Pré-requisitos -------------- Para fazer essa disciplina vamos assumir que você já seja um programador de nível intermediário e, por esse motivo, a disciplina tem como pré-requisito MAC0122. Você deve fazer uso também de seus conhecimentos sobre algoritmos, estruturas de dados e fundamentos de geometria e álgebra linear. No entanto, não é necessário nenhuma experiência prévia com OpenGL ou JavaScript. Bibliografia ------------ Não vamos adotar um livro texto em particular, mas muito do material teórico que utilizamos, inclusive para escrever nossas notas de aula, são baseadas nos textos a seguir: - `Interactive Computer Graphics. A top-down approach with WebGL. Dave Shreiner and Edward Angel `__. - Baixe e instale o `Material do livro `__ - Computer Graphics: Principles and Practice. James Foley, Andries Van Dam, and Steve Feiner. - `Prof._Dave Mount Computer Graphics Notes `__ Ao longo do curso, vamos desenvolver vários programas usando WebGL e JavaScript, que serão executados a partir de um navegador Web moderno, compatível com versões mais atuais de HTML. Você pode utilizar esses links para conhecer melhor essas ferramentas. - `Estruturando a web com HTML `__ - `Uma reintrodução ao JavaScript `__ - `WebGL Tutorial `__ Introduction_to_HTML) - `WebGL2 Fundamentals `__ Outros recursos online ~~~~~~~~~~~~~~~~~~~~~~ Há muito material a sua disposição para aprender mais sobre CG, WebGL e Javascript. Sinta-se a vontade de compartilhar seus links favoritos nas nossas listas de discussão. Vamos começar indicando apenas algumas por enquanto. - `Khronos Group – WebGL `__ - `Khonos WebGL2 Quick Reference Guide `__ - `Introduction to Computer Graphics - David Eck `__ .. _`subsec:IntroducaoCG`: Introdução à 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 :numref:`fig-01-Sketchpad`. 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. .. figure:: ./figuras/Sketchpad-Apple.jpg :alt: Skethpad. :name: fig-01-Sketchpad :width: 80.0% :align: center 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, nosso foco neste curso será 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 sua 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 nesse curso. .. _conteudo-da-disciplina: Conteúdo do curso ~~~~~~~~~~~~~~~~~ A produção de imagens foto-realistas é um processo extremamente complexo pois envolve conhecimentos de muitas áreas do conhecimento, como física, biologia, geometria, álgebra linear e muitas 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 e projetos arquitetônicos, e também visualização científica, como funções matemáticas, temperaturas do oceano, velocidades do vento e assim por diante. Iremos produzir animações simples (por meio da produção de muitas imagens únicas), mas 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 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 :numref:`fig-01-renderizacao3d`. .. figure:: figuras/renderizacao3D.png :alt: Renderização de objetos 3D :name: fig-01-renderizacao3d :width: 85.0% :align: center 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 é extremamente 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 final do semestre, 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. .. _principais-topicos: 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. - Modelamento - 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 Onde estamos e para onde vamos ------------------------------ Você deve ter agora um bom entendimento dos objetivos do curso, sua estrutura, e sobre o que você precisa fazer para ter um bom desempenho e ser aprovado. 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.