XIV Congreso Internacional de Ingeniería Gráfica

Santander, España – 5-7 junio de 2002

APLICACIÓN DE VRML A LA CREACIÓN DE UN

CATALOGO INDUSTRIAL INTERACTIVO EN INTERNET
García Canfrán, J.; Andrés Díaz, J.R.; Portillo Franquelo, P.;
Contreras López, M.A.; Guzmán Sepúlveda, R.

Universidad de Málaga. Dpto. de Expresión Gráfica, Diseño y Proyectos.

Correo electrónico: deandres@ctima.uma.es.

RESUMEN

La aplicación de VRML hasta ahora es fundamentalmente la de creación de mundos virtuales, es

decir, una aplicación arquitectónica donde el visitante se limita a moverse por el interior, pudiendo sólo
actuar en la activación de determinados sucesos como la apertura de puertas, etc.
Aquí pretendemos profundizar en la representación tridimensional de conjuntos de componentes
industriales, así como la interactividad con los mismos, con el objetivo de crear un catalogo industrial, en
el que se puedan apreciar de una forma realista las características de un determinado producto.
Las principales características del Catalogo Industrial que vamos a crear serán la de mejorar la
calidad de la representación en sí misma, dar la posibilidad de descomponer de forma automática un
producto en sus distintas partes y poder actuar sobre cada una de ellas de forma independiente, a fin de
poder ver las características de montaje, geométricas, etc.
Para llevar a cabo estos objetivos nos hemos propuesto en la representación tridimensional del
elemento (en este caso una luminaria), permitir el movimiento en todas direcciones y sus giros, crear
animaciones que permitan comprender como se realizan las operaciones de montaje, regulación y
mantenimiento, creación de un entorno para gestionar todas estas posibilidades y crear las funciones
complementarias necesarias.
Para todo esto, además de estudiar minuciosamente las posibilidades del VRML hemos visto la
apliciación de Java Script en dicho lenguaje.

Palabras claves: VRML, JAVA, Catalogo Ïndustrial, Representación de conjuntos

1. Introducción

La aplicación que hasta el momento se está dando a de este de lenguaje, es

fundamentalmente la de creación de mundos virtuales. Es decir, una aplicación
arquitectónica donde el visitante se limita a moverse en su interior, pudiendo solo actuar
en la activación de determinados sucesos como la apertura de puertas o el encendido de
luces, no siendo posible por ejemplo mover dentro del mundo un objeto.
Se pretende profundizar en la representación tridimensional de conjuntos de
componentes industriales, así como en la interactividad con los mismos, con el objetivo
de crear un catálogo industrial, en el que se puedan apreciar de una forma realista las
características de un determinado producto.
Las principales propiedades de esta representación serán: mejorar la calidad de
la representación en si misma, dar la posibilidad de descomponer de forma automática
un producto en sus distintas partes y poder actuar sobre cada una de estas partes de
forma independiente, permitiendo al visitante el desplazamiento de cada una de estas
partes dentro del espacio tridimensional con un simple movimiento de ratón, a fin de
 XIV Congreso Internacional de Ingeniería Gráfica

Santander, España – 5-7 junio de 2002

poder ver las características de montaje, geométricas, etc. de cada una de ellas lo mejor
posible.
Para llevar a cabo estos objetivos, se concreta en la representación del primer
elemento de un futuro catálogo industrial de luminarias. Los objetivos quedan fijados en
los siguientes:
♦ Representación tridimensional en VRML de la luminaria
♦ Permitir el movimiento en todas las direcciones, así como el giro de las distintas
piezas de la luminaria.
♦ Creación de diversas animaciones que permitan comprender como se realizan las
operaciones de montaje, regulación y mantenimiento.
♦ Creación del entorno necesario para la gestión de todas estas posibilidades.
♦ Creación de todas las funciones complementarias necesarias para mejorar tanto
el comportamiento como la estética del futuro catálogo.
Además de los objetivos marcados, hay que tener en cuenta un factor clave es el
tamaño del fichero. El tamaño del fichero es un factor importante en todos los proyectos
de programación, pero en este caso al tratarse de Internet este factor es fundamental y se
tendrá que tener en cuenta en todo momento, para tratar lógicamente que éste sea lo
menor posible.

1.1 Problemática del VRML.

El VRML versión 2.0 que es el lenguaje empleado en este proyecto, es un

