Minicurso X 3 D Bsico Bolsistas Gabriel M

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

Índice: • Introdução, o que é o X 3 D; (interessante abordar “Porque estudar X 3 D” pros e contras do X 3 D) • Os primeiros passos; (como instalar • Padrão X 3 D – edit; • Introdução ao código X 3 D; • Primeiros passos; • X 3 D-Edit; • Introdução ao codigo; • Perfil; • Formas geometricas; • Hello World; • Agrupamentos; • DEF e USE; • Coordenadas; • Viewpoint e Navigation. Info; • Aparencia; • Animação. 2

Introdução • X 3 D significa extensible 3 D • É considerada uma evolução natural do padrão VRML 97 • É aberto e livre de taxas • Foi criado para fazer a comunicação entre 3 D e web, sendo feito em XML

Introdução • X 3 D é um padrão aberto para distribuir conteúdo 3 D ; • O X 3 D 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 X 3 D surgiu de uma revisão da especificação ISO VRML 97; – – 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 WEB 3 D consortium, que visa o uso da tecnologia 3 D em navegadores, permitindo que sites que usem Java. Script 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 3 D; • X 3 D 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 X 3 D com a Arquitetura da World Wide Web. • Não é necessário grandes softwares para criar um X 3 D. É 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. web 3 d. org/x 3 d/content/help. html – https: //savage. nps. edu/X 3 D-Edit/ – http: //x 3 dgraphics. com/examples/X 3 d. Resources. html • Mas o primeiro passo é a instalação do X 3 D plugin para seu navegador. • Depois indica-se a instalaçao de um editor de código. • X 3 D – 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 • X 3 D significa extensible 3 D • É considerada uma evolução natural do padrão VRML 97 • É aberto e livre de taxas • Foi criado para fazer a comunicação entre 3 D e web, sendo feito em XML

Primeiros passos para o desenvolvimento • Plugin: – BS_Contact_VRML_61 (Para Internet Explorer) • Browser: – XJ 3 D - Java based X 3 D Toolkit and X 3 D Browser (www. web 3 d. org) • Editor: – X 3 D Edit (www. web 3 d. org)

X 3 D Edit • X 3 D Edit possui o drag-and-drop; • Popup com recursos auxiliares; • Vizualização direta; • Instalação: – Baixe e extraia o X 3 D-Edit 3. 2. zip • https: //savage. nps. edu/X 3 D-Edit 3. 2. zip – – Rode run. X 3 DEdit. Wind. bat para Windows; Ou run. X 3 DEdit. Mac. sh. command para Mac; Funciona em Linux; E agora só programar! 9

Introdução ao código • Um arquivo X 3 D 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 “X 3 D”); – Versão do padrão suportado (a mais atual é a 3. 2); – Identificação da codificação de caracteres suportado (“utf 8” – 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: – “ <X 3 D profile='Interactive' version='3. 0'> ” 10

Primeiros passos para o desenvolvimento • Código básico (salvar como. x 3 d): • • <? xml version="1. 0" encoding="UTF-8"? > <!DOCTYPE X 3 D PUBLIC "ISO//Web 3 D//DTD X 3 D 3. 1//EN" "http: //www. web 3 d. org/specifications/x 3 d-3. 1. dtd"> <X 3 D profile='Immersive' version='3. 1' xmlns: xsd='http: //www. w 3. org/2001/XMLSchema-instance' xsd: no. Namespace. Schema. Location=' http: //www. web 3 d. org/specifications/x 3 d-3. 1. xsd '> <head></head> <Scene> </Scene> </X 3 D>

Profile • Esses perfis identificam quais funcionalidades (componentes) o navegador X 3 D precisaria suportar para exibir o conteúdo do arquivo X 3 D. 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 • <X 3 D profile='Immersive'></X 3 D> • Define de onde até a onde vai a parte de X 3 D • <Scene> </Scene> • Área onde fica o código desenvolvido

Primeiros passos para o desenvolvimento • • <Scene> <Background sky. Color='0. 2 0. 1'/> <Shape> <Text string='"Hello" "world!"'> <Font. Style justify='"MIDDLE"'/> </Text> </Shape> </Scene>

Estruturas básicas • • Tipos de estruturas: <Sphere/> <Box/> <Cone/> <Cylinder/> <Text/> <Font. Style/>

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), bottom. Radius (um valor), height (um valor) • Cylinder: bottom, side, solid, top (booleano), radius (um valor), height (um valor) • Text: solid (booleano), length, max. Extent (maximo de um valor por linha), string (onde vai o texto, cada conjunto de aspas é uma linha) • Font. Style: Configuração da fonte (como o word)

