WebGL 2 disponible en Firefox

8 octubre, 2017 21:39 por

Esta es una traducción del artículo original publicado en el blog de Mozilla Hacks. Traducción por Sergio Carlavilla Delgado.

Con el lanzamiento de Firefox 51, ¡el soporte de WebGL2 ha llegado! WebGL es una API estándar para representar gráficos 3D en la web. Está basado en OpenGL ES, que es utilizado comúnmente para los videojuegos móviles.

Hasta la fecha, hemos sido capaces de utilizar WebGL 1 (basado en OpenGL ES 2) para representar gráficos fantásticos en el elemento <canvas>. WebGL 2, sin embargo, está basado en la especificación OpenGL ES 3.0, la cual introduce nuevas características – la mayoría destinadas a aumentar el rendimiento y la fidelidad visual.

Anteriormente, WebGL2 había sido utilizable mediante un parámetro de configuración
o en las ediciones Developer Edition o Nightly, pero con Firefox 51, está desbloqueado para todos los usuarios de Firefox en Windows, MacOS y GNU/Linux.

Demostración: “After the Flood” (PlayCanvas)

Para darte una idea del contenido que permite WebGL 2, estamos emocionados en destacar After the Flood, una demostración interactiva de WebGL 2 por PlayCanvas. (Por favor, ten en cuenta que esta demostración se encuentra disponible únicamente para el escritorio, con el soporte para móvil próximamente.) Da un paseo a través del fantástico entorno de agua, vidrio y acero ¡el cual se desarrolla completamente dentro de tu navegador web!

Cómo usar WebGL 2

Para disponer de un contexto WebGL 2, todo lo que tienes que hacer es solicitar uno a un elemento <canvas>. La cadena que usaremos para solicitar WebGL2 es “webgl2”.

let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('webgl2');

WebGL 2 podría no estar presente en todos los navegadores, por lo que debes incluir algo de código para controlar los errores.

let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('webgl2');
let isWebGL2 = !!ctx;
if (!isWebGL2) { // intentar usar webgl 1
    ctx = canvas.getContext('webgl') ||
          canvas.getContext('experimental-webgl');
}
if (!ctx) {
    console.log('your browser does not support WebGL');
}

Unas palabras de advertencia…

Ten en cuenta que mientras WebGL 2 está basado en OpenGL ES 3.0, no es idéntico. Por ejemplo, WebGL 2 no soporta programas binarios y un número de restricciones opcionales en OpenGL se han hecho obligatorias para WebGL 2. Las diferencias entre las dos están presentadas en la especificación de WebGL 2, así que si ya estás familiarizado con OpenGL, podrás ponerte al día con WebGL 2 rápidamente.

Otra cosa a tener en cuenta es que WebGL 2 no es estrictamente compatible con WebGL1, asá que existe la posibilidad de que tu código WebGL 1 no funcione como se espera en un contexto de WebGL 2. Dicho esto, las diferencias son bastante mínimas, y deberías de poder portar tu código y shaders (sombreadores) sin mucha dificultad. Puedes leer la lista de incompatibilidades en la especificación, además de esta guía rápida de los fundamentos de WebGL 2 acerca de la migración de código desde WebGL 1 a WebGL 2.

Ten en cuenta que mientras WebGL 2 traerá estas nuevas características a muchos de nuestros usuarios, no podemos ofrecer WebGL 2 a usuarios con tarjetas gráficas o controladores viejos o anticuados.

Funciones destacadas

Lenguaje de sombreado actualizado

WebGL 2 soporta OpenGL ES Shading Language 3.0, el cual permite programas de sombreado mucho más capaces y eficientes. Los nuevos juguetes incluyen:

  • Verdaderos tipos enteros
  • Bloques uniformes
  • Vincular los índices de ubicación para las entradas y salidas de shader en la fuente de sombreado
  • Descarte de fragmentos
  • Bucles dinámicos
  • Muestras sofisticadas de texturas incorporadas

Múltiples objetivos de renderizado (“MRTs”)

Este te permite renderizar varios búferes de color o texturas en un solo paso, usando múltiples salidas del sombreador de fragmentos.

Esta característica se habilitó en WebGL 1 a través de una extensión, pero ahora forma parte del conjunto básico de características de WebGL 2, por lo que no es necesario preocuparse por un camino alternativo.

Una de las principales aplicaciones de MRTs es una técnica llamada sombreado diferido – y ya hemos escrito antes acerca de ella en Hacks. Es una técnica de renderizado que permite gran cantidad de luces dinámicas en una escena, ya que la complejidad del renderizado no depende de la cantidad de luces, sino del número real de píxeles que se están encendiendo.

