Introducción a WebGL JUAN CARLOS CONDE RAMÍREZ COMPUTER ANIMATION

Transcripción

1 Introducción a WebGL JUAN CARLOS CONDE RAMÍREZ COMPUTER ANIMATION

2 Motivación, I Imagina Un interactivo campo de medusas vivas, con cientos de medusas pulsantes y rayos de Sol atravesando la superficie del océano hasta las profundidades que se hacen cada vez más turbias todo esto bajo tu control. Una simulación de realidad virtual en red del cuerpo humano, incluyendo esqueleto, sistema circulatorio y otros sistemas vitales puedes desplegar las capas del cuerpo, colocar marcas en partes interesantes para futuras referencias y compartir un hipervínculo con tus colegas y estudiantes. Un universo multijugador masivo e inmersivo, repleto de tus amigos y seguidores de Twitter. FCC-BUAP 2

3 Motivación, II No, no has entrado accidentalmente a una dimensión desconocida o estas leyendo un episodio de tu serie de ciencia ficción favorita, ni tampoco estamos hablando de un tráiler de la última película dirigida por Ridley Scott FCC-BUAP 3

4 Motivación, III by Aleksander Rodic Este es el futuro ejecutándose sobre tu navegador Web favorito justo ahora! Y se llama WebGL FCC-BUAP 4

5 Qué es WebGL?, I Es el nuevo estándar para la creación y visualización de gráficos 3D en la Web. Con WebGL los desarrolladores pueden aprovechar al máximo el poder de cómputo de las tarjetas aceleradoras de gráficos usando sólo: JavaScript Un navegador Web Un API Web estándar Antes de WebGL, los desarrolladores dependían de plug-ins o aplicaciones nativas y tener que pedir a los usuarios que descargarán e instalaran software personalizado con el fin de lograr una verdadera experiencia 3D. FCC-BUAP 5

6 Qué es WebGL?, II WebGL es parte de la familia de tecnologías de HTML5. Aunque no se encontraba en la especificación oficial, esta tecnología es compatible con la mayoría de los navegadores que soportan HTML5. Tal como lo fueron los Web Workers*, Web Sockets y otras tecnologías fuera de las recomendaciones oficiales de la W3C, WebGL es un componente esencial de una suite emergente que está transformando los navegadores Web modernos en una plataforma de aplicaciones de Primera Clase. *JavaScript corriendo en segundo plano que no afecta el rendimiento de la pagina Web. FCC-BUAP 6

7 Qué es WebGL?, III WebGL funciona en la mayoría de computadoras y dispositivos móviles (navegadores). Existen cientos, por no decir miles, de sitios, aplicaciones y herramientas siendo desarrollados con WebGL en este momento. Las aplicaciones más populares van desde juegos hasta visualizaciones de datos, diseño asistido por computadora y ventas. FCC-BUAP 7

8 Qué es WebGL?, IV Aunque la naturaleza de bajo-nivel del API de WebGL pudiera parecer desalentadora al principio, existen varias toolkit open-source de JavaScript que realizan el trabajo pesado del desarrollo. No sería bueno exagerar al respecto dado que el 3D aún es un trabajo complejo pero estas herramientas hacen posible el incursionar en el negocio de WebGL a meros mortales con modesta experiencia en el desarrollo Web. Así que quizás, finalmente, es tu momento para crear aquel gran juego que siempre quisiste desarrollar. O tal vez hoy es el día en que impresiones a tu profesor con un deslumbrante gráfico introductorio para tu página personal. FCC-BUAP 8

9 WebGL: definición técnica, I El Grupo Khronos se encarga de desarrollar y mantener WebGL, que es el organismo de estándares que rige OpenGL, COLLADA, y otras especificaciones de las cuales quizá ya hayas escuchado. A continuación la descripción oficial de WebGL: WebGL es una API multiplataforma libre de regalías que lleva a OpenGL ES 2.0 a la Web así como un contexto de dibujado 3D dentro de HTML, es presentado como una interfaz de DOM (Document Object Model) de bajo nivel. Usa los Lenguajes Shader de OpenGL (GLSL ES) y puede ser claramente combinado con otro tipo de contenido Web organizado en capas, ya sea por encima o debajo del contenido 3D. Es idealmente adecuado para aplicaciones Web 3D dinámicas escritas en JavaScript, totalmente integradas a los principales navegadores Web. FCC-BUAP 9

10 WebGL: definición técnica, II La definición anterior comprende varias ideas importantes: 1. WebGL es un API. WebGL es accesible exclusivamente a través de un conjunto de instrucciones de JavaScript (interfaces); no existen etiquetas complementarias como las de HTML. El renderizado 3D es análogo al dibujado 2D usando el elemento Canvas dentro del cual se efectúan todas las llamadas al API en JavaScript. De hecho, el acceso a WebGL es proporcionado por el elemento Canvas existente pero definiendo un contexto especifico para WebGL. 2. WebGL está basado en OpenGL ES 2.0. Se trata de una adaptación del bien conocido estándar de renderizado 3D OpenGL. Las letras ES significan Embedded Systems, es decir, para sistemas embebidos (móviles). OpenGL ES es el API que da poder gráfico 3D a dispositivos como el iphone, ipad, y dispositivos con Android. Debido a las características de OpenGL ES se consideró que basar WebGL en este estándar era lo más viable. FCC-BUAP 10

