Aplicaciones 3D con WebGL JUAN CARLOS CONDE RAMÍREZ COMPUTER ANIMATION

Un motor 3D de JavaScript, I “La necesidad es la madre de la invención.” – Susanna Centlivre

•Existen bastantes buenas librerías de código abierto disponibles para el desarrollo de aplicaciones WebGL, entre las que se encuentran: ◦ GLGE (http://www.glge.org/)

◦ SceneJS (http://scenejs.org/) ◦ CubicVR (http://cubicvr.org/)

FCC-BUAP

2

Un motor 3D de JavaScript, II •Cada librería hace las cosas un poco diferente, pero comparten el objetivo de implementar funciones de alto nivel y amigables para el desarrollo con WebGL. •La librería que se usará por ahora se llama Three.js, creación de Mr.doob, también conocido como Ricardo Cabello Miguel, un programador Web originario de Barcelona, España. •Three.js proporciona un fácil e intuitivo conjunto funciones para la creación y manipulación de objetos, usualmente 3D. Es poderoso, su código fuente está alojado en GitHub y es mantenido continuamente por varios autores. Por si fuera poco, es considerado como uno de los motores líder del área.

FCC-BUAP

3

Un motor 3D de JavaScript, III •Posiblemente tú quieras desarrollar tu propio motor 3D para WebGL, pero antes de hacerlo, deberías echarle un vistazo al gran trabajo ya se ha hecho para WebGL. •El hecho de que existan diversos toolkits como Three.js se debe, en gran parte, a la potencia de las máquinas virtuales (VM) de JavaScript dentro de los navegadores Web en los últimos años. •A través del curso, harás uso extensivo de Three.js, pero por ahora vale la pena presentar un breve resumen de lo que este motor tiene para ofrecer.

FCC-BUAP

4

Alcance de Three.js , I •Three.js oculta los detalles de renderizado 3D ◦ Abstrae los detalles del API de WebGL, representando tanto escenas 3D como mallas, materiales y luces (i.e. los elementos típicos con los que trabajan los programadores).

•Three.js es orientado a objetos ◦ Los programadores trabajan con verdaderos objetos JavaScript en lugar de sólo hacer llamadas a funciones escritas en JavaScript.

•Three.js es rico en características y funciones ◦ Se trata de algo más que sólo una envoltura para el API de WebGL, Three.js contiene muchos objetos pre-construidos útiles para el desarrollo de juegos, animaciones, presentaciones, modelos en alta resolución y efectos especiales.

FCC-BUAP

5

Alcance de Three.js , II •Three.js es de rápida ejecución ◦ Emplea las mejores prácticas en desarrollo de gráficos 3D para mantener un alto rendimiento sin sacrificar usabilidad.

•Three.js soporta interacción con el usuario ◦ WebGL no proporciona soporte nativo para la “selección” de objetos. Three.js tiene un sólido soporte para dicha selección, facilitando así la creación de aplicaciones interactivas.

•Three.js se ocupa de la matemática inherente ◦ Tiene objetos poderosos y fáciles de usar para el manejo de la matemática 3D implícita, tales como vectores, matrices y proyecciones.

FCC-BUAP

6

Alcance de Three.js , III •Three.js soporta archivos en formatos predeterminados ◦ Es posible cargar archivos en formatos de “texto” exportados por paquetes populares de modelado 3D; incluso hay formatos binarios y formatos en JSON específicos para Three.js

•Three.js es extensible ◦ Three.js es completamente fácil de personalizar, así como de agregar nuevas características. Si por ejemplo no existe el tipo de dato que se necesita, éste puede ser creado, integrado y usado.

•Three.js también funciona con el canvas 2D de HTML5 ◦ También puede renderizar contenido en un canvas 2D, en caso de que el canvas 3D no sea compatible con el navegador, permitiendo así que la excepción sea manejada elegantemente por otra solución.

FCC-BUAP

7

Alcance de Three.js , IV •Sin embargo, también es importante mencionar algunas de las cosas que NO hace Three.js ◦ No es un motor de juegos o una plataforma de mundo virtual. Carece de algunas de las funciones más comunes de esos sistemas como barras publicitarias, avatares y física. ◦ Tampoco tiene el soporte de red integrado que se podría esperar si se estuviera programado un juego multijugador.

•Si se requieren dichas funcionalidades, estas se tendrían que desarrollar sobre Three.js. Aún así, su poder y simplicidad hacen de Three.js una excelente herramienta para comenzar el viaje con WebGL.

FCC-BUAP

8

Configuración de Three.js , I •El primer paso es obtener el último paquete de Three.js, para esto se tienen dos opciones: 1. Obtenerlo desde la rama “master” en GitHub, ya sea clonando el directorio o descargándolo en forma de Zip en: https://github.com/mrdoob/three.js/tree/master 2. Descargando el paquete comprimido desde el sitio Web oficial ubicado en: https://threejs.org/

•Una vez con el paquete descargado, se puede usar la versión minimalista localizada en build/Three.js. Pero también se puede utilizar la versión completa ubicada en la carpeta src. •La documentación del API disponible en el directorio de GIT es muy básica, por lo que se recomienda usar la que está disponible en el sitio Web.

FCC-BUAP

9

Configuración de Three.js , II •Three.js está construido con el Compilador Closure de Google (Google Closure Compiler); el archivo principal contiene la librería completa de Three.js construida a partir de varios archivos fuente separados. ◦ Se puede visitar https://developers.google.com/closure/compiler, si no se está familiarizado con Closure y se requiere saber más al respecto. ◦ Si no se quiere lidiar con este concepto, se puede tratar a Three.js como una caja negra por ahora.

•Se recomienda dedicar un tiempo para revisar la documentación introductoria y a familiarizarse con Three.js, o al menos se sugiere probar los ejemplos disponibles en la carpeta examples.

FCC-BUAP

10

Una página simple, I •El objetivo de este ejercicio es demostrar lo simple que es poner en marcha Three.js. •Por lo tanto a continuación se muestra el código completo que muestra una nueva versión del programa que dibuja un cuadrado (mostrado anteriormente). •La diferencia entre este ejemplo y el anterior es que se usan sólo 30 líneas en lugar de 150, además del uso de un conjunto de objetos en lugar de un conjunto de buffers. A continuación Ejemplo2-1. Una página simple usando Three.js.

FCC-BUAP

11

Una página simple, II A Simple Three.js Page function onLoad() { // Se obtiene el elemento div con el id “container” var container = document.getElementById("container"); // Se crea el objeto renderer de Three.js, para el renderizado de la escena var renderer = new THREE.WebGLRenderer(); // Se construye el objeto renderer del mismo tamaño del contenedor renderer.setSize(container.offsetWidth, container.offsetHeight); // Se agrega el objeto renderer al contenedor como un elemento DOM hijo container.appendChild( renderer.domElement );

FCC-BUAP

12

Una página simple, III // Se crea una nueva escena Three.js var scene = new THREE.Scene(); // Se crea una cámara y se agrega esta a la escena var camera = new THREE.PerspectiveCamera( 45, container.offsetWidth / container.offsetHeight, 1, 4000 ); camera.position.set( 0, 0, 3.3333 ); scene.add( camera ); // Ahora, se crea un rectánculo y se agrega éste a la escena var geometry = new THREE.PlaneGeometry(1, 1); var mesh = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( ) ); scene.add( mesh ); // Se renderiza la escena percibida a través de la cámara renderer.render( scene, camera ); }

FCC-BUAP

13

Una página simple, IV