Universidade Federal do Ma Introdução à Computação Gráfica Prof. Anselmo C. de Paiva Depto de Informática VRML

Roteiro Introdução a VRML Conceitos Chave Construindo e Agrupando Formas Predefinidas http://www.wiley.com/legacy/compbooks/vrml2sbk/cover/cover.htm Prof. Anselmo C. de Paiva - DEINF-UFMA

1-2 - Introdução a VRML - Conceitos Chave Virtual Reality Modeling Language

Arquivo VRML Descrição textual de um mundo VRML.. Extensão wrl Prof. Anselmo C. de Paiva - DEINF-UFMA

Tipos de Componentes de um Arquivo VRML: VRML Header (cabeçalho) - obrigatório Protótipos Formas, interpoladores, sensores e scripts Rotas Prof. Anselmo C. de Paiva - DEINF-UFMA

Outros itens: Comentários Nodos Campos e valores de campos Nomes de nodos definidos Nomes de nodos usados Prof. Anselmo C. de Paiva - DEINF-UFMA

fig 2.1 Prof. Anselmo C. de Paiva - DEINF-UFMA

O Cabeçalho VRML #VRML V2.0 utf8 Prof. Anselmo C. de Paiva - DEINF-UFMA

Comentários # Draw the hut walls Prof. Anselmo C. de Paiva - DEINF-UFMA

Nodos Nodos descrevem formas e suas propriedades. Geralmente contém: tipo (obrigatório) chaves (obrigatório) campos (pocionais) e seus valores dentro das chaves Prof. Anselmo C. de Paiva - DEINF-UFMA

Exemplo de nodo Cylinder { } height 2.0 radius 2.0 Prof. Anselmo C. de Paiva - DEINF-UFMA

Campos e valores de campos height 2.0 radius 2.0 São os atributos de um nodo São opcionais porque têm valores default Prof. Anselmo C. de Paiva - DEINF-UFMA

Definições de nomes de campos DEF node-name node-type { ... } Prof. Anselmo C. de Paiva - DEINF-UFMA

Uso de nomes de campos USE USE node-name Prof. Anselmo C. de Paiva - DEINF-UFMA

Formas geometry - define a estrutura material - aparência (cor) texture - textura (vidro, madeira, etc.) Estes atributos ficam dentro do nodo SHAPE VRML suporta formas geométricas primitivas e avançadas Prof. Anselmo C. de Paiva - DEINF-UFMA

Agrupando formas Nodo group Prof. Anselmo C. de Paiva - DEINF-UFMA

3 - Construindo e Agrupando Formas Predefinidas

Forma - Nodo Shape Todas as formas são construídas com o nodo Shape appearance NULL #exposedField SFNode geometry NULL #exposedField SFNode } Prof. Anselmo C. de Paiva - DEINF-UFMA