11 WebGL: definición técnica, III 3. WebGL se combina con otro tipo de contenido. El lienzo de dibujado 3D puede tomar sólo una porción de la página, o la página completa. Éste puede residir dentro de etiquetas <div> ordenadas en z (profundidad). Esto significa que puedes desarrollar gráficos 3D usando WebGL, pero todos tus otros componentes son construidos usando el viejo y familiar HTML. El navegador compone o combina todos los gráficos de la página en una experiencia completa para el usuario. 4. WebGL está hecho para aplicaciones Web dinámicas. WebGL fue diseñado con el objetivo de proporcionar una experiencia completamente Web. 5. WebGL es multiplataforma. WebGL es capaz de ejecutarse sobre cualquier S.O. y en la mayoría de los dispositivo de cómputo actuales. FCC-BUAP 11

12 WebGL: definición técnica, IV 6. WebGL es libre de regalías Como toda especificación Web abierta, WebGL es gratis para usarse. Nadie te pedirá que pagues regalías por el privilegio. Los creadores de Chrome, Firefox, Safari y Opera han proporcionado recursos significativos para desarrollar y dar soporte a WebGL, además de que muchos de los ingenieros de estos equipos también son miembros del grupo de trabajo que desarrolla la especificación. FCC-BUAP 12

13 Gráficos 3D una guía, I Las matemáticas son difíciles! Barbie Tan sexista como la infame nota anterior puede parecer, se tiene que decir que siempre que se programa algo en 3D, todos al igual que Barbie, sentimos una gran necesidad de disfrutar de una terapia de compras.. evadir el problema. Es difícil y a menudo involucra más que sólo matemáticas. Afortunadamente, no tienes que ser un genio de las matemáticas para construir algo con WebGL; la idea es usar librerías que realicen la mayor parte del trabajo pesado. FCC-BUAP 13

14 Gráficos 3D una guía, II Sin embargo, es importante entender qué sucede detrás del telón, es por eso que a continuación se resumen los tópicos necesarios para el desarrollo de gráficos 3D interactivos. Sistemas de coordenadas 2D y 3D Modelos 3D, mallas, polígonos y vértices Materiales, Texturas y Luces Transformaciones y Matrices Cámaras, Vistas, Viewports y Proyecciones Shaders FCC-BUAP 14

15 Gráficos 3D una guía, III Cámara, Viewport, y Proyección FCC-BUAP 15

16 Gráficos 3D una guía, IV Durante el curso se revisarán con detalle cada uno de los tópicos mencionados anteriormente, pero orientados hacia el desarrollo de gráficos 3D usando WebGL. Sin embargo, por lo complejo del tema y suponiendo que ya tienes conocimientos básicos, conviene dar una introducción y definir de una vez de qué se tratan los Shaders FCC-BUAP 16

17 Shaders: panorama, I Con el objetivo de renderizar* la imagen final de una escena (o simplemente una malla 3D) un desarrollador debe definir exactamente cómo interactúan entre sí vértices, transformaciones, materiales, luces y cámaras para crear dicha imagen. Esto es posible utilizando shaders. Un shader, conocido también como shader programable, es un trozo de código que implementa algoritmos para obtener los pixeles de la malla que se mostrarán en pantalla. En otras palabras, los shaders brindan al programador control total sobre cada vértice y pixel que es renderizado. Este poder puede ser usado para crear los efectos más asombrosos; desde un foto-realismo misterioso hasta fantasías caricaturescas. *Proceso de generar una imagen o vídeo mediante el cálculo de iluminación partiendo de un modelo en 3D. FCC-BUAP 17

18 Shaders: panorama, II Usualmente los shaders se definen en un lenguaje de alto nivel como C, y compilados dentro del código utilizado por la GPU. Los dispositivos de cómputo más modernos vienen equipados con una GPU, que es un procesador separado del CPU dedicado al renderizado de gráficos 3D. A diferencia de muchos sistemas gráficos, donde los shaders son una característica opcional y/o avanzada, los shaders son un requerimiento para WebGL. Es decir, cuando programes con WebGL, debes definir shaders o tus gráficos no se mostrarán en pantalla! Las implementaciones de WebGL asumen la presencia de una GPU que comprende vértices, texturas y un poco más; no tiene idea de material o iluminación. La traslación entre estas dos entradas de alto nivel y lo que la GPU pone en pantalla es realizado por el shader, y el shader es creado por el desarrollador. FCC-BUAP 18

19 Shaders: panorama, III La programación de shaders puede ser bastante intimidante al principio, así como escribir un programa en C (aunque sea corto). Pareciese un precio terriblemente alto sólo por obtener una imagen en pantalla. Sin embargo, existen muchas librerías populares escritas para WebGL que vienen con shaders pre-construidos que puedes simplemente añadir a tu código y que son lo suficientemente poderosas para cubrir todas tus necesidades relacionadas con shaders. FCC-BUAP 19