Computação Gráfica 11569 - Engenharia Informática Gráficos 3D - Evolução Histórica Computação Gráfica 1
Sumário! Criação de Gráficos! Criação de Modelos 3D! Pipeline Gráfico! Hardware Gráfico! Bibliotecas Gráficas! Gráficos 3D na Internet Criação de Gráficos (Três tópicos)! Modeling! how to represent objects;! how to build those representations Animação e Realidade Virtual! Animation! representing/controlling the way things move! Rendering! how to create images Computação Gráfica 2
Criação de Gráficos! Pressupõe a existência de um dispositivo de saída! Monitor! CRT (Cathode Ray Tube)! LCD (Liquid Crystal Display)! LED (Light Emitting Diode) Resolução! A resolução de um monitor indica o número de pixeis.! O que é um Pixel? Por exemplo:! VGA 640x480! SVGA 800x600! XGA 1024x768! WXGA 1280x1024!! HD 1280 x 720! Full HD 1920 x 1080! 4K 3840 x 2160! 3
Resolução! A resolução de um monitor indica o número de pixeis.! O que é um Pixel? Por exemplo:! VGA 640x480! SVGA 800x600! XGA 1024x768! WXGA 1280x1024!! HD 1280 x 720! Full HD 1920 x 1080! 4K 3840 x 2160!! Mas então como é que um monitor pode ter várias resoluções? Resolução! É o número de pixéis usados para representar uma imagem.! Determina quer o nível de detalhe quer os requisitos de armazenamento. 272 416 136 208 68 104 4
Profundidade da cor (Colour depth)! Imagem monocromática a preto e branco:! Cada pixel é armazenado num bit (0 ou 1).! Uma imagem monocromática 640 480 ocupa 37.5 KB em memória (ficheiro).! Imagem monocromática em tons de cinzento:! Cada pixel é armazenado num byte (0 a 255).! Uma imagem em tons de cinzentos 640 480 ocupa 300 KB em memória (ficheiro).! Imagem a cores de 8-bits:! Cada pixel é armazenado num byte.! Suporta 256 cores, com qualidade de cor aceitável.! Uma imagem a cores de 8-bits com resolução 640 480 ocupa 300 KB em memória (ficheiro).! Imagem a cores de 24-bits:! Cada pixel é representado por três bytes (e.g., RGB).! Suporta 256 256 256 cores (16777216).! Uma imagem a cores de 24-bits com resolução 640 480 ocupa 900 KB em memória (ficheiro).! Muitas imagens a cores de 24-bits são armazenadas como imagens de 32-bits, sendo o byte suplementar usado para guardar um valor alpha. 2 níveis (escala: 0-1) 256 níveis (escala: 0-255) formato GIF (8 bits) formato JPEG (24 bits) Profundidade da cor http://en.wikipedia.org/wiki/colour_depth 1 bit 4 bit 8 bits 24 bits 5
Criação de modelos 3D! Modelação tridimensional! Malhas de pontos;! Curvas e superfícies;!! Mas quando os dados são enviado para a placa gráfica! Tudo se transforma em TRIÂNGULOS TRIÂNGULO! É o polígono mais simples e tudo pode ser construído com base em triângulos! Logo é suficiente! É um polígono convexo! Logo mais fácil de pintar! É garantidamente plano! Logo não levanta ambiguidades 6
Pipeline Gráfico! Aplicação de transformações geométricas aos vértices! Para posicionar os modelos e criar um cenário 3D;! Escolhe-se a vista pretendida do cenário através do posicionamento de uma câmara;! Faz-se a projecção de 3D para 2D; + TG( ) = Pipeline Gráfico! Aplicação de transformações geométricas aos vértices! Para posicionar os modelos e criar um cenário 3D;! Escolhe-se a vista pretendida do cenário através do posicionamento de uma câmara;! Faz-se a projecção de 3D para 2D;! Faz-se o preenchimento dos triângulos! Iluminação e materiais 7
Pipeline Gráfico Créditos: A. Fernandes, Univ. Minho Hardware Gráfico! Controladores VGA (Video Graphics Array)! Introduzido pela IBM em 1987! Todo o processamento é realizado pelo CPU.! O VGA é utilizado somente como frame buffer. 8
Hardware Gráfico! GPU (Graphics Processing Unit)! Termo introduzido pela nvidia em 1990! 1ª Geração de GPUs! até 1998 (nvidia TNT2, ATI Rage)! Interpolação: capacidade para calcular os pixeis a partir dos vértices de um triângulo e aplicar texturas. Hardware Gráfico! GPU (Graphics Processing Unit)! 2ª Geração de GPUs! 1999-2000 (GeForce 256, GF 2, Radeon 7500)! Transformação de Vértices! Cálculo de Iluminação (por vértice) 9
Hardware Gráfico! GPU (Graphics Processing Unit)! 3ª Geração de GPUs! 2001 (GeForce 3 e 4, Radeon 8500)! Programação ao nível dos vértices (Vertex Shader)! 4ª Geração de GPUs! 2002-2008 (GeForce FX, ATI Radeon 9700)! Programação ao nível do pixel (Pixel Shader) Hardware Gráfico! GPU (Graphics Processing Unit)! 5ª Geração de GPUs! 2008-...! Programação ao nível da criação de geometria (Geometry Shader). 10
Pipeline Gráfico Créditos: A. Fernandes, Univ. Minho Pipeline Gráfico GPU Créditos: A. Fernandes, Univ. Minho 11
www.nvidia.com GPUs NVIDIA! GeForce GTX 295! GeForce 8800 GTX / GTS! (768MB/640MB ou 320MB)! Suporta Microsoft DirectX 10 Programming using CUDA Technology GPUs NVIDIA! GeForce GTX 690 12
Bibliotecas Gráficas! Actualmente existem:! OpenGL! Direct3D que é parte do DirectX Bibliotecas Gráficas! OpenGL tem já várias versões! OpenGL 1.0 (1992)! OpenGL 2.0 (2004)! introdução do GLSL! OpenGL 3.0 (2008)! Suporte para Geometry Shader! OpenGL 4.3 (2012)! Suporte para Tesselation Shader e Compute Shader! Melhoramentos na transferência de dados entre shaders! OpenGL 4.5 (2014)! Compatibilidade com OpenGL ES 3.1! Introduz vários melhoramentos, ex: função para obter sub-regiões duma textura, etc. 13
Gráficos 3D na Internet! VRML: Virtual Reality Markup Language (1995)! Ficheiro de texto que permite especificar gráficos tridimensionais.! Requer a instalação de um plugin para o browser.! VRML97: Virtual Reality Modeling Language! Introduz melhoramentos (ex: interação, animação) Surgiram vários plugins, logo dificuldades na visualização de conteúdos correctamente. Gráficos 3D na Internet! Web3D (2000)! Consórcio que assumiu a responsabilidade de padronizar de novo o VRML! E passou-se a chamar: X3D (Extensible3D)! Mas o X3D acabou por não obter grandes resultados! Como os gráficos na Internet requerem:! Muito desempenho;! Muita largura de banda; Estas tentativas acabaram por nunca se impor! 14
Gráficos 3D na Internet! O3D! Uma API que estende o JavaScript com capacidades gráficas 3D, usando OpenGL e DirectX.! Criado pela Google! Mais tarde foi integrado com WebGL! WebGL (OpenGL ES 2.0 for the Web)! Uma API em JavaScript para gráficos 3D/2D para browsers compatíveis;! Está disponível a partir do novo elemento canvas do HTML5! WebGL 1.0 (2011)! WebGL 2.0 - Baseada na especificação do OpenGL ES 3.0 Gráficos 3D na Internet! WebGL! Existem várias bibliotecas que disponibilizam WebGL (ex: GLGE, Three.js, SpiderGL, )! Corre no browser, logo em todas as plataformas (PC, Tablet, Smartphone)! Logo muito promissor! HTML5 + WebGL 15
Gráficos 3D na Internet! WebGL! Exemplos http://madebyevan.com/webgl-water/ http://helloracer.com/webgl/ http://lights.elliegoulding.com/ Projeto prático! 1º Trabalho OpenGL --> Entrega a 18 Abril! Poderá ser um pequeno jogo/aplicação! Snake! Labirinto! Relógio 3D! Etc! 2º Trabalho WebGL --> Entrega a 23 Maio! A definir oportunamente! Mas poderá ser uma versão do 1º trabalho para a web 16