Mini-curso: X3D Básico Bolsistas: -Gabriel M. Rossito -Bruno R. de Souza Orientador: Marcelo da...

55
Mini-curso: Mini-curso: X3D X3D Básico Básico Bolsistas: -Gabriel M. Rossito -Bruno R. de Souza Orientador: Marcelo da Silva Hounsell

Transcript of Mini-curso: X3D Básico Bolsistas: -Gabriel M. Rossito -Bruno R. de Souza Orientador: Marcelo da...

Page 1: Mini-curso: X3D Básico Bolsistas: -Gabriel M. Rossito -Bruno R. de Souza Orientador: Marcelo da Silva Hounsell.

Mini-curso: Mini-curso: X3D X3D BásicoBásico

Bolsistas:

-Gabriel M. Rossito

-Bruno R. de Souza

Orientador:

Marcelo da Silva Hounsell

Page 2: Mini-curso: X3D Básico Bolsistas: -Gabriel M. Rossito -Bruno R. de Souza Orientador: Marcelo da Silva Hounsell.

Índice:

•Introdução, o que é o X3D; (interessante abordar “Porque estudar X3D” pros e contras do X3D)

•Os primeiros passos; (como instalar

•Padrão X3D – edit;

•Introdução ao código X3D;

•Primeiros passos;

•X3D-Edit;

•Introdução ao codigo;

•Perfil;

•Formas geometricas;

•Hello World;

•Agrupamentos;

•DEF e USE;

•Coordenadas;

•Viewpoint e NavigationInfo;

•Aparencia;

•Animação.

2

Page 3: Mini-curso: X3D Básico Bolsistas: -Gabriel M. Rossito -Bruno R. de Souza Orientador: Marcelo da Silva Hounsell.

IntroduçãoIntrodução

• X3D significa extensible 3DX3D significa extensible 3D

• É considerada uma evolução natural do É considerada uma evolução natural do padrão VRML97padrão VRML97

• É aberto e livre de taxasÉ aberto e livre de taxas

• Foi criado para fazer a comunicação entre Foi criado para fazer a comunicação entre 3D e web, sendo feito em XML3D e web, sendo feito em XML

Page 4: Mini-curso: X3D Básico Bolsistas: -Gabriel M. Rossito -Bruno R. de Souza Orientador: Marcelo da Silva Hounsell.

Introdução• X3D é um padrão aberto para distribuir conteúdo 3D ;• O X3D não é uma API de programação,nem tão pouco um formato

de arquivo para troca de geometrias;– “Combina ambos, geometria e descrições de comportamentos instantâneos num

simples arquivo que tem varios formatos de arquivos disponíveis para isso, incluindo o Extensible Markup Language(XML).”

• O X3D surgiu de uma revisão da especificação ISO VRML97;– 1994 começa o Virtual Reality Modeling Language ;– VRML 1.0 foi lançado um ano depois;– VRML 2.0 restruturou alguns nós e adicionou novas ferramentas;– 1998 é fundada a WEB3D consortium, que visa o uso da tecnologia 3D em navegadores,

permitindo que sites que usem JavaScript possam ter efeitos em três dimensões direto do navegador;

– (e incorpora os avanços dos recursos disponíveis nos últimos dispositivos gráficos comerciais e também incorpora melhorias na sua arquitetura)

4

Page 5: Mini-curso: X3D Básico Bolsistas: -Gabriel M. Rossito -Bruno R. de Souza Orientador: Marcelo da Silva Hounsell.

Introdução

• São poucas pessoas atualmente q são capazes de criar um modelo 3D;

• X3D subdividiu em perfis as funcionalidades de um código;• Da suporte para maioria das ferramentas comuns;• Fornece a importação/exportação de publicação para outro

formados;• Projetado para comunicação X3D com a Arquitetura da World Wide

Web.• Não é necessário grandes softwares para criar um X3D. É possível

apenas com um editor de texto.• Não possui Royalty.

5

Page 6: Mini-curso: X3D Básico Bolsistas: -Gabriel M. Rossito -Bruno R. de Souza Orientador: Marcelo da Silva Hounsell.

Primeiros passos...

• Possui diversos plugins, ferramentas e recursos de fácil e livre acesso na internet.

– http://www.web3d.org/x3d/content/help.html – https://savage.nps.edu/X3D-Edit/– http://x3dgraphics.com/examples/X3dResources.html

• Mas o primeiro passo é a instalação do X3D plugin para seu navegador.

• Depois indica-se a instalaçao de um editor de código.• X3D – edit.

– Free;– É suportado pelo Windows, Mac, Linux, Solaris e outros;– Atualização automática;– Possui um modo compatível com o Netbeans.

6

Page 7: Mini-curso: X3D Básico Bolsistas: -Gabriel M. Rossito -Bruno R. de Souza Orientador: Marcelo da Silva Hounsell.

IntroduçãoIntrodução

• X3D significa extensible 3DX3D significa extensible 3D

• É considerada uma evolução natural do É considerada uma evolução natural do padrão VRML97padrão VRML97

• É aberto e livre de taxasÉ aberto e livre de taxas

• Foi criado para fazer a comunicação entre Foi criado para fazer a comunicação entre 3D e web, sendo feito em XML3D e web, sendo feito em XML

Page 8: Mini-curso: X3D Básico Bolsistas: -Gabriel M. Rossito -Bruno R. de Souza Orientador: Marcelo da Silva Hounsell.

Primeiros passos para o Primeiros passos para o desenvolvimentodesenvolvimento

• Plugin:Plugin:– BS_Contact_VRML_61 (Para Internet Explorer)BS_Contact_VRML_61 (Para Internet Explorer)

• Browser:Browser:– XJ3D - XJ3D - Java based X3D Toolkit and X3D Java based X3D Toolkit and X3D

Browser Browser (www.web3d.org)(www.web3d.org)

• Editor:Editor:– X3D Edit (www.web3d.org)X3D Edit (www.web3d.org)

Page 9: Mini-curso: X3D Básico Bolsistas: -Gabriel M. Rossito -Bruno R. de Souza Orientador: Marcelo da Silva Hounsell.

X3D Edit

• X3D Edit possui o drag-and-drop;

• Popup com recursos auxiliares;

• Vizualização direta;

• Instalação:– Baixe e extraia o X3D-Edit3.2.zip

• https://savage.nps.edu/X3D-Edit/X3D-Edit3.2.zip

– Rode runX3DEditWind.bat para Windows;

– Ou runX3DEditMac.sh.command para Mac;

– Funciona em Linux;

– E agora só programar!

9

Page 10: Mini-curso: X3D Básico Bolsistas: -Gabriel M. Rossito -Bruno R. de Souza Orientador: Marcelo da Silva Hounsell.

Introdução ao código

• Um arquivo X3D começa com um cabeçalho que o identifica o arquivo. Independente da codificação, o cabeçalho contém os seguintes elementos na ordem:– Identificação do padrão suportado (neste caso “X3D”);– Versão do padrão suportado (a mais atual é a 3.2);– Identificação da codificação de caracteres suportado (“utf8” –

case sensitive).– “<?xml version="1.0" encoding="UTF-8"?>”

• Logo em seguida é necessário declarar qual perfil (profile) está sendo utilizado. Essa declaração é feita logo em seguida do cabeçalho com a seguinte sintaxe:– “ <X3D profile='Interactive' version='3.0'> ”

10

Page 11: Mini-curso: X3D Básico Bolsistas: -Gabriel M. Rossito -Bruno R. de Souza Orientador: Marcelo da Silva Hounsell.

Primeiros passos para o Primeiros passos para o desenvolvimentodesenvolvimento

• Código básico (salvar como .x3d):Código básico (salvar como .x3d):• <?xml version="1.0" encoding="UTF-8"?><?xml version="1.0" encoding="UTF-8"?>

• <!DOCTYPE X3D PUBLIC "ISO//Web3D//DTD X3D 3.1//EN" <!DOCTYPE X3D PUBLIC "ISO//Web3D//DTD X3D 3.1//EN" "http://www.web3d.org/specifications/x3d-3.1.dtd">"http://www.web3d.org/specifications/x3d-3.1.dtd">

• <X3D profile='Immersive' version='3.1' <X3D profile='Immersive' version='3.1' xmlns:xsd='http://www.w3.org/2001/XMLSchema-instance' xmlns:xsd='http://www.w3.org/2001/XMLSchema-instance' xsd:noNamespaceSchemaLocation=' xsd:noNamespaceSchemaLocation=' http://www.web3d.org/specifications/x3d-3.1.xsd '>http://www.web3d.org/specifications/x3d-3.1.xsd '>

• <head></head><head></head>

• <Scene> <Scene>

• </Scene> </Scene>

• </X3D> </X3D>

Page 12: Mini-curso: X3D Básico Bolsistas: -Gabriel M. Rossito -Bruno R. de Souza Orientador: Marcelo da Silva Hounsell.

Profile

• Esses perfis identificam quais funcionalidades (componentes) o navegador X3D precisaria suportar para exibir o conteúdo do arquivo X3D. A figura abaixo mostra o nível de suporte dos perfis, sendo que um perfil suporta todas as funcionalidades do perfil englobado por ele.

12

Page 13: Mini-curso: X3D Básico Bolsistas: -Gabriel M. Rossito -Bruno R. de Souza Orientador: Marcelo da Silva Hounsell.

Coordenadas

• Y é sempre para cima;

• X, Y, Z correspondem tbm

a Norte, cima, leste;

• Regra da mão direita.

13

Page 14: Mini-curso: X3D Básico Bolsistas: -Gabriel M. Rossito -Bruno R. de Souza Orientador: Marcelo da Silva Hounsell.

Regra da mão Direita

14

•Para as coordenadas: •Para as rotações dos eixos:

Page 15: Mini-curso: X3D Básico Bolsistas: -Gabriel M. Rossito -Bruno R. de Souza Orientador: Marcelo da Silva Hounsell.

Primeiros passos para o Primeiros passos para o desenvolvimentodesenvolvimento

• <?xml version="1.0" encoding="UTF-8"?><?xml version="1.0" encoding="UTF-8"?>• É o identificador de que será usado o XML É o identificador de que será usado o XML

versão 1.0versão 1.0• <X3D profile='Immersive'></X3D><X3D profile='Immersive'></X3D>• Define de onde até a onde vai a parte de Define de onde até a onde vai a parte de

X3DX3D• <Scene> </Scene> <Scene> </Scene> • Área onde fica o código desenvolvidoÁrea onde fica o código desenvolvido

Page 16: Mini-curso: X3D Básico Bolsistas: -Gabriel M. Rossito -Bruno R. de Souza Orientador: Marcelo da Silva Hounsell.

Primeiros passos para o Primeiros passos para o desenvolvimentodesenvolvimento

• <Scene><Scene>• <Background skyColor='0.2 0.1 0.1'/><Background skyColor='0.2 0.1 0.1'/>• <Shape><Shape>• <Text string='"Hello" "world!"'><Text string='"Hello" "world!"'>• <FontStyle justify='"MIDDLE" "MIDDLE"'/><FontStyle justify='"MIDDLE" "MIDDLE"'/>• </Text></Text>• </Shape></Shape>• </Scene></Scene>

Page 17: Mini-curso: X3D Básico Bolsistas: -Gabriel M. Rossito -Bruno R. de Souza Orientador: Marcelo da Silva Hounsell.

Estruturas básicasEstruturas básicas

• Tipos de estruturas:Tipos de estruturas:

• <Sphere/><Sphere/>

• <Box/><Box/>

• <Cone/><Cone/>

• <Cylinder/><Cylinder/>

• <Text/><Text/>

• <FontStyle/><FontStyle/>

Page 18: Mini-curso: X3D Básico Bolsistas: -Gabriel M. Rossito -Bruno R. de Souza Orientador: Marcelo da Silva Hounsell.

Forma Geometricas• <Sphere/>

– Raio;– Solido.

• <Box/>– Tamanho x,y,z;– Solida.

• <Cone/>– Altura e o raio da base;– Lado, base e se é solido;

• <Cylinder/>– Tamanho e raio;– Topo, lado, base e se é solido;

• <Text/>– Largura, max da largura;– String.

18

Page 19: Mini-curso: X3D Básico Bolsistas: -Gabriel M. Rossito -Bruno R. de Souza Orientador: Marcelo da Silva Hounsell.

Estruturas básicas

• Sphere: radius (um valor), solid (booleano) • Box: size (três valores: x y z), solid (booleano) • Cone: bottom, side, solid (booleano), bottomRadius

(um valor), height (um valor)• Cylinder: bottom, side, solid, top (booleano), radius

(um valor), height (um valor) • Text: solid (booleano), length, maxExtent (maximo de

um valor por linha), string (onde vai o texto, cada conjunto de aspas é uma linha)

• FontStyle: Configuração da fonte (como o word)

Page 20: Mini-curso: X3D Básico Bolsistas: -Gabriel M. Rossito -Bruno R. de Souza Orientador: Marcelo da Silva Hounsell.

Exemplo:<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE X3D PUBLIC "ISO//Web3D//DTD X3D 3.1//EN" "http://www.web3d.org/specifications/x3d-3.1.dtd"><X3D profile='Immersive' version='3.1' xmlns:xsd='http://www.w3.org/2001/XMLSchema-instance' xsd:noNamespaceSchemaLocation='http://www.web3d.org/specifications/x3d-3.1.xsd'> <Group> <Viewpoint centerOfRotation='0 -1 0' description='Hello world!' position='0 -1 7'/> <Transform rotation='0 1 0 3'> <Shape> <Sphere/> <Appearance> <Material diffuseColor='0 0.5 1'/> <ImageTexture url='"earth-topo.png" "earth-topo.jpg" "earth-topo-small.gif" "http://www.web3d.org/x3d/content/examples/Basic/earth-topo.png" "http://www.web3d.org/x3d/content/examples/Basic/earth-topo.jpg" "http://www.web3d.org/x3d/content/examples/Basic/earth-topo-small.gif"'/> </Appearance> </Shape> </Transform> <Transform translation='0 -2 0'> <Shape> <Text solid='false' string='"Hello" "world!"'> <FontStyle justify='"MIDDLE" "MIDDLE"'/> </Text> <Appearance> <Material diffuseColor='0.1 0.5 1'/> </Appearance> </Shape> </Transform> </Group> </Scene></X3D>

Page 21: Mini-curso: X3D Básico Bolsistas: -Gabriel M. Rossito -Bruno R. de Souza Orientador: Marcelo da Silva Hounsell.

EXERCÍCIOS

Fazer as formas geométricas;

21

Page 22: Mini-curso: X3D Básico Bolsistas: -Gabriel M. Rossito -Bruno R. de Souza Orientador: Marcelo da Silva Hounsell.

Agrupamentos

Os grupos de nós são organizados com as seguintes comandas:

• Group, StaticGroup:

• Transform;

• LOD (level of detail);

• Switch.

22

Page 23: Mini-curso: X3D Básico Bolsistas: -Gabriel M. Rossito -Bruno R. de Souza Orientador: Marcelo da Silva Hounsell.

Grupos

• <Transform></Transform>• Transform:

– rotation (quatro valores)– translation (três valores)– scale (três valores)

• <Group></Group>– bboxCenter (três valores)– bboxSize (três valores)

Page 24: Mini-curso: X3D Básico Bolsistas: -Gabriel M. Rossito -Bruno R. de Souza Orientador: Marcelo da Silva Hounsell.

Grupos

• <LOD></LOD> - quando dois objetos se colidem ele deixa o de maior prioridade

• <StaticGroup></ StaticGroup> - grupo não é animado

• <Switch></Switch> - serve para escolha de nodos (explicado mais tarde)

Page 25: Mini-curso: X3D Básico Bolsistas: -Gabriel M. Rossito -Bruno R. de Souza Orientador: Marcelo da Silva Hounsell.

DEF e USE

• DEF serve para definir qualquer nó;– Deve começar com uma letra;– Importante usar nome completo e simples;– Ajuda na organização do código;– Procure escrever a funcionalidade;– Tente ser simples, mas completo;

• USE serve usar nó definido.– Case sesitive.

• Uso de DEF e USE deixa o código mais rápido, com um simples “load” e mais enxuto.

25

Page 26: Mini-curso: X3D Básico Bolsistas: -Gabriel M. Rossito -Bruno R. de Souza Orientador: Marcelo da Silva Hounsell.

26http://www.web3d.org/x3d/content/X3dTooltips.html

Page 27: Mini-curso: X3D Básico Bolsistas: -Gabriel M. Rossito -Bruno R. de Souza Orientador: Marcelo da Silva Hounsell.

27

<Scene> <Background skyColor='1 1 1'/> <Transform rotation='1 0 0 1.57'> <Viewpoint description='Bounding box illustration' position='2 0 20'/> </Transform> <Group DEF="CaixaCompleta">

<Shape DEF="LineBox"> <IndexedLineSet coordIndex='0 1 2 3 0 -1 4 5 6 7 4 -1 0 4 -1 1 5 -1 2 6 -1 3 7 -1'> <Coordinate point='-2 -2 -2, -2 -2 2, 2 -2 2, 2 -2 -2, -2 2 -2, -2 2 2, 2 2 2, 2 2 -2,'/> </IndexedLineSet> <Appearance>

<!-- Linha apenas emite cor --> <Material emissiveColor='0 0 0'/> </Appearance></Shape>

<Inline url='“Sphere.x3d"' /> <!-- esfera salva em outro rquivo -- >

<Transform translation='4 0 0'><Shape USE="LineBox"/>

</Transform>

<Inline url='"Cylinder.x3d"'/>

</Group> <Transform translation='0 -4 0‘ rotation=‘0 1 0 1.57’>

<Group USE="CaixaCompleta"/> </Transform>

</Scene></X3D>

Exemplo:

Page 28: Mini-curso: X3D Básico Bolsistas: -Gabriel M. Rossito -Bruno R. de Souza Orientador: Marcelo da Silva Hounsell.

Aparencia• Material:

– diffuseColor:• Reflete as fontes luzes do ambiente, depende do ângulo de

visão e do ângulo da fonte.– ambientIntensity:

• O quão forte será o reflexo.– emissiveColor:

• Incandecensia do objeto, é independente da luz.– specularColor:

• Conduz o reflexo do objeto.– Shininess:

• Controla a intensidade especular (polido).– Transparency:

• Permite ver através do objeto, 0 até1.

• Teste.....28

Page 29: Mini-curso: X3D Básico Bolsistas: -Gabriel M. Rossito -Bruno R. de Souza Orientador: Marcelo da Silva Hounsell.

• Faça os eixos X,Y e Z.

Exercício

29

Page 30: Mini-curso: X3D Básico Bolsistas: -Gabriel M. Rossito -Bruno R. de Souza Orientador: Marcelo da Silva Hounsell.

ImageTexture• Suporta os formatos .jpg e .png;• Recomenda-se o uso de .gif, mas não é preciso;• Outros formatos tbm podem ser suportados, mas não é garantido o

funcionamento.• Cuidado com o diffuseColor, pode influenciar na imagem;

<Shape>

<Box/>

<Appearance>

<Material/>

<ImageTexture url="CIMG2578.jpg“ />

</Appearance>

</Shape>

30

Page 31: Mini-curso: X3D Básico Bolsistas: -Gabriel M. Rossito -Bruno R. de Souza Orientador: Marcelo da Silva Hounsell.

PixelTexture

• Numero de pixels na horizontal da imagem;• Numero de pixels na vertical da imagem;• Valor do componente em cada pixel (0-4)• Numero dos pixels:

– 0 sem imagem, <ImageTexture image='0 0 0'/>– 1 branco e preto– 2 branco e preto, transparencia– 3 cores r-g-b– 4 cores r-g-b, transparencia

31

Page 32: Mini-curso: X3D Básico Bolsistas: -Gabriel M. Rossito -Bruno R. de Souza Orientador: Marcelo da Silva Hounsell.

32

<Shape> <Appearance><Material/>  <TextureTransform scale='2 2'/>  <PixelTexture image='2 2 3 0xFF0000 0xFFFF00 0xFFFF00 0xFF0000' 

repeatS='false'/> </Appearance> <Box/> </Shape>

Page 33: Mini-curso: X3D Básico Bolsistas: -Gabriel M. Rossito -Bruno R. de Souza Orientador: Marcelo da Silva Hounsell.

TextureTransform

• É o “transform” da imagem, trabalhando em 2D;– Translação: cima, baixo, esquerda, direita;– Rotação: ângulo no centro;– Escala (s,t);

• Aplicado no sistema de coordenadas, não no arquivo de imagem;

• Scale=‘3 0.5’ deve mostrar 1/3 da imagem ao longo do eixo s e dobrado no eixo t.

33

Page 34: Mini-curso: X3D Básico Bolsistas: -Gabriel M. Rossito -Bruno R. de Souza Orientador: Marcelo da Silva Hounsell.

Ferramenta de edição

• Editor de materiais Pellucid– Eric Haines, copyright (c) 1997– http://tog.acm.org/resources/applets/vrml/

pellucid.html

34

Page 35: Mini-curso: X3D Básico Bolsistas: -Gabriel M. Rossito -Bruno R. de Souza Orientador: Marcelo da Silva Hounsell.

Desafio

• Realize um conjunto de mesa com cadeiras apenas com um cubo.– Dica: DEF, USE, transform e procure usar

Inline tbm.

35

Page 36: Mini-curso: X3D Básico Bolsistas: -Gabriel M. Rossito -Bruno R. de Souza Orientador: Marcelo da Silva Hounsell.

Visão e navegação

• Como ver e navegar em um mundo 3D.– Viewpoint, NavigationInfo;

• Viewpoint:– Ferramenta primaria para uma navegação;– Guiar usuários;– Ajuda localizar facilmente algum objeto predeterminado.

• NavigationInfo:– Modo do usuario navegar pela cena;– Usando pontos ou hotkeys.

36

Page 37: Mini-curso: X3D Básico Bolsistas: -Gabriel M. Rossito -Bruno R. de Souza Orientador: Marcelo da Silva Hounsell.

Viewpoints

• Viewpoints define uma especifica posição e orientação ao olhar um cena 3D.– É possivel realizar viewpoints animados, uma

forma de navegação em modo video;– Mas uma liberdade de modos de visão é o

mais aconselhavel;

• Na criação de um viewpoint:– Procure ser curto, mas completo em sua

descrição. Para facilitar o entendimento de algum “navegador” que tente apreciar seu codigo.

37

Page 38: Mini-curso: X3D Básico Bolsistas: -Gabriel M. Rossito -Bruno R. de Souza Orientador: Marcelo da Silva Hounsell.

Viewpoint

• centerOfRotation:– Rotação;– É o modo EXAMINE.

• position:– Posição em metros da posição inicial do sistema.

• Para uma orientação mais complexa recomenda-se usar “transform”.

38

*

<Group> <Viewpoint description='Front View' orientation='0 1 0 0'/>  <Viewpoint description ='Rear View '   orientation='0 1 0 3.14' position='0 0 -10'/>  <Viewpoint description ='Top View '  orientation='1 0 0 -1.57' position='0 10 0'/>  <Viewpoint description ='Bottom View'  orientation='1 0 0 1.57' position='0 -10 0'/>  <Viewpoint description ='Right View'  orientation='0 1 0 1.57' position='10 0 0'/>  <Viewpoint description ='Left View'  orientation='0 1 0 -1.57' position='-10 0 0'/></Group> 

Page 39: Mini-curso: X3D Básico Bolsistas: -Gabriel M. Rossito -Bruno R. de Souza Orientador: Marcelo da Silva Hounsell.

Exercício

• Faça um conjunto de viewpoints para a demonstração do conjunto da mesa.

Page 40: Mini-curso: X3D Básico Bolsistas: -Gabriel M. Rossito -Bruno R. de Souza Orientador: Marcelo da Silva Hounsell.

NavigationInfo• Usado normalmente para fixar uma navegação

para o usuário.– “EXAMINE” rotacionar;– “FLY” zoom;– “WALK” navegar em relação ao chão;– “LOOKAT” pontos selecionados de um objeto;– “ANY” deixa o usuário selecionar qualquer modo;– “NONE” impossibilidade de navegação;

• Default ‘“EXAMINE” “ANY”’

40

Page 41: Mini-curso: X3D Básico Bolsistas: -Gabriel M. Rossito -Bruno R. de Souza Orientador: Marcelo da Silva Hounsell.

NavigationInfo

• “speed” velocidade de navegação:– Default é 1 m/s, o que é bastante devagar.

• “headlight” é a luz que sai do ponto de visto do viewpoint.– Se desativada, é preciso de adicionar luzes

separadas.• “visibilityLimit” é o limite de visibilidade do usuario.

– Medido do viewpoint;– Fora do limite o objeto não é desenhado;– visibilityLimit=‘0.0’ significa sem limites.

41

Page 42: Mini-curso: X3D Básico Bolsistas: -Gabriel M. Rossito -Bruno R. de Souza Orientador: Marcelo da Silva Hounsell.
Page 43: Mini-curso: X3D Básico Bolsistas: -Gabriel M. Rossito -Bruno R. de Souza Orientador: Marcelo da Silva Hounsell.

Billboard• Bilboard

– Feito para auxiliar a visualização ou a leitura de algum objeto na cena;

– axisOfRotation: • Atributo de Billboard no qual deve implicar em qual

eixo aplicar;• Default é axisOfRotation=‘0 1 0’ que gira envolta

do eixo “y”;• Definir axisOfRotation=‘0 0 0’ implica que o objeto

estará sempre voltado para o usuario;• Nunca coloque um viewpoint dentro de um

billboard!!! 43

Page 44: Mini-curso: X3D Básico Bolsistas: -Gabriel M. Rossito -Bruno R. de Souza Orientador: Marcelo da Silva Hounsell.

Billboard codigo

44

<Billboard axisOfRotation='0 1 0'><Shape> <Text string="i...num roda!" /> <Appearance>

<Material diffuseColor='1 1 0'/> </Appearance></Shape>

</Billboard>

Page 45: Mini-curso: X3D Básico Bolsistas: -Gabriel M. Rossito -Bruno R. de Souza Orientador: Marcelo da Silva Hounsell.

Exercício

• Faça um tabuleiro de xadrez.– Procure mudar o viewpoint inicial e definir

alguma navegação.– Adicone as letras e n° respectivos(ex.: 7,B);

• Use Billboard.

45

7

B

Page 46: Mini-curso: X3D Básico Bolsistas: -Gabriel M. Rossito -Bruno R. de Souza Orientador: Marcelo da Silva Hounsell.

Animação• Route:

– Conecta a saída informação de um nó para passar um valor e estimular a entrada dessa informação para outro nó.

• A passagem de valor inclui uma marcação de tempo.• Modificaçao das cenas:

– Behavior, mudança de um valor de um nó.– Event, tempo marcado passando por uma rota.

• Cascada de eventos, serie de eventos, onde um evento desencadeie outro. Não é possível um evento infinito, todo evento deve ser completo.

• Toda animaçao 3D é considerada uma modificação gráfica em um devido tempo.• Um exemplo de comportamento em uma rota:

46

Page 47: Mini-curso: X3D Básico Bolsistas: -Gabriel M. Rossito -Bruno R. de Souza Orientador: Marcelo da Silva Hounsell.

Animação e interpolação

• <TimeSensor/> = controla quando a animação flui– cycleInterval, startTime, stopTime,

pauseTime, resumeTime (um valor), loop, enabled (booleano)

• <ROUTE/> = determina de onde até onde deve ser feito– fromNode, fromField, toNode, toField (nomes)

Page 48: Mini-curso: X3D Básico Bolsistas: -Gabriel M. Rossito -Bruno R. de Souza Orientador: Marcelo da Silva Hounsell.

Animação e interpolação

• <CoordinateInterpolator/>

• <OrientationInterpolator/>

• <PositionInterpolator/>

• <ScalarInterpolator/>

• <ColorInterpolator/>• <NormalInterpolator/>

• <CoordinateInterpolator2D/>

• <PositionInterpolator2D/>

Page 49: Mini-curso: X3D Básico Bolsistas: -Gabriel M. Rossito -Bruno R. de Souza Orientador: Marcelo da Silva Hounsell.

10 passos básicos para uma animação

• 1° Escolha o nó a ser animado;

• 2° Defina um nome para o nó de interesse;

• 3° Certifique-se se o nó é input e determine seu ponto flutuante: SFFloat, SFVec3f, SFColor e etc;

– http://www.web3d.org/x3d/specifications/ISO-IEC-19775-1.2-X3D-AbstractSpecification/Part01/fieldsDef.html

– http://www.web3d.org/x3d/specifications/ISO-IEC-19775-1.2-X3D-AbstractSpecification/Part01/shaders_glsl.html

• 4° Se o nó objetivo é SFBool ou SFInt32, use um nó sequencial;

Se o nó objetivo for SFNode ou MFNode, use um no Script;

49

Page 50: Mini-curso: X3D Básico Bolsistas: -Gabriel M. Rossito -Bruno R. de Souza Orientador: Marcelo da Silva Hounsell.

• 5° Determinar qual “Interpolator”: se você não estiver usando um nó sequencer ou Script, determine qual interpolador irá produzir a informação correta para uma mudança de valor(“value_changed”) de saida, por exemplo: PositionInterpolator produz SFVec3f “value_changed” events.

• 6° Triggering sensor: se desejar adicione um sensor no inicio, para produzir SFTime ou SFBool “trigger” para começar a animação.– Normalmente um evento triggering é um

informação de saida para uma cascata de animação. 50

Page 51: Mini-curso: X3D Básico Bolsistas: -Gabriel M. Rossito -Bruno R. de Souza Orientador: Marcelo da Silva Hounsell.

• 7° TimeSensor clock: adicione um sensor de tempo, então ajuste seu campo “cycleInterval” de acordo com o intervalo de duração de seu animação.

– Ajuste loop=‘false’ se a animação percorre até um tempo pré estimado;

– Loop=‘true’ se é repetitivo.

• 8°Connect Trigger: sensor “ROUTE” para o “TimeSensor” enviar uma ordem de iniciar a animação.

51

Page 52: Mini-curso: X3D Básico Bolsistas: -Gabriel M. Rossito -Bruno R. de Souza Orientador: Marcelo da Silva Hounsell.

• 9° Connect clock: faça um “ROUTE” o “TimeSensor fraction_changed” para o interpolador(ou sequencia) “set_fraction” na ordem para seguir a animação de modo correto;

• 10° Connect animation output: “ROUTE” a interpolação, sequencia, ou Script no campo “value_changed” para o objetivo de interesse na ordem para se completar a animação.

52

Page 53: Mini-curso: X3D Básico Bolsistas: -Gabriel M. Rossito -Bruno R. de Souza Orientador: Marcelo da Silva Hounsell.

53

Exemplo

Page 54: Mini-curso: X3D Básico Bolsistas: -Gabriel M. Rossito -Bruno R. de Souza Orientador: Marcelo da Silva Hounsell.

54

Exemplo

Page 55: Mini-curso: X3D Básico Bolsistas: -Gabriel M. Rossito -Bruno R. de Souza Orientador: Marcelo da Silva Hounsell.

Muito obrigado a todos!!!! Referencias:

– X3D: Extensible 3D Graphics for Web Authors, Don Brutzman – http://www.web3d.org/x3d/content/examples/help.html– http://x3dGraphics.com– http://www.xj3d.org/– http://www.web3d.org/

• Plugin:– BS_Contact_VRML_61 (Para Internet Explorer)

• Browser:– XJ3D - Java based X3D Toolkit and X3D Browser (www.web3d.org)

• Editor:– X3D Edit (www.web3d.org)

Contato: [email protected] 55