1. WEBGL

2. —
WebGL es una especificación estándar que está
siendo desarrollada actualmente para mostrar
gráficos en 3D en navegadores web.
—
El WebGL permite mostrar gráficos en 3D acelerados
por hardware (GPU) en páginas web (sin plug-ins)
—
Técnicamente es un API para javascript que permite
usar la implementación nativa de OpenGL ES 2.0
—
WebGL es gestionado por el consorcio de tecnología
sin ánimo de lucro Khronos Group .
¿Que es WebGL?

3. — Grupo
de trabajo:
Apple, Google, Mozilla, y Opera
— Builds:
Mozilla Firefox, Mozilla Fennec, Google
Chrome, Internet Explorer 11 y Safari 5.1
Compatibilidad de WebGL

4. — Basado
en OpenGL ES 2.0
— Proporciona una API para gráficos 3D
— Utiliza el elemento canvas HTML5
— Javascript gestiona la memoria
Diseño de WebGL

5. — WebGL
es una tecnología diseñada para
trabajar directamente con el GPU es difícil
de codificar en comparación con otros
estándares web más accesibles.
— Nace
entonces la biblioteca: THREE.js
Bibliotecas - WebGL

6. — THREE.js
Es una biblioteca liviana escrita
en JavaScript para crear y mostrar
gráficos animados por ordenador en 3D
en un navegador Web y puede ser
utilizada en conjunción con el elemento
canvas de HTML5, SVG ó WebGL.
WebGL –Three.js

7. — THREE.js
Es una biblioteca liviana escrita
en JavaScript para crear y mostrar
gráficos animados por ordenador en 3D
en un navegador Web y puede ser
utilizada en conjunción con el elemento
canvas de HTML5, SVG ó WebGL.
WebGL –Three.js

8. — Realidad
virtual
— Representación científica.
— Visualización de información.
— Simulación de vuelo.
— Video Juegos.
— Representación de productos 3D.
WebGL – En que se usa?

9. —
—
—
—
—
—
—
—
—
—
—
—
—
—
Representadores
Efectos
Escenas
Cámaras
Controladores
Luces
Sombras
Materiales
Shaders
Mallas
Geometría
Cargadores de datos
Servicios
Depuración: Stats.js, WebGL Inspector
Que tan evolucionado esta?

10. —
Ejemplo para entender los elementos que componen
una escena.
—
Ejemplo de detección de movimiento
—
Integración con el Usuario, movimiento de un objeto
Ejercicio de mortales

11. —
—
Aerolíneas
http://www.senchalabs.org/philogl/PhiloGL/examples/
worldFlights/
—
—
Anatomía
http://www.zygotebody.com/
—
—
Experimentos
http://madebyevan.com/webgl-water/
—
—
Librería
http://workshop.chromeexperiments.com/bookcase/