Prefacio
WebGL es una tecnología que permite dibujar, visualizar e interactuar con sofisticados gráficos tridimensionales interactivos por ordenador (“gráficos 3D”) desde dentro de los navegadores web. Tradicionalmente, los gráficos 3D se han restringido a ordenadores de gama alta o consolas de juegos dedicadas y requerían una programación compleja. Sin embargo, a medida que tanto los ordenadores personales como, lo que es más importante, los navegadores web se han vuelto más sofisticados, se ha hecho posible crear y visualizar gráficos 3D utilizando tecnologías web accesibles y bien conocidas. Este libro proporciona una descripción general completa de WebGL y guía al lector, paso a paso, a través de los conceptos básicos de la creación de aplicaciones WebGL. A diferencia de otras tecnologías de gráficos 3D como OpenGL y Direct3D, las aplicaciones WebGL se pueden construir como páginas web para que se puedan ejecutar directamente en los navegadores sin instalar ningún complemento o biblioteca especial. Por lo tanto, puede desarrollar y probar rápidamente un programa de muestra con un entorno de PC estándar; como todo está basado en la web, puede publicar fácilmente los programas que ha construido en la web. Una de las promesas de WebGL es que, como las aplicaciones WebGL se construyen como páginas web, el mismo programa puede ejecutarse en una variedad de dispositivos, como teléfonos inteligentes, tabletas y consolas de juegos, a través del navegador. Este poderoso modelo significa que WebGL tendrá un impacto significativo en la comunidad de desarrolladores y se convertirá en una de las herramientas preferidas para la programación de gráficos.
Para quién es el libro
Cuando escribimos este libro, teníamos en mente dos tipos de público: los desarrolladores web que desean añadir gráficos 3D a sus páginas y aplicaciones web, y los programadores de gráficos 3D que desean saber cómo aplicar sus conocimientos al entorno web. Para los desarrolladores web que están familiarizados con las tecnologías web estándar, como HTML y JavaScript, y que desean incorporar gráficos 3D a sus páginas o aplicaciones web, WebGL ofrece una solución simple pero potente. Se puede utilizar para añadir gráficos 3D para mejorar las páginas web, para mejorar la interfaz de usuario (UI) de una aplicación web mediante una interfaz 3D e incluso para desarrollar aplicaciones y juegos 3D más complejos que se ejecuten en navegadores web.
El segundo público objetivo son los programadores que han trabajado con alguna de las principales interfaces de programación de aplicaciones (API) 3D, como Direct3D u OpenGL, y que están interesados en entender cómo aplicar sus conocimientos al entorno web. Esperamos que estos programadores estén interesados en las aplicaciones 3D más complejas que se pueden desarrollar en los navegadores web modernos.
Sin embargo, el libro ha sido diseñado para que sea accesible a un público amplio mediante un enfoque paso a paso para presentar las características de WebGL, y no supone conocimientos previos de gráficos 2D o 3D. Por lo tanto, esperamos que también sea de interés para las siguientes personas:
- Programadores generales que buscan comprender cómo están evolucionando las tecnologías web en el área de gráficos.
- Estudiantes que estudian gráficos 2D y 3D porque ofrece una forma sencilla de comenzar a experimentar con gráficos a través de un navegador web en lugar de configurar un entorno de programación completo.
- Desarrolladores web que exploran la “vanguardia” de lo que es posible en dispositivos móviles como Android o iPhone utilizando los navegadores web móviles más recientes
Qué cubre el libro
Este libro cubre la API WebGL 1.0 junto con todas las funciones relacionadas de JavaScript. Aprenderá cómo se relacionan HTML, JavaScript y WebGL, cómo configurar y ejecutar aplicaciones WebGL y cómo incorporar “shaders” sofisticados de programas 3D bajo el control de JavaScript. El libro detalla cómo escribir shaders de vértices y fragmentos, cómo implementar técnicas avanzadas de renderizado como iluminación y sombreado por píxel, y técnicas básicas de interacción como la selección de objetos 3D. Cada capítulo desarrolla una serie de aplicaciones WebGL completamente funcionales y explica las características clave de WebGL a través de estos ejemplos. Después de terminar el libro, estará listo para escribir aplicaciones WebGL que aprovechen al máximo el poder programable de los navegadores web y el hardware gráfico subyacente.
Cómo está estructurado el libro
Este libro está organizado para cubrir la API y las API web relacionadas paso a paso, desarrollando su conocimiento de WebGL a medida que avanza.
Capítulo 1—Descripción general de WebGL
Este capítulo presenta brevemente WebGL, describe algunas de las características y ventajas clave de WebGL y analiza sus orígenes. Finaliza explicando la relación de WebGL con HTML5 y JavaScript y qué navegadores web puede utilizar para comenzar a explorar WebGL.
Capítulo 2: Su primer paso con WebGL
En este capítulo se explica el elemento <canvas> y las funciones básicas de WebGL, guiándolo paso a paso a través de la construcción de varios programas de ejemplo. Cada ejemplo está escrito en JavaScript y utiliza WebGL para mostrar e interactuar con una forma simple en una página web. Los programas WebGL de ejemplo resaltarán algunos puntos clave, incluidos: (1) cómo WebGL utiliza el objeto del elemento <canvas> y cómo dibujar en él; (2) el vínculo entre HTML y WebGL mediante JavaScript; (3) funciones de dibujo simples de WebGL; y (4) el papel de los programas shader dentro de WebGL.
Capítulo 3—Dibujar y transformar triángulos
En este capítulo se amplían los conceptos básicos y se explora cómo dibujar formas más complejas y cómo manipularlas en el espacio 3D. En este capítulo se analizan: (1) el papel fundamental de los triángulos en los gráficos 3D y la compatibilidad de WebGL para dibujar triángulos; (2) el uso de múltiples triángulos para dibujar otras formas básicas; (3) las transformaciones básicas que mueven, rotan y escalan triángulos mediante ecuaciones simples; y (4) cómo las operaciones matriciales simplifican las transformaciones.
Capítulo 4: Más transformaciones y animación básica
En este capítulo, explorará más transformaciones y comenzará a combinar transformaciones en animaciones. Usted: (1) conocerá una biblioteca de transformación de matrices que oculta los detalles matemáticos de las operaciones con matrices; (2) utilizará la biblioteca para combinar múltiples transformaciones de manera rápida y sencilla; y (3) explorará la animación y cómo la biblioteca lo ayuda a animar formas simples. Estas técnicas proporcionan los conceptos básicos para construir programas WebGL bastante complejos y se utilizarán en los programas de muestra en los siguientes capítulos.
Capítulo 5: Uso de colores y texturas en imágenes
Basándonos en los conceptos básicos descritos en los capítulos anteriores, ahora profundizaremos un poco más en WebGL explorando los siguientes tres temas: (1) además de pasar coordenadas de vértices, cómo pasar otros datos como información de color al sombreador de vértices; (2) la conversión de una forma a fragmentos que tiene lugar entre el sombreador de vértices y el sombreador de fragmentos, lo que se conoce como proceso de rasterización; y (3) cómo mapear imágenes (o texturas) sobre las superficies de una forma u objeto. Este capítulo es el último que se centra en las funcionalidades clave de WebGL.
Capítulo 6: El lenguaje de sombreado OpenGL ES (GLSL ES)
Este capítulo hace una pausa en el análisis de los programas de ejemplo de WebGL y explica en detalle las características principales del lenguaje de sombreado OpenGL ES (GLSL ES). Tratará sobre: (1) datos, variables y tipos de variables; (2) vector, matriz, estructura, matriz y sampler; (3) operadores, flujo de control y funciones; (4) atributos, uniformes y variables; (5) calificador de precisión; y (6) preprocesador y directivas. Al final de este capítulo, tendrá una buena comprensión de GLSL ES y cómo se puede utilizar para escribir una variedad de sombreadores.
Capítulo 7: Hacia el mundo 3D
Este capítulo da el primer paso hacia el mundo 3D y explora las implicaciones de pasar del 2D al 3D. En particular, explorará: (1) la representación de la vista del usuario en el mundo 3D; (2) cómo controlar el volumen del espacio 3D que se visualiza; (3) el recorte; (4) los objetos de primer plano y de fondo; y (5) el dibujo de un objeto 3D: un cubo. Todos estos temas tienen un impacto significativo en la forma en que se dibuja y se presenta la escena 3D a los espectadores. Dominarlos es fundamental para crear escenas 3D atractivas.
Capítulo 8: Listado de objetos
Este capítulo se centra en la iluminación de objetos, analizando distintas fuentes de luz y sus efectos en la escena 3D. La iluminación es esencial si desea crear escenas 3D realistas, ya que ayuda a darle a la escena una sensación de profundidad.
En este capítulo se tratan los siguientes puntos clave: (1) sombreado, sombras y diferentes tipos de fuentes de luz, incluidas las puntuales, direccionales y ambientales; (2) la reflexión de la luz en la escena 3D y los dos tipos principales: reflexión difusa y ambiental; y (3) los detalles del sombreado y cómo implementar el efecto de la luz para que los objetos parezcan tridimensionales.
Capítulo 9—Objetos jerárquicos
Este capítulo es el último que describe las características principales y cómo programar con WebGL. Una vez completado, habrá dominado los conceptos básicos de WebGL y tendrá los conocimientos suficientes para poder crear escenas 3D realistas e interactivas. Este capítulo se centra en los objetos jerárquicos, que son importantes porque le permiten avanzar más allá de los objetos individuales, como cubos o bloques, hacia objetos más complejos que puede utilizar para personajes de juegos, robots e incluso para modelar humanos.
Capítulo 10: Técnicas avanzadas
En este capítulo se abordan diversas técnicas importantes que utilizan lo aprendido hasta ahora y que le proporcionan un conjunto de herramientas esencial para crear gráficos 3D interactivos y atractivos. Cada técnica se presenta mediante un ejemplo completo, que puede reutilizar al crear sus propias aplicaciones WebGL.
Apéndice A: No es necesario intercambiar buffers en WebGL
Este apéndice explica por qué los programas WebGL no necesitan intercambiar buffers.
Apéndice B: Funciones integradas de GLSL ES 1.0
Este apéndice proporciona una referencia para todas las funciones integradas disponibles en los lenguajes de sombreado de OpenGL ES.
Apéndice C: Matrices de proyección
Este apéndice proporciona las matrices de proyección generadas por Matrix4.setOrtho() y Matrix4.setPerspective().
Apéndice D—WebGL/OpenGL: ¿para zurdos o diestros?
Este apéndice explica cómo WebGL y OpenGL tratan internamente el sistema de coordenadas y aclara que, técnicamente, tanto WebGL como OpenGL son independientes en cuanto a la lateralidad.
Apéndice E: La matriz transpuesta inversa
Este apéndice explica cómo la matriz transpuesta inversa de la matriz modelo puede abordar la transformación de vectores normales.
Apéndice F: Carga de programas de sombreado desde archivos
Este apéndice explica cómo cargar los programas shader desde archivos.
Apéndice G: Sistema de coordenadas mundial versus sistema de coordenadas local
Este apéndice explica los diferentes sistemas de coordenadas y cómo se utilizan en gráficos 3D.
Navegadores compatibles con WebGL
En el momento de escribir este libro, WebGL es compatible con Chrome, Firefox, Safari y Opera. Lamentablemente, algunos navegadores, como IE9 (Microsoft Internet Explorer), aún no son compatibles con WebGL. En este libro, utilizamos el navegador Chrome lanzado por Google, que, además de WebGL, admite una serie de funciones útiles, como una función de consola para depuración. Hemos comprobado los programas de muestra de este libro utilizando el siguiente entorno (tabla P.1), pero esperamos que funcionen con cualquier navegador compatible con WebGL.
| Browser | Chrome (25.0.1364.152 m) |
| OS | Windows 7 and 8 |
| Graphics boards | NVIDIA Quadro FX 380, NVIDIA GT X 580, NVIDIA GeForce GTS 450, Mobile Intel 4 Series Express Chipset Family, AMD Radeon HD 6970 |
Consulta https://www.khronos.org/webgl/wiki/BlacklistsAndWhitelists para obtener una lista actualizada de las tarjetas de hardware que se sabe que causan problemas.
Para confirmar que está en funcionamiento, descargue Chrome (o use su navegador preferido) y diríjalo al sitio web complementario de este libro en https://sites.google.com/site/webglbook/
Vaya al Capítulo 3 y haga clic en el enlace al archivo de muestra HelloTriangle.html. Si puede ver un triángulo rojo como se muestra en la Figura P.1 en el navegador, WebGL está funcionando.
Si no ve el triángulo rojo que se muestra en la figura, consulte el Apéndice H, que explica cómo cambiar la configuración de su navegador para cargar WebGL.
Programas de muestra y enlaces relacionados
Todos los programas de muestra de este libro y los enlaces relacionados están disponibles en los sitios web complementarios. El sitio oficial alojado por el editor es www.informit.com/title/9780321902924 y el sitio del autor está alojado en https://sites.google.com/site/webglbook/.
El último sitio contiene los enlaces a cada programa de muestra de este libro. Puede ejecutar cada uno de ellos directamente haciendo clic en los enlaces.
Si desea modificar los programas de muestra, puede descargar el archivo zip de todos los ejemplos, disponible en ambos sitios, a su disco local. En este caso, debe tener en cuenta que el programa de muestra consta tanto del archivo HTML como del archivo JavaScript asociado en la misma carpeta. Por ejemplo, para el programa de muestra HelloTriangle, necesita HelloTriangle.html y HelloTriangle.js. Para ejecutar HelloTriangle, haga doble clic en HelloTriangle.html.
Convenciones de estilo
En este libro se utilizan estas convenciones de estilo:
- Bold—Primeras apariciones de términos clave y palabras importantes.
- Italic—Nombres de parámetros y nombres de referencias
Monospace—Ejemplos de código, métodos, funciones, variables, opciones de comando, nombres de objetos JavaScript, nombres de archivos y etiquetas HTML.