Introducción a WebGL

Usa WebGL para crear gráficos increíblemente rápidos.

Conceptos básicos de WebGL

Con la API WebGL puedes crear gráficos 2D y 3D de gran rendimiento programando y controlando directamente la unidad de procesamiento gráfico (GPU) del equipo. WebGL representa un elemento de lienzo como un contexto de dibujo muy similar al contexto en 2D, pero proporciona acceso de muy bajo nivel a la GPU del equipo.

WebGL es ligeramente diferente a la programación web tradicional, porque usas dos lenguajes para escribir cada aplicación. Para usar WebGL, parte del código se escribe en JavaScript y la otra, en un lenguaje similar a C denominado GLSL (OpenGL Shading Language). En la parte de JavaScript se cargan las imágenes, se establecen los colores y se describen los objetos. El código GLSL traduce las imágenes, los colores y los vectores para que se ejecuten en la GPU mediante programas sombreadores. La combinación de ambos aporta a WebGL gráficos increíblemente rápidos.

El ejemplo que usamos no contiene bibliotecas WebGL. En la práctica, la mayoría de los desarrolladores usan bibliotecas para tareas pesadas y repetitivas, como cálculo de matrices o la creación de formas geométricas básicas. Por ejemplo, WebGL no ofrece funciones de matriz como escalar y girar. Una parte esencial del uso de WebGL para crear gráficos 3D es la biblioteca glMatrix, que proporciona transformaciones matriciales estándar. Otro ejemplo; las formas se describen en los gráficos 3D como series de triángulos. Para una esfera, necesitas crear una matriz de coordenadas para cada punto de vértice para describir los triángulos, calculando cada punto mediante trigonometría. Con una biblioteca de uso general, como la biblioteca Three.js (usada por aproximadamente la mitad de las páginas web WebGL), las esferas se crean simplemente especificando el radio y el número de triángulos que se usarán.

Muchos desarrolladores usan bibliotecas y solo escriben código de sombreador especializado que estas no proporcionan. Consulta la sección Demos, referencias y recursos de WebGL para obtener vínculos a bibliotecas, tutoriales y otra información.

El ejemplo Warp

El ejemplo que examinaremos se llama Warp. Warp muestra una foto que importas, y amplía o contrae la foto en función de la entrada táctil o del mouse. El ejemplo resulta bastante divertido de hacer y sirve para que tomes impulso para usar WebGL.

Warp te presenta lo siguiente:

  • Configuración básica de WebGL en una aplicación.
  • Cómo crear una matriz de puntos vectoriales que representan triángulos y líneas, y aplicar un color o una foto a la superficie.
  • Cómo usar eventos de mouse y un poco de trigonometría para lograr un buen efecto cuando amplíes o reduzcas la foto.
Aunque WebGL puede modelar objetos 3D, este ejemplo usa solo objetos 2D para una mayor sencillez.

WebGL describe las formas mediante matrices de vértices o coordenadas que representan el objeto dividido en un conjunto de triángulos.

Imagen de un cuadrado formado por triángulos de 40x40

Los gráficos WebGL pueden variar desde una simple forma geométrica 2D hasta una representación compleja, como una imagen realista de un automóvil, un perfil urbano o una superficie anatómica. La superficie de los objetos se puede representar con unos pocos o con muchos triángulos; cuantos más triángulos, más detalle. Solo es cuestión de determinar el tamaño y el número de triángulos. El ejemplo Warp usa 800 triángulos o 400 cuadrados dispuestos en una cuadrícula de 20 x 20. Este tamaño ofrece una buena resolución sin que resulte demasiado compleja. Experimenta con el tamaño de la cuadrícula para ver el efecto en los resultados.

Warp aplica la fotografía como una textura. En WebGL, las texturas se definen como imágenes, colores o patrones que se usan para cubrir la superficie de los objetos vectoriales que creas.

Empezar a escribir aplicaciones de WebGL

