UNIVERSIDAD NACIONAL MAYOR DE SAN MARCOS

Facultad de Ciencias Matemáticas

Escuela Profesional de Computación Cientı́fica

Computación Cientı́fica

Tı́tulo:
Computación Gráfica

Alumnos:
Reyes Fernández Grecia
Aranda Camargo Gissella
Rojas Pinedo Juan José
Hernández Maturrano Alex
Fernandez Salcedo Antonio

2010-II
LIMA-PERÚ
 Computación Gráfica

¿Qué es VRML?
El Virtual Reality Modeling Language (VRML) es un formato de archivo para describir mundos 3D
interactivos y objetos. El mundo en 3D descrito por el archivo VRML define un escenario gráfico,
permite al usuario interactuar y asumir múltiples puntos de vista.

PROYECTOS

1. Mesita
Colocamos color de fondo con el Nodo Background con la siguiente estructura:

Background {
groundColor [0.05 0.43 0.48,0.26 0.61 0.43]
skyColor [0.01 0.36 0.71, 0.58 0.35 0.19]
}

Ubicamos la distancia que el usuario observara la imagen con el Nodo Viewpoint con la si-
guiente estructura:

Viewpoint {position 0 0 15}

Finalmente con la estructura del Nodo Transform expuesta en clase, por ejemplo:

Transform {
translation -5.30 -3.50 2.80
children [
Shape {
appearance Appearance {
material Material {
diffuseColor 0.45 0.86 0.66
emissiveColor 0.17 0.760.13
specularColor 1 1 1
ambientIntensity 0.80
transparency 0.00
shininess 1} }
geometry Box {
size 0.25 3 0.25 }
}
]}

Finalmente,lo haremos girar con las siguientes definiciones:

DEF mueve OrientationInterpolator {

key [ 0.0, 0.5, 1.0 ]
keyValue [ 0.0 1.0 0.0 0,

2
 Computación Gráfica

0.0 1.0 0.0 3.14,

0.0 1.0 0.0 6.28
]
}

DEF tiempo TimeSensor {

cycleInterval 2.0
loop TRUE }
ROUTE tiempo.fractionchanged TO mueve.setfraction
ROUTE mueve.valuechanged TO mesa.rotation

En el campo Key se indica que no girará en el eje x, en el eje y solo la mitad para que los
objetos giren y en el eje z para que a la vista del observador al dar toda la vuelta se repita la
imagen inicial. El TimeSensor controlaremos la rapidez y finalmente con ROUTE Y TO indi-
camos tiempo en que se cambiara los las coordenadas y en que objeto variara las coordenadas.
Se muestra a continuación la imagen:

2. Avioneta
Elaboramos con el Nodo Group:

Group {
children [
P artesdelaAvioneta ] }

3
 Computación Gráfica

Se definirá cada una de sus partes con la palabra reservada DEF :

DEF PLANE
DEF FUSELAGE
DEF WING
DEF LWING
DEF UWING
DEF PILOT
DEF SCARF
DEF HORSTAB
DEF VERSTAB
DEF NOSE
DEF PROP

En cada una de ella se utilizará la siguiente estructura con las primitivas:

T ransf orm {
translation , rotation
children[
Shape {
appearance Appearance{
material M aterial{
dif f useColor f loat
transparency f loat}}
geometry}
]}

Con el sensor SphereSensor hacemos que el usuario pueda interactuar mediante el cursor con el
objeto haciendo movimientos circulares.

4
 Computación Gráfica

3. Sistema Solar
Hemos realizado es un Sistema Solar para el cual primero hemos creado un cubo con 6 planos
(200 de ancho, 200 de altura y 0.1 de grosor), como fondo hemos utilizamos la imagen con url
utilizando la estructura anterior de Nodo Transform, solo modificamos el siguiente campo:

appearance Appearance {
texture ImageT exture {
url ”http : //www.trucospc.inf o/public/espacio/Estrellas.jpg”}
}

Realizamos la animación el cual consiste en que los planetas giren alrededor del Sol y sobre
su eje para ello utilizamos DEF ZEIT TimeSensor y DEF Giro OrientationInterpola-
tor, para controlar la rapidez y la orientación respectivamente de la siguiente forma:

DEF Zeit TimeSensor

{
cycleInterval 10.0
loop TRUE
}

DEF Giro OrientationInterpolator {

key [intervalodetiempo]
keyValue [ ] }

Definimos el Sol con la estructura de la Nodo Transform y su respectivo url de su textura.

También con la palabra reservada ROUTE el cual nos sirve para activar ZEIT TimeSensor y

5
 Computación Gráfica

Giro OrientationInterpolator con respecto al objeto Sol.

ROUTE Zeit.fractionchanged TO Giro.setfraction
ROUTE Giro.valuechanged TO Sol.setrotation

De igual manera se definirán los demás planetas con la palabra reservada DEF, sólo que su
giro lo controlaremos con el interpolador PositionInterpolator que posee la misma estructura
que OrientationInterpolator, con la misma palabras reservadas ROUTE, TO.

4. Colores primarios
Introducimos un Nodo de entorno NavigationInfo con el campo type que elimina todo tipo de
controladores. Su estructura es:

NavigationInfo { type ”NONE”}

Introducimos texto dentro del mundo virtual con el Nodo Text con la siguiente estructura:

Text {
string [Çombinacion de Colores Primarios”]
fontStyle FontStyle {
family ”SERIF”,
style ÏTALIC”,
size 0.5
spacing 1
}}

6
 Computación Gráfica

Con la palabra reservada DEF definimos TransformR donde formaremos nuestro mezcla de
colores, formaremos tres esferas con sus respectivos sensor definidos de la siguiente manera:

DEF SensorCentral TouchSensor

DEF SensorRed TouchSensor
DEF SensorGreen TouchSensor
DEF SensorBlue TouchSensor

Para lograr la combinación de colores en forma gradual utilizaremos el nodo Script que dota
a los mundos virtuales de vida. Si bien como se ha visto con los sensores e interpoladores se
conseguı́a cierto dinamismo, cuando se necesitan tomar decisiones, realizar repeticiones o guar-
dar información, la única opción es aprovechar las bondades que ofrece el nodo Script.Tiene la
siguiente estructura:

Se definirá los eventos que ocurrirá al interactuar con cada esfera de la siguiente manera:

eventIn SFFloat color

eventIn SFTime redTime
eventIn SFTime greenTime
eventIn SFTime blueTime
eventIn SFTime centralTime

Se definen los campos: red, green, blue las cuales inicializa la transferencia de colores y
localred, localblue, localgreen, controla directamente la intensidad del color de cada esfera
al combinar.
Con javascript provee las bibliotecas para controlar la transferencia de color y volver al
estado inicial definiendo las siguientes funciones:

function redTime(v,t)
function greenTime(v,t)
function blueTime(v,t)
function centralTime(v,t)
function color(v,t)

Por ejemplo: Si clicamos en la esfera central todos los colores vuelven al estado inicial con la
siguiente función:

function centralTime(v,t){
localRed.diffuseColor[0] = 1;
localGreen.diffuseColor[1] = 1
localBlue.diffuseColor[2] = 1;

7
 Computación Gráfica

localCentral.diffuseColor[0] = 0;
localCentral.diffuseColor[1] = 0;
localCentral.diffuseColor[2] = 0;
/*también pone en false todas las variables de control:*/
red = false;
green = false,
blue = false;
}

8
 Computación Gráfica

5. Barrera
Utilizando la estructura ya indicada anteriormente del Nodo Transform construiremos nuestra
barrera, aquı́ utilizaremos el sensor TimeSensor de la siguiente manera:

DEF Rampa TimeSensor {

cycleInterval 10
loop FALSE
}
El cual indica que en 10 segundos no bajará la barrera.
También utilizaremos el sensor TouchSensor para detectar cuando el usuario sitúa el mouse en
el botón verde lo cual indicará el ascenso de la barrera.

Se muestra a continuación la figura:

6. Aprendiendo ejes
Primero definimos con la palabra reservada PROTO los cambios de valores que tendremos para
mover los ejes(0 a 1)presenta la siguiente estructura:

PROTO SliderPot [
eventOut SFFloat valuechanged
field SFFloat scaleFactor 1.0
field SFFloat centerDetent 0.05
field SFFloat initialValue 0.0
] Ahora formaremos nuestras figuras por puntos y fijaremos la orientación de la uniones de los
vértices con el nodo IndexedFaceSet en el campo geometry de la siguiente manera:

9
 Computación Gráfica

geometry IndexedFaceSet {
coord Coordinate {
point [
-1.5 -5 0, -0.25 -5 0, 0.25 -5 0, 1.5 -5 0,
-0.25 -4 0, 0.25 -4 0, -0.25 4 0, 0.25 4 0,
-1.5 5 0, -0.25 5 0, 0.25 5 0, 1.5 5 0
]
coordIndex [
0 1 9 8 -1, 2 3 11 10 -1,
1 2 5 4 -1, 6 7 10 9 -1
]
{}

Luego fijaremos el plano sensor en una caja con la moveremos los valores de la siguiente manera:

DEF PS PlaneSensor
maxPosition 0 4
minPosition 0 -4
}

Se ubicará donde se verá los cambio de valor de la siguiente manera:

Transform {
translation -0.045 -0.045 0
children [
DEF Xpot SliderPot {}
]
}}

Con IndexedLineSet se formará los ejes coordenados de la siguiente manera:

geometry IndexedLineSet {
coord Coordinate {
point [ -4 0 0, 4 0 0, 0 -3 0, 0 3 0, 0 0 -4, 0 0 4 ]
}
coordIndex [ 0 1 -1, 2 3 -1, 4 5 -1]
}
}

Con IndexedLineSet, IndexedFaceSet formaremos los ejes y las caras del tetraedro res-
pectivamente, teniendo la misma estructura que IndexedLineSet. Finalmente con dos nodos
Script cambiaremos los números al movilizar la caja y rotaremos. A continuación las figuras:

10
Computación Gráfica

11