Aparência - nodo appearance O atributo do campo Appearance pode ser preenchido com um nodo appearance Appearance { material NULL #exposedField SFNode texture NULL #exposedField SFNode textureTransform NULL #esposedField SFNode } Prof. Anselmo C. de Paiva - DEINF-UFMA

Nodo Material Especifica atributos de material podendo ser usado como valor do atributo material de appearance Material { ambientIntensity 0.2 #exposedField SFFloat diffuseColor 0.8 0.8 0.8 #exposedField SFColor emissiveColor 0.0 0.0 0.0 #exposedField SFColor shininess 0.2 #exposedField SFFloat specularColor 0.0 0.0 0.0 #exposedField SFColor transparency 0.0 #exposedField SFFloat } Prof. Anselmo C. de Paiva - DEINF-UFMA

Caixa - Nodo Box Cria uma caixa, podendo ser usado como valor do campo geometry no nodo shape. Box { size 2.0 2.0 2.0 #field SFVec3f Prof. Anselmo C. de Paiva - DEINF-UFMA

Exemplos fig 3.1 Prof. Anselmo C. de Paiva - DEINF-UFMA

Prof. Anselmo C. de Paiva - DEINF-UFMA

Nodo Cone Cone { } bottomRadius 1.0 #field SFFloat height 2.0 #field SFFloat side TRUE #field SFBool bottom TRUE #field SFBool } Prof. Anselmo C. de Paiva - DEINF-UFMA

Prof. Anselmo C. de Paiva - DEINF-UFMA

Prof. Anselmo C. de Paiva - DEINF-UFMA

Nodo Cylinder Cylinder { } radius 1.0 #field SFFloat height 2.0 #field SFFloat side TRUE #field SFBool top TRUE #field SFBool bottom TRUE #field SFBool } Prof. Anselmo C. de Paiva - DEINF-UFMA

Prof. Anselmo C. de Paiva - DEINF-UFMA

Prof. Anselmo C. de Paiva - DEINF-UFMA

Prof. Anselmo C. de Paiva - DEINF-UFMA

Nodo Sphere Sphere { } radius 1.0 #field SFFloat Prof. Anselmo C. de Paiva - DEINF-UFMA

Prof. Anselmo C. de Paiva - DEINF-UFMA

Nodo Group Group { children [ ] #exposedField MFNode bboxCenter 0.0 0.0 0.0 #field SFVec3f bboxSize -1.0 -1.0 -1.0 #field SFVec3f addChildren #eventIn MFNode removeChildren #eventOut MFNode Prof. Anselmo C. de Paiva - DEINF-UFMA

Prof. Anselmo C. de Paiva - DEINF-UFMA

Prof. Anselmo C. de Paiva - DEINF-UFMA

use a geometria “texto” no nodo “shape” 4 - Formas de Texto use a geometria “texto” no nodo “shape”

Nodo Texto Text { } string [ ] #exposedField MFString length [ ] #exposedField MFFloat maxExtent 0.0 #exposedField SFFloat fontStyle NULL #exposedField SFNode } Prof. Anselmo C. de Paiva - DEINF-UFMA

Prof. Anselmo C. de Paiva - DEINF-UFMA

Use o campo translation do nodo Transform agrupado a uma forma 5 - Posicionando Formas Use o campo translation do nodo Transform agrupado a uma forma

Nodo Transform Transform { children [ ] #exposedField MFNode translation 0.0 0.0 0.0 #exposedField SFVec3f rotation 0.0 0.0 1.0 0.0 #exposedField SFRotation scale 1.0 1.0 1.0 #exposedField SFVec3f scaleOrientation 0.0 0.0 1.0 0.0 #exposedField SFRotation bboxCenter 0.0 0.0 0.0 #field SFVec3f bboxSize -1.0 -1.0 -1.0 #field SFVec3f center 0.0 0.0 0.0 #exposedField SFVec3f addChildern #eventIn MFNode removeChildren #eventIn MFNode Prof. Anselmo C. de Paiva - DEINF-UFMA

Transform { translation 0.0 2.0 0.0 children [ Shape { #VRML V2.0 utf8 Transform { translation 0.0 2.0 0.0 children [ Shape { appearance Appearance { material Material { } } geometry Cylinder { } } ] Prof. Anselmo C. de Paiva - DEINF-UFMA

Prof. Anselmo C. de Paiva - DEINF-UFMA

Prof. Anselmo C. de Paiva - DEINF-UFMA

campos “rotation” e “center”do nodo “Transform” 6 - Rotacionando Formas campos “rotation” e “center”do nodo “Transform”

Eixos de Rotação Prof. Anselmo C. de Paiva - DEINF-UFMA

Prof. Anselmo C. de Paiva - DEINF-UFMA

Valores para Eixos de Rotação Comuns Y: 0.0 1.0 0.0 Z: 0.0 0.0 1.0 Prof. Anselmo C. de Paiva - DEINF-UFMA

Ângulos de Rotação Radianos 1 grau = 0.0175 radianos 360 graus = 6.3 radianos x graus = x*0.0175 radianos Prof. Anselmo C. de Paiva - DEINF-UFMA

Prof. Anselmo C. de Paiva - DEINF-UFMA

Prof. Anselmo C. de Paiva - DEINF-UFMA

Prof. Anselmo C. de Paiva - DEINF-UFMA

Prof. Anselmo C. de Paiva - DEINF-UFMA

Prof. Anselmo C. de Paiva - DEINF-UFMA

7 - Escala

Prof. Anselmo C. de Paiva - DEINF-UFMA

Sintaxe Prof. Anselmo C. de Paiva - DEINF-UFMA

Prof. Anselmo C. de Paiva - DEINF-UFMA

Prof. Anselmo C. de Paiva - DEINF-UFMA

TimeSensor, PositionInterpolator, OrientationInterpolator 7 - Animação TimeSensor, PositionInterpolator, OrientationInterpolator

Animação requer dois elementos Um relógio: Nodo TimeSensor Uma descrição de como as coisas mudam ao longo do tempo: Nodos PositionInterpolation e OrientationInterpolation Prof. Anselmo C. de Paiva - DEINF-UFMA

Animação Pode-se ligar a saída de um TimeSensor na entrada de um PositionInterpolation ou OrientationInterpolation e a saída destes nodos a um nodo Transform. Prof. Anselmo C. de Paiva - DEINF-UFMA

Relógio O campo eventOut time do TimeSensor indica a hora corrente. Um TimeSensor pode ser iniciado ou parado pela definição de valores absolutos para startTime e stopTime Prof. Anselmo C. de Paiva - DEINF-UFMA

Tempo Fracionário Inicia em 0.0 e vai até 1.0 fraction_changed eventOut indica mudanças no tempo fracionário cycleInterval define a duração entre 0.0 e 1.0 campo loop = TRUE -> repete o ciclo Prof. Anselmo C. de Paiva - DEINF-UFMA

Posições-chave em tempo fracionário Deve-se prover um valor de posição e/ou orientação para cada um dos instantes de tempo entre 0 e 1. Há infinitos instantes entre 0 e 1. Pode-se definir apenas algumas posições-chave e o interpolador calcula as demais. Prof. Anselmo C. de Paiva - DEINF-UFMA

Interpolação linear Prof. Anselmo C. de Paiva - DEINF-UFMA

Interpolação com múltiplas chaves Prof. Anselmo C. de Paiva - DEINF-UFMA

Sintaxe: Nodo Time Prof. Anselmo C. de Paiva - DEINF-UFMA

Nodo PositionInterpolator Prof. Anselmo C. de Paiva - DEINF-UFMA

Nodo OrientationInterpolator Prof. Anselmo C. de Paiva - DEINF-UFMA

http://www.wiley.com/legacy/compbooks/vrml2sbk/ch08/08fig03.wrl Prof. Anselmo C. de Paiva - DEINF-UFMA

Prof. Anselmo C. de Paiva - DEINF-UFMA

Animação de tamanho pode ser feita usando um nodo PositionInterpolator ligado com o eventIn set_scale de um objeto. Prof. Anselmo C. de Paiva - DEINF-UFMA

10 - Aparência de Materiais Nodos Appearance, Material, ColorInterpolator e ScalarInterpolator

Prof. Anselmo C. de Paiva - DEINF-UFMA

Sombreamento Prof. Anselmo C. de Paiva - DEINF-UFMA

Prof. Anselmo C. de Paiva - DEINF-UFMA

Nodo Shape Prof. Anselmo C. de Paiva - DEINF-UFMA

Nodo Appearance Prof. Anselmo C. de Paiva - DEINF-UFMA

Nodo Material Prof. Anselmo C. de Paiva - DEINF-UFMA

Exemplo Group { children [ Shape { appearance Appearance { material Material { diffuseColor 1.0 0.0 0.0 } } geometry Sphere { } }, appearance Appearance { material Material { diffuseColor 0.5 0.25 1.0 } } geometry Cylinder { radius 2.0 height 0.05 } appearance Appearance { material Material { diffuseColor 0.75 0.0 1.0 } } geometry Cylinder { radius 0.15 height 5.0 } } ] Prof. Anselmo C. de Paiva - DEINF-UFMA

Nodo ColorInterpolator Prof. Anselmo C. de Paiva - DEINF-UFMA

Nodo ScalarInterpolator Prof. Anselmo C. de Paiva - DEINF-UFMA

11 - Grupos

Nodo Group Prof. Anselmo C. de Paiva - DEINF-UFMA

Nodo Switch Prof. Anselmo C. de Paiva - DEINF-UFMA

Nodo Billboard Prof. Anselmo C. de Paiva - DEINF-UFMA

12 - Importação de Arquivos

Nodo Inline Prof. Anselmo C. de Paiva - DEINF-UFMA

Prof. Anselmo C. de Paiva - DEINF-UFMA

13 - Construindo formas com pontos linhas e faces PointSet, IndexedLineSet, IndexedfaceSet, CoordinateInterpolator

Prof. Anselmo C. de Paiva - DEINF-UFMA

Prof. Anselmo C. de Paiva - DEINF-UFMA

Prof. Anselmo C. de Paiva - DEINF-UFMA

0, 1, 2, 3, 0, -1, 4, 5, 6, 7, 4, -1, 0, 4, -1, 1, 5, -1, 2, 6, -1, 3, 7 Prof. Anselmo C. de Paiva - DEINF-UFMA

Prof. Anselmo C. de Paiva - DEINF-UFMA

0, 1, 2, 3, -1, 7, 6, 5, 4, -1, 0, 4, 5, 1, -1, 1, 5, 6, 2, -1, 2, 6, 7, 3, -1, 3, 7, 4, 0 Prof. Anselmo C. de Paiva - DEINF-UFMA

Prof. Anselmo C. de Paiva - DEINF-UFMA

Bordas suaves Prof. Anselmo C. de Paiva - DEINF-UFMA

Prof. Anselmo C. de Paiva - DEINF-UFMA

Prof. Anselmo C. de Paiva - DEINF-UFMA

Prof. Anselmo C. de Paiva - DEINF-UFMA

Prof. Anselmo C. de Paiva - DEINF-UFMA

Prof. Anselmo C. de Paiva - DEINF-UFMA

Prof. Anselmo C. de Paiva - DEINF-UFMA

Prof. Anselmo C. de Paiva - DEINF-UFMA

Prof. Anselmo C. de Paiva - DEINF-UFMA

14 - Superfícies ElevationGrid

Prof. Anselmo C. de Paiva - DEINF-UFMA

Prof. Anselmo C. de Paiva - DEINF-UFMA

Prof. Anselmo C. de Paiva - DEINF-UFMA

Prof. Anselmo C. de Paiva - DEINF-UFMA

15 - Toróides Extrusion

Características-chave Perfil (cross section) Caminho (spine) Escala Orientação Prof. Anselmo C. de Paiva - DEINF-UFMA

Prof. Anselmo C. de Paiva - DEINF-UFMA

Prof. Anselmo C. de Paiva - DEINF-UFMA

Prof. Anselmo C. de Paiva - DEINF-UFMA

Prof. Anselmo C. de Paiva - DEINF-UFMA

Prof. Anselmo C. de Paiva - DEINF-UFMA

17 - Texturas

Prof. Anselmo C. de Paiva - DEINF-UFMA

Prof. Anselmo C. de Paiva - DEINF-UFMA

Prof. Anselmo C. de Paiva - DEINF-UFMA

Prof. Anselmo C. de Paiva - DEINF-UFMA

Prof. Anselmo C. de Paiva - DEINF-UFMA

Prof. Anselmo C. de Paiva - DEINF-UFMA

Prof. Anselmo C. de Paiva - DEINF-UFMA

Prof. Anselmo C. de Paiva - DEINF-UFMA

Prof. Anselmo C. de Paiva - DEINF-UFMA

23 - Neblina Nodo Fog

Atributos da neblina Cor (default: branco) Espessura Tipo: Linear ou Exponential Prof. Anselmo C. de Paiva - DEINF-UFMA

Modo de criação de neblina Não simula partículas em suspensão Quanto mais longe do usuário, mais a cor dos objetos se aproxima da cor da neblina Prof. Anselmo C. de Paiva - DEINF-UFMA

Background Não é afetado pela neblina Prof. Anselmo C. de Paiva - DEINF-UFMA

Prof. Anselmo C. de Paiva - DEINF-UFMA

Prof. Anselmo C. de Paiva - DEINF-UFMA

24 - Sons

Formatos de Som Wave - Representação real do som Midi - Instruções para tocar o som em um instrumento digital Midi é muito mais compacto do que Wave Prof. Anselmo C. de Paiva - DEINF-UFMA

Prof. Anselmo C. de Paiva - DEINF-UFMA

Prof. Anselmo C. de Paiva - DEINF-UFMA

Prof. Anselmo C. de Paiva - DEINF-UFMA

Prof. Anselmo C. de Paiva - DEINF-UFMA

25 - Controlando o Nível de Detalhe Nodo LOD

Prof. Anselmo C. de Paiva - DEINF-UFMA

Prof. Anselmo C. de Paiva - DEINF-UFMA

Prof. Anselmo C. de Paiva - DEINF-UFMA

26 - Controlando o Ponto de Vista Nodos Viewpoint e NavigationInfo

Viewpoint Como qualquer objeto, o ponto de vista pode ser movido sendo colocado como “child” de um nodo “Transform”. Prof. Anselmo C. de Paiva - DEINF-UFMA

Campo de Visão Prof. Anselmo C. de Paiva - DEINF-UFMA

Viewpoint “jump” e “no-jump” Jump - quando o ponto de vista é mudado, a visão do usuário também muda No-Jump - não há mudança da visão com a troca do viewpoint, mas apenas quando esse se movimentar depois da troca. Exemplo: elevador Prof. Anselmo C. de Paiva - DEINF-UFMA

Avatar Representação do usuário no mundo virtual Características: aparência / dimensões como se move Prof. Anselmo C. de Paiva - DEINF-UFMA

Modos de movimentação Walk Fly Examine None Prof. Anselmo C. de Paiva - DEINF-UFMA

Dimensões de um avatar width - quão perto um avatar pode chegar de um objeto antes de colidir com ele height - a que distância do chão o avatar fica quando caminha sobre ele step height - especifica a altura máxima de um obstáculo que um avatar pode passar quando estiver caminhando Prof. Anselmo C. de Paiva - DEINF-UFMA

Prof. Anselmo C. de Paiva - DEINF-UFMA

Prof. Anselmo C. de Paiva - DEINF-UFMA

Prof. Anselmo C. de Paiva - DEINF-UFMA

VisibilitySensor, ProximitySensor, Collision 27 - Sensores de Usuário VisibilitySensor, ProximitySensor, Collision

Prof. Anselmo C. de Paiva - DEINF-UFMA

Prof. Anselmo C. de Paiva - DEINF-UFMA

Prof. Anselmo C. de Paiva - DEINF-UFMA

Prof. Anselmo C. de Paiva - DEINF-UFMA

28 - Portais Anchor

Prof. Anselmo C. de Paiva - DEINF-UFMA

Seleção de pontos de vista: # http://www.somewhere.org/myworld.wrl#CoolView Prof. Anselmo C. de Paiva - DEINF-UFMA

29 - Informações sobre o mundo WorldInfo

Prof. Anselmo C. de Paiva - DEINF-UFMA

30 - Scripts

Nodo Script tem seus próprios campos, eventos de entrada e de saída, conforme definido pelo programador Prof. Anselmo C. de Paiva - DEINF-UFMA

Campos Script { } ... field tipoDoCampo nomeDoCampo valorInicial Prof. Anselmo C. de Paiva - DEINF-UFMA

Exemplos Prof. Anselmo C. de Paiva - DEINF-UFMA

Mais Exemplos Prof. Anselmo C. de Paiva - DEINF-UFMA

Prof. Anselmo C. de Paiva - DEINF-UFMA

Evento de Entrada Script { } ... eventIn tipoDoEvento nomeDoEvento Prof. Anselmo C. de Paiva - DEINF-UFMA

Prof. Anselmo C. de Paiva - DEINF-UFMA

Evento de Saída Script { } ... eventOut tipoDoEvento nomeDoEvento Prof. Anselmo C. de Paiva - DEINF-UFMA

Usando Campos e Eventos em uma Definição de Interface Script { field SFFloat gravity -9.8 field SFVec3f velocity 1.0 0.0 0.0 field SFVec3f position 0.0 0.0 0.0 eventIn SFVec3f set_position eventOut SFVec3f position_changed eventIn SFFloat set_fraction } Prof. Anselmo C. de Paiva - DEINF-UFMA

Para definir um exposed field Defina o field (ex. position) Defina o eventIn (ex. set_position) Defina o eventOut (ex. position_changed) Prof. Anselmo C. de Paiva - DEINF-UFMA

Scripts podem ser escritos em Java ou JavaScript url “myscript.js” field ... eventIn ... eventOut ... } Prof. Anselmo C. de Paiva - DEINF-UFMA

Incluindo scripts no nodo url “javascript: function set_position (pos,time) { position = pos ; } “ field ... eventIn ... eventOut ... Prof. Anselmo C. de Paiva - DEINF-UFMA

Controle de execução tipicamente um script executa sempre que um eventIn recebe um valor, computa alguma coisa e coloca o resultado em um ou mais eventOuts Prof. Anselmo C. de Paiva - DEINF-UFMA

mustEvaluate se a avaliação do script não pode ser postergada, então o campo mustEvaluate deve ser true. Prof. Anselmo C. de Paiva - DEINF-UFMA

directOutput quando um script precisa manipular mais do que suas variáveis de entrada, deve-se deixar directOutput true. neste caso, perde-se performance, mas é possível manipular a estrutura do mundo vrml Prof. Anselmo C. de Paiva - DEINF-UFMA

API - Application Programming Interface Características: acesso aos campos da interface e eventOut’s do nodo script conversão entre os tipos VRML e os da linguagem habilidade de iniciar e terminar um script e responder a eventos acesso ao browser para mudar a estrutura de um mundo ou carregar um novo mundo Prof. Anselmo C. de Paiva - DEINF-UFMA

Acessando Campos e eventOut’s Em Java a API fornece classes para acessar os campos e eventOut’s: getField e getEventOut Em JavaScript a API automaticamente cria uma interface para cada campo ou eventOut. Prof. Anselmo C. de Paiva - DEINF-UFMA

Eventos Eventos recebidos tem dois componentes: Event value - um valor, como uma coordenada 3d. Event time stamp - o valor de tempo absoluto no qual o evento foi gerado. Prof. Anselmo C. de Paiva - DEINF-UFMA

Conversão entre tipos Em Java a API fornece um conjunto de classes para os tipos VRML Em javaScript a API automaticamente converte os tipos VRML para tipos JavaScript Prof. Anselmo C. de Paiva - DEINF-UFMA

Prof. Anselmo C. de Paiva - DEINF-UFMA

Criando um Interpolador DEF Mover Script { url “move1.js” eventIn SFFloat set_fraction eventOut SFVec3f value_changed } Prof. Anselmo C. de Paiva - DEINF-UFMA

Rotina para mover em linha function set_fraction(fraction,eventTime) { value_changed[0] = fraction; value_changed[1] = 0.0; value_changed[2] = 0.0; } Prof. Anselmo C. de Paiva - DEINF-UFMA

Rotina para interpolador senoidal function set_fraction(fraction,eventTime) { value_changed[0] = fraction; value_changed[1] = Math.sin(fraction*6.28); value_changed[2] = 0.0; } Prof. Anselmo C. de Paiva - DEINF-UFMA

Rotina para um interpolador helicoidal function set_fraction(fraction,eventTime) { value_changed[0] = fraction; value_changed[1] = Math.sin(fraction*6.28); value_changed[2] = Math.cos(fraction*6.28); } Prof. Anselmo C. de Paiva - DEINF-UFMA

Interpolador helicoidal parametrizado Prof. Anselmo C. de Paiva - DEINF-UFMA