lenguaje creado fundamentalmente como se ha dicho para la creación de mundos
virtuales tridimensionales. Para crear este tipo de páginas al nivel de detalle que
actualmente se emplea, no es necesario realizar dibujos con geometría compleja. Esto
hace que este lenguaje no este preparado para dibujar este tipo de geometría de una
forma sencilla.
La forma de solventar este impedimento es la utilización de herramientas CAD
en la definición de la geometría de las piezas complejas, que permitan la posterior
exportación de los dibujos a VRML.
Por otro lado, la interactividad que se le pretender dar a la futura página Web
hace que se precise de lenguajes auxiliares, que permitan realizar ciertas operaciones
que el VRML por si solo no puede realizar. Así que necesitaremos apoyarnos en el
lenguaje JavaScript para la definición de ciertas funciones y también en el lenguaje
HTML para la confección de las páginas Web bidimensionales que se consideren
oportunas como complemento al proyecto.
La realización del presente trabajo se puede dividir en las siguientes etapas: una
vez elegida una pieza industrial, habrá que trabajar en ella con las distintas herramientas
CAD, a fin de conseguir el nivel de detalle deseado; luego en VRML se programaran las
funciones necesarias para obtener el resultado buscado y cumplir con los objetivos
marcados, siendo necesario aquí coordinar los diversos lenguajes mencionados.
La normativa a aplicar en este proyecto son las especificaciones de cada uno de
los lenguajes de programación que se han empleado en la elaboración del mismo. Estas
especificaciones se denominan Standards y para cada uno de los tres lenguajes
empleados en este proyecto serían las siguientes:
♦ VRML norma ISO/IEC 14772-1:1997
♦ JavaScript norma ISO 16262
 XIV Congreso Internacional de Ingeniería Gráfica

Santander, España – 5-7 junio de 2002

♦ HTML norma ISO 8879

2. ELEMENTOS FUNDAMENTALES EN VRML

En un mundo VRML lo que se define es simplemente un grupo de objetos. Estos
objetos pueden contener geometría 3-D, imágenes, colores, etc... y en VRML 2.0, se les
llaman nodes (nodos).
Estos nodos tienen algunas características variables que se pueden definir en
cada caso mediante unos fields (campos), los cuales funcionan como parámetros.
Los fields pueden ser univaluados, cuando sólo hace falta un valor para
definirlos, o pueden ser multivaluados, cuando es necesaria una lista de valores.
Los fields tienen un tipo de dato asociado, es decir, cada field puede contener
datos sólo de un cierto tipo de dato. Por ejemplo, el field size es de tipo vector 3-D en
coma flotante y por lo tanto se dice que es del tipo SFVec3f (Singlevalued Field Vector
3D floating Point).
Un nodo puede ser un parámetro de otro nodo y, por lo tanto, puede ser un field.
Esto se da cuando un nodo es un agrupador de nodos. Un nodo agrupador sirve para que
varios objetos tengan unas mismas propiedades, por ejemplo: mismas transformaciones
geométricas, mismo comportamiento, etc.
Un tipo especial de fields son los eventos (events), estos pueden ser pensados
como mensajes que van circulando entre los nodos y que hacen que se puedan variar los
parámetros de un objeto durante la navegación del entorno vitual.
Existen varios tipos de eventos:
1. Los events pueden ser de entrada (enventIn), de salida (eventOut) o de entrada
y salida (exposedField).
2. Los eventIn son fieds que aceptan eventos dirigidos a ellos.
3. Los eventOut son fields que pueden enviar eventos a eventIn´s de otros nodes
(y a exposedField de otros nodes).
4. Los exposedField son fields que pueden enviar eventos a eventIn y a
exposedField de otros nodes y también aceptan eventos dirigidos a ellos.

Los routes son las sentencias que relacionan los eventos de salida con los de entrada,
es decir, los eventOut con los eventIn. La forma que tienen es la siguiente:

2.1 Nodos Específicos de nuestro trabajo

2.1.1. Nodo TimeSensor

VRML dispone de una herramienta muy útil llamada "Sensor de tiempo" o nodo
TimeSensor. Este nodo tiene un reloj que se puede utilizar para poder aprovechar el
paso del tiempo como referencia para la consecución de determinados sucesos. Puede
servir por ejemplo como motor para mover objetos, variar orientaciones, etc.
Un nodo TimeSensor se basa en el reloj de tiempo real del sistema, midiendo el
tiempo actual, en segundos transcurridos a partir de las 00:00 horas del 1 de enero de
1970.
 XIV Congreso Internacional de Ingeniería Gráfica

