WebGL - WebGL

WebGL
WebGL Logo.svg
Autor (es) original (es) Fundación Mozilla
Desarrollador (es) Grupo de trabajo Khronos WebGL
Versión inicial 3 de marzo de 2011 ( 2011-03-03 )
Lanzamiento estable
2.0 / 17 de enero de 2017 ( 2017-01-17 )
Plataforma Multiplataforma
Disponible en inglés
Escribe API
Sitio web www .khronos .org / webgl /
HTML
Comparaciones

WebGL (abreviatura de biblioteca de gráficos web ) es una API de JavaScript para renderizar gráficos interactivos 2D y 3D dentro de cualquier navegador web compatible sin el uso de complementos . WebGL está completamente integrado con otros estándares web , lo que permite el uso acelerado de la física y el procesamiento y los efectos de imágenes como parte del lienzo de la página web. Los elementos WebGL se pueden mezclar con otros elementos HTML y componerse con otras partes de la página o el fondo de la página.

Los programas WebGL consisten en código de control escrito en JavaScript y código de sombreado escrito en OpenGL ES Shading Language (GLSL ES), un lenguaje similar a C o C ++ , y se ejecuta en la unidad de procesamiento de gráficos (GPU) de una computadora . WebGL está diseñado y mantenido por la organización sin fines de lucro Khronos Group .

Diseño

WebGL 1.0 se basa en OpenGL ES 2.0 y proporciona una API para gráficos 3D. Utiliza el elemento de lienzo HTML5 y se accede a él mediante las interfaces del Modelo de objetos de documento (DOM).

WebGL 2.0 se basa en OpenGL ES 3.0 y garantiza la disponibilidad de muchas extensiones opcionales de WebGL 1.0 y expone nuevas API. JavaScript proporciona implícitamente la gestión automática de la memoria .

Al igual que OpenGL ES 2.0, WebGL no tiene las API de función fija introducidas en OpenGL 1.0 y obsoletas en OpenGL 3.0. Esta funcionalidad, si es necesaria, debe ser implementada por el desarrollador final proporcionando código de sombreado y configurando enlaces de datos en JavaScript.

Los sombreadores en WebGL se expresan directamente en GLSL y se pasan a la API de WebGL como cadenas de texto. La implementación de WebGL compila estas instrucciones de sombreado en el código de la GPU. Este código se ejecuta para todos y cada uno de los vértices enviados a través de la API y para cada píxel rasterizado a la pantalla.

Historia

WebGL evolucionó a partir de los experimentos Canvas 3D iniciados por Vladimir Vukićević en Mozilla . Vukićević demostró por primera vez un prototipo de Canvas 3D en 2006. A finales de 2007, tanto Mozilla como Opera habían realizado sus propias implementaciones independientes.

A principios de 2009, el consorcio tecnológico sin fines de lucro Khronos Group inició el Grupo de Trabajo WebGL, con la participación inicial de Apple , Google , Mozilla, Opera y otros. La versión 1.0 de la especificación WebGL se publicó en marzo de 2011. En marzo de 2012, el presidente del grupo de trabajo es Ken Russell.

Las primeras aplicaciones de WebGL incluyen Zygote Body . En noviembre de 2012, Autodesk anunció que trasladaron la mayoría de sus aplicaciones a la nube que se ejecuta en clientes WebGL locales. Estas aplicaciones incluían Fusion 360 y AutoCAD 360.

El desarrollo de la especificación WebGL 2 comenzó en 2013 y finalizó en enero de 2017. Esta especificación se basa en OpenGL ES 3.0. Las primeras implementaciones están en Firefox 51, Chrome 56 y Opera 43.

Implementaciones

Motor de capa de gráficos casi nativa

Artículo principal: ANGLE (software)

Almost Native Graphics Layer Engine (ANGLE) es un motor gráfico de código abierto que implementa WebGL 1.0 (2.0 que se ajusta estrechamente a ES 3.0) y los estándares OpenGL ES 2.0 y 3.0. Es un backend predeterminado para Google Chrome y Mozilla Firefox en plataformas Windows y funciona traduciendo las llamadas WebGL y OpenGL a las API específicas de la plataforma disponibles. Actualmente, ANGLE proporciona acceso a OpenGL ES 2.0 y 3.0 a las API de OpenGL, OpenGL ES, Direct3D 9 y Direct3D 11 de escritorio . ″ [Google] Chrome utiliza ANGLE para toda la representación de gráficos en Windows, incluida la implementación acelerada de Canvas2D y el entorno sandbox de Native Client. ″

