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
Introdução
• X3D significa extensible 3D
• É considerada uma evolução natural do
padrão VRML97
• É aberto e livre de taxas
• Foi criado para fazer a comunicação entre
3D 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ção
• X3D significa extensible 3D
• É considerada uma evolução natural do
padrão VRML97
• É aberto e livre de taxas
• Foi criado para fazer a comunicação entre
3D e web, sendo feito em XML
Primeiros passos para o
desenvolvimento
• 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)
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
desenvolvimento
• Código básico (salvar como .x3d):
•
•
•
•
•
•
•
<?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 '>
<head></head>
<Scene>
</Scene>
</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
•Para as coordenadas:
•Para as rotações dos eixos:
14
Primeiros passos para o
desenvolvimento
• <?xml version="1.0" encoding="UTF-8"?>
• É o identificador de que será usado o XML
versão 1.0
• <X3D profile='Immersive'></X3D>
• Define de onde até a onde vai a parte de
X3D
• <Scene> </Scene>
• Área onde fica o código desenvolvido
Primeiros passos para o
desenvolvimento
•
•
•
•
•
•
•
•
<Scene>
<Background skyColor='0.2 0.1 0.1'/>
<Shape>
<Text string='"Hello" "world!"'>
<FontStyle justify='"MIDDLE" "MIDDLE"'/>
</Text>
</Shape>
</Scene>
Estruturas básicas
•
•
•
•
•
•
•
Tipos de estruturas:
<Sphere/>
<Box/>
<Cone/>
<Cylinder/>
<Text/>
<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
http://www.web3d.org/x3d/content/X3dTooltips.html
26
<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>
Exemplo:
<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>
27
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
Exercício
• Faça os eixos X,Y e Z.
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
<Shape>
<Appearance><Material/>
<TextureTransform scale='2 2'/>
<PixelTexture image='2 2 3 0xFF0000 0xFFFF00 0xFFFF00 0xFF0000'
repeatS='false'/>
</Appearance>
<Box/>
</Shape>
32
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/pell
ucid.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”.
<Group>
<Viewpoint
<Viewpoint
<Viewpoint
<Viewpoint
<Viewpoint
<Viewpoint
</Group>
description='Front View' orientation='0 1 0 0'/>
description ='Rear View ' orientation='0 1 0 3.14' position='0 0 -10'/>
description ='Top View ' orientation='1 0 0 -1.57' position='0 10 0'/>
description ='Bottom View' orientation='1 0 0 1.57' position='0 -10 0'/>
description ='Right View' orientation='0 1 0 1.57' position='10 0 0'/>
description ='Left View' orientation='0 1 0 -1.57' position='-10 0 0'/>
38
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
<Billboard axisOfRotation='0 1 0'>
<Shape>
<Text string="i...num roda!" />
<Appearance>
<Material diffuseColor='1 1 0'/>
</Appearance>
</Shape>
</Billboard>
44
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.
7
B
45
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-X3DAbstractSpecification/Part01/fieldsDef.html
– http://www.web3d.org/x3d/specifications/ISO-IEC-19775-1.2-X3DAbstractSpecification/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
Exemplo
53
Exemplo
54
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