Santander, España – 5-7 junio de 2002

2.1.2 Nodo Switch

El nodo Switch permite definir un cierto objeto de varias formas diferentes, de

tal forma que en cada momento se puede elegir una de esas definiciones. Esta estructura
permite tener representaciones con distinto nivel de detalle, o bien representaciones con
alguna propiedad distinta que haga interesante seleccionar en un momento dado.
Las distintas opciones se escriben dentro del campo choice una a continuación
de la otra, separadas por comas. La determinación de la opción seleccionada en cada
momento se indica en el campo whichChoice, con un número correspondiente a la
posición dentro de la lista de definiciones ("0" para la primera, "1" para la segunda, etc).
Una propiedad muy interesante de este nodo es que si el valor de whichChoice
es igual o mayor al número de posibilidades, la representación del objeto que se elige es
la vacía, es decir, el objeto desaparecería.

2.1.3 El nodo PROTO

Mediante el conjunto de nodos DEF/USE se puede utilizar un determinado

objeto todas las veces que se precise dentro de un mundo virtual, sin necesidad de
repetir la definición del mismo. Esta estructura, como se vio en el apartado anterior, es
muy fácil de comprender y de manejar pero presenta una limitación importante, ésta es
que no se pueden variar parámetros del objeto, es decir, todos los objetos repetidos con
el nodo USE son exactamente iguales. Esta deficiencia se solventa mediante la
utilización del nodo PROTO, que nos permite crear un nuevo nodo o prototipo, con sus
correspondientes field o campos, que podremos determinar en cada uso del mismo.
Para crear un nuevo nodo hay que especificar en primer lugar los campos que
posee. En la definición de cada campo hay que determinar los siguientes parámetros:
♦ Tipo de campo: field, eventIn, eventOut o exposedField.
♦ Clase de información que contiene: una posición, un color, una rotación,etc.
♦ Nombre que se le da al campo
♦ Valor por defecto del mismo (no en el caso de eventos)

Una vez definidos los campos hay que definir el conjunto de geometrías,
apariencias, etc. que contiene el prototipo, tal y como se haría en un objeto normal, con
la diferencia que en este caso los valores de las variables han de ser relacionadas con sus
respectivos field mediante en comando IS. Para comprender mejor esto analicemos un
ejemplo.
Supongamos que en nuestro mundo vamos a utilizar muchos cilindros de distintos
colores, distribuidos a lo largo del espacio. Para ello podríamos escribir cada uno de los
cilindros junto con un nodo Appearance y un nodo Transform que nos permita situarlos
en cualquier lugar del espacio, o bien podemos crear un prototipo cilindro dotado de un
campo posición y otro color.

2.1.4 Nodo Script

 XIV Congreso Internacional de Ingeniería Gráfica

Santander, España – 5-7 junio de 2002

El nodo Script nos permite usar funciones definidas en un lenguaje de

programación externo. Los lenguajes que se pueden utilizar son Java y JavaScript,
siendo más frecuente la utilización de segundo por ser más sencillo.
La utilidad de introducir funciones en otro lenguaje dentro de un programa en
VRML es suplir las deficiencias de éste, es decir, hacer lo que no se puede hacer
directamente con VRML. Entre las limitaciones que hacen imprescindible la utilización
de estas funciones están las siguientes: VRML no da la posibilidad de utilizar
estructuras condicionales ( por ejemplo If/Else) y VRML no permite el acceso a las
componentes de variables no escalares(por ejemplo en una posición acceder a cada una
de las coordenadas).
La forma de definir un nodo Script es la siguiente: en primer hay que especificar
los eventos de entrada, de salida y los campos, mediante los cuales se comunica con el
resto del programa en VRML y se ayuda en la definición de las distintas funciones. A
continuación se especifica mediante el campo url la dirección del conjunto de funciones
que contiene el nodo o bien el texto que define dichas funciones.
La forma de comunicarse con el resto del programa es mediante sentencias
ROUTE. Para el correcto funcionamiento hay que poner una atención especial en la
definición de los eventos de entrada y salida de la función, ya que deben de ser del
mismo tipo que los eventos con los que se relacionen en las sentencias ROUTE.

3. Representación tridimensional de la luminaria

3.1 Proceso de representación

Pretendemos representar en tres dimensiones una luminaria compuesta de