Una aplicación pasa una forma a la GPU como una matriz de vectores, que normalmente representa una colección de triángulos. Los triángulos se pueden describir a la GPU:

  • mediante tres vértices para cada triángulo
  • series de triángulos que, después del primer triángulo, solo agregan un vértice más por cada triángulo
También puedes describir líneas, series de líneas o puntos. Cuando pasas una matriz de vectores a la GPU, especificas cómo debe leerse la matriz, ya sea como triángulos o líneas individuales, o en series.

Para describir los triángulos y otras formas, se establecen los vértices de cada punto mediante coordenadas x, y, z. La GPU usa un sistema diestro de coordenadas cartesianas en 3D con números de punto flotante que varían entre -1 y 1, independientemente del tamaño del lienzo. Cero es el origen o centro del área de visualización, con tres ejes: x, y, z. En un sistema diestro de coordenadas, los valores X positivos se ubican a la derecha, los valores Y positivos se ubican arriba y los valores Z positivos se manifiestan hacia el usuario. Se denomina sistema diestro porque puedes sostener tu mano derecha con el dedo pulgar hacia el eje X positivo, el dedo índice hacia el eje Y positivo y el resto de los dedos abiertos en el eje Z positivo (hacia el usuario).

Este diagrama muestra el sistema de coordenadas cartesianas:

Diagrama del sistema de coordenadas cartesianas

Canalización de representación de WebGL

Las GPU modernas usan una canalización de representación programable. Las tarjetas gráficas anteriores tenían algunas funciones integradas para tareas como escalar o girar un objeto, pero no podías hacer modificaciones. La canalización de representación programable te permite escribir tus propias funciones para controlar cómo se representan las formas y las imágenes usando sombreadores de vértices y fragmentos. Un sombreador de vértices controla los puntos o vértices de una forma. Para girar un objeto en el espacio, el sombreador de vértices es responsable de aplicar una matriz (que tú has proporcionado) para hacer girar las coordenadas. Para agregar una imagen a la forma, el sombreador de fragmentos, o sombreador de píxeles, controla cómo se aplica la imagen a la forma en función de la información que obtiene del sombreador de vértices. La GPU proporciona la canalización que dirige los datos desde y hacia los sombreadores, y efectúa la representación final en la pantalla. La canalización de representación básica es similar a la siguiente:

Canalización de representación de WebGL

La canalización de representación sigue estos pasos generales:

  • Una aplicación pasa coordenadas con una matriz de vectores que apunta a un búfer de vectores. Las coordenadas de los vectores se procesan una a una a un sombreador de vértices.
  • El sombreador de vértices procesa el vértice en relación con otros vértices, moviendo coordenadas, agregando referencias de color y otras acciones.
  • Los triángulos se ensamblan y pasan al rasterizador, que interpola los píxeles entre los vértices de los triángulos.
  • La operación de prueba de profundidad comprueba si el píxel es visible. Los píxeles (y objetos) pueden estar fuera del área de visualización, demasiado adelante o atrás (según la coordenada Z) o bloqueados por otro objeto. Si no son visibles, se dejan de lado.
  • El sombreador de fragmentos aplica color a los píxeles. Los colores o las referencias de una imagen pueden pasarse del sombreador de vértices al sombreador de fragmentos, o establecerse en colores en el interior del sombreador de fragmentos.
  • Por último, el píxel se envía al búfer de fotogramas, donde se muestra en pantalla.
Esta es una versión simplificada de todo lo que hace la GPU, pero te da una idea del proceso de creación de un gráfico.

A continuación

En Configuración y contexto de WebGL, verás cómo obtener un WebGLRenderingContext a partir del elemento canvas y la configuración básica necesaria para representar gráficos.

Temas relacionados

Configuración y contexto de WebGL
Programas de sombreador
Cargar fotos en una textura
Soporte para interfaz de usuario
Demos, referencias y recursos de WebGL

 

 

Mostrar:
© 2015 Microsoft