Enlaces de JavaScript para OpenGL en navegadores web
WebGL (abreviatura de Web Graphics Library ) es una API de JavaScript para renderizar gráficos interactivos 2D y 3D en 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 por GPU de física, procesamiento de imágenes y efectos en el lienzo HTML . Los elementos WebGL se pueden mezclar con otros elementos HTML y combinar con otras partes de la página o el fondo de la página. [3]
Los programas WebGL constan de código de control escrito en JavaScript y código de sombreado escrito en OpenGL ES Shading Language (GLSL ES, a veces denominado ESSL), un lenguaje similar a C o C++ . El código WebGL se ejecuta en la GPU de una computadora.
WebGL está diseñado y mantenido por la organización sin fines de lucro Khronos Group . [4] El 9 de febrero de 2022, Khronos Group anunció la compatibilidad con WebGL 2.0 en todos los navegadores principales. [5]
Diseño
WebGL 1.0 se basa en OpenGL ES 2.0 y proporciona una API para gráficos 3D. [6] Utiliza el elemento canvas HTML5 y se accede a él mediante interfaces del Modelo de objetos de documento (DOM).
WebGL 2.0 se basa en OpenGL ES 3.0 . Garantiza la disponibilidad de muchas extensiones opcionales de WebGL 1.0 y expone nuevas API. [7] La gestión automática de memoria se proporciona de forma implícita mediante JavaScript . [4]
Al igual que OpenGL ES 2.0, WebGL carece de las API de función fija introducidas en OpenGL 1.0 y que quedaron obsoletas en OpenGL 3.0. Esta funcionalidad, si es necesaria, debe ser implementada por el desarrollador mediante código de sombreado y JavaScript.
Los sombreadores en WebGL se escriben en GLSL y se pasan a la API de WebGL como cadenas de texto. La implementación de WebGL compila estas cadenas en código de GPU. Este código se ejecuta para cada vértice enviado a través de la API y para cada píxel rasterizado en la pantalla.
Historia
WebGL surgió 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 [8] como Opera [9] 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] [10] La versión 1.0 de la especificación WebGL se lanzó en marzo de 2011. [1]
Una de las primeras aplicaciones de WebGL fue Zygote Body . [11] [12] En noviembre de 2012, Autodesk anunció que trasladaría la mayoría de sus aplicaciones a la nube para que se ejecuten en clientes WebGL locales. Estas aplicaciones incluían Fusion 360 y AutoCAD 360. [13]
El desarrollo de la especificación WebGL 2 comenzó en 2013 y finalizó en enero de 2017. [14] La especificación se basa en OpenGL ES 3.0. [15]
Las primeras implementaciones están en Firefox 51, Chrome 56 y Opera 43. [16]
Implementaciones
Motor de capa de gráficos casi nativo
Almost Native Graphics Layer Engine (ANGLE) es un motor gráfico de código abierto que implementa los estándares WebGL 1.0 (2.0 que se ajusta estrechamente a ES 3.0) y OpenGL ES 2.0 y 3.0. Es un backend predeterminado tanto para Google Chrome como para Mozilla Firefox en plataformas Windows y funciona traduciendo las llamadas WebGL y OpenGL a las API específicas de la plataforma disponibles. ANGLE actualmente proporciona acceso a OpenGL ES 2.0 y 3.0 a las API de escritorio OpenGL, OpenGL ES, Direct3D 9 y Direct3D 11. [17] ″[Google] Chrome usa 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.″ [17]
Software
WebGL es ampliamente compatible con los navegadores modernos. Sin embargo, su disponibilidad también depende de otros factores, como por ejemplo si la GPU lo admite. El sitio web oficial de WebGL ofrece una página de prueba sencilla. [18] Se puede encontrar información más detallada (como qué renderizador utiliza el navegador y qué extensiones están disponibles) en sitios web de terceros. [19] [20]
Navegadores de escritorio[2]
- 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 el renderizador ANGLE (Almost Native Graphics Layer Engine) para traducir OpenGL ES a Direct X 9.0c o 11.0, que tienen 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 requiere una tarjeta gráfica más nueva. [25] [26] Chrome 56+ admite WebGL 2.0.
- Firefox – WebGL 1.0 se ha habilitado en todas las plataformas que tienen una tarjeta gráfica compatible 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 nuevas 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 manera predeterminada antes de Safari 8.0. [28] [29] [30] [31] [32] La versión 12 de Safari (disponible en MacOS Mojave) tiene soporte disponible para WebGL 2.0 como una característica "Experimental". Safari 15 habilita WebGL 2.0 para todos los usuarios. [33]
- Opera – WebGL 1.0 se implementó en Opera 11 y 12, pero se deshabilitó de forma predeterminada en 2014. [34] [35] Opera 43+ admite WebGL 2.0.
- Internet Explorer – WebGL 1.0 es parcialmente compatible con Internet Explorer 11. [ 36] [37] [38] [39] Internet Explorer inicialmente no pasó la mayoría de las pruebas oficiales de conformidad con WebGL, pero Microsoft luego lanzó varias actualizaciones. El último motor WebGL 0.94 actualmente pasa aproximadamente el 97% de las pruebas de Khronos. [40] La compatibilidad con WebGL también se puede agregar manualmente a versiones anteriores de Internet Explorer utilizando complementos de terceros como IEWebGL. [41]
- Microsoft Edge : para Microsoft Edge Legacy, la versión estable inicial es compatible con la versión 0.95 de WebGL (nombre de contexto: "experimental-webgl") con un transpilador de GLSL a HLSL de código abierto . [42] La versión 10240+ es compatible con WebGL 1.0 como prefijo. La última versión de Edge basada en Chromium es compatible con WebGL 2.0.
Navegadores móviles
- Navegador Android: WebGL 1.0 es compatible con Android a partir de Chrome 25. [43] WebGL 2.0 es compatible con Android a partir de Chrome 114. [44] Chrome se utiliza para la vista web del sistema Android a partir de Android 5. [44]
- BlackBerry 10 – WebGL 1.0 está disponible para dispositivos BlackBerry desde la versión 10.00 del sistema operativo [45]
- BlackBerry PlayBook – WebGL 1.0 está disponible a través de WebWorks y el navegador en PlayBook OS 2.00 [46]
- Internet Explorer – El prefijo WebGL 1.0 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. [47] [48]
- Sistema operativo Firefox [48]
- 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. [49]
- Maemo – En Nokia N900 , WebGL 1.0 está disponible en el navegador microB estándar a partir de la actualización de firmware PR1.2 en adelante. [50]
- MeeGo – WebGL 1.0 no es compatible con el navegador estándar “Web”. Sin embargo, está disponible a través de Firefox . [48]
- Microsoft Edge – Prefixed WebGL 1.0 está disponible en Windows 10 Mobile. [51]
- Opera Mobile – Opera Mobile 12 es compatible con WebGL 1.0 (solo en Android). [52]
- Safari en iOS : WebGL 1.0 está disponible para Safari móvil en iOS 8. [ 53] WebGL 2.0 está disponible para Safari móvil en iOS 15. [44]
- Sailfish OS – WebGL 1.0 es compatible con el navegador Sailfish predeterminado. [54]
- Tizen – Se admite WebGL 1.0 [55]
Herramientas y ecosistema
Utilidades
La naturaleza de bajo nivel de la API WebGL, que proporciona poco por sí sola para crear rápidamente gráficos 3D deseables, motivó la creación de bibliotecas de nivel superior que abstraen operaciones comunes (por ejemplo, cargar gráficos de escena y objetos 3D en ciertos formatos; aplicar transformaciones lineales a sombreadores o frustums de vista ). Algunas de estas bibliotecas se trasladaron a JavaScript desde otros lenguajes. Algunos ejemplos de bibliotecas que proporcionan funciones de alto nivel incluyen A-Frame (VR) , BabylonJS, PlayCanvas , three.js , OSG.JS , el visor de modelos de Google y CopperLicht . Web3D también realizó un proyecto llamado X3DOM para hacer que el contenido X3D y VRML se ejecute en WebGL.
Juegos
Ha surgido un motor de juegos 2D y 3D para WebGL, [56] como Unreal Engine 4 y Unity . [57] La biblioteca de alto nivel Away3D basada en Stage3D /Flash también tiene un puerto para WebGL a través de TypeScript . [25] [58] Una biblioteca de utilidades más liviana que proporciona solo utilidades matemáticas de matriz y vector para sombreadores es sylvester.js. [59] [60] A veces se usa junto con una extensión específica de WebGL llamada glUtils.js. [59] [61]
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. [62] Eliminar el cuello de botella de renderizado al dar acceso casi directo a la GPU ha expuesto limitaciones de rendimiento en las implementaciones de JavaScript. Algunas fueron abordadas 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 ). [62]
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 y la exportación de la escena a un formato que sea legible por el visor o la biblioteca auxiliar. Se puede utilizar para este propósito software de creación de contenido 3D de escritorio como Blender , Autodesk Maya o SimLab Composer. 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. [63] También hay algún software específico de WebGL como CopperCube y el editor en línea basado en WebGL Clara.io . Las plataformas en línea como Sketchfab y Clara.io permiten a los usuarios cargar directamente sus modelos 3D y visualizarlos utilizando un visor WebGL alojado.
Herramientas basadas en el entorno
A partir de la versión 27 de Firefox , Mozilla ha proporcionado a Firefox herramientas WebGL integradas que permiten la edición de vértices y sombreadores de fragmentos. [64] También han surgido otras herramientas de depuración y creación de perfiles . [65]
Véase también
Referencias
- ^ ab "Khronos lanza la especificación final de WebGL 1.0". 3 de marzo de 2011. Consultado el 18 de mayo de 2015 .
- ^ ab "Fundamentos de WebGL". HTML5 es genial.
- ^ Parisi, Tony (15 de agosto de 2012). "WebGL: Up and Running". O'Reilly Media, Incorporated. Archivado desde el original el 1 de febrero de 2013. Consultado el 13 de julio de 2012 .
- ^ abc "WebGL – OpenGL ES 2.0 para la Web". Khronos.org . Consultado el 14 de mayo de 2011 .
- ^ "WebGL 2.0 obtiene un soporte generalizado de todos los principales navegadores web". The Khronos Group . 2022-02-09 . Consultado el 2022-02-13 .
- ^ "Especificación WebGL". Khronos.org . Consultado el 14 de mayo de 2011 .
- ^ "Especificación WebGL 2.0". Khronos.org . Consultado el 27 de febrero de 2017 .
- ^ "Canvas 3D: poder GL, 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 2007-11-17 . Consultado el 2011-05-14 .
- ^ "Khronos detalla la iniciativa WebGL para llevar gráficos 3D acelerados por hardware a Internet". Khronos.org. 4 de agosto de 2009. Archivado desde el original el 19 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). "Novedades de Google: el navegador corporal". Well.blogs.nytimes.com . Consultado el 14 de mayo de 2011 .
- ^ "AUTODESK FUSION 360: EL FUTURO DEL CAD, PARTE 1". 3dcadworld.com . Consultado el 21 de agosto de 2013 .
- ^ "Especificación WebGL 2". khronos.org. 26 de septiembre de 2013. Consultado el 28 de octubre de 2013 .
- ^ "Especificación WebGL 2.0".
- ^ "WebGL - API web". MDN .
- ^ ab "ANGLE - Motor de capa de gráficos casi nativo". 2019 . Consultado el 21 de junio de 2019 .
- ^ "Página de prueba 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». FierceCIO. 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 .
- ^ abc "(WebGL) Cómo habilitar OpenGL nativo en su navegador (Windows)". geeks3d.com .
- ^ "Blog de Chromium: Presentación del proyecto ANGLE". Blog de Chromium .
- ^ ab "WebGL en la red, 17 de octubre de 2013 - Aprendiendo 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. 22 de marzo de 2011. Consultado el 20 de marzo de 2012 .
- ^ "Novedades de OS X Lion: Safari 5.1 incluye WebGL, Do Not Track y más". Fairerplatform.com. 2011-05-03. Archivado desde el original el 2012-03-19 . Consultado el 2012-03-20 .
- ^ "Habilitar WebGL en Safari". Ikriz.nl. 23 de agosto de 2011. Archivado desde el original el 4 de marzo de 2012. Consultado el 20 de marzo de 2012 .
- ^ "Obtención de una implementación WebGL". Khronos.org. 13 de enero de 2012. Consultado el 20 de marzo de 2012 .
- ^ "Implementaciones/WebKit". Khronos.org. 3 de septiembre de 2011. 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 .
- ^ sin modo (24 de septiembre de 2021). "Se lanzó Safari 15. ¡WebGL 2 ahora es compatible con todos los navegadores y plataformas principales!". r/webgl . Consultado el 18 de octubre de 2023 .
- ^ "WebGL y aceleración de hardware". My.opera.com. 28 de febrero de 2011. 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. 13 de octubre de 2011. 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. 17 de julio de 2013. Consultado el 24 de julio de 2013 .
- ^ "WebGL". Microsoft. 17 de julio de 2013. Consultado el 24 de julio de 2013 .
- ^ "Internet Explorer 11 será compatible con WebGL y MPEG Dash". Engadget. 2013-06-26 . Consultado el 2013-06-26 .
- ^ "IE11 no supera más de la mitad de las pruebas del conjunto de pruebas oficial de conformidad con WebGL". Microsoft Connect.
- ^ "IEWebGL". Iewebgl . Consultado el 14 de agosto de 2014 .
- ^ "GitHub - Implementación de WebGL en Microsoft Edge". Microsoft. 4 de junio de 2016. Consultado el 10 de junio de 2016 .
- ^ "WebGL: gráficos 2D y 3D para la web - API web - MDN" . Consultado el 28 de junio de 2023 .
- ^ abc "WebGL 2.0 - ¿Puedo usar..." Consultado el 28 de junio de 2023 .
- ^ McDonough, Larry. "WebGL: 3D Gaming on the Web Arrives". BerryReview . Archivado desde el original el 2013-04-13 . Consultado el 2013-04-09 .
- ^ Halevy, Ronen. "PlayBook OS 2.0 Developer Beta incluye WebGL, Flash 11 y AIR 3.0". BerryReview . Consultado el 15 de noviembre de 2011 .
- ^ "WebGL en dispositivos móviles". iChemLabs. 12 de noviembre de 2011. Archivado desde el original el 27 de enero de 2013. Consultado el 25 de noviembre de 2011 .
- ^ abc "Compatibilidad de 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 lanzamientos 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 – Desarrollo de Microsoft Edge". 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 .
- ^ Cunningham, Andrew (17 de septiembre de 2014). "iOS 8, análisis exhaustivo". Ars Technica . Consultado el 19 de septiembre de 2014 .
- ^ "HTML5test – ¿Qué tan bien soporta HTML5 su navegador?" . Consultado el 16 de septiembre de 2015 .
- ^ "HTML5test – ¿Qué tan bien soporta HTML5 su navegador?" . Consultado el 16 de septiembre de 2015 .
- ^ 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.", pp. 364–366. ISBN 978-1-4493-6395-6.
- ^ Barrett, Stephen. "Tegra K1 llega a la nueva Chromebook 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 .
- ^ ab Boreskov, Alexey; Shikin, Evgeniy (2014). Gráficos por computadora: de píxeles a hardware gráfico programable. CRC Press. p. 370. ISBN 978-1-4398-6730-3.
- ^ Anyuru, Andreas (2012). Programación WebGL profesional: desarrollo de gráficos 3D para la Web. John Wiley & Sons. pág. 140. ISBN 978-1-119-94059-3.
- ^ Fulton, Steve; Fulton, Jeff (2013). HTML5 Canvas (2.ª edición). "O'Reilly Media, Inc.", pág. 624. ISBN 978-1-4493-3588-5.
- ^ ab "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 .
- ^ "Renderizado en tiempo real · Herramientas de depuración y creación de perfiles WebGL". realtimerendering.com .
Enlaces externos