múltiples piezas, para colocarla en Internet por medio de un lenguaje llamado VRML.
Lo ideal sería poder dibujar directamente en VRML, pero debido a la complejidad de
las piezas que se van a representar y a la calidad de representación deseada, esto no es
posible. Por esta razón es necesario buscar un programa que nos permita dibujar y a su
vez exportar a VRML lo dibujado, de la forma más fácil posible. El programa que se ha
utilizado, pese a que directamente no permite la exportación al formato de VRML, ha
sido el Autocad, por ser el de uso más expendido en la actualidad, junto con el 3Dstudio
que permite la exportación a VRML. De esta forma el proceso de representación ha sido
el siguiente:
1. Se dibujan las piezas en Autocad.
2. Se exporta a 3Dstudio.
3. De 3Dstudio se exportan a VRML.

3.2 VRML

El resultado de la exportación fue bastante bueno, los cuerpos se crearon sin dar
demasiados problemas y la adaptación no era muy complicada, pero la apariencia que
mostraban los cuerpos no era tan buena como en Autocad o 3DStudio. En estos
programas las superficies tienen aspecto de superficies contínuas o con alto grado de
continuidad, los cilindros de cilindros, etc. Sin embargo, al exportarlos estas curvas y
superficies se convierten en conjuntos de puntos unidos por triángulos, por lo que la
calidad de la representación es menor. Para mejorar ésta la primera de las opciones que
 XIV Congreso Internacional de Ingeniería Gráfica

Santander, España – 5-7 junio de 2002

se plantean es aumentar el número de puntos, pero esto aumenta el tamaño del fichero y
también el de elementos a representar en nuestra escena, lo que relentiza los
movimientos y estos son un factores críticos en nuestro objetivo. Así que hay que
buscar otra opción dentro de VRML que nos permita mejorar la calidad sin aumentar el
número de puntos. Investigando en los campos variables del nodo IndexedFaceSet
existen varias opciones que permiten teóricamente eliminar el efecto de los triángulos.
En la práctica se ha obtenido un resultado muy aceptable sin demasiado esfuerzo gracias
al campo creaseAngle, con este campo se especifica un ángulo en radianes a partir del
cual se redondean las uniones de caras. Este redondeo es ficticio, solo a la vista del
observador, pero el resultado es totalmente satisfactorio. Veamos la diferencia entre la
luminaria antes y después de modificar este campo.

En realidad lo que se hace en el redondeo mencionado, es decirle a visualizador

que cuando se encuentre una esquina, que la podemos definir como la unión de dos
superficies con normales distintas (ver el diagrama 1) y que se distingue a la hora de
visualizarla debido al cambio de reflejo de la luz, la suavice. Este suavizado no es otra
cosa que hacer suponer al visualizador que el cambio de ángulo entre las normales a las
dos superficies, que se unen en la esquina, no es drástico, sino que es progresivo (ver
diagrama 2), de tal forma que el cambio del reflejo también es progresivo, dándole el
aspecto de curvo.
 XIV Congreso Internacional de Ingeniería Gráfica

Santander, España – 5-7 junio de 2002

4. Creación del panel de control

4.1 Planteamiento general

Debido a los objetivos marcados en el presente proyecto, ya mencionados con

anterioridad, se hizo indispensable crear dispositivos capaces de controlar las distintas
aplicaciones. Estos dispositivos no son otra cosa que botones que nos permiten activar o
desactivar sensores de movimiento, que nos inician las animaciones, o que nos cambian
alguna propiedad de las piezas.
Cuando se plantea la creación de dicho conjunto de botones, surgen dos
posibilidades o dos filosofías distintas en la programación. La primera es la de partir la
página en dos, de tal forma que en una de las partes o frame se coloca la página
principal en VRML y en la otra los botones. La segunda posibilidad es la de crear los
botones dentro de la página en VRML como si se tratasen de otros cuerpos dentro del
mundo creado.
El hacer la partición en dos frames es muy simple y tiene como ventaja que la
creación de los botones es también muy sencilla, ya que el frame que contiene los
botones se puede programar en HTML y en este lenguaje existen muchas funciones ya
creadas de JavaScript e infinidad de ejemplos donde poder aprender como usarlas. El
inconveniente está en la comunicación entre los dos frames, es decir, entre los botones y
el programa que controlan. Esta comunicación es compleja, ya que los botones manejan
una gran cantidad de variables y de funciones en JavaScript.
Los inconvenientes que se nos plantean al hacer la partición, desaparecen por
completo si incluimos los botones en nuestro mundo virtual. Ahora la comunicación
entre los botones y sus funciones son simples eventos, que no plantean una dificultan
importante programar. El problema que surge con esta opción es que si creamos los
botones como objetos de nuestro mundo, al movernos dentro de él, también nos
moveremos respecto a ellos y esto no es aceptable, así que se deberá buscar la forma de
que esto no ocurra. Además, no se podrán aprovechar las funciones existentes para
HTML debiéndose crear funciones nuevas.
Finalmente se optó por desarrollar la segunda opción, por considerarse más
adecuada a las pretensiones de este proyecto obteniéndose un resultado plenamente
satisfactorio.

