Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Wikipedia

WebGL

API para la renderización de gráficos 3D en navegadores web

WebGL (Web Graphics Library)[2]​ es una especificación estándar que define una API implementada en JavaScript para la renderización de gráficos en 3D dentro de cualquier navegador web. No precisa del uso de plug-ins[3]​ adicionales en cualquier plataforma que soporte OpenGL 2.0 u OpenGL ES 2.0. WebGL está integrada completamente en todos los estándares web del navegador, permitiendo la aceleración hardware[4]​ (física) de la GPU y el procesamiento de imágenes y efectos como parte del lienzo o "canvas" de la página web. Los elementos de WebGL se pueden combinar con otros elementos HTML y estar compuestos con otras partes de la página o del fondo (background)[5]​ de la página. Los programas WebGL consisten en un código de control escrito en JavaScript que permite usar la implementación nativa de OpenGL ES 2.0, un lenguaje similar a C o C++, que se ejecuta en una unidad de procesamiento gráfico (GPU). WebGL está diseñado y gestionado por el consorcio de tecnología sin ánimo de lucro Khronos Group.[6]​

WebGL
Información general
Tipo de programa API
Autor Mozilla Foundation
Desarrollador WebGL Working Group
Lanzamiento inicial 3 de marzo de 2011
Licencia Personalizada
Idiomas Inglés
Información técnica
Plataformas admitidas Multiplataforma
Versiones
Última versión estable 2.0 (info) ( 17 de enero de 2017[2])
Enlaces
[editar datos en Wikidata]

Historia

editar

WebGL creció desde los experimentos del canvas 3D comenzados por Vladimir Vukićević en Mozilla. Vukićević mostró por primera vez un prototipo de Canvas 3D en 2006. A finales de 2007, tanto Mozilla[7]​ como Opera[8]​ habían hecho sus propias implementaciones de forma separada. A principios de 2009, el consorcio de tecnología sin ánimo de lucro Kronos Group consolidaron el WebGL Working Group (Grupo de Trabajo del WebGL), con la participación inicial de Apple, Google, Mozilla, Opera, y otros.[4]​[6]​ La versión 1.0 de las especificaciones WebGL fue lanzada en marzo de 2011.[9]​ Las primeras aplicaciones de WebGL incluyen Zygote Body[10]​[11]​ y las podemos encontrar en Firefox 2.0, Chrome 9, Internet Explorer 11, Opera 12, Safari 5.1 y Edge. En dispositivos móviles lo podemos encontrar en Chrome for Android 25, Edge, Firefox Mobile (Gecko) 4, Opera Mobile 12 y Safari Mobile 8.1.[12]​

A partir de marzo de 2012, el presidente del grupo de trabajo es Ken Russell. En noviembre de 2012, la compañía Autodesk anunció que portaba la mayoría de sus aplicaciones a la nube que se ejecutaba en clientes WebGL locales. Estas aplicaciones incluyen Fusion 360 y AutoCAD 360.[13]​

El desarrollo de las especificaciones de WebGL 2.0 empezaron en 2013 y concluyeron en enero de 2017.[14]​ Esta especificación está basada en OpenGL ES 3.0.[15]​ Las primeras implementaciones de este se pueden encontrar en Firefox 51, Chrome 56 y Opera 43.[12]​

Diseño

editar

WebGL 1.0 está basado en OpenGL ES 2.0[16]​ y proporciona una API para gráficos 3D.[9]​ Se utiliza el elemento canvas HTML5 al que se accede mediante interfaces Document Object Model (DOM).

WebGL 2.0 está basado en OpenGL ES 3.0 y garantiza disponibilidad de muchas extensiones opcionales de WebGL 1.0 y presenta nuevas APIs.[14]​

La gestión de memoria automática se proporciona como parte del lenguaje JavaScript.[6]​

Como ocurre en OpenGL ES 2.0, WebGL carece de las APIs de funciones de fijación[17]​ introducidas en OpenGL 1.0 y obsoletas en OpenGL 3.0. Esta funcionalidad en su lugar puede ser proporcionada por el usuario mediante código de sombreado y configurando enlaces de datos en JavaScript; este código necesario se complementa con frecuencia con una biblioteca de matriz tal como glMatrix, TDL, o MJS.

Los sombreados o shaders en WebGL están expresados directamente en GLSL y se le transmiten a la API WebGL como cadenas de texto. La implementación de WebGL compila estas instrucciones shader en código GPU. Este código es ejecutado para cada vértice enviado a través de la API y para cada pixel rasterizado en la pantalla.

