Semana12 - Librerías Gráficas Web

Vista previa del material en texto

UNIDAD II
COMPUTACIÓN GRÁFICA II
▪ Librerías Gráficas Web
Semana 12
Al término de la sesión, el estudiante crea una aplicación gráfica utilizando la librería gráfica
WebGL.
Logro de 
Aprendizaje
¿Qué librerías gráficas WEB conoces?
Responder en el foro
Introducción
❑ A lo largo de la historia de la Web han ido surgiendo
distintas tecnologías de código propietario y abierto que
podían mostrar gráficos en 3D (3DXML, VRML, X3DOM,
Flash, Silverlight, Java, etc.).
❑ Nunca ninguna a llegado a ser soportada por todos los
navegadores, obligando en ocasiones a los usuarios a
instalar plugins.
❑ Reciente los navegadores web se han convertido en
poderosas plataformas para mostrar contenido multimedia,
vídeo, imagen, sonido y el 3D interactivo.
❑ WebGL (basado en OpenGL ES, la versión de OpenGL para
dispositivos móviles) permite desplegar aplicaciones
tridimensionales completamente interactivo en la web.
WebGL
http://webglsamples.org/blob/blob.html
❑ WebGL es una especificación estándar de bajo nivel
desarrollado gestionado por el consorcio tecnológico
Khronos Group.
❑ Utilizado para poder desarrollar y mostrar gráficos 3D en 
el navegador acelerados por hardware mediante el uso de 
la unidad de procesamiento gráfico (GPU), sin necesidad 
de plugins. Esto seria posible en cualquier plataforma que 
soporte OpenGL 2.0 u OpenGL ES 2.0.
❑ Los principales proveedores de navegadores Google
(Chrome), Opera (Opera), Mozilla (Firefox) y Apple
(Safari) son miembros del Grupo de trabajo WebGL del
consorcio Khronos, junto con muchos otros
desarrolladores de gráficos 3D.
WebGL: Aspectos de Seguridad
❑ Ejecutar código de los componentes WebGL en la
unidad de procesamiento gráfico permite que este
código pueda aprovecharse para generar
vulnerabilidades del sistema.
❑ Al menos en el navegador Chrome muchos procesos de
WebGL, incluido el de la GPU, se ejecutan por separado y
dentro del sandbox de Chrome (un sandbox es un
entorno de pruebas de código).
❑ Los fabricantes de GPU’s están incorporando soporte
para ayudar a solventar los problema de seguridad.
WebGL: Desarrollo de aplicaciones
❑ Las aplicaciones WebGL necesitan un lugar para renderizar, los
cuales se hacen a través de Elementos canvas de HTML5 e
interfaces DOM (Document Object Model, estándar de objetos
para representar documentos HTML).
❑ También, podemos poder todo el código en un solo archivo
HTML.
❑ Podemos poner la configuración en un archivo HTML y la
aplicación en un archivo JavaScript separado. El archivo HTML
puede incluir también sombreadores de objetos (shaders).
❑ La API de WebGL está basada en la API de OpenGL ES, se
encarga de comunicarse con el driver de la tarjeta gráfica y
así poder realizar la aceleración por hardware en la GPU.
❑ Las cosas simples en WebGL requieren bastante código para cargar,
compilar y vincular sombreadores, configurar las variables que se
pasarán a los sombreadores y también realizar matemáticas
matriciales para animar formas.
❑ Las áreas básicas con las que deberá estar familiarizado incluyen:
✓ GLSL (OpenGL Shading Language): lenguaje de sombreado
utilizado por OpenGL y WebGL.
✓ Cálculo matricial para configurar transformaciones.
✓ Búferes de vértices para almacenar datos sobre posiciones de
vértices, normales, colores y texturas.
WebGL: Desarrollo de aplicaciones
WebGL: Primitivas Geométricas
Todas las primitivas están especificadas por vértices
GL_TRIANGLE_STRIP
GL_TRIANGLE_FAN
GL_LINES
GL_LINE_LOOPGL_LINE_STRIP
GL_TRIANGLES
GL_POINTS
❑ Para formar objetos geométricos 3D, debemos descomponerlos en primitivas geométricas que WebGL puede 
dibujar. 
❑ WebGL (y OpenGL de escritorio) dibuja tres cosas: puntos, líneas y triángulos. Se puede usar colecciones de 
triángulos para obtener otras formas y optimizar el renderizado.
WebGL: Renderizado
❑ El renderizado (proceso de cálculo desarrollado por una computadora destinado a generar una imagen 2D a partir de una escena
3D en una ventana de visualización) consta de dos etapas programables: el sombreador de vértices (Vertex
shaders) responsable de transformar los vértices de entrada en espacio de clip y el sombreador de
fragmentos (fragment shaders) responsable de sombrear los píxeles cubiertos por cada triángulo, similar
a WebGL.
❑ WebGL también agrega soporte para sombreadores calculados (compute shaders), que existen fuera de
la canalización de renderizado.
❑ Generar un triángulo rojo.
❑ Implementar los elementos:
✓ Sombreador de vértices.
✓ Sombreador de fragmentos.
✓ Lienzo HTML.
WebGL: Un ejemplo simple 
Debido a que este ejemplo es estático, solo necesitamos
renderizar la geometría una vez. Limpiamos el búfer de
fotogramas y dibujamos nuestro único triángulo como una
entidad rellena.
WebGL: Un ejemplo simple 
❑ Ejecuta Chrome.
❑ Vamos a la barra de direcciones (dónde ponemos los enlaces web) y
escribimos: chrome://flags/
❑ “Accelerated 2D Canvas” debe estar activado.
❑ “GPU Rasterizacion” en Default.
❑ “WebGL Draft Extensions”.
❑ Reiniciar Chrome.
Habilitar WebGL en navegador Chrome
En ocasiones debemos habilitar extensiones en Chrome para poder habilitar todas la funcionalidad de
la biblioteca WebGl .
<!DOCTYPE html>
<html>
<head>
<script id="vertex-shader" type="x-shader/x-vertex">
attribute vec4 vPosition;
void main()
{
gl_Position = vPosition;
}
</script>
<script id="fragment-shader" type="x-shader/x-fragment">
precision mediump float;
void main()
{
gl_FragColor = vec4( 1.0, 0.0, 0.0, 1.0 );
}
</script>
<script type="text/javascript" src="webgl-utils.js"></script>
<script type="text/javascript" src="initShaders.js"></script>
<script type="text/javascript" src="triangle.js"></script>
</head>
<body>
<canvas id="gl-canvas" width="512" height="512">
Oops…..su navegador no es compatible con el elemento de lienzo HTML5
</canvas>
</body>
</html>
WebGL: Un ejemplo simple triangle.html
❑ El archivo HTML describe la página y dónde obtener la
información. Por ejemplo, el valor predeterminado si se
omite la etiqueta doctype es HTML5.
❑ La mayoría de las etiquetas HTML tienen el formato
<tagname> para iniciar la etiqueta y </tagname> para
finalizarla.
❑ initShaders.js: funciones para inicializar sombreadores 
en el archivo HTML.
❑ webgl-utils.js: utilidades estándar de Google para 
configurar un contexto WebGL.
❑ triangle.js: Contiene el código del triángulo.
Explicando el código
var gl;
var points;
window.onload = function init() {
var canvas = document.getElementById( "gl-canvas" );
gl = WebGLUtils.setupWebGL( canvas );
if ( !gl ) { alert( "WebGL no está disponilbe" );
}
var vertices = new Float32Array([-1, -1, 0, 1, 1, -1]);
// Configurar WebGL
gl.viewport( 0, 0, canvas.width, canvas.height );
gl.clearColor( 1.0, 1.0, 1.0, 1.0 );
// Cargar sombreadores e inicializar búferes de atributos
var program = initShaders( gl, "vertex-shader", "fragment-shader" );
gl.useProgram( program );
// Carga los datos en la GPU
var bufferId = gl.createBuffer();
gl.bindBuffer( gl.ARRAY_BUFFER, bufferId );
gl.bufferData( gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW );
// Asociar las variables de sombreado con nuestro búfer de datos
var vPosition = gl.getAttribLocation( program, "vPosition" );
gl.vertexAttribPointer( vPosition, 2, gl.FLOAT, false, 0, 0 );
gl.enableVertexAttribArray( vPosition ); 
render();
};
function render() {
gl.clear( gl.COLOR_BUFFER_BIT );
gl.drawArrays( gl.TRIANGLES, 0, 3 );
}
WebGL: Un ejemplo simple triangle.js
❑ gl contiene todas las funciones y parámetros de WebGL.
❑ Debido a que el navegador funciona de forma asincrónica, lee y ejecuta
el código de forma secuencial. La función onload solo se ejecutará
cuando se hayan leído todos los archivos del archivo HTML.
❑ Los vértices de la matriz son similares a una matriz de flotantes C o C ++
(más simple que una matriz JS).
❑ En este ejemplo la cámara es predeterminada, cuando se especifica
ubicaciones en dos dimensiones, WebGL establece el componente Z en 0.
❑ El Viewport establece que usaremos usar todo el lienzo.
❑ El canvaso lienzo es blanco (gl.clearColor).
❑ intiShaders lee, compila y vincula los vértices y sombreadores en el
objeto.
❑ Podemos tener múltiples objetos, cada uno con sus propios
sombreadores y cambiar entre ellos con gl.useProgram
❑ vPosition es el nombre para el atributo de posición de vértice en nuestro
sombreador de vértices.
❑ Los datos se colocan en objetos de búfer de vértice (VBO) que están en
la GPU. Aquí, el único atributo de vértice que necesitamos para cada
vértice es su posición. Al almacenar en caché los datos en VBO, evitamos
transferencias repetidas de datos de CPU a GPU cuando queremos volver
a renderizar la geometría.
Explicando el código
WebGL: ejemplo
Genera la siguiente forma:
Cuadrado color verde (puedes usar la primitiva: TRIANGLE_STRIP)
WebGL: más ejemplos
❑ https://www.cs.unm.edu/~angel/WebGL/7E/
❑ http://webglsamples.org/
❑ http://www.webglacademy.com/courses.php?courses=0_1_20_2_3_4_23_5_6_7_10#0
Explora los pasos de desarrollo 3D bajo WebGL, paso a paso:
❑ Es una biblioteca de alto nivel JavaScript para navegadores y una
interfaz de programación de aplicaciones (API).
❑ La biblioteca Three.js esta basado en WebGL, permite la creación de
animaciones 3D web aceleradas por unidad de procesamiento
gráfico (GPU) utiliza el lenguaje JavaScript.
❑ Existen también bibliotecas de alto nivel como GLGE, SceneJS,
PhiloGL que hacen posible crear complejas animaciones de
computadora en 3D que se muestran en el navegador sin el esfuerzo
que requiere una aplicación tradicional.
Otras Librerias Gráficas: Three.js
Revisemos un ejemplo simple adaptado del
código de muestra proporcionado en la página de
Three.js en GitHub.
https://github.com/pjbelo/threejs-demo1
Ejemplo completo de la biblioteca Three.js incluyendo 
interacción con cámara, luces sombras y 
transformaciones:
https://pjbelo.github.io/playground-three/
Otras Librerias Gráficas: Three.js
Otras Librerias Gráficas:
❑ Basada en WebGL y Fundada en 1997, organización internacional de desarrollo de estándares
industriales, sin fines de lucro y financiada por sus miembros.
❑ Mantiene estándares ISO libres de regalías para gráficos 3D basados ​​en la web.
❑ Su estándar X3D (Extensible 3D) se originó a partir de VRML (lenguaje de modelado de realidad
virtual ) y está disponible en formatos XML, binario comprimido y VRML clásico.
❑ X3D es una especificación de alto nivel, código abierto e interoperable ejecutándose en todas las
plataformas, computadoras de escritorio, tabletas y teléfonos.
https://www.web3d.org/x3d-models/Globe/globe-weather.html
Otras Librerias Gráficas:
❑ X3D también hizo un proyecto llamado X3DOM para hacer que el contenido de X3D y VRML que se ejecuta
con WebGL.
❑ X3DOM (pronunciado de X-Freedom) es un marco de trabajo de código para gráficos 3D en la Web.
❑ Se puede utilizar libremente para fines comerciales y no comerciales, tiene una licencia doble según las
licencias MIT y GPL.
❑ X3DOM orientado a superar las dificultades de publicación de contenidos 3D en la web de forma accesible,
sin la necesidad de plugins o visores adicionales, se encuentra perfectamente integrado con HTML5. Dicho
estándar de intercambio esta basado en X3D que a su vez se basa en XML.
https://www.x3dom.org/
Otras Librerias Gráficas:
❑ X3DOM aporta a las comunidades Web3D y W3C sobre
cómo se vería una integración de HTML5 y contenido 3D
declarativo, tiene como objetivo cumplir con la
especificación HTML5 actual para contenido 3D
declarativo.
❑ El objetivo es tener una escena X3D en vivo en su DOM
HTML (Document Object Model, estándar de objetos
para representar documentos HTML), lo que le permite
manipular el contenido 3D solo agregando, eliminando o
cambiando elementos DOM.
❑ También es compatible con la mayoría de los eventos
HTML (como "onclick") en objetos 3D.
https://doc.x3dom.org/tutorials/animationInteraction/pickingBuffer/example.html
https://doc.x3dom.org/tutorials/lighting/customShader/example.html
https://doc.x3dom.org/tutorials/animationInteraction/transformations/example.html
Otras Librerias Gráficas:
❑ Unity es un motor de videojuego multiplataforma
creado por Unity Technologies.
❑ Unity está disponible como plataforma de desarrollo
para Microsoft Windows, Mac OS, Linux.
❑ La plataforma de desarrollo tiene soporte de
compilación con diferentes tipos de plataformas.
❑ A partir de su versión 5.4.0 ya no permite el desarrollo
de contenido para navegador a través de su plugin
web, en su lugar se utiliza WebGL.
❑ Unity tiene dos versiones: Unity Professional (pro) y
Unity Personal.
WebGL: RETO
Genera la siguiente forma a partir de primitivas:
❑ ¿Hemos cumplido con el logro de 
aprendizaje?
❑¿Qué necesito reforzar?
¿Preguntas o dudas?
❑ ¿Conclusiones del tema?¿Sabías 
que existen estas herramientas en 
tu navegador?
Referencias
Benstead, Luke. (2012) Programación de videojuegos con OpenGL. 
https://upn.vitalsource.com/books/9786074817621.
Bosque, Jose. (2007). Introducción a OpenGL. 
https://elibro-net.eu1.proxy.openathens.net/es/ereader/upnorte/35680?page=2
Donald, Hearn. (2006). Gráficos por computadora con OpenGL: Pearson Educación
https://upn.vitalsource.com/books/9786074817621
https://elibro-net.eu1.proxy.openathens.net/es/ereader/upnorte/35680?page=2
	Diapositiva 1
	Diapositiva 2
	Diapositiva 3
	Diapositiva 4
	Diapositiva 5
	Diapositiva 6
	Diapositiva 7
	Diapositiva 8
	Diapositiva 9
	Diapositiva 10
	Diapositiva 11
	Diapositiva 12
	Diapositiva 13
	Diapositiva 14
	Diapositiva 15
	Diapositiva 16
	Diapositiva 17
	Diapositiva 18
	Diapositiva 19
	Diapositiva 20
	Diapositiva 21
	Diapositiva 22
	Diapositiva 23
	Diapositiva 24
	Diapositiva 25
	Diapositiva 26
	Diapositiva 27
	Diapositiva 28