4.2 Fijación del panel de control a la pantalla

El problema fundamental que se plantea al crear el panel de control dentro del

mundo virtual, es que permanezca en una posición relativa fija respecto al observador.
Para conseguir esto lo que debe hacerse es aplicarle los mismos movimientos que
efectúe el observador al panel de control. Así que lo primero es saber cuales son estos
movimientos. Para ello, en vista de no encontrar ningún nodo que directamente de la
posición y orientación del observador, recurrimos al nodo ProximitySensor cuyos
eventos de salida position_changed y orientation_changed nos dan la posición y
orientación del observador, si éste está dentro de la zona definida por el sensor de
proximidad. Así si definimos un nodo de este tipo de tal forma que el observador
siempre este dentro de la zona definida por el mismo, tendremos siempre la posición y
 XIV Congreso Internacional de Ingeniería Gráfica

Santander, España – 5-7 junio de 2002

orientación del observador. La cual, mediante eventos, podremos aplicársela al panel de

control.

4.3 Función "Pizarra"

Existen muchas funciones relacionadas con el display, pero la mas importante es la

función "Pizarra", ya que fue por ella por lo que se creo el mismo. Esta función se
encarga de identificar las piezas, es decir, al pasar el puntero del ratón encima de
cualquier pieza aparece en el display el nombre de la misma. Para poder conseguir esto,
se ha hecho formar parte a un nodo TouchSensor de cada una de las piezas. Así cuando
el ratón está sobre una determinada pieza, se activa el evento de salida isOver de su
correspondiente nodo TouchSensor. Esto se hace igual que en el caso de los botones, se
ha definido para cada pieza un nodo Transform que engloba tanto a la pieza como al
nodo TouchSensor correspondiente.
La razón de elegir un nodo Transform en vez de un simple nodo Group, y de,
además, darle nombre, es que se utiliza en una animación. La misión de la función es
seleccionar el mensaje a mostrar en el display según sea la pieza señalada. La
comunicación de la función con estos nodos se ha hecho definiendo en la función,
variables equivalentes a estos nodos. Esto permite utilizar todos los campos de los
mismos directamente.

4.4 Menús desplegables

En el apartado anterior en el que se ha mencionado la utilidad de los distintos

botones, se comentó que la utilidad de los dos botones de la segunda fila es activar y
desactivar sendos menús desplegables. Estos menús se han creado como nodos Switch,
para poder activarlos y desactivarlos. Están formados por el fondo, el cual se ha
definido mediante una primitiva Box y las distintas opciones que se den en el menú, que
se componen de: la descripción definida mediante el nodo text y lo que es el botón
propiamente dicho, representado por dos círculos, uno blanco de mayor radio que actúa
como fondo y otro que cambia de negro a blanco según este activa o no la opción
correspondiente, unidos a un nodo TouchSensor que hace que se comporten como
botones. Además, es importante mencionar que se han incluido dentro del nodo
"Botones", para que permanezcan fijos en la pantalla independientemente del
movimiento o situación del observador, tal y como se explico en el caso de los botones.

4.5 Activación y desactivación de piezas

El otro botón de la segunda línea del panel de control nos permite acceder a un
menú, donde se encuentran representadas todas las piezas de la luminaria, de tal forma
que se pueden eliminar de nuestra representación, o bien agregar en el caso de no estar
activas en ese momento. El menú se define de igual modo que el de configuración y
cada una de las piezas se representan y se programan como se hizo con las tres opciones
del mencionado menú. El efecto de seleccionar o no, dentro de este menú una
determinada pieza se transforma mediante una función de JavaScript en la selección de
una representación vacía o en la representación normal de la pieza. Para ello se ha
definido cada pieza como un nodo Switch.
 XIV Congreso Internacional de Ingeniería Gráfica