Soporte

editar

WebGL posee un amplio soporte en los navegadores modernos. Sin embargo, su disponibilidad depende en otros factores como que la GPU lo soporte. La página web oficial de WebGL ofrece una sencilla página de prueba para verificar si tu GPU es compatible.[18]​ Es posible encontrar información más detallada (como que tipo de renderizador usa el navegador o que extensiones están disponibles) en páginas web de terceros.[19]​[20]​

editar
  • Google Chrome - WebGL 1.0 ha sido habilitado en todas las plataformas que tengan una tarjeta gráfica compatible con controladores actualizados desde la versión 9, lanzada en febrero de 2011.[21]​[22]​ Por defecto en Windows, Chrome usa ANGLE[23]​ (Almost Native Graphics Layer Engine), renderizador para traducir OpenGL ES a Direct3D 9.0, ya que posee mejor soporte de controladores.[24]​ En Linux y Mac OS X el rederizador por defecto es OpenGL.[25]​ Es posible también forzar OpenGL como renderizador en Windows.[24]​ Desde septiembre de 2013, Chrome posee un nuevo renderizador, Direct3D 11, el cual requiere una tarjeta gáfica más reciente.[26]​[27]​ A partir de Chrome 56 WebGL 2.0 está soportado.
  • Mozilla Firefox - WebGL 1.0 ha sido habilitado en todas las plataformas que tengan una tarjeta gráfica compatible con controladores actualizados desde la versión 4.0.[28]​ Desde 2013 Firefox también hace uso de Direct3D en plataformas Windows mediante ANGLE.[23]​ A partir de Firefox 51 WebGL 2.0 está soportado.
  • Midori
  • Safari - Desde Safari 5.1 en Mac OS X Leopard hasta Safari 6.0 en Mac OS X Mountain, y nuevas versiones, el soporte para WebGL 1.0 está soportado. Antes de Safari 8.0 este venía deshabilitado por defecto.[29]​[30]​[31]​[32]​
  • Opera - WebGL 1.0 está implementado en Opera 11 y 12, aunque a partir de 2014 ha sido deshabilitado por defecto.[33]​[34]​ A partir de Opera 43 WebGL 2.0 está soportado.
  • Internet Explorer - WebGL 1.0 está parcialmente soportado en Internet Explorer 11.[35]​[36]​[37]​ Al principio no cumplía con la mayoría de pruebas de conformidad oficiales de WebGL, pero Microsoft posteriormente lanzó numerosas actualizaciones para subsanarlos. El motor 0.94 de WebGL actualmente aprueba aproximadamente el 97% de las pruebas de Khronos.[38]​ El soporte para WebGL puede añadirse también de forma manual a versiones anteriores de Internet Explorer usando plugins de terceras partes como IEWebGL.[39]​
  • Microsoft Edge - La primera publicación estable soporta WebGL versión 0.95 (context name: "experimental-webgl") con un código abierto GLSL a transcompilador HLSL.[40]​ A partir de la versión 10240 WebGL 1.0 está soportado. WebGL 2.0 está planeado con prioridad media en futuras publicaciones.[41]​
  • Vivaldi
editar
  • Blackberry 10 - WebGL 1.0 está disponible para dispositivos Blackberry desde la versión OS 10.0.[42]​
  • Blackberry PlayBook[43]​ - WebGL está disponible mediante WebWorks y el navegador de PlayBook OS 2.0.[44]​
  • Navegador Android (Por Defecto) - No soporta WebGL. Sin embargo, la gama de teléfonos inteligentes Android de Sony Ericsson Xperia[45]​ sí son compatibles con WebGL mediante una actualización del firmware.[46]​ Los teléfonos inteligentes Samsung también disponen de WebGL habilitado (Galaxy SII (4.1.2) y Galaxy Note 8.0 (4.2)). Normalmente reemplazado en la mayoría de teléfonos inteligentes por Google Chrome, que sí es compatible.
  • Internet Explorer - WebGL 1.0 está disponible en Windows Phone 8.1.
  • Firefox Móvil - WebGL 1.0 está disponible para dispositivos Android y MeeGo desde Firefox 4.[47]​[48]​
  • Google Chrome - WebGL 1.0 está disponible para dispositivos Android desde Google Chrome 25 y habilitado por defecto desde la versión 30.[49]​
  • Maemo - En Nokia N900, WebGL 1.0 está disponible para el navegador MicroB[50]​ desde la actualización firmware PR1.2 en adelante.[51]​
  • MeeGo - WebGL 1.0 no está soportado, sin embargo, está habilitado a través de Firefox.[48]​
  • Microsoft Edge - WebGL 1.0 está disponible en Windows 10 Mobile.[52]​
  • Opera Mobile - Opera Mobile 12 soporta WebGL 1.0 (solamente en Android).[53]​
  • Sailfish OS - WebGL 1.0 está soportado por defecto en el navegador Sailfish.[54]​
  • Tizen - WebGL 1.0 está soportado.[55]​
  • Ubuntu Touch - WebGL 1.0 es soportado.[56]​
  • WebOs - WebGL 1.0 es soportado desde la expansión de marzo de 2012 del framework QtWebKit.[57]​
  • IOS - WebGL 1.0 está disponible para Safari mobile en IOS 8.[58]​