Dibujo de geometría instanciada

El instanciamiento te permite renderizar múltiples instancias de una geometría con una única llamada, lo que reduce la carga en la CPU. Ten en cuenta que cada instancia puede tener sus propios atributos, como una matriz de transformación, así que puedes usarlo para renderizar muchos objetos simulares, como partículas, árboles en un bosque, gente en una multitud, etc.

La siguiente demostración de THREE.js hace instanciación a través de una extensión – que, recuerda, ya no es necesaria en WebGL 2.

Renderizado por instancia

Nuevas características en texturas

Las texturas 3D o con volumen son texturas en las que se accede a los datos utilizando tres coordenadas en lugar de dos (como en las texturas 2D). Estas son más utilizadas para el mapeado de tonos, pero también pueden ser útiles para el renderizado de efectos volumétricos, como el humo, la niebla y los rayos.

Las matrices de texturas 2D contienen una serie de capas 2D separadas, las cuales un sombreador puede indexar para seleccionar sólo una de las texturas 2D contenidas.

Los objetos sampler son nuevos en WebGL 2. Estos desacoplan la forma en que se la textura se muestra de la textura seleccionada para el muestreo, por lo que se puede realizar el muestreo de una única textura de varias formas, y múltiples texturas pueden apuntar al mismo objeto sampler.

WebGL 2 también elimina las restricciones de las texturas non-power-of- two (NPOT).

Retroalimentación de transformación

La retroalimentación de transformación captura la salida del sombreador de vertex en un objeto de buffer, utilizando a menudo esta salida como entrada para el siguiente cuadro. Esto crea un bucle que no deja la GPU, liberando a la CPU de estos cálculos. Los sistemas de partículas suelen aprovechar ésto para iterar la posición de cada partícula y moverla en cada cuadro sin interacción de la CPU.

La retroalimentación de transformación también puede ser combinada con “rasterizer discard”, el cual permite correr el sombreador de vertex sin el sombreador de fragmentos. Esto permite flujos de procesamiento de datos naturales tipo “mapa” GPGPU (computación de uso general en GPU).

Retroalimentación de transformación

¡Y más!

Hay muchas más características que han llegado en WebGL 2, incluyendo Vertex Array Objects, MSAA renderbuffers y Uniform Buffer Blocks por nombrar algunas. Para una lista completa de todo lo nuevo en WebGL 2, puedes echar un vistazo a la especificación oficial, ya que sólo contiene las diferencias entre WebGL 1 y 2.

Algunas de estas características pueden ser vistas con relativo aislamiento en la página de ejemplos de WebGL 2. Estas demostraciones específicas de cada función sirven para ilustrar los nuevos efectos posibles con las nuevas características, así como para proporcionar código de ejemplo sobre cómo usarlas.

Lo que sigue

Estamos publicando la API para su uso generalizado, pero todavía hay más trabajo por hacer. Estamos deseando trabajar en mejorar el rendimiento, relajar algunas restricciones y mejorar el pulido general. Sabemos que todos tienen el rendimiento muy presente, por lo que tenemos un trabajo muy interesante en la trastienda para ofrecer aplicaciones con el rendimiento necesario para ofrecer experiencias aún más sofisticadas e impactantes.

Además de ver a las aplicaciones añadir soporte de WebGL 2, esperamos ver la integración de WebGL 2 en los frameworks y motores WebGL existentes. PlayCanvas soporta WebGL 2, como se muestra en nuestra destacada demostración After the Flood. Three.js también tiene soporte para utilizar WebGL 2. ¡Estate al tanto de otros motores que reciban soporte de WebGL 2 durante el año!

¿Algún problema? Por favor, registra un error en nuestro Bugzilla. (Recuerda: ¡también puedes usar GitHub para ingresar!)

The following two tabs change content below.

jorgev

Add-ons Developer Relations Lead at Mozilla
Jorge trabaja para el equipo de complementos de Mozilla, y se dedica a Mozilla Hispano y Mozilla Costa Rica en su tiempo libre. Actualmente está encargado del blog de Mozilla Hispano Labs.

Compartir artículo:

Join the discussion at foro.mozilla-hispano.org

  • ¡Participa!

    Firefox Friends »
    Agrega botones de Firefox en tu sitio web y comparte tu amor por Mozilla Firefox.
    Armada alucinante »
    Ayuda a otros usuarios en Twitter.
    Colabora con la comunidad »
    En Mozilla lo importante son las personas. Descubre cómo puedes colaborar.

    Boletín Firefox

    Suscríbete al boletín de novedades de Firefox.

  • Descargas

    Descarga los programas de Mozilla.

    Lo más visto

    cc-by-sa