UNIDAD_II

Computación Gráfica - Unidad II Jessica Delgado F. / Pedro Carpio F.

30 Sistema a Distancia

SEGUNDA UNIDAD

AGRUPACIÓN DE NODOS

DEFINICIÓN, CÓDIGO EN EL SOFTWARE,

NODOS

OBJETIVOS

• Mostrar las técnicas de agrupación de nodos

• Explicar cómo insertar texto en un mundo virtual

• Describir el técnicas de transformaciones de los objetos

• Aplicar apariencia a los objetos, color y transparencia

• Aplicar texturas y videos a los objetos



LECCIÓN III

AGRUPACIÓN DE NODOS

3.1 ¿Podremos agrupar un conjunto de nodos?

El nodo que permite tratar un conjunto de nodos como una entidad única es el

nodo Group . Tiene un único campo children cuyo valor va entre corchetes

[…] , es la lista de los objetos que se quieren agrupar, representados por sus

respectivos.

Veamos su estructura:

Group {

children [

Shape { ... },

Shape { ... },

...

]

}

Ejemplo 3.1

#VRML V2.0 utf8

Group {

children [

#caja:

Shape {

appearance Appearance {material Material { }

}

geometry Box {size 2 0.5 3 }

}

#cono:

Shape {



appearance Appearance {material Material { }

}

geometry Cone { height 2

bottomRadius 0.50

}

}

]

}

Vamos a visualizarlo:

Figura 8. Box y Cone

Se puede observar que la caja y el cono están superpuestos. Esto es debido a

que los objetos son creados todos en el mismo punto, es decir en el centro de

realidad virtual o centro del mundo.

3.2 ¿Podremos posicionar los objetos en distintos puntos en el espacio

virtual?

El nodo Transform determina un nuevo sistema de coordenadas para un

grupo de objetos. Este nuevo sistema de coordenadas puede ser modificado

(transformaciones), puede ser trasladado, girado un determinado ángulo, y

tener una escala (tamaño relativo) distinta a la original.



Un punto en el espacio está definido por su posición con respecto al centro de

coordenadas. En el lenguaje VRML se adopta la convención de que sea X la

distancia que ese punto esté desplazado a la derecha o a la izquierda del

centro.

Y la distancia por encima o por debajo y Z la distancia hacia delante o hacia

atrás.

Ejemplo 3.2.1

Transform { translation 2 0 0

children [

#caja:

Shape {appearance Appearance { material Material { }

}

geometry Box { size 2 0.5 3 }

}

]

}

Veamos el resultado

Figura 9. Box Trasladado en X

Vemos que la caja se ha trasladado 2 unidades a la derecha (ahora el centro

de la caja no es el centro de coordenadas, sino el punto en el espacio (2 0 0).

Visto desde el eje Z lo veríamos de esta forma.



3.3 ¿Cómo podemos rotar un objeto?

Para empezar a rotar un objeto primero tenemos que aprender la regla de la

“mano derecha” para los ejes tridimensionales. Posicionar su mano derecha

ver el siguiente gráfico.

Posicionar su mano derecha con el pulgar apuntando en la dirección del eje X

y su dedo índice apuntando en la dirección del eje Y. Luego Llevar su dedo

medio en forma recta fuera de la palma .El dedo medio apunta en la dirección

del eje Z.

Figura 10. Mano

Una rotación con respecto al eje X se manifiesta cuando tratemos de envolver

nuestra mano alrededor del eje X. Esto sería una rotación con ángulo positivo.

Ejemplo 3.3.1

#VRML V2.0 utf8

#giramos el cono 90 grados ( 1.57 radianes)

Transform {rotation 1 0 0 1.57

children[

Shape { geometry Cone {height 2

bottomRadius 0.50 }

}

]

}

X

Y

Z



Veamos el resultado:

Figura 11. Cono Girado

El cono gira en su centro y vemos que el ángulo de giro es positivo.

Tal como se ha puesto el valor del campo rotation quiere decir que la rotación

de 90º alrededor del eje X. Las tres primeras cifras sólo pueden tener el valor

0 ó 1,y representan la rotación alrededor de cada eje, en este orden X, Y, Z. la

cuarta cifra representa el ángulo girado expresado en radianes.

Para calcular la correspondencia entre grados y radianes, hay que tener en

cuenta que 180º equivale al número pi en radianes, es decir a 3.14 radianes.

Por tanto 90º será la mitad de 3.14, es decir 1.57 radianes.

Una rotación con respecto al eje Y seria girar la mano alrededor de este eje.

Siendo el giro en un sentido positivo y lo contrario negativo.

Ejemplo 3.3.2



#VRML V2.0 utf8

#giramos el cono 90 grados con respecto al eje Y


children[

Shape { geometry Cone {height 2 bottomRadius 0.50 }

}

]

}

