UNIVERSIDAD CENTRAL DEL ECUADOR
FACULTAD DE INGENIERÍA, CIENCIAS FÍSICAS Y MATEMÁTICA
CARRERA DE INGENIERÍA EN COMPUTACIÓN GRÁFICA
IMPLEMENTACIÓN DE UN AMBIENTE VIRTUAL 3D, PARA LA
ENSEÑANZA DEL BLOQUE CURRICULAR 5: MI PAÍS Y YO, DEL PRIMER
AÑO DE EDUCACIÓN GENERAL BÁSICA.
TRABAJO DE GRADUACIÓN PREVIO A LA OBTENCIÓN DEL TÍTULO DE
INGENIERO EN COMPUTACIÓN GRÁFICA.
AUTOR: GUAMÁN YAGUANA LIGIA MARGARITA
TUTOR: ING. MSC. DARWIN RODOLFO CAINA AYSABUCHA
QUITO – MAYO 2016
ii
AGRADECIMIENTO
A Dios poder supremo, que me regala el deleite de la vida.
A mis padres Matilde y Enrique motores de mi vida, por todo su amor, fortaleza,
apoyo, sabiduría y ejemplo en cada momento de mi existencia.
A mis hermanos Susana y Darwin, por su apoyo incondicional.
A mis ángeles Mayra y Darío, que fueron mi ejemplo a seguir.
A mi familia y amigos, que estuvieron alentándome a sembrar para cosechar,
un éxito en mi vida profesional.
iii
AUTORIZACIÓN DE LA AUTORÍA INTELECTUAL
Yo, LIGIA MARGARITA GUAMÁN YAGUANA, en calidad de autora del
proyecto integrador “IMPLEMENTACIÓN DE UN AMBIENTE VIRTUAL 3D,
PARA LA ENSEÑANZA DEL BLOQUE CURRICULAR 5: MI PAÍS Y YO, DEL
PRIMER AÑO DE EDUCACIÓN GENERAL BÁSICA”, por la presente autorizo
a la UNIVERSIDAD CENTRAL DEL ECUADOR, hacer uso de todos los
contenidos que me pertenecen o de parte de los que contiene esta obra, con
fines estrictamente académicos o de investigación.
Los derechos que como autor me corresponden, con excepción de la presente
autorización, seguirán vigentes a mi favor, de conformidad con lo establecido
en los artículos 5, 6, 8, 19 y demás pertinentes de la Ley de Propiedad
Intelectual y su Reglamento.
Asimismo, autorizo a la Universidad Central del Ecuador para que realice la
digitalización y publicación de este trabajo de investigación en el repositorio
virtual, de conformidad a lo dispuesto en el Art. 144 de la Ley Orgánica de
Educación Superior.
Quito, 05 de mayo del 2016.
Ligia Margarita Guamán Yaguana
CI: 171714711-8
Telf: 0995765577
iv
CERTIFICACIÓN DEL TUTOR
Yo, DARWIN RODOLFO CAINA AYSABUCHA, en calidad de tutor del trabajo
de titulación “IMPLEMENTACIÓN DE UN AMBIENTE VIRTUAL 3D, PARA LA
ENSEÑANZA DEL BLOQUE CURRICULAR 5: MI PAÍS Y YO, DEL PRIMER
AÑO DE EDUCACIÓN GENERAL BÁSICA”, elaborado por la estudiante
LIGIA MARGARITA GUAMÁN YAGUANA de la Carrera de Ingeniería en
Computación Gráfica, Facultad de Ingeniería, Ciencias Físicas y Matemática de
la Universidad Central del Ecuador, considero que el mismo reúne los
requisitos y méritos necesarios en el campo metodológico y en el campo
epistemológico, para ser sometido a la evaluación por parte del jurado
examinador que se designe, por lo que lo APRUEBO, a fin de que el trabajo
investigativo sea habilitado para continuar con el proceso de titulación
determinado por la Universidad Central del Ecuador.
Quito, 05 de mayo del 2016.
DARWIN RODOLFO CAINA AYSABUCHA
C.C.: 1803221389
v
APROBACIÓN DEL JURADO O TRIBUNAL
vi
vii
CONTENIDO
pág.
AGRADECIMIENTO ........................................................................................................................ ii
AUTORIZACIÓN DE LA AUTORÍA INTELECTUAL .............................................................................iii
CERTIFICACIÓN DEL TUTOR ........................................................................................................... iv
APROBACIÓN DEL JURADO O TRIBUNAL ....................................................................................... v
CONTENIDO .................................................................................................................................. vii
LISTA DE ANEXOS .......................................................................................................................... ix
LISTA DE FIGURAS...........................................................................................................................x
RESUMEN ..................................................................................................................................... xii
ABSTRACT .................................................................................................................................... xiii
INTRODUCCIÓN ............................................................................................................................. 1
1. MARCO TEÓRICO ................................................................................................... 2
1.1. WebGL ................................................................................................................ 2
1.1.1. Funcionamiento ................................................................................................. 3
1.1.2. Soporte .............................................................................................................. 3
1.1.3. Creación de contenido WebGL .......................................................................... 4
1.2. JavaScript ............................................................................................................ 4
1.2.1. Programación .................................................................................................... 4
1.3. Three.js ............................................................................................................... 6
1.3.1. Estructura básica de una escena con Three.js .................................................. 7
1.4. Brackets .............................................................................................................. 8
1.5. Blender 2.76 ........................................................................................................ 8
1.6. Metodología OOHDM .......................................................................................... 9
2. METODOLOGÍA EXPERIMENTAL ........................................................................ 11
2.1. Diseño conceptual ............................................................................................. 11
2.2. Diseño navegacional ......................................................................................... 15
2.2.1. Detalle del nodo Inicio ..................................................................................... 16
viii
2.2.2. Detalle del nodo Sierra o Andina. .................................................................... 16
2.3. Diseño de interfaz abstracta .............................................................................. 16
3. IMPLEMENTACIÓN DEL AMBIENTE VIRTUAL 3D ............................................... 19
3.1. Implementación de la página Inicio .................................................................... 19
3.2. Implementación de una región ........................................................................... 23
3.3. Implementación con Three.js ............................................................................. 25
3.4. Creación de una escena .................................................................................... 25
3.4.1. Declaración de variables. ................................................................................ 25
3.4.2. Clases para crear la escena. ........................................................................... 26
3.5. Creación de geometrías ..................................................................................... 27
3.6. Modelado de personajes en Blender 2.76 .......................................................... 29
3.7. Carga de modelos 3D ........................................................................................ 33
3.8. CubeMap ........................................................................................................... 35
3.9. Animación .......................................................................................................... 37
3.10. Movimiento controlado por teclado .................................................................... 38
3.11. Organización del código por funciones .............................................................. 39
3.11.1. Función empezarEscena. ................................................................................ 39
3.11.2. Función renderEscena. ................................................................................... 39
3.11.3. Función animarEscena .................................................................................... 40
3.11.4. Función WeGLEmpezar. ................................................................................. 40
4. RESULTADOS ....................................................................................................... 41
4.1. Especificaciones técnicas del equipo ................................................................. 41
4.2. Software ............................................................................................................ 41
4.3. Resultado de la ventana principal ...................................................................... 41
4.4. Resultado de la ventana - región Costa o Litoral................................................ 42
4.5. Resultado de la ventana - Región Sierra o Andina ............................................. 45
4.6. Resultado de la ventana - Región Oriental o Amazonía ..................................... 46
4.7. Resultado de la ventana - Región Insular o Islas Galápagos ............................. 48
5. CONCLUSIONES .................................................................................................. 51
6. RECOMENDACIONES .......................................................................................... 52
GLOSARIO ................................................................................................................. 53
BIBLIOGRAFÍA ........................................................................................................... 55
ANEXOS ..................................................................................................................... 57
ix
LISTA DE ANEXOS
pág.
Activación de WebGL en Mozilla Firefox ....................................................................................... 1
Activación del add-ons en Blender 2.76 ........................................................................................ 4
Código ........................................................................................................................................... 6
Manual de usuario ........................................................................................................................ 7
Especificaciones técnicas ............................................................................................................ 12
Plan curricular del primer año de educación general básica ...................................................... 13
Encuesta a docentes de la escuela “Ángel Isaac Chiriboga” ....................................................... 15
Carta de presentación del proyecto en la escuela “Ángel Isaac Chiriboga” ............................... 18
x
LISTA DE FIGURAS
pág.
Figura 1.1. Funcionamiento de WebGL. ................................................................................. 3
Figura 1.2. Estructura de página web con HTML y JavaScript. .......................................... 6
Figura 1.3. Estructura básica de una escena con Three.js. ................................................ 8
Figura 1.4. Diagrama de las etapas según OOHDM .......................................................... 10
Figura 2.1. Diseño Conceptual del Ambiente Virtual 3D. ................................................... 11
Figura 2.2. Diseño Conceptual de la región Costa o Litoral. ............................................. 12
Figura 2.3. Diagrama de relación del dominio del ambiente virtual 3D. .......................... 14
Figura 2.4. Diseño navegacional del ambiente virtual 3D. ................................................. 15
Figura 2.5. Interfaz abstracta – pantalla inicio. .................................................................... 17
Figura 2.6. Interfaz abstracta - región Oriental o Amazonía. ............................................. 17
Figura 3.1. Código html- cabecera. ....................................................................................... 20
Figura 3.2. Código html - pictograma. ................................................................................... 20
Figura 3.3. Código html – mapa y botones. ......................................................................... 21
Figura 3.4. Código html – pie de información. ..................................................................... 21
Figura 3.5. Resultado de la página Inicio en Mozilla Firefox. ............................................ 22
Figura 3.6. Código para la rotación del mapa en el elemento canvas. ............................ 22
Figura 3.7. Diagrama de la estructura de un archivo .js ..................................................... 23
Figura 3.8. Código del archivo ambienteCosta.html y su resultado. ................................ 24
Figura 3.9. Enlace del archivo three.js en el documento HTML. ...................................... 25
Figura 3.10. Definición de variables en los archivos .js. .................................................... 25
Figura 3.11. Código para generar la escena. ...................................................................... 26
Figura 3.12. Código para crear una geometría.................................................................... 28
Figura 3.13. Resultado de la geometría de un cilindro con textura de imagen. ............. 28
Figura 3.14. Ejemplos de otras geometrías con aplicación de texturas. ......................... 29
Figura 3.15. Vistas frontal y derecha en modo sólido y malla sin materiales. ................ 30
Figura 3.16. Vistas frontal y derecha, en modo sólido y malla con materiales. .............. 30
xi
Figura 3.17. Aplicación de modificador Surface. ................................................................. 31
Figura 3.18. Partes del modelado, vista en modo sólido y malla.. ........................................... 31
Figura 3.19. Opción para exportación del modelo en formato .js ..................................... 32
Figura 3.20. Opciones configurables para generar archivo hombreCosta.js .................. 32
Figura 3.21. Código para la carga de un modelo 3D. ......................................................... 33
Figura 3.22. Código para la carga de otros modelos 3D. .................................................. 34
Figura 3.23. Modelos 3D cargados en la escena. ............................................................... 34
Figura 3.24. Modelos 3D con materiales y texturas cargados en la escena. ................. 35
Figura 3.25. Código de la función cubeMap ........................................................................ 36
Figura 3.26. Resultado de la función cubeMap. .................................................................. 36
Figura 3.27. Código para la animación de elementos de la escena. ............................... 37
Figura 3.28. Resultado de la animación de los elementos de la región Sierra. ............. 38
Figura 3.29. Código para el desplazamiento por la escena .............................................. 39
Figura 4.1. Ventana de inicio de la aplicación. .................................................................... 42
Figura 4.2. Ventana de la región Costa. ............................................................................... 42
Figura 4.3. Botones de enlace a ventanas de inicio y regiones. ....................................... 43
Figura 4.4. Botón de activación de audio. ............................................................................ 43
Figura 4.5. Botón de información de instrucciones. ............................................................ 43
Figura 4.6. Ventana de instrucciones. ................................................................................... 43
Figura 4.7. Representación geográfica de la Costa............................................................ 44
Figura 4.8. Botones para información detallada. ................................................................. 44
Figura 4.9. Información detallada de la opción Productos. ................................................ 44
Figura 4.10. Información detallada de la opción Fauna. .................................................... 45
Figura 4.11. Representación geográfica de la Sierra. ........................................................ 45
Figura 4.12. Información detallada de la opción Vestimenta. ........................................... 46
Figura 4.13. Información detallada de la opción Platos típicos. ........................................ 46
Figura 4.14. Representación geográfica de la Amazonía. ................................................. 47
Figura 4.15. Información detallada de la opción Fauna. .................................................... 47
Figura 4.16. Información detallada de la opción Clima. ..................................................... 48
Figura 4.17. Representación geográfica de las Islas Galápagos. .................................... 48
Figura 4.18. Información detallada de la opción Productos. ............................................. 49
Figura 4.19. Información detallada de la opción Fauna. .................................................... 49
xii
RESUMEN
“IMPLEMENTACIÓN DE UN AMBIENTE VIRTUAL 3D, PARA LA
ENSEÑANZA DEL BLOQUE CURRICULAR 5: MI PAÍS Y YO, DEL PRIMER
AÑO DE EDUCACIÓN GENERAL BÁSICA”
Autor: Ligia Margarita Guamán Yaguana
Tutor: Darwin Rodolfo Caina Aysabucha
El presente trabajo consiste en la creación de un ambiente 3D para la Web,
que contribuirá en la calidad del proceso de enseñanza-aprendizaje del bloque
curricular 5: Mi País y Yo, para los estudiantes del primer año de educación
general básica del país. La herramienta consiste en un ambiente virtual 3D con
el objetivo de que los niños se familiaricen con la geografía del Ecuador, en un
nivel elemental. En éste trabajo se aprenderán las regiones naturales,
vestimenta, platos típicos, fauna, productos y clima de cada región. La
herramienta a utilizar es WebGL, que genera contenido web 3D, y el lenguaje
de programación orientado a objetos JavaScript; utilizando la metodología de
software para desarrollo de aplicaciones web, OOHDM en cuatro etapas:
diseño conceptual, diseño navegacional, diseño de interfaces abstractas e
implementación.
PALABRAS CLAVES: WEBGL / WEB 3D / JAVASCRIPT / OOHDM / ÁNGEL
ISAAC CHIRIBOGA / AMBIENTE VIRTUAL 3D
xiii
ABSTRACT
"IMPLEMENTATION OF A 3D VIRTUAL ENVIRONMENT FOR THE
TEACHING OF CURRICULAR BLOCK 5: MY COUNTRY AND I, THE FIRST
YEAR OF BASIC GENERAL EDUCATION"
Author: Ligia Margarita Guamán Yaguana
Tutor: Darwin Rodolfo Caina Aysabucha
This present paper consists in creating a 3D environment for the Web, which
will contribute to the quality of the teaching process of curricular block 5: My
Country and I, for students of the first year of basic general education in the
country. The tool consists of a 3D virtual environment with the aim that children
become familiar with the geography of Ecuador in an elementary level. In this
paper will be learned the natural regions, clothing, products, typical dishes,
fauna and climate of each region. The tool to use is WEBGL, which generates
3D web content and programming language oriented to JavaScript objects;
using the methodology of software for web application development, OOHDM,
in four stages: conceptual design, navigational design, design and
implementation of abstract interfaces.
KEYWORDS: WEBGL / WEB 3D / JAVASCRIPT / OOHDM / ANGEL ISAAC
CHIRIBOGA / 3D VIRTUAL ENVIRONMENT
I CERTIFY that the above and foregoing is a true and correct translation of the original document in Spanish. Sandra Páez Estrella Certified Translator ID: 171464039-6 (1005-07-727097)
1
INTRODUCCIÓN
El Ministerio de Educación y las Unidades Educativas tienen la responsabilidad
de garantizar una educación de calidad a las niñas y niños que acogen en sus
aulas cada periodo escolar, así como también, está el compromiso de los
docentes al realizar las planificaciones curriculares de cada bloque, según lo
que contempla la Actualización y Fortalecimiento Curricular de la Educación
General Básica del Ministerio de Educación.
Dentro de la proyección curricular está el aprovechar las Tecnologías de la
Información y la Comunicación-TIC dentro del proceso educativo, es decir, el
uso de herramientas tecnológicas, aulas o ambientes virtuales, y demás
alternativas para apoyar la enseñanza y el aprendizaje de los alumnos.
El educarse desde las aulas no debe ser una restricción para que el entorno de
aprendizaje sea entretenido, amigable y eficiente; lo que puede ser alcanzado
gracias a las nuevas tecnologías y el buen uso que se les otorgue, siendo una
muestra la implementación de ambientes virtuales 3D aplicados al área
educativa.
Para el desarrollo del ambiente virtual 3D se ha realizado un análisis previo,
para determinar funcional y pedagógicamente la implementación del mismo;
resultando, muestras geográficas representativas de las regiones del Ecuador,
asociadas a cada una de ellas la vestimenta, productos, platos típicos, fauna y
clima, adicionando recursos de audio; acogiéndose así, al contenido del bloque
curricular 5: Mi país y yo, con el objetivo de desarrollar una herramienta
tecnológica en plataforma web, que beneficie a los alumnos y docentes de los
primeros años de educación general básica de las Escuelas Fiscales y
Unidades Educativas regidas por el Ministerio de Educación. Además, de
cumplir con el Plan del Buen Vivir que indica hacer uso de software libre,
fortaleciendo la Matriz Productiva en cuanto a la Ciencia, Tecnología e
Innovación de productos tecnológicos que ayudan a fomentar la educación.
2
1. MARCO TEÓRICO
1.1. WebGL12
La evolución de WebGL inicia en el año 2006 por parte de Mozilla y Opera,
continuando, en el 2009 se crea el actual grupo de trabajo de WebGL
conformado por Mozilla Firefox, Opera, Google Chrome y Apple que inician con
mayor fuerza el desarrollo de ésta Interfaz de Programación de Aplicaciones
(API), logrando en el 2011 el lanzamiento oficial de la versión WebGL 1.0.
WebGL es una multiplataforma libre, desarrollada para mostrar gráficos 3D en
la web acelerados por el hardware de la Unidad de Procesamiento Gráfico
(GPU) del computador. Técnicamente WebGL es una API que permite el
renderizado de gráficos con vértices, proyecciones y transformaciones, pero en
la web y que se deriva del estándar libre OpenGL ES 2.0 proporcionando su
funcionalidad en un contexto HTML, específicamente en el elemento canvas de
HTML. Antes de utilizar la API se debe obtener el objeto
WebGLRenderingContext asociado al canvas que administrará el estado de
OpenGL y rendirá a la memoria intermedia de dibujo el momento que debe ser
creado dicho contexto.
Debido a que WebGL es una API multiplataforma existen librerías o bibliotecas
que han sido implementadas para facilitar el desarrollo de aplicaciones,
permitiendo la creación de primitivas flexibles, aplicación de texturas, efectos
de sombreado, uso de tipos de luces, disposición de varias cámaras, carga de
objetos 3D externos, además de otros beneficios que bien son aprovechados
por los desarrolladores familiarizados con el entorno de OpenGL u OpenGL ES
2.0.
1 Cita tomada de: KHronos Group, (2014). WebGL Specification. Recuperado de: https://www.khronos.org/registry/webgl/specs/1.0.3/#.1 KHronos Group 2 Cita tomada de: Desarrollo en WebGL, (2010). Introducción. Recuperado de: https://sites.google.com/site/desarrolloenwebgl/introduccion
3
1.1.1. Funcionamiento.- WebGL funciona como un motor sencillo de
renderizado de gráficos 3D, que trabaja bajo el lenguaje de programación
JavaScript, utilizando un canvas. El manejo de gráficos se efectúa por medio
del lenguaje JavaScript, emitiendo instrucciones básicas de OpenGL que,
acceden al GPU y en conjunto con la memoria devuelven la información gráfica
renderizada, mostrando en el canvas como resultado aplicaciones para
escritorio y la web.
Figura 1.1. Funcionamiento de WebGL.
Oscar Uh, (19 de agosto de 2013). Webgl y THREE.JS, - Generando gráficos
simples (Canvas, escenario, cámara, puntos) [Archivo de video]. Recuperado
de: https://www.youtube.com/watch?v=yW0qHwXHEZs
1.1.2. Soporte.- Actualmente los navegadores que soportan WebGL son
Mozilla Firefox, Opera, Google Chrome, Safari e Internet Explorer versión 11
con limitaciones de algunas funciones WebGL. Los navegadores por defecto no
tienen activado WebGL por lo cual es necesaria su activación, en la opción de
configuración del navegador a utilizar, dicho procedimiento de activación en el
navegador Mozilla Firefox se detalla en el Anexo A.
GPU Memoria
Gráficos manejados por
Instrucciones
Elemento canvas
Aplicaciones
4
1.1.3. Creación de contenido WebGL.- Para crear escenas simples o
complejas, los programas esencialmente realizan los siguientes pasos:
a) Añadir un elemento canvas a la página, y crear un nuevo contexto
de renderizado WebGL.
b) Inicializar un viewport o ventana gráfica.
c) Cargar arreglos de coordenadas (vértices) y datos de imagen
(fragmentos o texturas) a la GPU del computador.
d) Compilar y ejecutar, vértices y fragment shaders (programas que se
ejecutan en la GPU) para manipular los vértices e imágenes
cargadas en el paso anterior.
e) Dibujar en la pantalla o elemento canvas de la página.
1.2. JavaScript3
Lenguaje de programación interpretado utilizado para crear páginas web
dinámicas, es decir, incorporar efectos audio visuales en elementos como
botones que responderán a las acciones emitidas por el usuario. Al ser
JavaScript un lenguaje interpretado, los programas escritos en este lenguaje no
requieren de una compilación previa, sino que pueden ser ejecutados
directamente en cualquier navegador que soporte esta plataforma, siendo en la
actualidad todos los navegadores existentes.
1.2.1. Programación.- Para empezar a programar en JavaScript se requiere
de un dominio avanzado de HTML, conocimiento de hojas de estilo CSS y
nociones de programación en algún lenguaje. JavaScript se fusiona con el
lenguaje HTML para generar la página web, pero se debe tener claro las
diferentes formas de incluir código JavaScript.
3Cita tomada de: LibrosWeb, (2016). Introducción a JavaScript. Recuperado de: http://librosweb.es/libro/javascript/
5
Una forma es incrustar código es en cualquier parte del documento HTML,
según el requerimiento que defina el programador y en el caso que requiera un
bloque pequeño de código o asignar instrucciones específicas, pero se
recomienda que sea definido dentro de la cabecera del documento, es decir,
dentro de la etiqueta <head>.
Incrustar código JavaScript desde un archivo externo de tipo JavaScript (.js)
desarrollado en cualquier editor de texto, es otro método y, quizás el más
recomendable al momento de desarrollar aplicaciones más complejas, para
aprovechar al máximo su funcionalidad. Las etiquetas <script>...</script>
definidas en la cabecera del documento HTML enlazan a los archivos .js
necesarios, además; se debe especificar en la etiqueta <script> el atributo
type con el valor text/javascript, y el atributo src que indica la ruta del
archivo .js. Utilizar este método para programar, simplifica el código HTML,
además que se puede reutilizar el mismo código JavaScript en las páginas a
las cuales esta enlazado, optimizando el tiempo y trabajo al momento de
realizar correcciones o depuración de errores que puedan presentarse en la
programación.
1.2.2 Estructura de página web con HTML y JavaScript.- Todo programa
en JavaScript necesariamente sigue una serie de pautas para ejecutarse
correctamente dentro de un documento HTML. El diagrama de la figura 1.2
indica la estructura esencial de funcionamiento de código JavaScript.
6
Figura 1.2. Estructura de página web con HTML y JavaScript.
Duque Nicholas, (2015). Intro to Web Design. Recuperado de:
http://cnx.org/resources/4c315e538606e49b5e06ab202f78533e67dfb0fa/Struct
ureOfaPage.png
1.3. Three.js4
Es una librería de alto nivel y código abierto, desarrollada en lenguaje
JavaScript que permite la creación de objetos y animaciones 3D, haciendo uso
directo de los recursos de procesamiento de la tarjeta gráfica, en un contexto
WebGL sin requerir de plug-ins adicionales en los navegadores. Three.js facilita
el trabajo con WebGL y el manejo de instrucciones mediante los propios
métodos, además que; utiliza los conceptos básicos de gráficos por
computadora para representar modelados 3D. Three.js es un equilibrio entre el
diseño y la programación.
La biblioteca Three.js proporciona una API muy fácil para usar JavaScript, en
base a las características de WebGL, por lo que se pueden crear gráficos en
3D mediante el objeto THREE, sin necesidad de aprender los detalles de
WebGL. Esta biblioteca ofrece un gran número de características y APIs que se
4 Cita tomada de: Dirksen Jos, (2013).
<html> <head> </head> <body> </body> </html>
Código CSS
Código JavaScript
Código HTML
<script type="text/javascript"> Código...
</script>
<script type="text/javascript" src="/js/codigo.js"> </script>
Código en documento HTML
Código en archivo externo .js
7
pueden utilizar para crear escenas 3D directamente en el navegador. La
programación directa en WebGL desde JavaScript para crear y animar escenas
3D puede resultar complejo y propenso a errores, por lo que utilizar Three.js
para aprovechar al máximo la funcionalidad de WebGL resulta conveniente a la
hora de:
Crear geometrías 3D simples y complejas.
Animar los objetos o geometrías puestas en escena.
Aplicar texturas y materiales a los objetos para obtener un resultado más
real.
Incorporar luces, cámaras y control de visualizaciones.
Importar objetos de software de modelado 3D de formatos compatibles.
Crear gráficos en 2D basados en sprites.
Incorporar shaders para ser personalizados con OpenGL Shading
Languaje (GLSL).
Se debe considerar que las actualizaciones que se realizan constantemente a
los navegadores, pueden ocasionar inconvenientes en la ejecución de las
aplicaciones creadas con la librería, por lo que es recomendable, actualizar los
navegadores para no tener inconvenientes al momento de ejecutar las
aplicaciones que utilizan WebGL.
1.3.1. Estructura básica de una escena con Three.js.- Para la creación de
una escena 3D básica primero se debe contar con un documento HTML, en el
cual se insertará la ventana donde se visualizaran todos los elementos 3D, que
compondrán la escena. Se había indicado anteriormente que, WebGL requiere
del elemento Canvas de HTML para mostrar el renderizado; pero, al utilizar
Three.js será ésta librería la que proporcione el objeto canvas para dicho
trabajo. Los elementos de una escena básica son: lienzo o canvas, escena,
cámara, luces y geometrías que son creados mediante el objeto THREE.
8
Figura 1.3. Estructura básica de una escena con Three.js.
1.4. Brackets5
Es un editor de texto de código abierto, diseñado para desarrolladores de
proyectos web, en el contexto de HTML, JavaScript y CSS. Brackets tiene la
funcionalidad de edición en vivo, es decir; que los cambios realizados se los
puede notar al instante, en el navegador a medida que éstos son efectuados.
Entre las características están una vista previa dinámica, inserción de
breakpoints, interfaz de fácil uso y configuración de extensiones para mejorar la
eficiencia al momento de trabajar, conjuntamente cuenta con un servidor local
que funciona directamente con el navegador lo que hace que el diseñar y
desarrollar en Brackets funcione en el entorno en el que se implementa.
1.5. Blender 2.766
Es un software de plataforma libre, diseñado para modelado en 3D, animación
y creación de gráficos tridimensionales. Con Blender las imágenes generadas
por computador toman vida, para realizar proyectos de diversas áreas
obteniendo resultados realmente buenos. La interfaz que ofrece Blender es
configurable para aprovechar toda la funcionalidad y ventajas que esta
herramienta tiene para elaborar: edición de video, creación de videojuegos,
5 Cita tomada de: Martínez Cecy , (2014). Brackets.io. Un editor de texto Open Source por Adobe. Recuperado de: http://html5facil.com/tips/brackets-io-un-editor-de-texto-open-source-por-adobe/ 6 Cita tomada de: Blender 3D.es, (2014. Recuperado de: http://blender3d.es/
THREE.
WebGLRenderer();
Scene();
PerspectiveCamera();
AmbientLight();
CubeGeometry();
9
modelado, iluminación, animación, escultura, pintura digital, renderizado,
exportación de objetos y demás.
Cabe indicar la facilidad que presenta la versión Blender 2.76 con la que se
desarrolló el presente proyecto, para instalar un Add-ons que permite la
exportación de los modelados en formato Three.js para luego ser cargados en
el proyecto mediante la librería.
1.6. Metodología OOHDM7
Desarrollar aplicaciones para la web en base a una metodología en la que los
desarrolladores pueden apoyarse, es la ventaja que ofrece OOHDM, que por
sus siglas en inglés significa Object Oriented Hypermedia Design Method -
Método de Diseño de Hipermedia Orientado a Objetos. El modelo OOHDM
permite conseguir productos de software hipermedia y para la web reusables y
fáciles de mantener, debido a que están enfocados en un proceso de ingeniería
de software. Según OOHDM, el desarrollo de las aplicaciones hipermedia
ocurre al llevar a cabo un proceso de cuatro actividades:
1. Diseño conceptual
2. Diseño navegacional
3. Diseño de interfaz abstracta
4. Implementación
Al desarrollar cada una de las etapas, finalmente se puede obtener un
diagrama que se indica en la figura 1.4, sobre la relación entre los objetos
conceptuales, de navegación y de interfaz.
7 Cita tomada de: Pinto Jairo, (2011). Metodología OOHDM. Recuperado de: http://slideshowes.com/doc/750767/metodolog%C3%ADa-oohdm
10
Figura 1.4. Diagrama de las etapas según OOHDM.
Daniel Schwabe & Gustavo Ross, (1998). An Object Oriented Approach to
Web-Based Application Design [imagen]. Recuperado de: http://www-di.inf.puc-
rio.br/schwabe/papers/TAPOSRevised.pdf)
11
2. METODOLOGÍA EXPERIMENTAL
El presente proyecto recurrió a la metodología OOHDM debido a la separación
clara entre lo conceptual, navegacional y visual que ésta presenta, dando
fortaleza al desarrollo óptimo del proyecto. La metodología OOHDM ayudó a
obtener un producto en plataforma web, de calidad, que beneficiará al proceso
de enseñanza de los niños del primer año de la escuela “Ángel Isaac
Chiriboga”.
Las etapas que contiene la metodología OOHDM y que se acoplan al proyecto,
implementación de un ambiente virtual 3D, se detalla en las siguientes
secciones.
2.1. Diseño conceptual
Esta etapa se enfoca a la construcción del modelo conceptual del ambiente
virtual 3D. El diseño conceptual define el dominio semántico de la aplicación
considerando el papel de los usuarios y el contexto en el que se desenvuelven.
Figura 2.1. Diseño Conceptual del Ambiente Virtual 3D.
DISEÑO CONCEPTUAL DEL AMBIENTE VIRTUAL 3D
PANTALLA PRINCIPAL
Región Costa
o Litoral
Región Sierra o
Andina
Región Oriental
o Amazonía
Región Insular
o Islas Galápagos
Pictograma Mapa
click click click click
Entrada / acción:
Salida / respuesta:
12
Se indica que, en los diseños conceptuales se ha establecido que una entrada
se refiere a la acción que el usuario podrá efectuar sobre el elemento, y una
salida la respuesta sobre dicha acción.
En la figura 2.1 se muestra el diseño conceptual del ambiente virtual 3D, que
consta de la página principal que contiene secciones para el pictograma, mapa
y regiones naturales.
Pictograma.- Elemento propio de enseñanza para niños de 5 a 6 años que
hace referencia a las regiones, clima y productos del país.
Mapa.- Sección donde se muestra el mapa del Ecuador dividido en las cuatro
regiones.
Regiones.- Entradas en las cuales el usuario accederá a los ambientes 3D que
describen la geografía de cada una de las regiones del país.
Figura 2.2. Diseño Conceptual de la región Costa o Litoral.
DISEÑO CONCEPTUAL DE LAS REGIONES
Pantalla principal
Entrada / acción:
Salida / respuesta:
REGIÓN COSTA O LITORAL
Vestimenta
Productos
Platos típicos
Fauna
Clima
Información
Inicio
Sierra o Andina
Oriental o Amazonía
Insular o Galápagos Sonido
Opciones con
información
detallada
para cada
parámetro
Canvas
click
click click cerrar
click
click / cerrar
13
La figura 2.2 muestra el diseño conceptual de la región Costa o Litoral, la cual
consta de una sección de enlaces para las demás regiones, información
detallada sobre la vestimenta, productos, platos típicos, fauna y clima de la
región. Canvas que muestra la escena 3D con una muestra geográfica básica,
componente para emitir instrucciones de uso y un elemento para controlar la
música de fondo.
Debido al esquema de la aplicación, los diseños conceptuales
correspondientes para las regiones Sierra o Andina, Oriental o Amazonía e
Insular o Islas Galápagos, han sido diseñados de forma similar al expuesto en
la figura 2.2, por lo tanto no serán expuestos.
En la figura 2.3 se expone un diagrama completo como resultado de la etapa
del diseño conceptual.
14
DIAGRAMA DE RELACIÓN DEL DOMINIO DEL AMBIENTE VIRTUAL 3D
Figura 2.3. Diagrama de relación del dominio del ambiente virtual 3D.
REGIÓN COSTA
- Botones de enlace
- Botones ventana modal
- Canvas
- Botón información
- Botón sonido
REGIÓN ORIENTAL
- Botones de enlace
- Botones ventana modal
- Canvas
- Botón información
- Botón sonido
REGIÓN INSULAR
- Botones de enlace
- Botones ventana modal
- Canvas
- Botón información
- Botón sonido
REGIÓN SIERRA
- Botones de enlace
- Botones ventana modal
- Canvas
- Botón información
- Botón sonido
INICIO
- Pictograma
- Mapa
- Regiones
Relacionados entre sí
Relacionados entre sí Relacionados entre sí
15
2.2. Diseño navegacional
El diseño navegacional considera las opciones que el usuario tendrá para
navegar por cada opción y acceder a toda la información que contiene la
aplicación.
Figura 2.4. Diseño navegacional del ambiente virtual 3D.
Inicio
Costa o
Litoral
Sierra o
Andina
Oriental o
Amazonía
Insular o Islas
Galápagos
Inicio - Sierra - Oriental - Insular
Vestimenta - Productos - Platos
típicos - Fauna - Clima
Canvas
Información
Audio de la Costa
Información detallada
Recorrido
Instrucciones de uso
Control audio de fondo
Inicio - Costa - Oriental - Insular
Vestimenta - Productos - Platos
típicos - Fauna - Clima
Canvas
Información
Audio de la Sierra
Información detallada
Recorrido
Instrucciones de uso
Control audio de fondo
Inicio - Costa - Sierra - Insular
Vestimenta - Productos - Platos
típicos - Fauna - Clima
Canvas
Información
Audio del Oriente
Información detallada
Recorrido
Instrucciones de uso
Control audio de fondo
Inicio - Costa -Sierra - Oriental
Vestimenta - Productos - Platos
típicos - Fauna - Clima
Canvas
Información
Audio Insular
Información detallada
Recorrido
Instrucciones de uso
Control audio de fondo
16
La figura 2.4 muestra el diseño navegacional que se desarrolló para la
aplicación y las opciones de navegación que existe para cada región. Se
tomará como muestra el nodo Sierra o Andina para la descripción del diseño
navegacional, puesto que los nodos entre sí, son similares.
2.2.1. Detalle del nodo Inicio.- Área que contiene el enlace para acceder a
cualquiera de las regiones: Costa o Litoral, Sierra o Andina, Oriental o
Amazonía e Insular o Islas Galápagos.
2.2.2. Detalle del nodo Sierra o Andina.- Se accede al área que contiene
información y un ambiente 3D que muestra una representación geográfica de la
región.
Inicio - Costa - Oriente - Galápagos, indican la opción de navegabilidad
hacia estas áreas mediante la acción del usuario al hacer click sobre la opción.
Vestimenta - Productos - Platos típicos - Fauna - Clima, opciones que
permiten acceder a información detallada de cada uno de los parámetros.
Canvas, muestra el ambiente 3D diseñado para la región con elementos
característicos de la misma y por el cual el usuario puede realizar un recorrido.
Instrucciones, muestra información para el uso de la aplicación.
Audio de la Sierra, controla el audio de música propia de la región, sólo en
caso que el usuario lo desee, debido a que puede detenerlo.
2.3. Diseño de interfaz abstracta
Esta etapa establece la apariencia que tendrá la aplicación según la estructura
navegacional antes diseñada. Significa definir la diagramación de cada
elemento según la forma de navegar establecida, qué objetos visualizará el
usuario en la interfaz, así como la funcionalidad que posee la aplicación.
17
Figura 2.5. Interfaz abstracta – pantalla inicio.
En la figura 2.5 se muestra el diseño de interfaz abstracta de la página de
inicio, que contiene un div para mostrar la información del pictograma, un
canvas para mostrar el mapa del Ecuador resaltando cada región y una sección
de botones para acceder a cada una las regiones del país.
Figura 2.6. Interfaz abstracta - región Oriental o Amazonía.
La figura 2.6 muestra la interfaz abstracta al acceder a cualquiera de las
opciones de las regiones desde la página de inicio. La interfaz está distribuida
por una sección en la parte superior que contiene botones para navegar hacia
las regiones restantes a la que se encuentra el usuario. Una sección vertical
con botones que mostrarán información contenida en ventanas modal, que
PICTOGRAMA
MAPA
POR
REGIONES
REGIÓN COSTA
REGIÓN SIERRA
REGIÓN ORIENTAL
REGIÓN INSULAR
INICIO REGIÓN 1 REGIÓN 2 REGIÓN 3
VESTIMENTA
PRODUCTOS
VESTIMENTA PLATOS
TÍPICOS
VESTIMENTA FAUNA
CLIMA
CANVAS
o)))
i
18
hacen referencia al parámetro indicado y elementos expuestos en la escena 3D
de la región. Mientras que, la mayor área estará cubierta por el elemento
canvas, que es el encargado de mostrar la escena 3D y permitir al usuario
realizar un recorrido mediante las flechas del teclado. Otro elemento que se
visualizará en la parte superior derecha es un ícono de audio para activar y
desactivar la música de fondo mediante las acciones de click y doble click
respectivamente. El botón de información, que muestra las instrucciones de
uso para la navegación y recorrido en la escena.
Para el diseño de la interfaz abstracta se recurrió al Plan Curricular del Primer
Año de Educación General Básica emitida por el Ministerio de Educación, y al
asesoramiento de una profesional docente del primer año de educación general
básica, con la finalidad de elaborar una aplicación con fundamentos
pedagógicos, conceptuales, además de funcionales y estéticos.
19
3. IMPLEMENTACIÓN DEL AMBIENTE VIRTUAL 3D
Para llevar a cabo la etapa de implementación, se considera la ejecución total
de las etapas anteriores, permitiendo que el desarrollador tenga conocimiento
total del dominio de la aplicación. Para iniciar con la etapa final de OOHDM, el
desarrollador deberá considerar la plataforma de desarrollo, es decir, el
lenguaje de programación; así como las herramientas que intervendrán, que
para el presente proyecto son la librería Three.js encargada de la creación de
las escenas 3D, así como la carga de objetos modelados en Blender 2.76 y el
renderizado en el elemento canvas del documento HTML, mediante el lenguaje
de programación JavaScript en el editor de texto Brackets.
Considerando las recomendaciones de la profesional docente, las guías del
Plan Curricular y los conocimientos del desarrollador en el área técnica y
diseño gráfico se afina la apariencia gráfica de la aplicación.
3.1. Implementación de la página Inicio
El código HTML correspondiente al archivo index.html, que permite la creación
de la página inicial del ambiente virtual 3D, se mostrará y detallará a
continuación.
La figura 3.1 pertenece a la sección de la cabecera del documento HTML, las
líneas 7-8 hacen referencia a los hojas de estilo (archivos .css), que contienen
la configuración de la apariencia y estética de cada una de las ventanas de la
aplicación. Mientras que las líneas 9-11, indican el enlace realizado a los
archivos .js, la línea nueve llama al archivo de la librería three.js, y las líneas
diez y once llaman a los archivos de JavaScript que trabajan en conjunto con
las hojas de estilo. El bloque de etiquetas style, definen la imagen de fondo.
20
Figura 3.1. Código html- cabecera.
Seguido a la cabecera del documento HTML, se encuentra el cuerpo o body,
aquí se define un div que contendrá al pictograma.
Figura 3.2. Código html - pictograma.
Se crea un nuevo div para la clase container, y en la cual se ha establecido se
muestre el canvas para el mapa dividido en las regiones, y los botones de
acceso a las escenas 3D de cada una de estas. Las líneas de código 32-35,
permiten controlar el audio de fondo, la línea 36 llama al archivo script.js en el
21
cual está programado el contenido del mapa para el canvas; el bloque de
líneas 39-47 establecen la creación de los botones para acceder a las regiones.
Figura 3.3. Código html – mapa y botones.
Finalizando el archivo index.html, se agrega un último div, para mostrar
información sobre el nombre de la aplicación y su principal beneficiario.
Figura 3.4. Código html – pie de información.
22
Al ejecutar el archivo index.html, en el navegador Mozilla Firefox el resultado
que se visualiza es el de la figura 3.5.
Figura 3.5. Resultado de la página Inicio en Mozilla Firefox.
Al mapa por regiones se le añadió el efecto de rotación y fue programado en el
archivo script.js indexado al documento index.html. El código y resultado se
muestra en la figura 3.6.
Figura 3.6. Código para la rotación del mapa en el elemento canvas.
23
3.2. Implementación de una región
Para generar la página y escena 3D de la región Costa o Litoral se implementó
el archivo ambienteCosta.html y ambienteCosta.js, siendo en éste último donde
está la programación que muestra una representación geográfica de la región.
En la figura 3.7 se expone un diagrama de la estructura que posee este
archivo.
Figura 3.7. Diagrama de la estructura de un archivo .js
Inicio
Definición de variables globales
Escena básica:
- Escena
- Lienzo
- Cámara
- Luces
- Geometrías 2D y 3D
- Objetos 3D Asignar la escena al
lienzo-elemento
canvas.
Renderizar las
animaciones
realizadas.
Función
empezarEscena()
Función
renderEscena()
Función
animarEscena()
Función
WebGLEmpezar()
Cargar todas las
funciones para
mostrar el resultado
final.
Fin
24
Para la implementación de la página de la región Costa, el código HTML se
muestra en la figura 3.8, al igual que el resultado en el navegador Mozilla
Firefox.
Figura 3.8. Código del archivo ambienteCosta.html y su resultado.
25
3.3. Implementación con Three.js
La librería Three.js simplifica líneas de código JavaScript, al programar cada
uno de los elementos que conforman las escenas de las regiones. Para mostrar
el uso de esta plataforma, se mostrará el código y resultado obtenido, de igual
forma se expondrá el modelado de los personajes y elementos en Blender
2.76, que fueron exportados en formato .js para luego ser cargados en las
escenas mediante el constructor JSONLoader proporcionado por Three.js.
Antes de empezar a trabajar con Three.js, se debe enlazar al documento HTML
el archivo three.js que estará almacenado en un directorio dentro del proyecto.
Figura 3.9. Enlace del archivo three.js en el documento HTML.
3.4. Creación de una escena
3.4.1. Declaración de variables.- En la estructura de los archivos .js, se debe
especificar las variables que serán utilizadas para la implementación del
código.
Figura 3.10. Definición de variables en los archivos .js.
26
3.4.2. Clases para crear la escena.- En la figura 3.8 se puede observar el uso
del objeto THREE, para la creación de cada uno de los elementos necesarios
para la escena 3D.
Figura 3.11. Código para generar la escena.
3.4.2.1. Escena.- Para la creación de la escena es necesario llamar al
constructor definido por Three.js, y será el lugar donde se almacenarán todos
los elementos creados.
3.4.2.2. Cámara.- Existen dos tipos de cámara que proporciona Three.js, que
se las puede emplear según el requerimiento, para éste caso se utilizó la
cámara de tipo perspectiva; para tener una visualización más real de la escena.
Los parámetros que se deben definir para la cámara son: ángulo de visón
vertical, relación de aspecto, valor cercano o inicial de la cámara y valor de la
distancia final de la cámara. Además, se puede asignar una posición con
coordenadas en (x, y, z) o por defecto será el origen, y finalmente añadirla a la
escena.
27
3.4.2.3. Lienzo.- Es el elemento en el cual se mostrará toda la escena 3D, es
decir, es el medio de enlace con el elemento canvas para renderizar los
gráficos 3D de WebGL. Se le debe proporcionar dimensiones de ancho y alto.
3.4.2.4. Luz ambiental.- Funciona como la luz natural que se obtiene de la
naturaleza, a ésta se le asigna el valor que corresponde a una luz blanca, para
iluminar la escena a la cual debe ser añadida.
3.4.2.5. Luz direccional.- Este tipo de luz se refleja o afecta a los elementos
de acuerdo a la dirección normalizada que se le indique, para este caso fue
asignada sobre el eje Y, y de color blanco de modo que influirá verticalmente
sobre los objetos de la escena a la cual fue enlazada.
3.5. Creación de geometrías
Three.js cuenta con una variedad de geometrías en 2D y 3D, que pueden ser
creadas al llamar al método e indicar los parámetros según la geometría,
adicionalmente la aplicación de materiales o texturas, transformaciones de
escalado, traslación, rotación en los ejes X, Y, Z; y posición en la escena.
En la figura 3.12 se muestra la creación de la geometría de un cilindro
especificando los parámetros de radio superior, radio inferior, altura, segmentos
y abertura en las caras superior e inferior, aplicada una textura de imagen a la
malla dando la apariencia de un nevado, obteniendo el resultado de la figura
3.13.
28
Figura 3.12. Código para crear una geometría.
Figura 3.13. Resultado de la geometría de un cilindro con textura de imagen.
Para generar elementos como el de la figura 3.13, se debe realizar los
siguientes pasos:
Crear la geometría (plano, cubo, esfera, cilindro, tetraedro, etc.)
Definir un color en formato rgb (rojo, verde, azul) o rgba (rojo, verde,
azul, transparencia) o cargar una textura de imagen con archivos .png,
.jpg u otros archivos de imagen y que estén almacenados en un
directorio dentro del proyecto.
Almacenar en una variable la malla de la geometría, asignado como
parámetros la geometría y la textura.
De ser necesario, la aplicación de transformaciones: rotación, traslación
o escalado.
Asignar una posición dentro de la escena.
Finalmente añadir el elemento a la escena.
29
Si el elemento fue creado dentro de una función, esta debe ser llamada luego
de ser creada para que se visualizado el elemento en la escena.
Figura 3.14. Ejemplos de otras geometrías con aplicación de texturas.
3.6. Modelado de personajes en Blender 2.76
Se indicará el proceso básico de modelado de un personaje diseñado en el
software libre, Blender 2.76 y que sirvió como recurso gráfico para la
aplicación. Los pasos generales para generar el personaje - hombre de la
región Costa son:
Usar imágenes de referencia, vista frontal y perfil. La imagen tiene el
aspecto de un hombre de 20 años de edad y estatura 160 cm, utilizando
una escala de 1:10.
Partir de una geometría básica, como es el cubo.
Utilizar modificadores para extruir el cubo.
Modificar secciones del cubo, como son: vértices, lados o caras.
Utilizar comandos propios de Blender para conseguir el modelo según la
imagen de referencia.
Aplicar el modificador espejo o mirror cuando el modelo sea simétrico
respecto a un eje para evitar doble trabajo.
Aplicar modificadores para dar suavidad a los polígonos formados en el
modelo y conseguir una malla realista.
Aplicar materiales (colores)
Aplicar texturas (imágenes)
30
Aplicar transformaciones de escalado, traslación o rotación de ser
necesario.
Para realizar la exportación del modelo 3D a formato .js, si no se dispone de la
opción de dicho Add-ons, éste debe ser instalado mediante un proceso sencillo
que se detalla en el Anexo B.
Figura 3.15. Vistas frontal y derecha en modo sólido y malla sin materiales.
Figura 3.16. Vistas frontal y derecha, en modo sólido y malla con materiales.
31
Figura 3.17. Aplicación de modificador Surface.
Figura 3.18. Partes del modelado, vista en modo sólido y malla.
32
Figura 3.19. Opción para exportación del modelo en formato .js
Figura 3.20. Opciones configurables para generar archivo hombreCosta.js
33
3.7. Carga de modelos 3D
Three.js tiene la posibilidad de cargar modelos 3D diseñados en software de
modelado. Para la aplicación se utilizó Blender 2.76, en el cual se modelaron
objetos como las personas con la vestimenta de cada región, fauna
característica de la zona y ciertos elementos más complejos de implementar
directamente con three.js.
El cargador que se utilizó para añadir los modelos 3D y que es uno de los que
proporciona three.js, es JSONLoader, el mismo que debe ser creado
inicialmente en una variable para luego cargar el modelo de tipo .js,
almacenado en un directorio del proyecto. La función recibe como primer
parámetro la geometría que es el modelo 3D, y como segundo parámetro el
material que corresponde a la textura o material aplicado al modelo. En lo
posterior debe ser creado como objeto 3D para que sea reconocido por three.js
y tratado como un objeto más aplicándole las transformaciones disponibles.
Figura 3.21. Código para la carga de un modelo 3D.
34
Figura 3.22. Código para la carga de otros modelos 3D.
En la línea 538 de la figura 3.22 se puede observar la posibilidad de clonar un
objeto, heredando todas las características de forma y texturizado, pero
añadiendo nuevas posiciones y aplicando transformaciones, obteniendo el
resultado de la figura 3.23.
Figura 3.23. Modelos 3D cargados en la escena.
35
Figura 3.24. Modelos 3D con materiales y texturas cargados en la escena.
3.8. CubeMap
Para obtener una escena cerrada, es decir; con un fondo de textura se
implementó la función cubeMap, que permite crear la geometría de un cubo y
aplicar imágenes como textura. El procedimiento consiste en crear y cargar
texturas para cubeMap (seis imágenes) que luego serán aplicadas a cada lado
del cubo, siguiendo el orden derecha, izquierda, arriba, abajo, adelante, atrás e
indicar el parámetro relacionado al lado o vista interna para aplicar la textura
correctamente. Al ser el cubeMap un objeto, se le puede asignar
transformaciones como la rotación, traslación, posición y dimensión antes de
añadirlo a la escena.
36
En la figura 3.26 se puede apreciar el fondo establecido para la región Sierra,
un fondo con montañas y un cielo azul que se conjuga acertadamente con la
escena 3D representando una muestra geográfica propia de la región.
Figura 3.25. Código de la función cubeMap
Figura 3.26. Resultado de la función cubeMap.
37
3.9. Animación
Luego de la implementación de los elementos de la escena, se añadió
movimiento a los elementos que representan la vestimenta y fauna de las
regiones con la finalidad de conseguir una escena dinámica.
Como se ha indicado anteriormente Three.js posee el uso de transformaciones
aplicables a los objetos, mediante las cuales se puede generar efectos de
movimiento. La rotación, traslación, condicionante if y juego de posiciones han
sido utilizadas para generar dinámica en la escena de cada una de las
regiones, logrando este objetivo con sólo pocas líneas de código, como se
muestra en las siguientes figuras.
Figura 3.27. Código para la animación de elementos de la escena.
En la figura 3.27 se muestra el código para generar la rotación y
desplazamiento de los elementos como es el cóndor, oveja, mujer y hombre.
Mientras que la figura 3.28 muestra el resultado de la animación donde se
puede apreciar las diferentes posiciones de los elementos en el transcurso del
tiempo.
38
Figura 3.28. Resultado de la animación de los elementos de la región Sierra.
3.10. Movimiento controlado por teclado
Una forma de interactividad que tendrá el usuario con la aplicación será la
opción de desplazamiento por la escena, mediante las flechas de dirección del
teclado. Para tal efecto se empleó una extensión de three.js llamada THREEx,
la misma que fue diseñada para el desarrollo de juegos, y parte de su
funcionalidad ,es permitir el trabajo con las teclas, capturando el evento de
acción en el teclado y efectuando alguna respuesta programada frente a la
acción del usuario.
Antes de utilizar ésta extensión, se debe almacenar el archivo
THREEx.KeyboardState.js en un directorio de la aplicación y enlazarla desde el
archivo HTML. En la programación del archivo .js respectivo, se debe
inicialmente crear una variable la cual será llamada para crear las condiciones
de acuerdo al uso de teclas. El código necesario para lograr el desplazamiento
se indica en la siguiente figura.
39
Figura 3.29. Código para el desplazamiento por la escena.
3.11. Organización del código por funciones
Para lograr una mejor ejecución del código y tener un orden adecuado en la
programación, el contenido de los archivos .js ha sido organizado o distribuido
en funciones, las cuales son:
Función empezarEscena
Función renderEscena
Función animarEscena
Función WebGLEmpezar
3.11.1. Función empezarEscena.- Contiene las clases necesarias para crear
la escena de la región, así como la programación para generar los elementos
3D de la escena.
3.11.2. Función renderEscena.- Es la encargada de enlazar los elementos
de la escena al lienzo y que están dentro del campo de visión de la cámara.
40
3.11.3. Función animarEscena.- La funcionalidad del movimiento está
programada en esta función, la animación de los elementos así como el
desplazamiento por la escena. El bucle de render requestAnimationFrame tiene
una gran ventaja al momento de renderizar la escena debido a que ésta se
ejecutara sólo cuando la navegación este activa, ahorrando recursos del
equipo.
El efecto de movimiento o animación se genera debido a que el bucle de render
se ejecuta cada 60 segundos, lo cual es una secuencia de imágenes en
diferentes posiciones que transcurren tan rápido, que se podría decir son
imperceptibles al ojo humano generando la sensación de movimiento.
3.11.4. Función WeGLEmpezar.- Dentro de esta función se llama a las
funciones detalladas anteriormente para que sean ejecutadas, y ver el
renderizado de la escena en el navegador.
La implementación del código que constituye el proyecto se encuentra en el
Anexo C, donde se muestra todo la programación de los archivos .html y .js
que dan como resultado la aplicación del ambiente virtual 3D, que ayudará al
proceso de enseñanza del bloque curricular 5: Mi país y Yo; para que los niños
del primer año de la escuela “Ángel Isaac Chiriboga” conozcan una muestra
geográfica básica de las regiones del Ecuador, así como la vestimenta,
productos, platos típicos, fauna y clima que caracteriza a cada región.
41
4. RESULTADOS
Los resultados obtenidos tras la implementación, en un equipo con las
características que se detallan en seguida, fueron satisfactorios y enmarcados
en el objetivo del presente trabajo.
4.1. Especificaciones técnicas del equipo
Resolución de pantalla 1360 x 768, recomendada.
Sistema Operativo Windows 7 Professional, de 32 bits.
Service Pack 1.
Procesador AMD Athlon de 3.00 GHz.
Memoria RAM 4.00 GB.
Adaptador de pantalla GeForce 6150SE nForce 430, de 64 MB de
memoria para video.
4.2. Software
Archivos de la aplicación.
Navegador Mozilla Firefox actualizado.
4.3. Resultado de la ventana principal
La pantalla principal o de inicio, que permite acceder a cada una de las
escenas 3D, de las regiones Costa o Litoral, Sierra o Andina, Oriental o
Amazonía e Insular o Islas Galápagos. Conjuntamente, se muestra una
pequeña introducción referente a los temas que se verán en la aplicación,
mediante un pictograma, y un mapa del Ecuador dividido por regiones.
42
Figura 4.1. Ventana de inicio de la aplicación.
4.4. Resultado de la ventana - región Costa o Litoral
Accediendo a la opción de la región Costa o Litoral, se observa, una sección de
botones de enlace, botón de audio, una sección de botones, ícono de
información y en gran tamaño la escena 3D representada geográficamente.
Figura 4.2. Ventana de la región Costa.
43
Figura 4.3. Botones de enlace a ventanas de inicio y regiones.
Figura 4.4. Botón de activación de audio.
Figura 4.5. Botón de información de instrucciones.
Figura 4.6. Ventana de instrucciones.
44
Figura 4.7. Representación geográfica de la Costa.
Figura 4.8. Botones para información detallada.
Figura 4.9. Información detallada de la opción Productos.
45
Figura 4.10. Información detallada de la opción Fauna.
4.5. Resultado de la ventana - Región Sierra o Andina
En las siguientes figuras se muestra parte del resultado obtenido tras la
implementación de la región Sierra o Andina.
Figura 4.11. Representación geográfica de la Sierra.
46
Figura 4.12. Información detallada de la opción Vestimenta.
Figura 4.13. Información detallada de la opción Platos típicos.
4.6. Resultado de la ventana - Región Oriental o Amazonía
En las siguientes figuras se muestra la representación geográfica, así como
dos opciones de información detallada, respecto a la fauna y clima de la región.
47
Figura 4.14. Representación geográfica de la Amazonía.
Figura 4.15. Información detallada de la opción Fauna.
48
Figura 4.16. Información detallada de la opción Clima.
4.7. Resultado de la ventana - Región Insular o Islas Galápagos
Finalmente, se muestran los resultados de la región Insular o Islas Galápagos.
Figura 4.17. Representación geográfica de las Islas Galápagos.
49
Figura 4.18. Información detallada de la opción Productos.
Figura 4.19. Información detallada de la opción Fauna.
50
Luego de la implementación del ambiente virtual 3D, y posterior a las pruebas
de funcionalidad, se realizó un análisis del impacto de la aplicación en los
usuarios beneficiarios, presentando la aplicación a las docentes de la escuela
“Ángel Isaac Chiriboga”; las mismas que aceptaron la aplicación como una
herramienta tecnológica en beneficio del proceso de enseñanza y aprendizaje
de los alumnos del primer año de educación básica, e incluso a los niños del
inicial como una breve introducción al uso de herramientas tecnológicas.
La herramienta fue presentada a las docentes, debido a que son ellas las
encargadas de utilizarla de acuerdo a las planificaciones realizadas.
Los resultados que se obtuvieron, luego de aplicar un cuestionario a las
docentes que corresponden a una población del 100% de la escuela, indican lo
siguiente:
El uso de herramientas tecnológicas para el proceso de enseñanza es
importante porque es un medio de aprendizaje dinámico permitiendo al
alumno una mejor atención y estimulación mientras aprende.
El 100% de las docentes indican que, la aplicación muestra una
representación geográfica que permitirá a los alumnos aprender sobre las
regiones naturales del Ecuador y sus características, puesto que los
elementos gráficos, información y objetos 3D utilizados emiten el mansaje de
manera clara.
El 100% de las docentes manifestaron que, los niños son muy hábiles y que
la aplicación muestra navegabilidad apta para su edad, y mucho más en
acompañamiento de una persona adulta, esto en una primera visita y
posterior a ello, indicaron que los niños podrían acceder solos por la facilidad
que presenta la aplicación.
Finalmente, las docentes concluyeron que la aplicación se convierte en una
herramienta tecnológica creada bajo parámetros pedagógicos, y que es una
muestra clara de aprovechar la tecnología en beneficio del área educativa.
51
5. CONCLUSIONES
Luego de analizar las diferentes herramientas que existen para generar
ambientes 3D, se seleccionó el lenguaje JavaScript que se ajusta con la
plataforma three.js para trabajar en el contexto WebGL, obteniendo un
resultado ventajoso en la programación y resultado final.
Luego de analizar varios estudios pedagógicos y trabajos relacionados a
la temática, se ha determinado que el niño aprende más ágilmente con
ambientes gráficos, en tal sentido se consideró para la implementación de
éste proyecto el contenido del Plan Curricular del Primer Año de
Educación General Básica del Ministerio de Educación. Además, con el
propósito de no redundar con información y para que el niño capte
prontamente se simplificó los escenarios, añadiendo elementos distintivos
de cada región, consiguiendo una muestra geográfica básica de las
regiones en beneficio del aprendizaje de los alumnos de la escuela fiscal
“Ángel Isaac Chiriboga”.
La metodología utilizada, OOHDM, permitió conseguir los resultados
planteados inicialmente, ya que con la estructura de sus diferentes etapas
se desarrolló eficazmente, el diseño, la navegabilidad, las interfaces y
finalmente la implementación del presente trabajo. En consecuencia, la
metodología se acopló propiciamente al desarrollo integro de la
aplicación, ambiente virtual 3D, logrando el objetivo trazado.
Uno de los factores que ayudó al éxito del trabajo, fue la labor coordinada
que se mantuvo con la docente del primer año, en las etapas de diseño y
pruebas de la aplicación, valorando su profesionalismo para alcanzar la
eficacia del producto final.
52
6. RECOMENDACIONES
Una ampliación al presente trabajo, sería en un futuro la implementación
para dispositivos móviles, aprovechando las ventajas que presenta la
librería three.js para aplicaciones ejecutables en este tipo de
dispositivos.
Se sugiere para una mayor rapidez en el despliegue del ambiente virtual
3D, disponer de un equipo con un procesador gráfico de capacidad
aceptable para no tener inconvenientes al renderizar las escenas 3D en
el navegador.
Al modelar en Blender los personajes, no se debe aplicar modificadores
que causen una gran cantidad de polígonos en la malla de los objetos,
debido a que este proceso ocasiona un mayor tamaño en los archivos
afectando directamente en la renderización de los objetos 3D.
Se debe considerar la versión de la librería three.js utilizada, debido a
que por las actualizaciones se realizan cambios que pueden afectar en
determinadas clases o métodos, ocasionando un resultado diferente al
esperado o incluso errores en la programación que realmente tienen otro
fondo.
Al obtener buenos resultados en este proyecto, es viable desarrollar
aplicaciones para otras asignaturas en beneficio de los estudiantes del
primer año de educación general básica, de tal modo, se aportaría con
herramientas tecnológicas para que los niños el proceso de aprendizaje,
asimismo, se relacionen con la tecnología desde temprana edad y sepan
aprovecharla adecuadamente en beneficio propio.
53
GLOSARIO
ADD-ONS: Componente para agregar funciones específicas en determinado
software.
API: Aplication Programming Interface, interface de programación de
aplicaciones.
BREAKPOINTS: Puntos que se indican en el código para analizar la
programación.
CUBE MAP: Secuencia de imágenes que al unirse dan una vista panorámica.
GLSL: Lenguaje de programación de sombreado.
GPU: Graphics Processor Unit, unidad de procesamiento gráfico.
MODIFICADOR: Herramienta utilizada en Blender 2.76 para dar efectos de
forma en los modelos 3D.
NODO: Clase propia de la metodología OOHDM utilizada en el diseño
navegacional.
OOHDM: Object Oriented Hypermedia Design Model, metodología utilizada
para el desarrollo de aplicaciones web.
OPENGL: Librería gráfica para realizar gráficos 2D y 3D.
PLATAFORMA: Sustento en que se basa algo para desarrollarse.
54
PLUG-INS: Componente que se agrega para añadir características o
funcionalidades específicas.
SHADERS: Permiten realizar transformaciones y efectos especiales mediante
programación.
SPRITES: Mapa de bits que se dibujan en pantalla.
VENTANA MODAL: Ventana que se sobrepone a todas las demás de la
aplicación, y que contiene información.
55
BIBLIOGRAFÍA
1. CUBEMAP VIEWER. (4 de noviembre de 2012). Recuperado de:
http://www.humus.name/index.php?page=Textures&start=136
2. DESARROLLOWEB.COM. (s.f.). Manual de Canvas del HTML5.
Recuperado de: http://www.desarrolloweb.com/manuales/manual-
canvas-html5.html
3. DIRKSEN, Jos. (2013). Learning Three.js: The JavaScript 3D Library for
WebGL. Birmingham: Packt Publishing Ltd.
4. DOBARRO, A.; GONZÁLEZ de Canales; E. & BARROS, J. (s.f.). Tutorial
Blender. [05 de enero de 2016]. Recuperado de:
http://sabia.tic.udc.es/gc/Contenidos%20adicionales/trabajos/Tutoriales/b
lender/cinco_siete.html
5. ECHEVERRIA, Mónica. (2009). Diseño de un sitio web para la venta de
suministros de oficina y material publicitario de la empresa Accountant’s
& Equipaments Office. (Trabajo de grado, Escuela Politécnica Nacional).
Recuperado de: http://bibdigital.epn.edu.ec/bitstream/15000/1534/1/CD-
2195.pdf
6. GRAPHIC-SIM. (s.f.). Basic Model Export. Recuperado de:
http://graphic-sim.com/B_basic_export.html
7. GRUPO SANTILLANA. (2010). Mi país y yo: Primer Año. De acuerdo al
nuevo currículo de la Educación General Básica. Quito: Santillana.
8. MORALES, Y.; TORRES, F. (febrero 2011). OOHDM. [15 de diciembre
de 2015]. Recuperado de: https://oohdm.wordpress.com/
56
9. ONLINE-CONVERT.COM. (s.f). Convierte tu audio de un formato a otro.
Recuperado de: http://audio.online-convert.com/es
10. TF3DM. (2014). 3D Models. Recuperado de: http://tf3dm.com/3d-
models/all
11. THREEJS.ORG. (s.f.). three.js / examples. Recuperado de:
http://threejs.org/examples/#webgl_animation_scene
12. THREE.JS. (s.f.). three.js / docs. Recuperado de:
http://threejs.org/docs/index.html#Manual/Introduction/Creating_a_scene
57
ANEXOS
1
Activación de WebGL en Mozilla Firefox
1. Abrir el navegador Mozilla Firefox y escribir en la barra de direcciones:
get.webgl.org
Si se muestra la siguiente pantalla indica que el navegador tiene activado WebGL.
Si el resultado es la siguiente imagen se requiere activar WebGL.
ANEXO A
2
2. En la barra de direcciones escribir about:config, donde se visualizará un mensaje de advertencia al cual deberá indicar ¡Tendré cuidado, lo prometo!
3. En la barra de búsqueda escribir webgl, aparecerá un listado en el cual se debe
ubicar webgl.force-enabled, dar clic derecho y seleccionar la opción Modificar
cambiando el valor a true (activado).
4. Habilitar la opción layers.acceleration.force-enabled, siguiendo el
procedimiento de búsqueda y activación del paso 3.
3
5. En el buscador tipiar gfx.direct para habilitar gfx.direct2d.force-enabled.
6. Clic en el botón Menú del navegador para salir correctamente.
7. Iniciar nuevamente el navegador Mozilla Firefox y escribir en la barra de
direcciones get.webgl.org para comprobar la activación de WebGL. El cubo en
movimiento asegura la activación correcta.
4
Activación del add-ons en Blender 2.76
1. Adquirir el Add-ons para three.js y almacenarlo en el directorio donde se encuentra
la carpeta addons de Blender 2.76. Para éste caso el directorio es: C:\Program
Files\BlenderFoundation\Blender\2.76\scripts\addons\
2. Cargar Blender 2.76 y seleccionar: File > User Preferences… (Ctrl Alt U) para
visualizar la siguiente ventana. Seleccionar la pestaña Add-ons.
ANEXO B
5
3. En la barra de búsqueda escribir three.js o ubicarla en el listado derecho, activar la
casilla y dar clic en la opción Save User Settings.
4. Cerrar la ventana y asegurarse que la activación del Add-ons para three.js se
efectuó correctamente. Para ello seleccionar en la ventana principal de Blender
2.76 la opción: File > Exporter, donde se mostrará la opción Three.js
6
Código
Debido a la extensión del código, este anexo se presenta en un CD con los siguientes
archivos.
Archivos .html:
ambienteCosta.html
ambienteInsular.html
ambienteOriente.html
ambienteSierra.html
index.html
Archivos .js:
ambienteCosta.js
ambienteInsular. js
ambienteOriente.js
ambienteSierra.js
script.js
Archivos .css:
style.css
ANEXO C
7
Manual de usuario
Ingresar a la aplicación desde el archivo index.html, dando doble click si está
establecido el navegador Mozilla Firefox como predeterminado, caso contrario; dar
click derecho y seleccionar la opción Abrir con, y seleccionar Firefox.
La aplicación se ejecutará mostrando la página principal.
Para reproducir la música de fondo “A mi lindo Ecuador” hacer clic sobre la región
del pictograma (texto en la parte superior central), y doble click para desactivarla.
Click sobre el botón que corresponde a la región deseada para acceder a la
escena 3D de la región. (para el manual de usuario se seleccionará la región
Oriental o Amazonía)
ANEXO D
8
Desplazarse sobre el botón de información para leer las instrucciones, luego
cerrar la ventana.
Si el usuario desea activar la música de fondo de la región mientras realiza el
recorrido y las actividades, hacer click sobre el ícono de audio y cuando desee
detenerlo hacer doble click. El ícono cambia indicando si la reproducción está
activa o no.
Iniciar el recorrido mediante las flechas de dirección del teclado.
Click / Activar
Doble click / Desactivar
9
Click sobre las opciones de vestimenta, productos, platos típicos, fauna o clima
para conocer información detallada acerca de cada una de ellas. Se mostrará
dicha información en una nueva ventana.
Click en vestimenta. Cerrar.
Click en productos. Cerrar.
10
Click en platos típicos. Cerrar.
Click en fauna. Cerrar.
11
Click en clima. Cerrar.
Click en los botones de las regiones para acceder a cada una de ellas,
exceptuando en la que se encuentra, que para este caso sería la región Oriental o
Amazonía, e Inicio que permite regresar a la página principal.
Para salir de la aplicación cierre la ventana del navegador.
12
Especificaciones técnicas
La aplicación ha sido probada obteniendo buenos resultados, en un equipo de
escritorio con las siguientes características:
Resolución de pantalla (1360 x 768 - Recomendada)
Windows 7 Professional
Service Pack 1
Procesador AMD Athlon de 3.00 GHz
Memoria RAM 4.00 GB
Sistema Operativo de 32 bits
Adaptador de pantalla GeForce 6150SE nForce 430, de 64 MB de memoria para
video (se recomienda mayor capacidad).
Software necesario:
Navegador Mozilla Firefox (actualizado)
Microsoft DirectX
Aplicación
Debido a que la aplicación esta implementada para plataforma web, la misma estará
alojada en un servidor externo, o en un equipo que hará las funciones de servidor.
Mientras que los usuarios podrán acceder desde sus respectivos equipos por conexión
web.
Fuente: Imagen tomada de http://definicion.de/servidor/
Aplicación
alojada en
servidor
Accede usuario 3
Accede usuario 2
Accede usuario 1
ANEXO E
13
Plan curricular del primer año de educación general básica
ANEXO F
14
Fuente: Plan Curricular del Primer Año de Educación General Básica, emitido por el
Ministerio de Educación del Ecuador.
15
Encuesta a docentes de la escuela “Ángel Isaac Chiriboga”
ANEXO G
16
17
18
Carta de presentación del proyecto en la escuela “Ángel Isaac Chiriboga”
ANEXO H