Post on 17-Apr-2015
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