Una rotación con respecto al eje Z será girar la mano alrededor de este eje.

siendo el giro en un sentido positivo y lo contrario negativo.

Ejemplo 3.3.3

#VRML V2.0 utf8

#giramos el cono 90 grados con respecto al eje Z


children[

Shape { geometry Cone {height 2 bottomRadius 0.50 }

}

]

}

Veamos el resultado

Figura 12. Cono rotado

3.4 ¿Cómo podemos variar las dimensiones de un obj eto?



Los valores del campo scale representan las variaciones de las dimensiones

con respecto a los ejes X, Y, Z. En el ejemplo siguiente se han puesto, que las

dimensiones se reducen en la dirección de las X a la mitad (0.5), se duplican en

la dirección del eje Y (2), y se reducen a la mitad en la dirección del eje Z (0.5).

Si se hubiera variado la misma cantidad en los tres valores (por ejemplo 0.5) se

habría mantenido las proporciones de la pieza.

Ejemplo 3.4.1

#VRML V2.0 utf8

Transform { scale 0.5 2 0.5

children [

#caja:


}

geometry Box { size 2 0.5 3 }

}

]

}

Ejemplo 3.4.2

La figura mostrada es un foco compuesto por su colgador y socket. El foco

está compuesto por 2 esferas y dos cilindros. Ver plano XY.

Figura 13. Foco

#VRML V2.0 utf8

Group {



children [

# foco

Shape {appearance Appearance { material Material { } }

geometry Sphere { radius 1 }

}

# socket

Transform {translation 0 2 0

children [

Shape { appearance Appearance { material Material { }

}

geometry Cylinder { height 2

radius 0.5

} }

]

}

# sombrero del socket


children [


}

geometry Sphere {radius 0.5}

}

]

}

#colgador

Transform {translation 0 4.5 0

children [




}


radius 0.05

}

}

]

}

]

}

No se han colocado colores por el momento, mas adelante lo veremos

3.5 ¿Podremos utilizar solo uno de los nodos agrup ados?

El nodo Switch sirve para agrupar otros nodos, pero con una diferencia que

sólo será utilizado uno de los hijos agrupados.

Switch { whichChoice 0

choice [ …….]

choice [ …….]

choice [ …….]

choice [ …….]

}

El campo whichChoice (en inglés, cual elección) cuyo valor es un número que

indica cual hijo choice es el elegido (0, 1, 2, etc) y éste será el único visible. Si

este valor es -1, entonces se indica que no está elegido ninguno.

Ejemplo 3.5.1

Podemos visualizar solamente una parte del foco del ejemplo anterior.

Visualizaremos solamente el foco.



#VRML V2.0 utf8

Switch {whichChoice 0

choice [# foco


}

geometry Sphere { radius 1 }

}

# socket


children [


}


radius 0.5

} }

]

}

# sombrero del socket


children [


}

geometry Sphere {radius 0.5}

}

]

}

#colgador

Transform {translation 0 4.5 0

children [


}




radius 0.05

}

}

]

} ] }

Solo será visible el foco, por el valor cero

Ejemplo 3.5.2

El siguiente gráfico muestra una escalera. Está compuesta por tres cajas

iguales de ancho 4, altura 2 y de profundidad 5. Ver los siguientes gráficos.

Figura 14. Escalera

Las escaleras constan de tres cajas (todas tienen la misma dimensión). El

gráfico de la derecha muestra el plano XY (el plano que ve el observador

desde Z)

Group {children [



#caja a

Transform {translation 0 -1 0

children [

Shape {geometry Box {size 4 2 5}

}

]

}

#caja b


children [

Shape {geometry Box {size 4 2 5 }

}

]

}

#caja c


children [

Shape {geometry Box {size 4 2 5 }

}

]

}

]

}



3.6 ¿Se puede reutilizar código en los programas V RML?

Se puede poner nombres a los nodos con la palabra clave DEF (definir) y

reutilizarlos con la palabra clave USE(usar). En el siguiente ejemplo mostramos

la escalera del ejemplo anterior, todos los escalones son iguales entonces

aplicamos la palabra clave DEF / USE

Ejemplo 3.6.1

#VRML V2.0 utf8

Group {children [

#caja a


children [

DEF esca Shape {geometry Box {size 4 2 5 }

}

]

}

#caja b


children [

USE esca

]

}

#caja c


children [

USE esca

]

}

]

}

LECCIÓN IV



COLOR Y TRANSPARENCIA

