Introdução

Conceitos Fundamentais

Processo da Computação Gráfica

Modelação: Especificação do modelo gráfico.
- Grafo de Cena: Estrutura de dados que define e organiza o modelo gráfico.
- Programação gráfica: Uso de uma linguagem de programação, ou um documento, para descrever o grafo de cena.
Construção: Transformação do modelo gráfico numa imagem.

Definição e Disciplinas Relacionadas.

Computação Gráfica: É o estudo e aplicação das técnicas de modelação, processamento e construção de objetos gráficos em computadores.
Visão Artificial: É o oposto da computação gráfica: procura reconstruir um modelo (virtual) a partir de imagens reais.
Programação de Jogos: É uma aplicação da computação gráfica: usa um modelo (virtual) onde o utilizador interage.
Processamento de Imagem: Tem técnicas para:
- Melhoramento de imagem (equalização do histograma, etc).
- Compressão de imagem.
- Deteção de features: arestas,super-pixeis, etc..
- Resolver crimes (CSI).
Álgebra Linear: Proporciona as bases formais e numéricas para a CG.

Modelação

A modelação consiste em especificar o modelo gráfico que define a imagem.

Espaço do Modelo: É um espaço 2D ou 3D onde é definido o modelo, juntando e organizando vários objetos gráficos - nos espaços 3D os problemas são mais complexos e tratados de forma significativamente diferente dos espaços 2D.
Objetos Gráficos: Entidades geométricas (linhas, superfícies) ou luzes, textos, imagens.
Representações Matemáticas: Permitem definir e transformar os objetos gráficos.
Vistas: Mostram um modelo numa perspetiva específica e enquadram o passo da construção
- Os modelos 2D têm vistas relativamente simples.
- Para modelos 3D é necessário ter em conta inúmeras propriedades que envolvem a câmara, a iluminação, entre outras.

Grafo de Cena

O Grafo de Cena é a estrutura de dados que define o modelo gráfico.

---
config:
  theme: neutral
---
flowchart TD;
scene([scene]) --> person([person])
person --> head([head])
person --> body([body])
person --> arms([arms])
person --> legs([legs])
head --> leye([left eye])
head --> reye([right eye])
head --> mouth([mouth])

arms --> larm([left arm])
arms --> rarm([right arm])

legs --> lleg([left leg])
legs --> rleg([right leg])

Além do “simples” desenho de objetos, interessa definir um modelo onde os objetos são colocados e geridos. O grafo de cena organiza os vários objetos gráficos numa única estrutura de dados que “alimenta” a rotina de rendering.

Programação Gráfica

A programação gráfica consiste em especificar um modelo (i.e. um grafo de cena), usando um programa ou um documento.

Iniciar o modelo:
- Colocar e ligar objetos gráficos.
- Definir vistas.
Evoluir o modelo:
- Remover e/ou acrescentar novos objetos.
- Alterar atributos (posições, …).

Construção

Construção (ou Rendering) é o processo computacional que transforma um modelo gráfico numa imagem exibida num dispositivo físico.

A construção pode ser feita de dois “modos” distintos:

Modo Retido: O modelo é definido e depois a imagem é construída.
Modo Imediato: Os objetos são imediatamente desenhados.

Outros Aspetos da Computação Gráfica

Problemas:
- Oclusão: o que está “à frente” e o que “fica tapado”?
- Colocação: posição, rotação, tamanho.
- Aspeto: cores, texturas, iluminação, sombras.
- etc.
Hardware: Ecrãs, Impressoras, Plotters, Projetores holográficos, etc.
Animação:
- Filmes: uma sequência de imagens.
- Jogos: uma sequência de imagens, com interação.
- Simulações: uma sequência de imagens, seguindo as “leis de um sistema”.
Interação: Teclados e Ratos, Rede, Interfaces Gráficos, etc.

Aplicações

Filmes


Filme “Avatar”

Jogos


Jogo “Starcraft”

Visualização


Fractal

Simulação


Aerodinâmica

Estatística


Gapminder

Medicina


Ressonância Magnética

Computação Gráfica na Web

A Computação Gráfica na web proporciona:

Normas Abertas com ecossistema enorme:
- Aplicações, Ferramentas.
- Informação, Comunidade.
Paradigmas modernos de descrição de dados e de programação.
Suporte para gráficos 2D (canvas, svg, etc) e 3D (x3dom, three.js, etc).

Web 2D

Os elementos canvas e svg:

São elementos HTML para gráficos 2D (e 3D).
Proporcionam ferramentas para modelar:
- Figuras Geométricas, Texto, Imagens.
- Transparências, Gradientes, Transformações, Glifos.

Web 3D

O elemento x3d é usado para integrar conteúdo 3D diretamente num documento html, sem extensões.
A biblioteca threejs usa o elemento canvas com contexto webgl permite o rendering de gráficos 2D e 3D, sem extensões.

Exemplos elementares

Contexto 2D

<canvas id="cg:exemplos:c2d" width="256" height="128" />
<script>
  const gc = document.getElementById("cg:exemplos:c2d").getContext("2d");
  gc.fillStyle = "steelblue";
  gc.fillRect(64, 32, 128, 64);
</script>

SVG

<svg
    width = "256"
    height = "128">
  <rect
    x = "64" y = "32"
    width = "128" height = "64"
    style = "fill:steelblue"></rect>
</svg>

ThreeJS

<div id="gc:exemplos:3js"></div>
<script>
import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
const renderer = new THREE.WebGLRenderer( {alpha: true} );
renderer.setSize(256, 256);
renderer.setClearColor( 0xffffff, 0);
const container = document.getElementById("gc:exemplos:3js")
container.appendChild(renderer.domElement);
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(
  35,       // abertura
  500/500,  // proporção largura/altura
  0.1,      // corte perto
  10000     // corte longe
  );
camera.position.set( -2.5, 0, 20 );
camera.lookAt( scene.position );
const geometry = new THREE.BoxGeometry( 5, 5, 5 );
const material = new THREE.MeshLambertMaterial( {color: "steelblue"} );
const mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
const light = new THREE.AmbientLight( "white" );
scene.add( light );
function animate() {
    mesh.rotation.x += 0.005;
    mesh.rotation.y += 0.005;
    renderer.render(scene, camera);
    requestAnimationFrame(animate);
}
animate();
</script>

X3D

<X3D
    width = "256px"
    height = "256px">
  <Scene>
    <Shape>
      <Appearance>
        <TwoSidedMaterial
          diffuseColor = "steelblue">
        </TwoSidedMaterial>
      </Appearance>
      <Box></Box>
    </Shape>
  </Scene>
</X3D>

Keyboard shortcuts

Computação Gráfica