Santander, España – 5-7 junio de 2002

4.6 Representación simple de piezas

Uno de los problemas fundamentales de las aplicaciones anteriores, en concreto

de los movimientos y los giros, es que, debido al elevado número de piezas con
geometría más o menos compleja, su representación se ve influida por la capacidad del
ordenador que se esté utilizando. Esta representación requiere mucha memoria para su
correcto funcionamiento y si el ordenador es digamos "poco potente" los movimientos
resultan lentos y en consecuencia no aceptables. Afortunadamente los ordenadores
actuales más "normalitos" tienen unas capacidades suficientes para garantizar el
correcto funcionamiento del programa, no obstante para mejorar este comportamiento
en ordenadores menos potentes se ha ideado un sistema que agiliza los movimientos sin
perdida de calidad en la representación de las piezas. Este sistema se ha denominado
"Representación simple de piezas".
La idea en la que se basa el sistema de "Representación simple de piezas" es dar
una doble representación geométrica a las piezas. La primera de las representaciones es
la detallada, la que se está manejando hasta el momento, y la segunda es una
representación lo más simple posible, para que los recursos necesarios para visualizarla
sean los mínimos. De esta manera, en los momentos críticos, es decir al producirse
movimientos o giros, se utilizará la representación simple. Esta representación se ha
dibujado utilizando solo una primitiva por pieza, para aumentar en la mayor medida
posible la eficiencia de este sistema.
La forma de definir esta doble representación es la misma que se utilizó en el
apartado anterior con la representación con enlace y sin enlace, de hecho se ha
aprovechado el mismo nodo Switch, y ahora tendremos tres representaciones: la normal,
la simple y la que permite el enlace a otras páginas.

5. Animaciones

5.1 Interpoladores

La interpolación lineal es un concepto matemático que permite definir dos

puntos (en cualquier dimensión) y calcular un punto intermedio sobre la recta que los
une. Para ello debemos concretar qué tanto por ciento del recorrido entre los dos puntos
queremos hacer.
En VRML existen una serie de nodos que funcionan como interpoladores, que
son:

♦ ColorInterpolator: interpola colores

♦ CoordenateInterpolator: interpola coordenadas de vértices.
♦ NormalInterpolator: interpola normales a superficies.
♦ OrientationInterpolator: interpola ángulos de rotación.
♦ PositionInterpolator: interpola posiciones de objetos.
♦ ScalarInterpolator: interpola valores escalares cualesquiera.

Todos estos nodos tienen cuatro campos que podemos apreciar en la siguiente tabla
junto con su significado.
 XIV Congreso Internacional de Ingeniería Gráfica

Santander, España – 5-7 junio de 2002

Nombre del Tipo de Tipo de Significado

campo campo información
key exposedField MFFloat Contiene la lista de
valores de entrada

keyValue exposedField * Contiene la lista de

valores de salida

set_fraction eventIn SFFloat Evento que sirve para

indicar el valor actual de
entrada

Value_changed eventOut * Evento que sirve para dar

el valor actual de salida de
salida

* En cada tipo de interpolador el tipo de datos es distinto.

5.2 Consideraciones generales

Una animación se puede considerar como la secuencia de diferentes estados en

función de tiempo. Definiendo cada uno de estos estados como el valor que tienen todas

las variables que componen una escena. De forma general podemos considerar tres
elementos fundamentales en todas las animaciones, estos son: el tiempo, las variables
sobre las que se actúa y la función que relaciona los dos primeros. El tiempo se obtiene
mediante el nodo TimeSensor, en el cuál se ajustan los diferentes campos según lo que
se quiera conseguir. Para cada animación se ha creado un nodo de este tipo al que se ha
denominado motorN, siendo la N un número. Las variables sobre las que se ha actuado
son fundamentalmente la posición y orientación de las piezas, por lo que los valores de
salida de las funciones van a parar a los campos translación y rotación de un
determinado nodo Transform. Por último, las funciones que relacionan el tiempo y las
variables serán interpoladores de posición y de orientación definidas con los nodos
PositionInterpolator y OrientationInterpolator. Además, también se han usado
funciones javaScript en algunos casos, sobre todo para el control de otras variables
como: el punto de vista del observador, la activación y desactivación de piezas, el color
de las mismas, etc.

5.3 Ejemplo: la Explosión

