UNIVERSIDAD CENTRAL DEL ECUADOR FACULTAD DE … · Modelado de personajes en Blender 2.76 ......

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

[email protected]

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


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

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.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


xii

RESUMEN

“IMPLEMENTACIÓN DE UN AMBIENTE VIRTUAL 3D, PARA LA


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


- Canvas


- Botón sonido

REGIÓN INSULAR

- Botones de enlace


- Canvas


- Botón sonido

REGIÓN SIERRA

- Botones de enlace


- Canvas


- 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



Canvas

Información

Audio de la Sierra


Recorrido



Inicio - Costa - Sierra - Insular



Canvas

Información

Audio del Oriente


Recorrido



Inicio - Costa -Sierra - Oriental



Canvas

Información

Audio Insular


Recorrido



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.


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.


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

18

Carta de presentación del proyecto en la escuela “Ángel Isaac Chiriboga”

ANEXO H

UNIVERSIDAD CENTRAL DEL ECUADOR FACULTAD DE … · Modelado de personajes en Blender 2.76 ......

Documents

Transcript of UNIVERSIDAD CENTRAL DEL ECUADOR FACULTAD DE … · Modelado de personajes en Blender 2.76 ......