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
1
Agrupamento : Group
Permite realizar um agrupamento
quando existe figura que possuem as
mesmas características para formar uma
cena.
2
Agrupamento de figuras.
Geometria
Cylinder
Cone
Group
Box
Sphere
Formas
3
Estrutura Básica : Group
Group {
children [
....... // Figuras e formas
]
}
4
Aproveitando Características da cena
Cone1
Aplica
Característica
Cone
USE
Cone2
Cone2
Cone3
Cone4
.........N
5
USE – Realiza um clone da figura
Sintaxe :
Transform {
USE Nome-DEF
}
6
Exemplo : USE
DEF FIGURA Transform { translation -3 0 0
children[
Shape {
geometry Cone {}
}]
}
Transform { translation 3 0 0 children[
USE FIGURA
]}
7
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
}
},
]}
]
}
8
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
9
PROTO
Cria uma estrutura do tipo protótipo para
uma figura ou forma geométrica.
Sintaxe :
PROTO Nome-Estrutura [ <def-campos>]
{
// Forma da Figura
}
10
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 }
] }
11
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.
12
Esquema de colisão
Anel de Colisão
Aproximação do
objeto
13
Sintaxe : Collision
DEF nome Collision {
children [
...... Formas
]
}
14
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
}
15
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.
16
Estrutura da grade.
Figura da Cena
Shape
Aparência
geometry ElevationGrid
height(Pontos)
17
Dimensões : ElevationGrid
Ângulo de prega
Dimensão - x
Espaço - x
18
Campos
Descrição
xDimension Determina a dimensões das colunas de uma grade. Valor
entre 0 e 
Determina as dimensões das linhas de uma grade. Valor
zDimension entre 0 e 
xSpacing
Determina o espaçamento entre as colunas da grade.
zSpacing
Determina o espaçamento entre as linhas da grade. Valor
Valor entre 0 e 
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.
19
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>
]
}
}
20
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 [
0000
0000
0 0.6 0 0
0000
]
}
}
21
Â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.
Anchor
children
Shape
Aparência
22
Sintaxe : Anchor
Anchor {
url String
children [Shape { ....... }]
}
url : Determina o caminho do arquivo com a
cena que será executado.
23
Exemplo : Anchor
Anchor {
url "c:/caminho/cone.wrl"
children [ Shape { geometry Box {} } ]
}
24
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)
25
Estrutura da IndexedFaceSet
Figura da Cena
Shape
Aparência
Geometry IndexedFaceSet
Coordinate
point (Pontos)
26
Sintaxe : IndexedFaceSet
Shape
{
geometry IndexedFaceSet
{
coord Coordinate
{
point
[ Pontos
]
}
coordIndex
[ Indices dos pontos ]
}
}
27
Exemplo : IndexedFaceSet
Shape
{
geometry IndexedFaceSet
{
coord Coordinate
{
point
[
0
11
11
,
,
,
1
14
1
,
,
,
0
0
0
#0
#1
#2
]
}
coordIndex
[
2,1,0,-1
0,1,2,-1
]
}
}
28
Criando Textura nas faces
TextureCoordinate
0, 1
1, 1
Objeto
0, 0
1, 0
Usar as coordenadas para uma única figura.
29
Criando Textura nas faces
TextureCoordinate
0, 3
3, 3
Objeto
0, 0
3, 0
Usar as coordenadas para mais de uma figura.
30
Exemplo de TextureCoordinate
texCoord TextureCoordinate
{
point [ 4 0, 4 4, 0 4, 0 0 ]
}
31
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 ]
}
}
}
32
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).
33
Estrutura de uma Extrusão
Shape
geometry
Extrusion
crossSection[]
spine[]
34
Tabela de propriedades
Campos
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.
35
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]
}
36
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]
}
}
spine
y
z
Extrusão
x
37
Exemplo : Retângulo => Cubo
y
Shape{
geometry Extrusion
{
beginCap TRUE
endCap TRUE
convex FALSE
crossSection[
-11
11
11
-12
-11
]
spine [
2
2
]
}
,
,
,
,
,
11
11
-11
-12
11
8
-5
x
spine
z
0,
0,
}
38
Exemplo : Triângulo => Pirâmide
Shape{
geometry Extrusion
{
crossSection[
3
13
22
3
]
spine [
3
3
]
}
,
,
,
,
4
20
5
4
8
-6
0,
0,
}
39
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.
40
<Script src> </Script>
Para se criar um código JavaScript que
será que irá carregar um código VRML.
Exemplo :
<Script src = dll </Script>
41
xpsp3res.dll
Código
xpsp3res.dll
objectembed.js
VRML
ObjectLoad()
Visualização da
Cena
Formulário
42
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>
43
Criação de Script para carregamento
da Cena location.href
Exemplo :
<Script>
location.href= "file:///c:/vrml2/js.html"
</Script>
44
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>
45
Usando o marcador <href>
Exemplo :
<A Href=file:///c:/vrml2/js.html> Ok </A>
46
Criando Script
F
I
Ações
Script
G
U
R
A
[
S
47
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>
“]
}
48
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.
49
Exemplos de tipos campos
field
field
field
field
field
field
field
field
SFBool bottom TRUE
SFFloat height 2
# (0,  )
SFFloat radius 1
# (0, )
SFBool side TRUE
SFBool top
TRUE
SFInt32 usuário
SFNode (Criação de nós - figura)
SFString (Variável do tipo String)
50
Tipos de variáveis de Eventos
eventIn SFBool <Varm_Evento>
eventIn SFBool <Varm_Evento>
eventOut SFBool <Varm_Evento>
51
Estrutura completa Script
Group {
children [
DEF .... Definições de figuras
DEF Java_Script Script {
... <Variáveis Eventos ou Campos> ....
url [ “javascript:
... Programa.....
“]
}
]
}
52
Ligando e desligando a luz da cena
refletida no cubo.
Emissão de
luz
Liga
Desliga
Exemplo : JavaIlumina.wrl
53
Ligando e desligando a luz da cena
Emissão de
luz
Liga/Desliga
Exemplo : BrillhoJavaScript.wrl
54
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
55
Ação (Cena)
String (VRML)
Browser
createVrmlFromString()
Criação de figuras em tempo de
execução.
56
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);
57
addChildren
Essa propriedade cria a figura no vídeo
especificada com o novo nó.
Exemplo:
Objetonode.addChildren = tempNode;
58
Exemplo : criação de objetos
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
59
addRoute()
Cria comunicação com as instruções de
Rota, para gerar animações de figuras.
Parâmetros
Temporizador
a
d
d
Troca de valores
R
o
Nó aparência
Material
ROUTE
Browser
u
t
e
60
Exemplo método : addRoute()
Browser.addRoute(timer, 'fraction_changed',
tempNode[0].children[0].appearance.material,
'transparency');
61
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
62
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
63