Exemplo: <? xml version="1. 0" encoding="UTF-8"? > <!DOCTYPE X 3 D PUBLIC "ISO//Web 3 D//DTD X 3 D 3. 1//EN" "http: //www. web 3 d. org/specifications/x 3 d-3. 1. dtd"> <X 3 D profile='Immersive' version='3. 1' xmlns: xsd='http: //www. w 3. org/2001/XMLSchema-instance' xsd: no. Namespace. Schema. Location='http: //www. web 3 d. org/specifications/x 3 d-3. 1. xsd'> <Group> <Viewpoint center. Of. Rotation='0 -1 0' description='Hello world!' position='0 -1 7'/> <Transform rotation='0 1 0 3'> <Shape> <Sphere/> <Appearance> <Material diffuse. Color='0 0. 5 1'/> <Image. Texture url='"earth-topo. png" "earth-topo. jpg" "earth-topo-small. gif" "http: //www. web 3 d. org/x 3 d/content/examples/Basic/earth-topo. png" "http: //www. web 3 d. org/x 3 d/content/examples/Basic/earth-topo. jpg" "http: //www. web 3 d. org/x 3 d/content/examples/Basic/earth-topo-small. gif"'/> </Appearance> </Shape> </Transform> <Transform translation='0 -2 0'> <Shape> <Text solid='false' string='"Hello" "world!"'> <Font. Style justify='"MIDDLE"'/> </Text> <Appearance> <Material diffuse. Color='0. 1 0. 5 1'/> </Appearance> </Shape> </Transform> </Group> </Scene> </X 3 D>

EXERCÍCIOS Fazer as formas geométricas; 21

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

Grupos • <Transform></Transform> • Transform: – rotation (quatro valores) – translation (três valores) – scale (três valores) • <Group></Group> – bbox. Center (três valores) – bbox. Size (três valores)

Grupos • <LOD></LOD> - quando dois objetos se colidem ele deixa o de maior prioridade • <Static. Group></ Static. Group> - 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. web 3 d. org/x 3 d/content/X 3 d. Tooltips. html 26

<Scene> <Background sky. Color='1 1 1'/> <Transform rotation='1 0 0 1. 57'> <Viewpoint description='Bounding box illustration' position='2 0 20'/> </Transform> <Group DEF="Caixa. Completa"> <Shape DEF="Line. Box"> <Indexed. Line. Set coord. Index='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, '/> </Indexed. Line. Set> <Appearance> <!-- Linha apenas emite cor --> <Material emissive. Color='0 0 0'/> </Appearance> </Shape> Exemplo: <Inline url='“Sphere. x 3 d"' /> <!-- esfera salva em outro rquivo -- > <Transform translation='4 0 0'> <Shape USE="Line. Box"/> </Transform> <Inline url='"Cylinder. x 3 d"'/> </Group> <Transform translation='0 -4 0‘ rotation=‘ 0 1. 57’> <Group USE="Caixa. Completa"/> </Transform> </Scene> </X 3 D> 27

Aparencia • Material: – diffuse. Color: • Reflete as fontes luzes do ambiente, depende do ângulo de visão e do ângulo da fonte. – ambient. Intensity: • O quão forte será o reflexo. – emissive. Color: • Incandecensia do objeto, é independente da luz. – specular. Color: • 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