4.1 ¿Cómo podemos darle color y transparencia a los Objetos?

El campo de “apariencia” denominado material está definido por el nodo

Material, por medio del cual se definen los efectos y transparencia a través de

los siguientes campos:

diffuseColor: Color externo del objeto

emissiveColor: Color interno

transparency : Grado de transparencia ( de 0 a 1)

Uso del sistema RGB (rojo verde azul), así 1 0 0 significa solo rojo en

nuestro ejemplo 1 0 1, la combinación de rojo y azul para el color externo

specularColor: Color de los puntos brillantes de los objetos ( Sistema RGB)

shininess : Intensidad de emisión de luz en los puntos brillantes (de 0 a 1)

ambientIntensity: Cantidad de luz reflejada de los objetos (de 0 a 1)

El sistema de colores en ordenadores es el RGB (RED GREEN BLUE) colores

básicos para poder formar otros.

COLOR ROJO VERDE AZUL

Rojo 1.0 0.0 0.0

Verde 0.0 1.0 0.0

Azul 0.0 0.0 1.0

Blanco 1.0 1.0 1.0

Negro 0.0 0.0 0.0

Amarillo 1.0 1.0 0.0

Violeta 1.0 0.0 1.0

Marrón 0.5 0.2 0.0



Las cifras pueden iniciarse desde 0.0 (ausencia de color o nada de ese color)

hasta 1.0 (presencia de ese color o todo de ese color) pasando por cualquier

valor intermedio.

Ejemplo 4.1.1

#VRML V2.0 utf8