Creación del contenido y ecosistema

editar

La API de WebGL es una tecnología diseñada para trabajar directamente con la GPU (unidad de procesamiento gráfico), y puede resultar demasiado tedioso y difícil de usar directamente (en comparación con otros estándares web más accesibles) sin algunas bibliotecas de utilidad, como por ejemplo 'view frustum'. La carga de escenas gráficas y objetos 3D en los formatos convencionales de la industria no están tampoco previstos directamente. Por ello, se han creado las bibliotecas JavaScript (o algunas importadas a WebGL) para aportar esta funcionalidad adicional. Una lista no detallada de bibliotecas que proporcionan muchas características de alto nivel incluye A-Frame (VR), BabylonJS, C3DL, CopperLicht, Curve3D, CubicVR, EnergizeGL, GammaJS, GLGE, GTW, JS3D, Kuda, O3D, OSG.JS, PhiloGL, PlayCanvas, Pre3d, SceneJS, SpiderGL, TDL, Three.js, X3DOM.

De entre todas ellas, Three.js es la más popular por número de usuarios. Es ligera y tiene un bajo nivel de complejidad en comparación con la especificación WebGL original. BabylonJS también ha ganado bastante popularidad debido a estar programada por trabajadores de Microsoft.

También ha habido una abrupta aparición de motores de juego para WebGL,[59]​ incluyendo Unreal Engine 4 y Unity 5.[60]​ La biblioteca de alto nivel Stage3D/Away3D basada en flash también posee un puerto para WebGL a través de TypeScript.[26]​[61]​ Una biblioteca de menor peso que proporciona solo las utilidades matemáticas de vector y matriz para shaders es sylvester.js.[62]​[63]​ Algunas veces es utilizado en conjunto con una extensión especifica de WebGL llamada gIUtils.js.[62]​[64]​

Existen también algunas bibliotecas 2D creadas por encima de WebGL como Cocos2d-x o Pixi.js, que han sido implementadas de esta forma por razones de rendimiento, en un movimiento que es paralelo a lo que sucedió con el Framework Starling sobre Stage3D en el mundo de Flash. Las bibliotecas 2D basadas en WebGL vuelven a aparecer en el canvas HTML5 cuando WebGL no está disponible.[65]​

Eliminando el cuello de botella de renderización al dar casi acceso directo a la GPU, se expuso las limitaciones de rendimiento en las implementaciones de JavaScript. Algunos fueron solucionados por asm.js. (De forma similar, la introducción de Stage3D expuso los problemas de rendimiento de ActionScript, los cuales fueron resueltos con proyectos como CrossBridge).[65]​

Crear contenido para las escenas WebGL a menudo significa usar una herramienta de creación de contenido 3D y exportar la escena a un formato que sea legible para el visor o la biblioteca auxiliar. Software de autoría 3D de escritorio tal como Blender, Autodesk Maya o SimLab Composer pueden ser utilizados para este propósito. Esto fue posible por primera vez con Inka3D, un plugin de exportación WebGL para Maya. Particularmente, Blend4Web permite que una escena de WebGL sea creada completamente en Blender y exportada a un navegador con un solo clic, incluso como una página web independiente.[66]​ También hay algunos programas específicos de WebGL como CopperCube y el editor WebGL en línea Clara.io. 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. Así mismo, Unity Engine permite crear contenido (Videojuegos, apps, etc) para navegadores usando también WebGL.

Además, Mozilla Firefox implementó herramientas WebGL integradas que comienzan con la versión 27 que permiten editar vértices y fragmentos shaders.[67]​ Una serie de otras herramientas de depuración y creación de perfiles también han surgido.[68]​

