Página do Curso CCI-36 - Computação Gráfica

Edição de 2020 semestre 1

Avaliação

• 1 entrega por bimestre em dupla/trio (demonstração em sala, relatório PDF, código-fonte)
• Um projeto final de implementação valendo o exame - duplas/trios

Material para curso CTC-34

• 00-Apresentacao.pdf - Plano do curso
• 01-Cores.pdf Cores e percepção
• 02-Imagem.pdf Imagens
• 03-Formas-Vetoriais.pdf Formas-Vetoriais
• Transf-2D-Geometria-Projetiva.pdf Transf 2D e Geometria Projetiva
• 05-Transformacoes-3D-e-Projecoes.pdf Transformacoes 3D e Projecoes
• XX_OpenGL_Parte1.pdf Aulas de OpenGL parte 1
• XX_OpenGL_Parte2.pdf Aulas de OpenGL parte 2
• XX_OpenGL_Parte3.pdf Aulas de OpenGL parte 3
• 06-Viewing.pdf - 06-Viewing.pdf
• 07-Textura.pdf - 07-Textura.pdf
• 08-Shading.pdf - 08-Shading.pdf
• 09-Raytrace-Pell.pdf - 09-Raytrace-Pell.pdf
• 10-Modelagem-geometrica.pdf - 10-Modelagem-geometrica.pdf
• 11-Box_Modelling.pdf - 11-Box_Modelling.pdf
• 11-Curva-e-Superficie.pdf - 11-Curva-e-Superficie.pdf

Exemplos do curso

• Exemplo do WebGL (sem THREE.js)
• Checkers
• Visualização de Campo
• Cadeiras - 1
• Cadeiras - 2
• Cadeiras - 3
• Cadeiras - 4
• Bandeira - 1
• Bandeira - 2
• Bandeira - 3
• Editor Interativo - 1
• Editor Interativo - 2
• Shader fragmento básico com THREE.JS
• outro exemplo fragment shader
• outro exemplo fragment shader
• Outro shader básico com THREE.JS
• Exemplo shader vértice + fragmento
• Exemplo shader usando coordenadas de textura
• Exemplo shader com acesso a uma textura
• Exemplo shader como efeito de pós-processamento

Explicações dos Exemplos

Introdução ao THREE.JS

Explicação do Checkers

Explicação da Visualização de Campo

Explicação das Cadeiras

Primeira Tarefa

Prazo: SUSPENSO

Mostrar funcionando em sala na sexta-feira, relatório e código-fonte entregues até segunda-feira seguinte.

Modelo físico animado - pode ser da Física, da Química, da Matemática, ou da Engenharia...

Construção de uma cena em 3D utilizando o THREE.JS e deve apresentar os seguintes itens:

• Construir objetos de forma programática (codificar a geometria no código-fonte)
• Construir um grafo de cena no THREE.JS com hierarquia de objetos
• Definir posicionamento de câmera
• Implementar movimento dos objetos utilizando transformações e a hierarquia
• Objetos formados por primitivas geométricas

Segunda Tarefa

Mostrar funcionando em sala na sexta-feira, relatório e código-fonte entregues até segunda-feira seguinte.

Cena realista

• Construir uma cena no THREE.JS
• Deve importar modelos prontos em 3D (feitos no Blender, por exemplo)
• Deve fazer mapeamento de texturas (definir wrapping)
• Implementar um shader em GLSL, utilizando “uniforms” e aplicá-lo na cena ou em algum objeto

Projeto Final

Apresentar em sala para a turma

O tema é livre e deve:

• Fazer bom uso do que aprendemos no curso
• Boa parte do trabalho ser baseada no THREE.JS
• Apresentação para a turma em sala de aula no dia marcado
• Deve ser interativo ou baseado em uma fonte de dados

Links para materiais externos

• THREE.JS
• THREE.JS Repositório
• Documentation
• Introdução ao THREE.JS
• Exemplos Stemkoski
• Tutorialzinho
• Realidade Aumentada
• Physijs engine física
• Giroscópio
• Whammy WebM Encoder
• Exemplos complexos
• CodeSandbox
• CodePen
• Blender 2.8
• Shadertoy
• Tutoriais HTML, CSS, JavaScript
• Shader tutorial inicial
• Shader tutorial completo
• Exemplos de animações - Universo Mecânico