A apresentação está carregando. Por favor, espere

A apresentação está carregando. Por favor, espere

Mini-curso: X3D Básico Bolsistas: -Gabriel M. Rossito

Apresentações semelhantes


Apresentação em tema: "Mini-curso: X3D Básico Bolsistas: -Gabriel M. Rossito"— Transcrição da apresentação:

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

2 Í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

3 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

4 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

5 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

6 Primeiros passos... Possui diversos plugins, ferramentas e recursos de fácil e livre acesso na internet. https://savage.nps.edu/X3D-Edit/ 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

7 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

8 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)

9 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

10 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

11 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=' '> <head></head> <Scene> </Scene> </X3D>

12 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

13 Coordenadas Y é sempre para cima; X, Y, Z correspondem tbm
a Norte, cima, leste; Regra da mão direita. 13

14 Regra da mão Direita Para as coordenadas: Para as rotações dos eixos:
14

15 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

16 Primeiros passos para o desenvolvimento
<Scene> <Background skyColor=' '/> <Shape> <Text string='"Hello" "world!"'> <FontStyle justify='"MIDDLE" "MIDDLE"'/> </Text> </Shape> </Scene>

17 Estruturas básicas Tipos de estruturas: <Sphere/> <Box/>
<Cone/> <Cylinder/> <Text/> <FontStyle/>

18 Forma Geometricas <Sphere/> <Box/> <Cone/>
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

19 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)

20 Exemplo: <Group>
<?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=' '> <Shape> <Sphere/> <Appearance> <Material diffuseColor=' '/> <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'> <Text solid='false' string='"Hello" "world!"'> <FontStyle justify='"MIDDLE" "MIDDLE"'/> </Text> <Material diffuseColor=' '/> </Group> </Scene> </X3D>

21 EXERCÍCIOS Fazer as formas geométricas; 21

22 Agrupamentos Os grupos de nós são organizados com as seguintes comandas: Group, StaticGroup: Transform; LOD (level of detail); Switch. 22

23 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)

24 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)

25 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

26 26

27 Exemplo: 27 <Scene> <Background skyColor='1 1 1'/>
<Transform rotation=' '> <Viewpoint description='Bounding box illustration' position='2 0 20'/> </Transform> <Group DEF="CaixaCompleta"> <Shape DEF="LineBox"> <IndexedLineSet coordIndex=' '> <Coordinate point=' , , , , , , 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"/> <Inline url='"Cylinder.x3d"'/> </Group> <Transform translation='0 -4 0‘ rotation=‘ ’> <Group USE="CaixaCompleta"/> </Scene> </X3D> Exemplo: 27

28 Aparencia Teste..... 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

29 Exercício Faça os eixos X,Y e Z. 29

30 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

31 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 </Appearance> <Box/> </Shape>
<Appearance><Material/>  <TextureTransform scale='2 2'/>  <PixelTexture image=' xFF0000 0xFFFF00 0xFFFF00 0xFF0000'  repeatS='false'/> </Appearance>  <Box/> </Shape> 32

33 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

34 Ferramenta de edição Editor de materiais Pellucid
Eric Haines, copyright (c) 1997 ucid.html 34

35 Desafio Realize um conjunto de mesa com cadeiras apenas com um cubo.
Dica: DEF, USE, transform e procure usar Inline tbm. 35

36 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

37 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

38 * 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 description='Front View' orientation=' '/>  <Viewpoint description ='Rear View '   orientation=' ' position=' '/>  <Viewpoint description ='Top View '  orientation=' ' position='0 10 0'/>  <Viewpoint description ='Bottom View'  orientation=' ' position=' '/>  <Viewpoint description ='Right View'  orientation=' ' position='10 0 0'/>  <Viewpoint description ='Left View'  orientation=' ' position=' '/> </Group>  38

39 Exercício Faça um conjunto de viewpoints para a demonstração do conjunto da mesa.

40 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

41 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

42

43 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

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

45 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

46 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

47 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)

48 Animação e interpolação
<CoordinateInterpolator/> <OrientationInterpolator/> <PositionInterpolator/> <ScalarInterpolator/> <ColorInterpolator/> <NormalInterpolator/> <CoordinateInterpolator2D/> <PositionInterpolator2D/>

49 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; AbstractSpecification/Part01/fieldsDef.html 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

50 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

51 Ajuste loop=‘false’ se a animação percorre até um tempo pré estimado;
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

52 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 53

54 Exemplo 54

55 Muito obrigado a todos!!!! Contato: gabrielmesquit@gmail.com
Referencias: X3D: Extensible 3D Graphics for Web Authors, Don Brutzman 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: 55


Carregar ppt "Mini-curso: X3D Básico Bolsistas: -Gabriel M. Rossito"

Apresentações semelhantes


Anúncios Google