Esta animación consiste en separar todas las piezas de la luminaria y con ella se
ha pretendido mostrar de una forma más clara las partes de la misma, es decir, lo que se
denomina el despiece.
La animación en si, consiste en el cambio de posición de cada una de las piezas.
Para su realización se han definido tantos nodos CoordenateInterpolator como
 XIV Congreso Internacional de Ingeniería Gráfica

Santander, España – 5-7 junio de 2002

desplazamientos diferentes se tienen, es decir, prácticamente uno por cada pieza. Las
piezas que han compartido aparecen referidas en la tabla VII.1. En el caso los ejes de
bisagra situados en la cubierta y los ejes bisagra situados en el chasis se podía haber
usado un único interpolador para todos, ya que en la última versión de la animación
tenían todos el mismo movimiento, pero se dejo con dos por si finalmente se cambiaba.
La nomenclatura de estos nodos es mueve_adaptador, mueve_cubierta, etc. Los
nombres de todos los interpoladores que intervienen en esta animación así como las
piezas sobre las que intervienen, aparecen en la tabla VII.1. A continuación se muestra
un ejemplo de la definición de uno de estos nodos:

DEF mueve_aldabilla PositionInterpolator {

key [ 0.03 .08 1 ]
keyValue [ 0 0 0 0 600 0 0 600 0 ]
}

Con respecto al tiempo el nodo definido se denomina "motor" y se le ha dado

una duración de ciclo de cincuenta segundos. La definición es la siguiente:

DEF motor TimeSensor { cycleInterval 50 }

El funcionamiento de la animación es el siguiente:

1. Al pulsarse el botón correspondiente, en concreto el definido como Boton5, se da

la orden de ejecución a la función Unión y se activa el contador de tiempo definido
como motor.

ROUTE Boton5.isActive TO MenusScript.Union

ROUTE Boton5.touchTime TO motor.startTime

2. El nodo "motor" se encarga de mandar valores de entrada a cada uno de los nodos
CoordenateInterpolator que intervienen en la animación.

ROUTE motor.fraction_changed TO mueve_chasistapa.set_fraction

ROUTE motor.fraction_changed TO mueve_adaptador.set_
ROUTE motor.fraction_changed TO mueve_adaptador_tornillo.set_fraction
ROUTE motor.fraction_changed TO mueve_adaptador_arandela.set_fraction ROUTE
motor.fraction_changed TO mueve_adaptador_tuerca.set_fraction
ROUTE motor.fraction_changed TO mueve_adaptador_sup.set_fraction
................
................

3. Los interpoladores para cada valor de tiempo dan una posición a sus piezas
correspondientes.

ROUTE mueve_chasistapa.value_changed TO E1.translation

ROUTE mueve_adaptador.value_changed TO E2.translation
ROUTE mueve_adaptador_tornillo.value_changed TO E3.translation
 XIV Congreso Internacional de Ingeniería Gráfica

Santander, España – 5-7 junio de 2002

ROUTE mueve_adaptador_arandela.value_changed TO E4.translation

ROUTE mueve_adaptador_tuerca.value_changed TO E5.translation
ROUTE mueve_adaptador_sup.value_changed TO E6.translation
................
................

4. Cuando el contador llega al limite impuesto, en este caso cincuenta segundos, se

detiene el movimiento terminándose la animación. El valor de "motor" es "1" y las
piezas se quedan en su posición final.

mueve_aldabilla Aldabilla
mueve_aldabilla_tor Tornillo Aldabilla
mueve_cubierta Cubierta
mueve_vidrio Vidrio
mueve_brida_tor Tornillo Brida1
Tornillo Brida2
Tornillo Brida3
mueve_brida Brida1
Brida2
Brida3
mueve_chasistapa Tapa del chasis
mueve_bisagra1 Bisagra corta izquierda
Bisagra larga derecha
mueve_bisagra2 Bisagra corta derecha
Bisagra larga derecha
mueve_eje_bisagr Eje bisagra
Eje bisagra
Eje bisagra
Eje bisagra
mueve_eje_bisagr2 Eje bisagra
Eje bisagra
Eje bisagra
Eje bisagra
mueve_t_bisagra Taco eje bisagra
Taco eje bisagra
Taco eje bisagra
Taco eje bisagra
mueve_t_bisagra2 Taco eje bisagra
Taco eje bisagra
Taco eje bisagra
Taco eje bisagra
mueve_adaptador Adapatador
mueve_adaptador_tornillo Tornillo adaptador
mueve_adaptador_arandel Arandela adaptador
a
mueve_adaptador_tuerca Tuerca adaptador
 XIV Congreso Internacional de Ingeniería Gráfica

