mini-curso: x3d básico bolsistas: -gabriel m. rossito -bruno r. de souza orientador: marcelo da...
Post on 17-Apr-2015
108 Views
Preview:
TRANSCRIPT
Mini-curso: Mini-curso: X3D X3D BásicoBá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
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
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
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
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
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
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)
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
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
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>
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
Coordenadas
• Y é sempre para cima;
• X, Y, Z correspondem tbm
a Norte, cima, leste;
• Regra da mão direita.
13
Regra da mão Direita
14
•Para as coordenadas: •Para as rotações dos eixos:
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
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>
Estruturas básicasEstruturas básicas
• Tipos de estruturas:Tipos de estruturas:
• <Sphere/><Sphere/>
• <Box/><Box/>
• <Cone/><Cone/>
• <Cylinder/><Cylinder/>
• <Text/><Text/>
• <FontStyle/><FontStyle/>
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
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)
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>
EXERCÍCIOS
Fazer as formas geométricas;
21
Agrupamentos
Os grupos de nós são organizados com as seguintes comandas:
• Group, StaticGroup:
• Transform;
• LOD (level of detail);
• Switch.
22
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)
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)
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
26http://www.web3d.org/x3d/content/X3dTooltips.html
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:
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
• Faça os eixos X,Y e Z.
Exercício
29
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
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
32
<Shape> <Appearance><Material/> <TextureTransform scale='2 2'/> <PixelTexture image='2 2 3 0xFF0000 0xFFFF00 0xFFFF00 0xFF0000'
repeatS='false'/> </Appearance> <Box/> </Shape>
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
Ferramenta de edição
• Editor de materiais Pellucid– Eric Haines, copyright (c) 1997– http://tog.acm.org/resources/applets/vrml/
pellucid.html
34
Desafio
• Realize um conjunto de mesa com cadeiras apenas com um cubo.– Dica: DEF, USE, transform e procure usar
Inline tbm.
35
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
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
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>
Exercício
• Faça um conjunto de viewpoints para a demonstração do conjunto da mesa.
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
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
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
Billboard codigo
44
<Billboard axisOfRotation='0 1 0'><Shape> <Text string="i...num roda!" /> <Appearance>
<Material diffuseColor='1 1 0'/> </Appearance></Shape>
</Billboard>
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
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
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)
Animação e interpolação
• <CoordinateInterpolator/>
• <OrientationInterpolator/>
• <PositionInterpolator/>
• <ScalarInterpolator/>
• <ColorInterpolator/>• <NormalInterpolator/>
• <CoordinateInterpolator2D/>
• <PositionInterpolator2D/>
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
• 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
• 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
• 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
53
Exemplo
54
Exemplo
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: gabrielmesquit@gmail.com 55
top related