1 Universidade do Vale do Paraíba Colégio Técnico Antônio Teixeira Fernandes Disciplina Introdução a Computação Gráfica (ICG) Material IV-Bimestre Agrupamentos.

Apresentação em tema: "1 Universidade do Vale do Paraíba Colégio Técnico Antônio Teixeira Fernandes Disciplina Introdução a Computação Gráfica (ICG) Material IV-Bimestre Agrupamentos."— Transcrição da apresentação:

1 1 Universidade do Vale do Paraíba Colégio Técnico Antônio Teixeira Fernandes Disciplina Introdução a Computação Gráfica (ICG) Material IV-Bimestre Agrupamentos de Figuras, Criação de protótipos. Ajuste de objetos 2D em Cenas 3D, Reconhecendo Colisões, Grades de elevação,Construindo geometria de faces,Extrusão, Criação de ancoras,Usandos JavaScript Vrml. Site : http://www1.univap.br/~wagner Prof. Responsável Wagner Santos C. de Jesus

2 2 Agrupamento : Group Permite realizar um agrupamento quando existe figura que possuem as mesmas características para formar uma cena.

3 3 Geometria Agrupamento de figuras. Group Cylinder Cone Box Sphere [ Formas

4 4 Estrutura Básica : Group Group { children [....... // Figuras e formas ] }

5 5 Aproveitando Características da cena Cone USE { Cone1 Cone2 Cone3 Cone4.........N Característica Aplica

6 6 USE – Realiza um clone da figura Sintaxe : Transform { USE Nome-DEF }

7 7 Exemplo : USE DEF FIGURA Transform { translation -3 0 0 children[ Shape { geometry Cone {} }] } Transform { translation 3 0 0 children[ USE FIGURA ]}

8 8 Exemplo : Group/USE Group { children [ Shape { appearance DEF teste Appearance { material Material { diffuseColor 0.38 0 0 transparency 0 } geometry Cylinder { } }, Transform { translation -3 0 0 children[ Shape { appearance USE teste geometry Sphere { radius 1 } }, ]}

9 9 Criando protótipos Os protótipos são usados em computação gráfica para realizar reaproveitamento de parâmetros ou figuras contidos em uma cena. Protótipo Figura Original

10 10 PROTO Cria uma estrutura do tipo protótipo para uma figura ou forma geométrica. Sintaxe : PROTO Nome-Estrutura [ ] { // Forma da Figura }

11 11 Exemplo de protótipo PROTO CILINDRO [ field SFColor CilindroColor 1 1 1 field SFFloat CilindroRadius 1 field SFFloat CilindroHeight 2 ] { Shape { appearance Appearance { material Material { diffuseColor IS CilindroColor shininess.5 emissiveColor 0.16 0.16 0.16 } geometry Cylinder { radius IS CilindroRadius height IS CilindroHeight side TRUE # Default bottom TRUE # Default } Transform { children[ CILINDRO { CilindroColor 1 0 0 CilindroRadius 1.5 CilindroHeight 4 } ] }

12 12 Colisões: Collision Colisão em computação gráfica vem a ser o procedimento de simular quando um objeto se encontra com um observador em VRML pode se caracterizar uma colisão; como uma figura que se movimenta em direção ao observador.

13 13 Esquema de colisão Anel de Colisão Aproximação do objeto

14 14 Sintaxe : Collision DEF nome Collision { children [...... Formas ] }

15 15 Exemplo : Colisão DEF col Collision { children [ Sound { source DEF ac AudioClip { loop TRUE url "c:\vrml2\TestSnd.wav" } } Shape { appearance Appearance { material Material {}} geometry Sphere {} } ] } ROUTE col.collideTime TO ac.set_startTime }

16 16 Grades de elevação: ElevationGrid Permite criar uma matriz de pontos onde a elevação desses pontos podem simular objetos como montanhas, vales, folhas de papel amassado etc.

17 17 Estrutura da grade. ShapeAparência geometry ElevationGrid height(Pontos) Figura da Cena

18 18 Dimensões : ElevationGrid Dimensão - x Dimensão - z Espaço - x Espaço - z Ângulo de prega Altura

19 19 CamposDescrição xDimensionDetermina a dimensões das colunas de uma grade. Valor entre 0 e zDimension Determina as dimensões das linhas de uma grade. Valor entre 0 e xSpacingDetermina o espaçamento entre as colunas da grade. Valor entre 0 e zSpacingDetermina o espaçamento entre as linhas da grade. Valor entre 0 e creaseAngleO ângulo de prega entre a elevação dos pontos. Valor entre 0 e solidDetermina se a figura irá aparecer com aparência vazada ou não. Booleano true/false. height Determina os pontos que formarão a matriz da grade.

20 20 Sintaxe : ElevationGrid Shape { appearance Appearance { material Material {......................} } geometry ElevationGrid { xDimension x zDimension z xSpacing sx zSpacing sz creaseAngle n solid Boolean height [ ] }

21 21 Exemplo ElevationGrid Shape { appearance Appearance { material Material { diffuseColor 0.6 0.6 0.2 } } geometry ElevationGrid { xDimension 4 zDimension 4 xSpacing 1.0 zSpacing 1.0 creaseAngle 1.57 solid FALSE height [ 0 0 0 0.6 0 0 0 0 ] }

22 22 Âncora : Anchor Realiza a mudança de cena por intermédio da interação com o usuário. Bastando que o usuário selecione o objeto ancorado para que seja efetuada a mudança. ShapeAparência Anchor children

23 23 Sintaxe : Anchor Anchor { url String children [Shape {....... }] } url : Determina o caminho do arquivo com a cena que será executado.

24 24 Exemplo : Anchor Anchor { url "c:/caminho/cone.wrl" children [ Shape { geometry Box {} } ] }

25 25 Geometria de faces: IndexedFaceSet A geometria de faces é um conceito da computação gráfica (realidade virtual) que permite a construção de tipos genéricos de figuras. geometry IndexedFaceSet point (Pontos)

26 26 Estrutura da IndexedFaceSet ShapeAparência Geometry IndexedFaceSet point (Pontos) Figura da Cena Coordinate

27 27 Sintaxe : IndexedFaceSet Shape { geometry IndexedFaceSet { coord Coordinate { point [ Pontos ] } coordIndex [ Indices dos pontos ] }

28 28 Exemplo : IndexedFaceSet Shape { geometry IndexedFaceSet { coord Coordinate { point [ 0,1, 0#0 11,14, 0#1 11,1, 0#2 ] } coordIndex [ 2,1,0,-1 0,1,2,-1 ] }

29 29 Criando Textura nas faces TextureCoordinate Objeto 0, 01, 0 0, 1 1, 1 Usar as coordenadas para uma única figura.

30 30 Criando Textura nas faces TextureCoordinate Usar as coordenadas para mais de uma figura. Objeto 0, 03, 0 0, 3 3, 3

31 31 Exemplo de TextureCoordinate texCoord TextureCoordinate { point [ 4 0, 4 4, 0 4, 0 0 ] }

32 32 Exemplo - 1: #VRML V2.0 utf8 NavigationInfo { type "EXAMINE" } Shape { appearance Appearance { texture ImageTexture { url ["c:\Imagem.jpg"] } geometry IndexedFaceSet { coord Coordinate { point[ 0 1 0, 11 14 0, 11 1 0 ] } coordIndex [ 2, 1, 0, -1 0, 1, 2, -1 ] texCoord TextureCoordinate { point [ 4 0, 4 4, 0 4, 0 0 ] }

33 33 Extrusão ( Extrusion) Vem a ser o conceito de explodir uma seqüências de pontos em figuras determinando formas tridimensionais. Normalmente uma extrusão deve ser feita baseada em equações matemáticas trabalhadas nos eixo (x,y e z).

34 34 Estrutura de uma Extrusão Shapegeometry Extrusion crossSection[] spine[]

35 35 Tabela de propriedades CamposDescrição beginCapFecha ou não uma forma de interior aberto na parte superior TRUE/FALSE endCapFecha ou não uma forma de interior aberto na parte inferior TRUE/FALSE convexCria convecção na vista da forma que esta sendo observada. TRUE/FALSE solidTira a transparência das paredes da figura. TRUE/FALSE crossSectionDetermina os pontos que formarão a figura que sofrerá extrusão. Valores (x,y e z) (seção de cruzamento) spineEspinha dorsal são valores que determinam a forma para a figura.

36 36 Sintaxe : Extrusion geometry Extrusion { beginCap Boolean endCap Boolean convex Boolean solid Boolean crossSection[ x0 y0 z0 x1 y1 z1...xn yn zn ] spine [ x0 y0 z0, x1 y1 z1,...xn yn zn] }

37 37 Exemplo : Shape{ geometry Extrusion { spine [0 0 0, 0 5 0, 0 6 1, 0 6.5 2, 0 7 4, 0 7 4.3] } x z y spine Extrusão

38 38 Exemplo : Retângulo => Cubo Shape{ geometry Extrusion { beginCap TRUE endCap TRUE convex FALSE crossSection[ -11,11 11,11 11,-11 -12,-12 -11,11 ] spine [ 28 0, 2-5 0, ] } x y z spine

39 39 Exemplo : Triângulo => Pirâmide Shape{ geometry Extrusion { crossSection[ 3,4 13,20 22,5 3,4 ] spine [ 38 0, 3-6 0, ] }

40 40 Usando JavaScript/VRML Para se determinar ações HTML e Javascript em uma cena possibilitando criar formulários com tela de acesso juntos permitindo maior interação de interface com usuário.

41 41 Para se criar um código JavaScript que será que irá carregar um código VRML. Exemplo :

42 42 xpsp3res.dll Código VRML xpsp3res.dll objectembed.js ObjectLoad() Visualização da Cena Formulário

43 43 Exemplo de Programas

44 44 Criação de Script para carregamento da Cena location.href Exemplo : location.href= "file:///c:/vrml2/js.html"

45 45 Action : permite realizar o acesso ao diretório onde se encontram os arquivos wrl que serão carregados Exemplo :

46 46 Usando o marcador Exemplo : Ok

47 47 Criando Script Script Ações FIGURASFIGURAS [

48 48 Script Realiza a interação entre uma cena e um script de JavaScript com campos, eventos e funções da linguagem VRML. Exemplo : Script { url [ "javascript: ] }

49 49 Tipos de dados VRML Em VRML como em outras linguagens de programação, existem os tipos dados para criação de variáveis ou propriedades esses inúmeros tipos servem para compatibilizar os parâmetros passados por uma figura para um modelo de variáveis que podem ser substituídas durante a execução do programa.

50 50 Exemplos de tipos campos field SFBool bottom TRUE field SFFloat height 2 # (0, ) field SFFloat radius 1 # (0, ) field SFBool side TRUE field SFBool top TRUE field SFInt32 usuário field SFNode (Criação de nós - figura) field SFString (Variável do tipo String)

51 51 Tipos de variáveis de Eventos eventIn SFBool eventOut SFBool

52 52 Estrutura completa Script Group { children [ DEF.... Definições de figuras DEF Java_Script Script {....... url [ javascript:... Programa..... ] } ] }

53 53 Ligando e desligando a luz da cena refletida no cubo. Exemplo : JavaIlumina.wrl Emissão de luz Liga Desliga

54 54 Ligando e desligando a luz da cena Exemplo : BrillhoJavaScript.wrl Emissão de luz Liga/Desliga

55 55 Switch Permite realizar a mudança de estado ativo ou não mediante a seleção do objeto. Podendo substituir um objeto na tela em tempo de execução. Exemplo : DEF nome Switch { choice [..... ] } Exemplo =>EsferaCuboJs.wrl

56 56 Criação de figuras em tempo de execução. String (VRML) Browser createVrmlFromString() Ação (Cena) [

57 57 createVrmlFromString() Dada uma string contendo a geometria da figura o método createVrmlFromString() irá montá-la usando as especificações determinadas criando um nó. Sintaxe : node = Browser.createVrmlFromString(string);

58 58 addChildren Essa propriedade cria a figura no vídeo especificada com o novo nó. Exemplo: Objetonode.addChildren = tempNode;

59 59 DEF Scene Group { children [ DEF Sensor TouchSensor {} Shape { appearance Appearance { material Material { diffuseColor.1.44.22 shininess.1 specularColor.15.15.02 ambientIntensity 0 emissiveColor.04.18.09 } geometry Box { size 1 1 1 } ]} DEF AddedObject Group { children [ ] } DEF Generate Script { eventIn SFTime touchTime field SFNode addedObject USE AddedObject field MFNode tempNode [] field SFString str "" directOutput TRUE url "javascript: function touchTime (val) { str = 'Transform { children [Shape {geometry Sphere{} } ] }'; tempNode=Browser.createVrmlFromString(str); addedObject.addChildren=tempNode; } " } ROUTE Sensor.touchTime TO Generate.touchTime Exemplo : criação de objetos

60 60 addRoute() Cria comunicação com as instruções de Rota, para gerar animações de figuras. addRouteaddRoute Temporizador Troca de valores Nó aparência Material ROUTE Browser Parâmetros

61 61 Exemplo método : addRoute() Browser.addRoute(timer, 'fraction_changed', tempNode[0].children[0].appearance.material, 'transparency');

62 62 Execução das definições # Generate Executa o script ROUTE Sensor.touchTime TO Generate.touchTime # Executa temporizador ROUTE Sensor.touchTime TO Timer.startTime Exemplo : criaObjJS.wrl

63 63 Links (Pesquisa) http://vrmlworks.crispen.org/tutorials/JavaScript/ http://vrmlworlds.com/developer/tutorials/scripts/scripting4.html http:// www.maxwell.lambda.ele.puc-rio.br/cgi-bin/PRG_0599.EXE/4949_8.PDF?NrOcoSis=12322&CdLinPrg=pt http://www.cresesb.cepel.br/VRML/cresesb_centro/cresesb_centro.wrl http://www.web3d.org/x3d/publiclists/vrml_list_archives/0404/msg00086.html