Introdução à Computação Gráfica
com WebGL

por Carlos Hitoshi Morimoto

Tópicos das aulas

• 1. Seja bem-vinda(o)!
  • 1.1. Objetivos
  • 1.2. Pré-requisitos
  • 1.3. O que é “Computação Gráfica”?
  • 1.4. Onde estamos e para onde vamos
• 2. O que é uma imagem gerada por computador?
  • 2.1. Formação de Imagens
  • 2.2. Luz e percepção de cor
  • 2.3. Objetos da cena e suas propriedades
  • 2.4. Câmera, Olho ou Observador
  • 2.5. Representação de imagens
  • 2.6. Onde estamos e para onde vamos?
  • 2.7. Exercícios
• 3. Sistemas Gráficos
  • 3.1. Elementos de um sistema gráfico
  • 3.2. Dispositivos de entrada e saída
  • 3.3. Framebuffer
  • 3.4. Processadores e Memória
  • 3.5. Pipelines programáveis
  • 3.6. Bibliotecas gráficas
  • 3.7. OpenGL
  • 3.8. Onde estamos e para onde vamos
  • 3.9. Exercícios
  • 3.10. Para saber mais
• 4. Desenhando no Canvas HTML com JavaScript
  • 4.1. Esqueleto HTML para usar o canvas
  • 4.2. Usando arquivos CSS para formatar elementos do HTML
  • 4.3. Desenhando no canvas usando JavaScript
  • 4.4. Arrays no JavaScript
  • 4.5. Mais sobre polilinhas
  • 4.6. Onde estamos e para onde vamos
  • 4.7. Exercícios
  • 4.8. Para saber mais
• 5. Elementos de interação: botões, teclado e mouse
  • 5.1. Tipos de eventos
  • 5.2. Programação orientada a eventos
  • 5.3. Elementos do HTML: input button e range
  • 5.4. Teclado
  • 5.5. Mouse
  • 5.6. Onde estamos e para onde vamos?
  • 5.7. Exercícios
  • 5.8. Para saber mais
• 6. Gerando animações
  • 6.1. Animação
  • 6.2. Transformações geométricas: translação
  • 6.3. Rotação e escala
  • 6.4. Composição de transformações
  • 6.5. Onde estamos e para onde vamos?
  • 6.6. Exercícios
  • 6.7. Para saber mais
• 7. Desenhando com o WebGL
  • 7.1. OpenGL, WebGL e GLSL
  • 7.2. Programação com shaders
  • 7.3. Esqueleto de um programa usando WebGL
  • 7.4. Um exemplo mais complexo
  • 7.5. Onde estamos e para onde vamos?
  • 7.6. Exercícios
  • 7.7. Para saber mais
• 8. Interação e animação com WebGL
  • 8.1. Desenhando círculos
  • 8.2. WebGL e Animação
  • 8.3. Mas e a interação com WebGL?
  • 8.4. Onde estamos e para onde vamos?
  • 8.5. Exercícios
  • 8.6. Para saber mais
• 9. Geometria e Programação Geométrica
  • 9.1. Geometria Afim
  • 9.2. Geometria Euclidiana
  • 9.3. Onde estamos e para onde vamos?
  • 9.4. Exercícios
  • 9.5. Para saber mais
• 10. Um pouco mais sobre Geometria e Programação Geométrica
  • 10.1. Bases, vetores e coordenadas
  • 10.2. Sistemas de Coordenadas
  • 10.3. Coordenadas homogêneas
  • 10.4. Múltiplos sistemas de coordenadas
  • 10.5. Exemplo de mudança de sistemas de coordenadas
  • 10.6. Mudança de coordenadas: caso geral
  • 10.7. Produto vetorial
  • 10.8. Orientação
  • 10.9. Onde estamos e para onde vamos?
  • 10.10. Exercícios
  • 10.11. Para saber mais
• 11. Transformações afins
  • 11.1. Representação matricial
  • 11.2. Translação
  • 11.3. Escala
  • 11.4. Reflexão
  • 11.5. Rotação
  • 11.6. Cisalhamento
  • 11.7. Onde estamos e para onde vamos?
  • 11.8. Exercícios
  • 11.9. Para saber mais
• 12. Desenhando com WebGL usando transformações
  • 12.1. Transformações afins: revisão
  • 12.2. Animação de círculos usando translação no vertex shader
  • 12.3. Mais animação: usando escala
  • 12.4. Mais animação: usando rotação
  • 12.5. Matrizes de transformação no WebGL
  • 12.6. Desenhando no WebGL usando matrizes
  • 12.7. Desenhando objetos diferentes usando VAO (opcional)
  • 12.8. Onde estamos e para onde vamos?
  • 12.9. Exercícios
  • 12.10. Para saber mais
• 13. Vistas 3D e projeções
  • 13.1. Conversão para o sistema de coordenadas da câmera
  • 13.2. Construção do sistema de coordenadas da câmera
  • 13.3. Matriz de transformação da câmera
  • 13.4. Projeção Perspectiva
  • 13.5. Geometria Projetiva
  • 13.6. Orientabilidade e o espaço projetivo
  • 13.7. Novas coordenadas homogêneas
  • 13.8. Onde estamos e para onde vamos?
  • 13.9. Exercícios
  • 13.10. Para saber mais