X3D también hizo un proyecto llamado X3DOM para hacer que el contenido X3D y VRML se ejecute en WebGL. El modelo 3D en la etiqueta XML <X3D> en HTML5 y el script interactivo utilizará JavaScript y DOM. BS Content Studio y exportador de InstantReality X3D puede exportar X3D en HTML y correr por WebGL.

WebGL incrustado

editar

Como WebGL está diseñado para ejecutar en el lado del cliente con las operaciones de renderización pesadas realizadas por los usuarios en el GPU de la computadora, su código fuente puede ser relativamente fácilmente embebido en, por ejemplo, un microcontrolador PIC, o cualquier otro con la implementación de la pila TCP/IP, de modo que el microcontrolador actuará como servidor web y el resto de tareas se desarrollarán en el lado del cliente.[69]​

Véase también

editar

Referencias

editar
  1. ↑ «Khronos estadística». Alexa Internet. Archivado desde el original el 29 de julio de 2019. Consultado el 19 de enero de 2021. 
  2. ↑ "Khronos Releases Final WebGL 1.0 Specification". khronos.org.
  3. ↑ Gregg Tavares (2012-02-09). "WebGL Fundamentals". html5rocks.com.
  4. ↑ a b "Kronos Details WebGL Initiative to Bring Hardware-Accelerated 3D Graphics to the Internet" Archivado el 19 de abril de 2012 en Wayback Machine.. khronos.org.
  5. ↑ Tony Parisi (2012-08-15). "WebGL: Up and Running". safaribooksonline.com.
  6. ↑ a b c "WebGL – OpenGL ES 2.0 for the Web". khronos.org.
  7. ↑ "Canvas 3D: GL power, web-style". web.archive.org.
  8. ↑ "Taking the canvas to another dimension". web.archive.org. Archived from the original my.opera.com.
  9. ↑ a b "Especificaciones WebGL 1.0". khronos.org.
  10. ↑ "Zygote Body". zygotebody.com.
  11. ↑ Bhanoo, Sindya N. (2010-12-23). "New From Google: The Body Browser". well.blogs.nytimes.com.
  12. ↑ a b "Navegadores Web Compatibles WebGL". developer.mozilla.org.
  13. ↑ "Autodesk Fusion 360: The Future Of CAD, PT 1". 3dcadworld.com.
  14. ↑ a b "Especificaciones WebGL 2 ". khronos.org.
  15. ↑ "OpenGL ES 3.0". wikipedia.org.
  16. ↑ "OpenGL ES 2.0". wikipedia.org.
  17. ↑ "Funciones de Fijación". wikipedia.org.
  18. ↑ "Página de testeo WebGL". webgl.org.
  19. ↑ "WebGL Report". webgl.org.
  20. ↑ "WebGL Browser Report - WebGL Detection - WebGL Tester" . browserleaks.com.
  21. ↑ "Google releases Chrome 9" . techspot.com.
  22. ↑ "WebGL in Chrome Stable! - Learning WebGL" Archivado el 28 de mayo de 2015 en Wayback Machine. . learningwebgl.com.
  23. ↑ a b "ANGLE renderer" . wikipedia.org.
  24. ↑ a b "(WebGL) How to Enable Native OpenGL in your Browser (Windows)" . geeks3d.com.
  25. ↑ "Chromium Blog: Introducing the ANGLE Project" . blog.chromium.org.
  26. ↑ a b [1] Archivado el 8 de agosto de 2014 en Wayback Machine."WebGL around the net, 17 Oct 2013 - Learning WebGL Archivado el 8 de agosto de 2014 en Wayback Machine." . learningwebgl.com.
  27. ↑ "At last! Chrome D3D11 day has come!". tojicode.com.
  28. ↑ "Mozilla Firefox 4 Release Notes" . mozilla.com.
  29. ↑ "Enable WebGL in Safari" . ikriz.nl.
  30. ↑ "Getting a WebGL Implementation" . khronos.org.
  31. ↑ "Implementations - WebKit" . khronos.org.
  32. ↑ "WebGL Available On WebKit" . webkit.org.
  33. ↑ "WebGL and Hardware Acceleration" . web.archive.org. Archived from the original . dev.opera.com.
  34. ↑ "Introducing Opera 12 alpha" . web.archive.org. Archived from the original. opera.com.
  35. ↑ "WebGL en Windows" . msdn.microsoft.com.
  36. ↑ "Internet Explorer 11 Preview Guide For Developers" . msdn.microsoft.com.
  37. ↑ "Internet Explorer 11 to support WebGL and MPEG Dash" . engadget.com.
  38. ↑ "IE11 fails more than half tests in official WebGL" . connect.microsoft.com.
  39. ↑ "IEWebGL" . github.com
  40. ↑ "Microsoft Edge WebGL Implementation" . github.com.
  41. ↑ "Edge Platform - WebGL 2.0 status" Archivado el 27 de diciembre de 2018 en Wayback Machine. . developer.microsoft.com.
  42. ↑ McDonough, Larry."WebGL: 3D Gaming on the Web Arrives" Archivado el 13 de abril de 2013 en Wayback Machine.. devblog.blackberry.com.
  43. ↑ "Blackberry PlayBook" . wikipedia.org.
  44. ↑ Halevy, Ronen."PlayBook OS 2.0 Developer Beta Includes WebGL, Flash 11, & AIR 3.0" . berryreview.com.
  45. ↑ "Sony Ericsson Xperia" . wikipedia.org.
  46. ↑ "Xperia™ phones first to support WebGL" . web.archive.org. Archived from the original . blogs.sonyericsson.com.
  47. ↑ iclkevin "WebGL on Mobile Devices" Archivado el 7 de abril de 2017 en Wayback Machine. . ichemlabs.com.
  48. ↑ a b "Mobile HTML5 compatibility on iPhone,Android, Windows Phone, BlackBerry, Firefox OS and other mobile devices" . mobilehtml5.org.
  49. ↑ Kersey, Jason. "Chrome Beta for Android Update" . chromereleases.googleblog.com.
  50. ↑ "Navegador MicroB para Nokia" . wikipedia.org.
  51. ↑ "WebGL on N900" . suihkulokki.blogspot.com.
  52. ↑ "Dev guide: WebGL - Microsoft Edge Development" . docs.microsoft.com.
  53. ↑ "Opera Mobile 12" . web.archive.org. Archived from the original . opera.com.
  54. ↑ "WebGL Quake 3 on Jolla" . youtube.com.
  55. ↑ "WebGL on Tizen" . developer.tizen.org.
  56. ↑ "WebGL on Ubuntu Touch" . askubuntu.com.
  57. ↑ "WebGL on WebOS" . webosnation.com.
  58. ↑ Cunningham, Andrew. "IOS 8: Thoroughly Reviewed" . arstechnica.com.
  59. ↑ Tony Parisi "Programming 3D Applications with HTML5 and WebGL: 3D Animation and Visualization for Web Pages" . books.google.es. "O'Reilly Media, Inc.". pp. 364–366. ISBN 978-1-4493-6395-6.
  60. ↑ Stephen Barrett. "Tegra K1 Lands in Acer´s Newest Chromebook" . anandtech.com.
  61. ↑ "Blog > Away3D Typescript 4.1 Alpha > Away3D" Archivado el 8 de agosto de 2014 en Wayback Machine. . away3d.com.
  62. ↑ a b Alexey Boreskov; Evgeniy Shikin. "Computer Graphics: From Pixels to Programmable Graphics Hardware" . books.google.es. CRC Press. p. 370. ISBN 978-1-4398-6730-3.
  63. ↑ Andreas Anyuru. "Professional WebGL Programming: Developing 3D Graphics for the Web" . books.google.es. CRC Press. p. 370. ISBN 978-1-4398-6730-3.
  64. ↑ Steve Fulton; Jeff Fulton. "HTML5 Canvas: Native Interactivity and Animation for the Web" . books.google.es. (2nd ed.). "O'Reilly Media, Inc.". p. 624. ISBN 978-1-4493-3588-5.
  65. ↑ a b "The WebGL potential" . typedarray.org.
  66. ↑ "Blend4Web Official Site - About" . blend4web.com.
  67. ↑ "Live editing WebGL shaders with Firefox Developer Tools" . hacks.mozilla.org.
  68. ↑ "Real-Time Rendering - WebGL Debugging and Profilling Tools" . realtimerendering.com.
  69. ↑ WEBGL embebido en un microcontrolador PIC

[1]​Enlaces externos

editar
  1. ↑ 23 Agencia. «Revoluciona tu Presencia Digital con Páginas Web Interactivas 3D». 
Obtenido de «https://es.wikipedia.org/w/index.php?title=WebGL&oldid=158911289»