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 . [2] WebGL está completamente integrado con otros estándares web , lo que permite el uso acelerado de la física y el procesamiento de imágenes y efectos por GPU 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. [3]
Autor (es) original (es) | Fundación Mozilla |
---|---|
Desarrollador (es) | Grupo de trabajo Khronos WebGL |
Versión inicial | 3 de marzo de 2011 [1] |
Lanzamiento estable | 2.0 / 17 de enero de 2017 |
Plataforma | Multiplataforma |
Disponible en | inglés |
Tipo | API |
Sitio web | www |
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 . [4]
Diseño
WebGL 1.0 se basa en OpenGL ES 2.0 y proporciona una API para gráficos 3D. [5] Utiliza el elemento canvas de HTML5 y se accede a él mediante interfaces de Document Object Model (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. [6] JavaScript proporciona implícitamente la gestión automática de la memoria . [4]
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 Canvas 3D en 2006. A finales de 2007, tanto Mozilla [7] como Opera [8] 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. [4] [9] La versión 1.0 de la especificación WebGL se publicó en marzo de 2011. [1] En marzo de 2012, el presidente del grupo de trabajo es Ken Russell.
Las primeras aplicaciones de WebGL incluyen Zygote Body . [10] [11] 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. [12]
El desarrollo de la especificación WebGL 2 comenzó en 2013 y finalizó en enero de 2017. [13] Esta especificación se basa en OpenGL ES 3.0. [14] Las primeras implementaciones están en Firefox 51, Chrome 56 y Opera 43. [15]
Implementaciones
Motor de capa de gráficos casi nativa
El motor de capa de gráficos casi nativos (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 . [16] ″ [Google] Chrome utiliza ANGLE para toda la representación de gráficos en Windows, incluida la implementación acelerada de Canvas2D y el entorno de pruebas de Native Client. ″ [17]
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. [18] Se proporciona información más detallada (como qué renderizador usa el navegador y qué extensiones están disponibles) en sitios web de terceros. [19] [20]
Navegadores de escritorio
- Google Chrome : WebGL 1.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. [21] [22] De forma predeterminada en Windows, Chrome usa ANGLE (motor de capa de gráficos casi nativos ) para traducir OpenGL ES a Direct X 9.0co 11.0, que tienen un mejor soporte de controladores. [23] Sin embargo, en Linux y Mac OS X, el renderizador predeterminado es OpenGL. [24] También es posible forzar OpenGL como renderizador en Windows. [23] 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. [25] [26] 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. [27] Desde 2013, Firefox también usa DirectX en la plataforma Windows a través de ANGLE . [23] 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. [28] [29] [30] [31] [32] Safari versión 12 (disponible en MacOS Mojave) tiene soporte disponible para WebGL 2.0, actualmente como una característica "Experimental".
- Opera : WebGL 1.0 se implementó en Opera 11 y 12, aunque se deshabilitó de forma predeterminada en 2014. [33] [34] Opera 43+ es compatible con WebGL 2.0.
- Internet Explorer : WebGL 1.0 es parcialmente compatible con Internet Explorer 11 . [35] [36] [37] [38] 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. [39] La compatibilidad con WebGL también se puede agregar manualmente a versiones anteriores de Internet Explorer utilizando complementos de terceros como IEWebGL. [40]
- 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 . [41] La versión 10240+ admite WebGL 1.0 como prefijo. WebGL 2.0 está planificado con prioridad media en futuras versiones. [42] "las actualizaciones comenzarán cuando vuelva a abrir Google Chrome.
Navegadores móviles
- BlackBerry 10 - WebGL 1.0 está disponible para dispositivos BlackBerry desde la versión del SO 10.00 [43]
- BlackBerry PlayBook - WebGL 1.0 está disponible a través de WebWorks y el navegador en PlayBook OS 2.00 [44]
- 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. [45] 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. [46] [47]
- Firefox OS [47]
- Google Chrome : WebGL 1.0 está disponible para dispositivos Android desde Google Chrome 25 y está habilitado de forma predeterminada desde la versión 30. [48]
- 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. [49]
- MeeGo - WebGL 1.0 no es compatible con el navegador estándar "Web". Sin embargo, está disponible a través de Firefox . [47]
- Microsoft Edge : WebGL 1.0 con prefijo está disponible en Windows 10 Mobile. [50]
- Opera Mobile : Opera Mobile 12 es compatible con WebGL 1.0 (solo en Android). [51]
- Sailfish OS - WebGL 1.0 es compatible con el navegador Sailfish predeterminado. [52]
- Tizen - WebGL 1.0 es compatible [53]
- iOS : WebGL 1.0 está disponible para Safari móvil, en iOS 8 . [54]
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 usan típicamente 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. [ cita requerida ]
Georgia
También ha habido una rápida aparición de motores de juegos para WebGL, tanto en 2D como en 3D, [55] incluidos Unreal Engine 4 y Unity . [56] La biblioteca de alto nivel Away3D basada en Stage3D / Flash también tiene un puerto para WebGL a través de TypeScript . [25] [57] Una biblioteca de utilidades más liviana que proporciona solo las utilidades matemáticas de vectores y matrices para sombreadores es sylvester.js. [58] [59] A veces se usa junto con una extensión específica de WebGL llamada glUtils.js. [58] [60]
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. [61]
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 ). [61]
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. [62] 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. [63] También han surgido otras herramientas de depuración y creación de perfiles . [64]
Ver también
- Lista de marcos WebGL
- Experimente Curiosity : simulación WebGL del rover Curiosity de Marte
- WebVR
- Java OpenGL : biblioteca OpenGL para el lenguaje de programación Java
- WebGPU
Referencias
- ^ a b "Khronos lanza la especificación final de WebGL 1.0" . 3 de marzo de 2011 . Consultado el 18 de mayo de 2015 .
- ^ Tavares, Gregg (9 de febrero de 2012). "Conceptos básicos de WebGL" . HTML5 Rocks.
- ^ Parisi, Tony (15 de agosto de 2012). "WebGL: en funcionamiento" . O'Reilly Media, Incorporated. Archivado desde el original el 1 de febrero de 2013 . Consultado el 13 de julio de 2012 .
- ^ a b c "WebGL - OpenGL ES 2.0 para la Web" . Khronos.org . Consultado el 14 de mayo de 2011 .
- ^ Error de cita: la referencia nombrada
dipeshpecification
se invocó pero nunca se definió (consulte la página de ayuda ). - ^ "Especificación WebGL 2.0" . Khronos.org . Consultado el 27 de febrero de 2017 .
- ^ "Canvas 3D: GL power, estilo web" . Blog.vlad1.com. Archivado desde el original el 17 de julio de 2011 . Consultado el 14 de mayo de 2011 .
- ^ "Llevando el lienzo a otra dimensión" . My.opera.com. 2007-11-26. Archivado desde el original el 17 de noviembre de 2007 . Consultado el 14 de mayo de 2011 .
- ^ "Khronos detalla la iniciativa WebGL para llevar gráficos 3D acelerados por hardware a Internet" . Khronos.org. 2009-08-04. Archivado desde el original el 12 de abril de 2012 . Consultado el 14 de mayo de 2011 .
- ^ "Google Body - Google Labs" . Bodybrowser.googlelabs.com. Archivado desde el original el 13 de mayo de 2011 . Consultado el 14 de mayo de 2011 .
- ^ Bhanoo, Sindya N. (23 de diciembre de 2010). "Nuevo de Google: el Body Browser" . Well.blogs.nytimes.com . Consultado el 14 de mayo de 2011 .
- ^ "AUTODESK FUSION 360: EL FUTURO DEL CAD, PT. 1" . 3dcadworld.com . Consultado el 21 de agosto de 2013 .
- ^ "Especificación WebGL 2" . khronos.org. 2013-09-26 . Consultado el 28 de octubre de 2013 .
- ^ "Especificación WebGL 2.0" .
- ^ "WebGL - API web" . MDN .
- ^ "ÁNGULO - Motor de capa de gráficos casi nativos" . 2019 . Consultado el 21 de junio de 2019 .
- ^ "ÁNGULO - Motor de capa de gráficos casi nativos" . 2019 . Consultado el 21 de junio de 2019 .
- ^ "Página de prueba de WebGL" . webgl.org .
- ^ "Informe WebGL" . webglreport.com .
- ^ "Informe del navegador WebGL - Detección de WebGL - Probador de WebGL - BrowserLeaks" . browserleaks.com .
- ^ Mah, Paul (8 de febrero de 2011). "Google lanza Chrome 9; viene con Google Instant, WebGL - FierceCIO: TechWatch" . FerozCIO. Archivado desde el original el 25 de octubre de 2011 . Consultado el 20 de marzo de 2012 .
- ^ "¡WebGL en Chrome estable! - Aprendiendo WebGL" . learningwebgl.com . Archivado desde el original el 28 de mayo de 2015 . Consultado el 7 de agosto de 2014 .
- ^ a b c "(WebGL) Cómo habilitar OpenGL nativo en su navegador (Windows)" . geeks3d.com .
- ^ "Blog de Chromium: Presentación del proyecto ANGLE" . Blog de Chromium .
- ^ a b "WebGL en la red, 17 de octubre de 2013: aprendizaje de WebGL" . learningwebgl.com . Archivado desde el original el 8 de agosto de 2014 . Consultado el 5 de agosto de 2014 .
- ^ "¡Por fin! ¡Ha llegado el día de Chrome D3D11!" . tojicode.com .
- ^ "Notas de la versión de Mozilla Firefox 4" . Mozilla.com. 2011-03-22 . Consultado el 20 de marzo de 2012 .
- ^ "Nuevo en OS X Lion: Safari 5.1 trae WebGL, Do Not Track y más" . Fairerplatform.com. 2011-05-03. Archivado desde el original el 19 de marzo de 2012 . Consultado el 20 de marzo de 2012 .
- ^ "Habilitar WebGL en Safari" . Ikriz.nl. 2011-08-23. Archivado desde el original el 4 de marzo de 2012 . Consultado el 20 de marzo de 2012 .
- ^ "Obtener una implementación de WebGL" . Khronos.org. 2012-01-13 . Consultado el 20 de marzo de 2012 .
- ^ "Implementaciones / WebKit" . Khronos.org. 2011-09-03 . Consultado el 20 de marzo de 2012 .
- ^ "WebGL ahora disponible en WebKit Nightlies" . Webkit.org. Archivado desde el original el 8 de marzo de 2012 . Consultado el 20 de marzo de 2012 .
- ^ "WebGL y aceleración de hardware" . My.opera.com. 2011-02-28. Archivado desde el original el 3 de marzo de 2011 . Consultado el 20 de marzo de 2012 .
- ^ "Presentación de Opera 12 alpha" . My.opera.com. 2011-10-13. Archivado desde el original el 15 de octubre de 2011 . Consultado el 20 de marzo de 2012 .
- ^ "WebGL (Windows)" . microsoft.com . Microsoft.
- ^ "Guía de vista previa de Internet Explorer 11 para desarrolladores" . Microsoft. 2013-07-17 . Consultado el 24 de julio de 2013 .
- ^ "WebGL" . Microsoft. 2013-07-17 . Consultado el 24 de julio de 2013 .
- ^ "Internet Explorer 11 para admitir WebGL y MPEG Dash" . Engadget. 2013-06-26 . Consultado el 26 de junio de 2013 .
- ^ "IE11 falla más de la mitad de las pruebas en el conjunto de pruebas de conformidad oficial de WebGL" . Microsoft Connect.
- ^ "IEWebGL" . Iewebgl . Consultado el 14 de agosto de 2014 .
- ^ "GitHub - Implementación de Microsoft Edge WebGL" . Microsoft. 2016-06-04 . Consultado el 10 de junio de 2016 .
- ^ "El estado de WebGL 2.0 en Microsoft Edge está en consideración" . Desarrollo de Microsoft Edge. Archivado desde el original el 27 de diciembre de 2018 . Consultado el 9 de febrero de 2017 .
- ^ McDonough, Larry. "WebGL: Llega el juego 3D en la Web" . BerryReview . Archivado desde el original el 13 de abril de 2013 . Consultado el 9 de abril de 2013 .
- ^ Halevy, Ronen. "PlayBook OS 2.0 Developer Beta incluye WebGL, Flash 11 y AIR 3.0" . BerryReview . Consultado el 15 de noviembre de 2011 .
- ^ "Los teléfonos Xperia ™ son los primeros en admitir WebGL ™ - Developer World" . blogs.sonyericsson.com . Programa para desarrolladores de Sony Ericsson. 2011-11-29. Archivado desde el original el 3 de diciembre de 2011 . Consultado el 5 de diciembre de 2011 .
- ^ "WebGL en dispositivos móviles" . iChemLabs. 2011-11-12. Archivado desde el original el 12 de marzo de 2013 . Consultado el 25 de noviembre de 2011 .
- ^ a b c "Compatibilidad con HTML5 móvil en iPhone, Android, Windows Phone, BlackBerry, Firefox OS y otros dispositivos móviles" . Consultado el 16 de septiembre de 2015 .
- ^ Kersey, Jason. "Actualización de Chrome Beta para Android" . Blog de versiones de Chrome . Consultado el 23 de agosto de 2013 .
- ^ Voipio, Riku (7 de junio de 2010). "WebGL en N900" . Suihkulokki.blogspot.com . Consultado el 14 de mayo de 2011 .
- ^ "Guía de desarrollo: WebGL - Microsoft Edge Development" . Microsoft . Consultado el 10 de junio de 2016 .
- ^ "Opera Mobile 12" . Opera Software. Archivado desde el original el 1 de marzo de 2012 . Consultado el 27 de febrero de 2012 .
- ^ "HTML5test - ¿Qué tan bien es compatible su navegador con HTML5?" . Consultado el 16 de septiembre de 2015 .
- ^ "HTML5test - ¿Qué tan bien es compatible su navegador con HTML5?" . Consultado el 16 de septiembre de 2015 .
- ^ Cunningham, Andrew (17 de septiembre de 2014). "iOS 8, revisado a fondo" . Ars Technica . Consultado el 19 de septiembre de 2014 .
- ^ Parisi, Tony (13 de febrero de 2014). Programación de Aplicaciones 3D con HTML5 y WebGL: Animación y Visualización 3D para Páginas Web . "O'Reilly Media, Inc.". págs. 364–366. ISBN 978-1-4493-6395-6.
- ^ Barrett, Stephen. "Tegra K1 aterriza en el Chromebook más nuevo de Acer" . anandtech.com .
- ^ "Blog> Away3D Typescript 4.1 Alpha> Away3D" . away3d.com . Archivado desde el original el 8 de agosto de 2014 . Consultado el 5 de agosto de 2014 .
- ^ a b Boreskov, Alexey; Shikin, Evgeniy (2014). Gráficos por computadora: desde píxeles hasta hardware de gráficos programables . Prensa CRC. pag. 370. ISBN 978-1-4398-6730-3.
- ^ Anyuru, Andreas (2012). Programación WebGL profesional: desarrollo de gráficos 3D para la web . John Wiley e hijos. pag. 140. ISBN 978-1-119-94058-6.
- ^ Fulton, Steve; Fulton, Jeff (2013). HTML5 Canvas (2ª ed.). "O'Reilly Media, Inc.". pag. 624. ISBN 978-1-4493-3588-5.
- ^ a b "El potencial de WebGL - TypedArray.org" . typedarray.org .
- ^ "Sitio oficial de Blend4Web - Acerca de" . Blend4Web.com . Consultado el 22 de junio de 2015 .
- ^ "Edición en vivo de sombreadores WebGL con Firefox Developer Tools" . Mozilla Hacks: el blog para desarrolladores web .
- ^ "Representación en tiempo real · Herramientas de depuración y creación de perfiles de WebGL" . realtimerendering.com .
Error de cita: una referencia definida por lista denominada "WebGLSpecification" no se utiliza en el contenido (consulte la página de ayuda ).
Otras lecturas
enlaces externos
- Página web oficial
- WebGL Archivado el 26 de junio de 2010 en Wayback Machine en Mozilla Developer Network