Image. Texture • 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 diffuse. Color, pode influenciar na imagem; <Shape> <Box/> <Appearance> <Material/> <Image. Texture url="CIMG 2578. jpg“ /> </Appearance> </Shape> 30

Pixel. Texture • • 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, <Image. Texture 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/> <Texture. Transform scale='2 2'/> <Pixel. Texture image='2 2 3 0 x. FF 0000 0 x. FFFF 00 0 x. FF 0000' repeat. S='false'/> </Appearance> <Box/> </Shape> 32

Texture. Transform • É o “transform” da imagem, trabalhando em 2 D; – 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/pellu cid. 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 3 D. – Viewpoint, Navigation. Info; • Viewpoint: – Ferramenta primaria para uma navegação; – Guiar usuários; – Ajuda localizar facilmente algum objeto predeterminado. • Navigation. Info: – 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 3 D. – É 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 * • center. Of. Rotation: – 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='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> 38

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

Navigation. Info • 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

Navigation. Info • “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. • “visibility. Limit” é o limite de visibilidade do usuario. – Medido do viewpoint; – Fora do limite o objeto não é desenhado; – visibility. Limit=‘ 0. 0’ significa sem limites. 41

Billboard • Bilboard – Feito para auxiliar a visualização ou a leitura de algum objeto na cena; – axis. Of. Rotation: • Atributo de Billboard no qual deve implicar em qual eixo aplicar; • Default é axis. Of. Rotation=‘ 0 1 0’ que gira envolta do eixo “y”; • Definir axis. Of. Rotation=‘ 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 axis. Of. Rotation='0 1 0'> <Shape> <Text string="i. . . num roda!" /> <Appearance> <Material diffuse. Color='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 3 D é considerada uma modificação gráfica em um devido tempo. Um exemplo de comportamento em uma rota: 46

Animação e interpolação • <Time. Sensor/> = controla quando a animação flui – cycle. Interval, start. Time, stop. Time, pause. Time, resume. Time (um valor), loop, enabled (booleano) • <ROUTE/> = determina de onde até onde deve ser feito – from. Node, from. Field, to. Node, to. Field (nomes)

Animação e interpolação • • • <Coordinate. Interpolator/> <Orientation. Interpolator/> <Position. Interpolator/> <Scalar. Interpolator/> <Color. Interpolator/> • <Normal. Interpolator/> • <Coordinate. Interpolator 2 D/> • <Position. Interpolator 2 D/>

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, SFVec 3 f, SFColor e etc; – http: //www. web 3 d. org/x 3 d/specifications/ISO-IEC-19775 -1. 2 -X 3 DAbstract. Specification/Part 01/fields. Def. html – http: //www. web 3 d. org/x 3 d/specifications/ISO-IEC-19775 -1. 2 -X 3 DAbstract. Specification/Part 01/shaders_glsl. html • 4° Se o nó objetivo é SFBool ou SFInt 32, 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: Position. Interpolator produz SFVec 3 f “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° Time. Sensor clock: adicione um sensor de tempo, então ajuste seu campo “cycle. Interval” 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 “Time. Sensor” enviar uma ordem de iniciar a animação. 51

• 9° Connect clock: faça um “ROUTE” o “Time. Sensor 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: – – – • • • X 3 D: Extensible 3 D Graphics for Web Authors, Don Brutzman http: //www. web 3 d. org/x 3 d/content/examples/help. html http: //x 3 d. Graphics. com http: //www. xj 3 d. org/ http: //www. web 3 d. org/ Plugin: – BS_Contact_VRML_61 (Para Internet Explorer) Browser: – XJ 3 D - Java based X 3 D Toolkit and X 3 D Browser (www. web 3 d. org) Editor: – X 3 D Edit (www. web 3 d. org) Contato: gabrielmesquit@gmail. com 55