Software

WebGL es ampliamente compatible con los navegadores modernos. Sin embargo, su disponibilidad depende de otros factores, como la GPU que lo respalda. El sitio web oficial de WebGL ofrece una página de prueba sencilla. Se proporciona información más detallada (como qué renderizador usa el navegador y qué extensiones están disponibles) en sitios web de terceros.

Navegadores de escritorio

  • Google Chrome : WebGL 2.0 se ha habilitado en todas las plataformas que tienen una tarjeta gráfica capaz con controladores actualizados desde la versión 9, lanzada en febrero de 2011. De forma predeterminada en Windows, Chrome usa el renderizador ANGLE (Almost Native Graphics Layer Engine) para traducir OpenGL ES a Direct X 9.0co 11.0, que tienen un mejor soporte de controladores. Sin embargo, en Linux y Mac OS X, el renderizador predeterminado es OpenGL. También es posible forzar OpenGL como renderizador en Windows. Desde septiembre de 2013, Chrome también tiene un renderizador Direct3D 11 más nuevo , que sin embargo requiere una tarjeta gráfica más nueva. Chrome 56+ es compatible con WebGL 2.0.
  • Firefox : WebGL 1.0 se ha habilitado en todas las plataformas que tienen una tarjeta gráfica capaz con controladores actualizados desde la versión 4.0. Desde 2013, Firefox también usa DirectX en la plataforma Windows a través de ANGLE . Firefox 51+ es compatible con WebGL 2.0.
  • Safari : Safari 6.0 y versiones más recientes instaladas en OS X Mountain Lion , Mac OS X Lion y Safari 5.1 en Mac OS X Snow Leopard implementaron soporte para WebGL 1.0, que estaba deshabilitado de forma predeterminada antes de Safari 8.0. Safari versión 12 (disponible en MacOS Mojave) tiene soporte disponible para WebGL 2.0, actualmente como una función "Experimental".
  • Opera : WebGL 1.0 se implementó en Opera 11 y 12, aunque se deshabilitó de forma predeterminada en 2014. Opera 43+ es compatible con WebGL 2.0.
  • Internet Explorer : WebGL 1.0 es parcialmente compatible con Internet Explorer 11 . Inicialmente falló la mayoría de las pruebas oficiales de conformidad con WebGL, pero Microsoft lanzó más tarde varias actualizaciones. El último motor 0.94 WebGL pasa actualmente ~ 97% de las pruebas de Khronos. La compatibilidad con WebGL también se puede agregar manualmente a versiones anteriores de Internet Explorer utilizando complementos de terceros como IEWebGL.
  • Microsoft Edge : la versión estable inicial es compatible con WebGL versión 0.95 (nombre de contexto: "experimental-webgl") con un transpilador GLSL a HLSL de código abierto . La versión 10240+ admite WebGL 1.0 como prefijo. WebGL 2.0 está planificado con prioridad media en futuras versiones.

Navegadores móviles

  • BlackBerry 10 - WebGL 1.0 está disponible para dispositivos BlackBerry desde la versión del SO 10.00
  • BlackBerry PlayBook - WebGL 1.0 está disponible a través de WebWorks y el navegador en PlayBook OS 2.00
  • Navegador de Android: básicamente no es compatible, pero la gama Sony Ericsson Xperia de teléfonos inteligentes Android ha tenido capacidades WebGL después de una actualización de firmware. Los teléfonos inteligentes Samsung también tienen WebGL habilitado (verificado en Galaxy SII (4.1.2) y Galaxy Note 8.0 (4.2)). Compatible con Google Chrome que reemplazó al navegador de Android en muchos teléfonos (pero no es un nuevo navegador de Android estándar).
  • Internet Explorer : WebGL 1.0 con prefijo está disponible en Windows Phone 8.x (11+)
  • Firefox para dispositivos móviles : WebGL 1.0 está disponible para dispositivos Android y MeeGo desde Firefox 4.
  • Firefox OS
  • Google Chrome : WebGL 1.0 está disponible para dispositivos Android desde Google Chrome 25 y habilitado de forma predeterminada desde la versión 30.
  • Maemo : en Nokia N900 , WebGL 1.0 está disponible en el navegador microB estándar desde la actualización del firmware PR1.2 en adelante.
  • MeeGo - WebGL 1.0 no es compatible con el navegador estándar "Web". Sin embargo, está disponible a través de Firefox .
  • Microsoft Edge : WebGL 1.0 con prefijo está disponible en Windows 10 Mobile.
  • Opera Mobile : Opera Mobile 12 es compatible con WebGL 1.0 (solo en Android).
  • Sailfish OS - WebGL 1.0 es compatible con el navegador Sailfish predeterminado.
  • Tizen - WebGL 1.0 es compatible
  • iOS : WebGL 1.0 está disponible para Safari móvil, en iOS 8 .

