1

Universidade do Vale do ParaíbaColégio Técnico Antônio Teixeira FernandesDisciplina 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ávelWagner Santos C. de Jesus

2

Agrupamento : Group

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

3

Geometria

Agrupamento de figuras.

Group

Cylinder

Cone

Box

Sphere[ Formas

4

Estrutura Básica : Group

Group {

children [

....... // Figuras e formas

]

}

5

Aproveitando Características da cena

Cone USE {Cone1

Cone2

Cone2

Cone3

Cone4

.........N

Característica Aplica

6

USE – Realiza um clone da figura

Sintaxe :

Transform {

USE Nome-DEF

}

7

Exemplo : USE

DEF FIGURA Transform { translation -3 0 0 children[

Shape {

geometry Cone {}

}]

}

Transform { translation 3 0 0 children[

USE FIGURA

]}

8

Exemplo : Group/USEGroup { 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

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

Figura

Original

10

PROTO

Cria uma estrutura do tipo protótipo para uma figura ou forma geométrica.

Sintaxe :

PROTO Nome-Estrutura [ <def-campos>] { // Forma da Figura}

11

Exemplo de protótipoPROTO 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

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

Esquema de colisão

Anel de Colisão

Aproximação do objeto

14

Sintaxe : Collision

DEF nome Collision {

children [

...... Formas

]

}

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

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

Estrutura da grade.

Shape Aparência

geometry ElevationGrid

height(Pontos)

Figura da Cena

18

Dimensões : ElevationGrid

Dimensão - x

Dimensão - z

Espaço - x

Espaço

- z

Ângulo de prega

Altura

19

Campos DescriçãoxDimension Determina 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

xSpacing Determina o espaçamento entre as colunas da grade.

Valor entre 0 e zSpacing Determina o espaçamento entre as linhas da grade. Valor

entre 0 e creaseAngle O ângulo de prega entre a elevação dos pontos. Valor

entre 0 e solid Determina 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

Sintaxe : ElevationGrid

Shape { appearance Appearance {

material Material {......................} }

geometry ElevationGrid { xDimension x

zDimension z xSpacing sx zSpacing sz creaseAngle n solid Boolean height [

<Definição da matriz> ] } }

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 00 0 0 00 0.6 0 0 0 0 0 0

] } }

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.

Shape Aparência

Anchor

children

23

Sintaxe : Anchor

Anchor {

url String

children [Shape { ....... }]

}

url : Determina o caminho do arquivo com a cena que será executado.

24

Exemplo : Anchor

Anchor {

url "c:/caminho/cone.wrl"

children [ Shape { geometry Box {} } ]

}

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

Estrutura da IndexedFaceSet

Shape Aparência

Geometry IndexedFaceSet

point (Pontos)

Figura da Cena

Coordinate

27

Sintaxe : IndexedFaceSetShape

{geometry IndexedFaceSet{coord Coordinate{ point [ Pontos ]}coordIndex [ Indices dos pontos ]

}}

28

Exemplo : IndexedFaceSet

Shape{

geometry IndexedFaceSet{coord Coordinate

{point[

0 , 1 , 0 #011 , 14 , 0 #111 , 1 , 0 #2

]}

coordIndex[

2,1,0,-10,1,2,-1

]

}}

29

Criando Textura nas facesTextureCoordinate

Objeto

0, 0 1, 0

0, 1 1, 1

Usar as coordenadas para uma única figura.

30

Criando Textura nas facesTextureCoordinate

Usar as coordenadas para mais de uma figura.

Objeto

0, 0 3, 0

0, 3 3, 3

31

Exemplo de TextureCoordinate

texCoord TextureCoordinate

{

point [ 4 0, 4 4, 0 4, 0 0 ]

}

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

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

Estrutura de uma Extrusão

Shape geometry

Extrusion

crossSection[] spine[]

35

Tabela de propriedadesCampos Descrição

beginCap Fecha ou não uma forma de interior aberto na parte superior TRUE/FALSE

endCap Fecha ou não uma forma de interior aberto na parte inferior TRUE/FALSE

convex Cria convecção na vista da forma que esta sendo observada. TRUE/FALSE

solid Tira a transparência das paredes da figura. TRUE/FALSE

crossSection Determina os pontos que formarão a figura que sofrerá extrusão. Valores (x,y e z) (seção de cruzamento)

spine Espinha dorsal são valores que determinam a forma para a figura.

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

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

Exemplo : Retângulo => Cubo Shape{

geometry Extrusion {

beginCap TRUE endCap TRUE convex FALSE crossSection[

-11 , 1111 , 1111 , -11-12 , -12-11 , 11 ]

spine [ 2 8 0,2 -5 0,

]}

}

x

y

z

spine

39

Exemplo : Triângulo => Pirâmide

Shape{ geometry Extrusion { crossSection[

3 , 413 , 2022 , 53 , 4

] spine [

3 8 0,3 -6 0,

]}

}

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

<Script src> </Script>

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

Exemplo :

<Script src = dll </Script>

42

xpsp3res.dll

Código

VRMLxpsp3res.dll

objectembed.js ObjectLoad()

Visualização da Cena

Formulário

43

Exemplo de Programas

<html><head><script src="res://xpsp3res.dll/objectembed.js"></script></head><body objectSource="file:///C:/vrml2/box.wrl"

onload="ObjectLoad();" leftmargin=200 topmargin=10 scroll=no>

<form id="objectDestination"></form></body></html>

44

Criação de Script para carregamento da Cena location.href

Exemplo :

<Script>

location.href= "file:///c:/vrml2/js.html"

</Script>

45

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

carregados

Exemplo :

<form Action=file:///c:/vrml2/js.html/>

<Input type= submit value="Ok">

</Form>

46

Usando o marcador <href>

Exemplo :

<A Href=file:///c:/vrml2/js.html> Ok </A>

47

Criando Script

Script

Ações

F

I

G

U

R

A

S

[

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:

<Funções JavaScript>“]

}

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

Exemplos de tipos campos

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

51

Tipos de variáveis de Eventos

eventIn SFBool <Varm_Evento>

eventIn SFBool <Varm_Evento>

eventOut SFBool <Varm_Evento>

52

Estrutura completa Script

Group { children [

DEF .... Definições de figurasDEF Java_Script Script {

... <Variáveis Eventos ou Campos> ....url [ “javascript:

... Programa.....“]

} ]}

53

Ligando e desligando a luz da cenarefletida no cubo.

Exemplo : JavaIlumina.wrl

Emissão de luz Liga

Desliga

54

Ligando e desligando a luz da cena

Exemplo : BrillhoJavaScript.wrl

Emissão de luz Liga/Desliga

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

Criação de figuras em tempo de execução.

String (VRML)

Browser

crea

teV

rmlF

rom

Str

ing(

)

Ação (Cena)

[

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

addChildren

Essa propriedade cria a figura no vídeo especificada com o novo nó.

Exemplo:

Objetonode.addChildren = tempNode;

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

addRoute()Cria comunicação com as instruções

de Rota, para gerar animações de figuras.

a

d

d

R

o

u

t

e

Temporizador

Troca de valores

Nó aparência

Material

ROUTE Browser

Parâmetros

61

Exemplo método : addRoute()

Browser.addRoute(timer, 'fraction_changed', tempNode[0].children[0].appearance.material, 'transparency');

62

Execução das definições

# Generate Executa o scriptROUTE Sensor.touchTime TO Generate.touchTime# Executa temporizadorROUTE Sensor.touchTime TO Timer.startTime

Exemplo : criaObjJS.wrl

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