• 14. Matriz de Transformação Perspectiva
  • 14.1. A transformação de projeção perspectiva
  • 14.2. Projeção em um volume de visualização
  • 14.3. Construção da matrix de transformação perspectiva
  • 14.4. Volume de Visualização Canônico
  • 14.5. Matriz de transformação perspectiva
  • 14.6. Exemplos: mas será que isso funciona?
  • 14.7. Onde estamos e para onde vamos?
  • 14.8. Para saber mais
• 15. Desenhando em 3D com o WebGL
  • 15.1. Desenho de um cubo, ainda sem perspectiva
  • 15.2. Desenho de um cubo em 3D: 1a tentativa
  • 15.3. 2a tentativa: usando a função lookAt()
  • 15.4. 3a tentativa: usando a função perspective()
  • 15.5. Animação do cubo em perspectiva
  • 15.6. Desenho de uma esfera
  • 15.7. Onde estamos e para onde vamos?
  • 15.8. Para saber mais
• 16. Iluminação e Sombreamento
  • 16.1. Modelos de iluminação global e local
  • 16.2. Luz: reflexão, absorção e transmissão
  • 16.3. Fontes de luz
  • 16.4. Atenuação
  • 16.5. Fontes direcionais e spotlights
  • 16.6. Tipos de reflexão da luz
  • 16.7. Onde estamos e para onde vamos?
  • 16.8. Para saber mais
• 17. Mais sobre Iluminação e Sombreamento
  • 17.1. Vetores usados no modelo
  • 17.2. Cálculo da iluminação usando o modelo de Phong
  • 17.3. Onde estamos e para onde vamos?
  • 17.4. Para saber mais
• 18. Iluminação e sombreamento no WebGL
  • 18.1. Iluminação com luz direcional
  • 18.2. Correção dos vetores normais
  • 18.3. Modelo de Phong com fonte de luz pontual
  • 18.4. Onde estamos e para onde vamos?
  • 18.5. Para saber mais
• 19. Mapeamento de textura
  • 19.1. Texturas e espaço de textura
  • 19.2. Função de desembrulho e parametrizações
  • 19.3. Exemplo: parametrizando uma esfera
  • 19.4. O processo de mapeamento de textura
  • 19.5. Onde estamos e para onde vamos?
  • 19.6. Para saber mais
• 20. Mapeamento de texturas no WebGL
  • 20.1. Textura procedimental
  • 20.2. Mapeamento a textura
  • 20.3. Interpolação
  • 20.4. Como configurar um mapa de textura no WebGL?
  • 20.5. Combinando textura com cores e iluminação
  • 20.6. Usando imagens de arquivos como textura
  • 20.7. Onde estamos e para onde vamos?
  • 20.8. Para saber mais
• 21. Sombras
  • 21.1. Sombras fortes e suaves
  • 21.2. Polígono de sombra
  • 21.3. A matriz de projeção de sombra
  • 21.4. Polígono de sombra no WegGL
  • 21.5. Mapa de sombras
  • 21.6. Onde estamos e para onde vamos?
  • 21.7. Para saber mais
• 22. Mapeamento de sombras no WebGL
  • 22.1. Cálculo do mapa de sombras
  • 22.2. Usando o mapa de sombras como textura
  • 22.3. Onde estamos e para onde vamos?
  • 22.4. Para saber mais
• 23. Rastreamento de Raios (Ray Tracing)
  • 23.1. A ideia básica
  • 23.2. Modelo de Ray Tracing
  • 23.3. Reflexão
  • 23.4. Objetos transparentes e refração
  • 23.5. Onde estamos e para onde vamos?
  • 23.6. Para saber mais
• 24. Mais sobre ray tracing
  • 24.1. Representação de Raios
  • 24.2. Geração de raios
  • 24.3. Raios e Interseções
  • 24.4. Interseção Raio-Esfera
  • 24.5. Vetor Normal
  • 24.6. Equação de Iluminação para Ray Tracing
  • 24.7. Intersecção com triângulos
  • 24.8. Onde estamos e para onde vamos?
  • 24.9. Para saber mais
• 25. Fractais
  • 25.1. Sistemas de funções iteradas e atratores
  • 25.2. Conjunto de Julia-Fatou
  • 25.3. Conjunto de Mandelbrot
  • 25.4. Dimensão fractal
• 26. Rotação 3D e Quaternions
  • 26.1. Deslocamento Angular
  • 26.2. Quaternions
  • 26.3. Rotação usando quaternions
  • 26.4. Composição de rotações
  • 26.5. Matrizes e quaternions

Apêndice

• HTML, CSS e Javascript
  • O que é programação Web?
  • Como é um documento HTML?
  • O que é CSS?
  • Usando Javascript para fazer um programa interativo
  • Animação usando Javascript
  • Onde estamos e para onde vamos
  • Exercícios

Índice

• Index
• Module Index
• Search Page

---

Introdução à Computação Gráfica com WebGL por Carlos Hitoshi Morimoto, está sob a licença Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.

---