Herramientas y ecosistema

Utilidades

La naturaleza de bajo nivel de la API de WebGL, que proporciona poco por sí misma para producir gráficos 3D deseables rápidamente, contribuyó a la creación de bibliotecas que se utilizan normalmente para construir cosas en gráficos 3D (por ejemplo, ver transformaciones para sombreadores , ver frustum, etc. ). Las bibliotecas también abstraen las tareas básicas, como cargar gráficos de escena y objetos 3D en los formatos populares de la industria (algunas de las cuales fueron portadas a JavaScript desde otros lenguajes) para proporcionar funcionalidad adicional. Una lista no exhaustiva de las bibliotecas que proporcionan muchos de alto nivel características incluye A-Frame (VR) , BabylonJS , PlayCanvas , Three.js , OSG.JS y CopperLicht . X3D también hizo un proyecto llamado X3DOM para hacer que el contenido de X3D y VRML se ejecutara en WebGL. El modelo 3D tendrá una etiqueta XML en HTML5 y el script interactivo usará JavaScript y DOM. BS Content Studio y el exportador InstantReality X3D pueden exportar X3D en HTML y ejecutarlo mediante WebGL. <X3D>

Gavd

También ha habido una rápida aparición de motores de juegos para WebGL, tanto en 2D como en 3D, incluidos Unreal Engine 4 y Unity . La biblioteca de alto nivel Away3D basada en Stage3D / Flash también tiene un puerto para WebGL a través de TypeScript . Una biblioteca de utilidades más liviana que proporciona solo las utilidades matemáticas de vectores y matrices para sombreadores es sylvester.js. A veces se usa junto con una extensión específica de WebGL llamada glUtils.js.

También hay algunas bibliotecas 2D construidas sobre WebGL como Cocos2d -x o Pixi.js , que se implementaron de esta manera por razones de rendimiento, en un movimiento que es paralelo a lo que sucedió con Starling Framework sobre Stage3D en el mundo Flash. Las bibliotecas 2D basadas en WebGL recurren al lienzo HTML5 cuando WebGL no está disponible.

La eliminación del cuello de botella de la representación al dar acceso casi directo a la GPU también expuso las limitaciones de rendimiento en las implementaciones de JavaScript. Algunos fueron abordados por asm.js y WebAssembly (de manera similar, la introducción de Stage3D expuso problemas de rendimiento dentro de ActionScript , que fueron abordados por proyectos como CrossBridge ).

Creación de contenido

Al igual que con cualquier otra API de gráficos, la creación de contenido para escenas WebGL requiere el uso de una herramienta de creación de contenido 3D normal y la exportación de la escena a un formato que sea legible por el espectador o la biblioteca auxiliar. El software de creación de escritorio 3D como Blender , Autodesk Maya o SimLab Composer se puede utilizar para este propósito. En particular, Blend4Web permite crear una escena WebGL completamente en Blender y exportarla a un navegador con un solo clic, incluso como una página web independiente. También hay software específico de WebGL, como CopperCube y el editor en línea Clara.io, basado en WebGL . Las plataformas en línea como Sketchfab y Clara.io permiten a los usuarios cargar directamente sus modelos 3D y mostrarlos utilizando un visor WebGL alojado.

Herramientas basadas en el medio ambiente

Además, Mozilla Foundation , en su navegador Firefox, ha implementado herramientas WebGL integradas a partir de la versión 27 que permiten editar sombreadores de vértices y fragmentos. También han surgido otras herramientas de depuración y creación de perfiles .

Ver también

Referencias

enlaces externos