Shape {appearance Appearance {

{material Material {diffuseColor 1 0 1

emissiveColor 0 1 0

transparency 0.5 }

}

geometry Sphere {radius 2}

}

Nota: Esta esfera es de color amarillo (color externo del objeto) y color verde

(color interno del objeto) con grado de transparencia medio. Normalmente el

campo diffuseColor es el color externo que visualizamos en todos los objetos.

También notamos que podemos obviar los decimales es decir en lugar de 1.0

podemos escribir 1 simplemente.

4.2 ¿Cómo podemos envolver un objeto con una Textur a?

Textura es aquella que podemos añadir a un objeto, puede ser un fichero de

imagen .jpg o png. La textura de un objeto no sólo se da con el campo material

(con el que hemos definido el color y la transparencia) sino con otros que

permitirán asignarle una textura de imagen o video.

Ejemplo 4.2.1

#VRML V2.0 utf8

Shape {appearance Appearance {

{texture ImageTexture{ url “mimundo.png” }

}

geometry Sphere {radius 1}

}



Esta imagen envolverá a toda la esfera (mimundo.png)

Veamos el Resultado:

Figura 15. Esfera con textura

En este ejemplo, la imagen y el programa pueden estar en el mismo lugar (por

ejemplo en el escritorio). Si la imagen estuviera en una carpeta habría que

definir el camino o “path” para darle la ubicación correcta.

4.3 ¿Cómo podemos envolver un objeto con imágenes d istintas?

Veamos un objeto cilíndrico (una lata). Para lograr este resultado tendremos

que crear tres cilindros idénticos e insertar una imagen para cada uno de ellos.

Para este caso se tendrá que desactivar ciertos campos del Nodo en este el

Nodo Cilindro.

Ejemplo 4.3.1

Nótese la creación de tres cilindros y la desactivación de los campos

correspondientes en cada forma.



El primer cilindro del programa llamado “cilindro envoltura” es en realidad un

cilindro que solamente tiene la cara lateral del cilindro ya que tiene el campo

top falso y el campo bottom falso ambos desactivados.

Igualmente el segundo cilindro llamado “cilindro tapa” no tiene ni cara lateral ni

base ambos campos side y bottom están desactivados. Y el tercer cilindro no

tiene ni cara lateral ni tapa el campo side y top desactivados. Estos tres

cilindros se superponen (ojo que tienen la misma dimensiones, los tres cilindros

son iguales). Cada uno de ellos se le definido una textura diferente, así

logramos tener en un mismo objeto tres imágenes diferentes.

Ejemplo 4.3.2

VRML V2.0 utf8

#cilindro envoltura

Shape {appearance Appearance {texture ImageTexture {url "env.jpg"}}

ge#ometry Cylinder {radius 1

height 1.8

top FALSE

bottom FALSE }}

#cilindro tapa

Shape {appearance Appearance {texture ImageTexture {url "tapa.jpg"}}

geometry Cylinder {radius 1

height 1.8

side FALSE

bottom FALSE }}

#cilindro base

Shape {appearance Appearance {texture ImageTexture {url "inf.jpg"}}

geometry Cylinder {radius 1

height 1.8

side FALSE

top FALSE }}

Se muestran las tres imágenes que envuelven la lata.



Figura 16. Cilindro Envoltura

4.4 ¿Podemos envolver un objeto con una película?

El nodo MovieTextute es muy parecido al Nodo ImageTexture con la diferencia

que se va envolver un objeto con una película, en este caso con la extensión

“mpg”.

Ejemplo 4.4. 1

#VRML V2.0 utf8

Shape {

appearance Appearance {

texture MovieTexture {

url "pelicula.mpg"

speed 1

loop TRUE

repeatS TRUE

repeatT TRUE } }

geometry Box{size 4 0.5 3 }

• loop : Éste es un valor boleano que sirve para indicar si la película va

encontrarse estática (FALSE) o se va encontrar en movimiento

tapa . jpg base . jpg env . jpg

top

bottom Side



(TRUE).

• Speed: Si tiene el valor 1 la película correrá a su velocidad normal, si

cambia a el valor 2 correrá al doble de velocidad.

• url: Se coloca dentro del paréntesis el nombre de la película a

texturizarse.

• repeatT : Para especificar que la película se repita horizontalmente

• repeatS : Para especificar que la película se repita verticalmente

• Nota: texture dispondrá de los nodos:

• ImageTexture : Para insertar imágenes jpg, gif ó png

• MovieTexture : Para insertar películas en formato MPG (también

admite algunos Gif animados)

4.5 ¿Podremos crear una imagen hecha por nosotros m ismos píxel a

píxel?

El nodo PixelTexture sirve para texturizar una imagen de colores degradantes

de un valor a otro, en forma vertical u horizontal alrededor de una figura esto

con repeatS y el repeatT respectivamente. Su estructura es la que sigue.

PíxelTextute {

image 0 0 0 0 0

repeatS TRUE

repeatT TRUE

}

image : Este campo muestra 5 valores, los primeros dos sirven para indicar el

ancho y el alto de la imagen.(en pixels), el tercero que indica un numero de

bytes que se use por cada píxel puede tener uno de los cuatro valores

siguientes:

• Grayscale

• Grayscale con canal para transparencia

• RGB

• RGB con canal para transparencia.



El cuarto y el quinto indican el rango de valores a desplazar en la figura.

Este nodo puede utilizarse como segunda opción. No es muy relevante para

nuestro curso.

4.6 ¿Cómo podemos observar un objeto desde otro pun to de vista?

El nodo ViewPoint permite que podamos observar un objeto desde cualquier

posición del espacio.

Estructura :

Viewpoint {

position

orientation

fieldOfView

description }

• position : La posición del observador

• orientación : Igual al nodo rotation tiene 4 valores

• fieldOfView : Es el campo visual del observador

• description : se le da un nombre a esta posición ( este nombre se le

sugiere sea muy descriptivo a la hora que se mostrara en el

visualizador del usuario

Ejemplo 4.6.1

Viewpoint {

position 0 0 10

orientation 0 0 0 0

fieldOfView 0.90

description "posición por omisión del observador"

}



Podemos ver la caja desde la nueva posición:

Aquí giraremos 90 grados (1.57 radianes).Giramos con respecto al eje Y .

Nuestro campo visual es de 0.90 radianes y le hemos denominado “camara

derecha”.

Ejemplo 4.6.2

Viewpoint {

position 20 0 0

orientation 0 1 0 1.57

fieldOfView 0.90

description "camara derecha"

}

Podemos observar el siguiente Gráfico:

Figura 17



EJERCICIOS PROPUESTOS

1. La figura mostrada es una pandereta española. A continuación se muestra el

dibujo en el plano XZ. Respete la ubicación de los Ejes. Este objeto no tiene

tapa. Los ángulos de las esferas están a 45 grados.

2. Use los nodos correspondientes para mostrar lo indicad .

3. La figura mostrada es un frasco. Está compuesta por tres cilindros el más

grande de radio 2 y los dos siguientes de radio 1.5 y radio 1 respectivamente.

4. El frasco anterior esta sobre una caja. Los dos frascos son iguales. Ver el



grafico siguiente. Respete la ubicación de los ejes.

5. La figura mostrada en la parte inferior es un banco. Escriba el código

correspondiente. El banco está compuesto por 4 cilindros. Los cilindros de base

están sobre los ejes X y Z . Ver plano XZ. Respete la ubicación de los ejes.



RESUMEN

El campo apariencia tiene como valor el Nodo Appereance, éste a su vez

controla la apariencia. El campo material del Nodo Appereance va a controlar

atributos como formas de color y factor de transparencia. El nodo material

posee el campo diffuseColor importante es el color externo del objeto.

El nodo Transform nos permite posicionar los objetos visualizados por el Nodo

Shape, componiendo objetos de formas peculiares y complejos.



AUTOEVALUACIÓN

1. ¿Cuál de los siguientes nodos agrupan otros nodo s?

a. Shape

b. Transform

c. Switch

d. ViewPoint

e. Group

2. ¿Cuál de los siguientes formatos de imágenes pue den usarse como

textura en un objeto VRML?

a. JPG

b. PNG

c. BM

d. GIF

e. TIFF

3. Es el nodo que permite predefine una posición y orientación en el

mundo virtual VRML?

a. Shape

b. Group

c. Switch

d. ViewPoin

e. PixelTexture

4. Es un nodo que sirve para texturizar una imagen de colores

degradantes?

a. Box

b. Sphere

c. Cone

d. Cilinder

e. PixelTexture

5. Es uno de los campos del nodo Viewpoint?



a. Position

b. Shape

c. Image

d. Repeats

e. Repeatt true

CLAVES:

1E.2C.3D.4E.5A

GLOSARIO

• Side: Lado que está definido por dos valores uno es el false, que indica

que no está active y true que si esta active.

• Bottom : Campo que define el lado inferior del objeto.

• Top: Campo que define zona superior del objeto.

• Path: Camino que se sigue para dar la ubicación correcta, a una imagen

en el caso que no se encuentre en el mismo lugar que el archivo.



LECTURA

Introducción al VRML

VRML son las siglas de Virtual Reality Modeling Language. Es un lenguaje para

la descripción de escenas virtuales en tres dimensiones. Este lenguaje permite

que el usuario interactúe con el entorno, moviendo el punto de vista o

realizando acciones con los distintos objetos que hay en él.

Para poder visualizar los mundos definidos con VRML es necesario disponer

de un intérprete del lenguaje. Dicho intérprete leerá el fichero fuente (que

contiene la descripción del entorno en VRML) y lointerpretará dibujando sobre

el dispositivo de salida la escena representada. El lenguaje VRML estápensado

para su uso en entornos Web, por lo que la mayoría de los intérpretes de

VRML han de instalarse como un plugin del navegador, por lo que el dispositivo

de salida en este caso será la ventana del navegador correspondiente.

Consulta el contenido de la asignatura en poliformat para instalar un visor de

VRML.El lenguaje es sencillo, y con poco esfuerzo se pueden conseguir

buenos resultados. Además el tamaño de los ficheros es pequeño, por lo que

se hace idóneo para la publicación en Web de mundos virtuales.

El siguiente ejemplo dibuja un cubo.

#VRML V2.0 utf8

Shape {

appearance Appearance {material Material {} }

geometry Box {}

}

2. El lenguaje VRML.

En este boletín de prácticas veremos sólo una parte de la especificación del

estándar VRML. Una descripción mucho más amplia puede encontrarse en el

siguiente tutorial en Internet:

http://web3d.vapourtech.com/tutorials/vrml97/index-es.html



Antes de empezar con la definición de las partes de un archivo VRML hay que

aclarar que el lenguaje es sensible a mayúsculas y minúsculas, es decir, para

VRML no es lo mismo Sphere que sphere. La segunda palabra estaría mal

escrita si lo que queremos es crear una esfera. Para editar un fichero VRML

sólo es necesario un editor de ficheros de texto sin formato (como el bloc de

notas). Los ficheros han de guardarse con la extensión wrl para que puedan ser

abiertos por el intérprete, pero además, para que un intérprete lea

correctamente el fichero éste debe de incluir la cabecera correcta.

Los nodos y sus atributos.

Todo tipo de objetos y entidades de un mundo VRML es un nodo. Los nodos se

caracterizan porque la primera letra del identificador siempre está en

mayúscula. Por ejemplo: WorldInfo es un nodo. Después del identificador se

incluyen entre dos llaves todos los atributos.

http://www.disca.upv.es/jc/GPO/archivos/Practicas/I ntrVRML.pdf

BIBLIOGRAFÍA

• NARCIS PÉREZ DE ALARCÓN ÁLVAREZ, Enrique (2000) Manual

Práctico de VRML. España, Euro color S.A. Distribución.

• JANSA, Kris; SCHMAUDER, Phil; YEE, Nelson (1998) VRML Biblioteca

del Programador, McGraw-Hill.

• http://sabia.tic.udc.es/gc/Contenidos%20adicionales/trabajos/Tutoriales/tu

torial%20VRML/apariencias.htm

UNIDAD_II

Documents

Transcript of UNIDAD_II