Santander, España – 5-7 junio de 2002

mueve_adaptador_sup Suplemento adaptador

mueve_optico Óptico
mueve_optico_sop Soporte de telescópico
mueve_optico_tap Tapón bloque óptico
mueve_optico_tel Soporte telescópico
mueve_optico_cas Portalámparas
mueve_bombilla Lámpara
mueve_tapa_bande Tapa bandeja
mueve_bandeja Bandeja
mueve_adabastro Adabastro
mueve_condensador Condensador
Tabla VII.1
 XIV Congreso Internacional de Ingeniería Gráfica

Santander, España – 5-7 junio de 2002

6 Procesado final del programa

6.1 El tamaño del fichero

Uno de los factores a tener en cuenta en la realización de este proyecto es el

tamaño final del fichero. Este factor es de suma importancia al tratarse de una página
Web, ya que va a determinar el tiempo necesario para transmitir toda la información que
contiene la misma. A lo largo de todo el proceso de elaboración del proyecto se ha
tenido muy presente este factor, tratándose siempre de hacer las cosas de la forma más
simple posible manteniendo la calidad deseada. A lo largo de la memoria se han ido
comentando diversas medidas que se han tomado, veamos a continuación un resumen
de ellas:
♦ Las piezas se han dibujado de la forma más simple posible
♦ Se han creado prototipos para no tener que definir piezas repetidas.
♦ No se han utilizado texturas en las piezas
♦ Se ha utilizado las mismas texturas para la totalidad de los botones
♦ Se ha tratado de utilizar siempre que ha sido posible la estructura DEF/USE
♦ Se han aprovechado variables, interpoladores, sentencias ROUTE, etc. para
distintas funciones y animaciones.
♦ Se ha tratado de simplificar al máximo las estructuras de las piezas a nivel de
nodos Transform, PositionInterpolator, etc.

Además de todas estas medidas se ha tratado de reducir el tamaño del fichero

utilizando algún algoritmo existente para tal fin. En concreto se han utilizado varios
algoritmos incluidos en un programa denominado "Chised". El resultado ha sido muy
satisfactorio ya que se ha reducido el tamaño del fichero en un cuarenta por ciento
aproximadamente. Esta reducción se debe a la eliminación de caracteres no necesarios,
pero que habitualmente se emplean, como por ejemplo las comas para separar números
o el número "0" en los números de la forma "0.xxxx" y que el computador reconoce si
se escriben como ".xxxx"
Por último el fichero se ha sometido a una compresión del tipo "gzip" pasando a
tener una extensión ".wrz" en vez de la ".wrl" que tiene el fichero sin comprimir. Esto se
puede hacer ya que el visualizador acepta la misma y puede leer el fichero tanto
 XIV Congreso Internacional de Ingeniería Gráfica

Santander, España – 5-7 junio de 2002

comprimido como en su estado natural. El resultado final es un fichero de tamaño un

tercio del tamaño original, quedando finalmente en menos de medio Megabyte, tamaño
muy aceptable y que hace viable este proyecto.

Referencias

Bibliografía

§ ALARCÓN, E.; PARÉS, N. Manual Práctico de VRML 2.0. Ed. Prensa Técnica.
§ AMES, A.L.; NADEAU, D.R.; MORELAND, J.L. VRML 2.0 Sourcebook. Ed
John Wilder & Sons,Inc.
§ EVANS, T. HTML 3.2. Ed Prentice Hall.
§ GROS, J. Autocad 14 Práctico. Ed Infor Book´s
§ LOPEZ, J.; TAJADURA, J.A. Autocad 2000 Avanzado. Ed Mc Graw Hill.
§ MILLER, E. 3DStudio Max 2. Ed Prentice Hall
§ PHILIPS, A. HTML 4.0. Ed Prentice Hall.
§ Perl, CGI y JavaScript. Ed Anaya Multimedia.

Direcciones de interés

§ http://www.vrml.org/Specifications/VRML97
§ http://www.wmaestro.com/web3d/
§ http://www.web3d.org/vrml/vrml.htm
§ http://www.qsl.net/eb7dtm/Javascrit/cusso%20java.htm
§ http://www.sdsc.edu/siggraph96vrml/
§ http://www.fortunecity.es/imaginapoder/participacion/153/vmrl.html
§ http://usuarios.tripod.es/max3d/vrml-e.html