stringtranslate.com

WebGL

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]

Navegadores móviles

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

  1. ^ ab "Khronos lanza la especificación final de WebGL 1.0". 3 de marzo de 2011. Consultado el 18 de mayo de 2015 .
  2. ^ ab "Fundamentos de WebGL". HTML5 es genial.
  3. ^ 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 .
  4. ^ abc "WebGL – OpenGL ES 2.0 para la Web". Khronos.org . Consultado el 14 de mayo de 2011 .
  5. ^ "WebGL 2.0 obtiene un soporte generalizado de todos los principales navegadores web". The Khronos Group . 2022-02-09 . Consultado el 2022-02-13 .
  6. ^ "Especificación WebGL". Khronos.org . Consultado el 14 de mayo de 2011 .
  7. ^ "Especificación WebGL 2.0". Khronos.org . Consultado el 27 de febrero de 2017 .
  8. ^ "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 .
  9. ^ "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 .
  10. ^ "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 .
  11. ^ "Google Body – Google Labs". Bodybrowser.googlelabs.com. Archivado desde el original el 13 de mayo de 2011. Consultado el 14 de mayo de 2011 .
  12. ^ 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 .
  13. ^ "AUTODESK FUSION 360: EL FUTURO DEL CAD, PARTE 1". 3dcadworld.com . Consultado el 21 de agosto de 2013 .
  14. ^ "Especificación WebGL 2". khronos.org. 26 de septiembre de 2013. Consultado el 28 de octubre de 2013 .
  15. ^ "Especificación WebGL 2.0".
  16. ^ "WebGL - API web". MDN .
  17. ^ ab "ANGLE - Motor de capa de gráficos casi nativo". 2019 . Consultado el 21 de junio de 2019 .
  18. ^ "Página de prueba WebGL". webgl.org .
  19. ^ "Informe WebGL". webglreport.com .
  20. ^ "Informe del navegador WebGL — Detección de WebGL — Probador de WebGL — BrowserLeaks". browserleaks.com .
  21. ^ 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 .
  22. ^ "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 .
  23. ^ abc "(WebGL) Cómo habilitar OpenGL nativo en su navegador (Windows)". geeks3d.com .
  24. ^ "Blog de Chromium: Presentación del proyecto ANGLE". Blog de Chromium .
  25. ^ 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 .
  26. ^ "¡Por fin! ¡Ha llegado el día de Chrome D3D11!". tojicode.com .
  27. ^ "Notas de la versión de Mozilla Firefox 4". Mozilla.com. 22 de marzo de 2011. Consultado el 20 de marzo de 2012 .
  28. ^ "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 .
  29. ^ "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 .
  30. ^ "Obtención de una implementación WebGL". Khronos.org. 13 de enero de 2012. Consultado el 20 de marzo de 2012 .
  31. ^ "Implementaciones/WebKit". Khronos.org. 3 de septiembre de 2011. Consultado el 20 de marzo de 2012 .
  32. ^ "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 .
  33. ^ 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 .
  34. ^ "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 .
  35. ^ "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 .
  36. ^ "WebGL (Windows)". microsoft.com . Microsoft.
  37. ^ "Guía de vista previa de Internet Explorer 11 para desarrolladores". Microsoft. 17 de julio de 2013. Consultado el 24 de julio de 2013 .
  38. ^ "WebGL". Microsoft. 17 de julio de 2013. Consultado el 24 de julio de 2013 .
  39. ^ "Internet Explorer 11 será compatible con WebGL y MPEG Dash". Engadget. 2013-06-26 . Consultado el 2013-06-26 .
  40. ^ "IE11 no supera más de la mitad de las pruebas del conjunto de pruebas oficial de conformidad con WebGL". Microsoft Connect.
  41. ^ "IEWebGL". Iewebgl . Consultado el 14 de agosto de 2014 .
  42. ^ "GitHub - Implementación de WebGL en Microsoft Edge". Microsoft. 4 de junio de 2016. Consultado el 10 de junio de 2016 .
  43. ^ "WebGL: gráficos 2D y 3D para la web - API web - MDN" . Consultado el 28 de junio de 2023 .
  44. ^ abc "WebGL 2.0 - ¿Puedo usar..." Consultado el 28 de junio de 2023 .
  45. ^ McDonough, Larry. "WebGL: 3D Gaming on the Web Arrives". BerryReview . Archivado desde el original el 2013-04-13 . Consultado el 2013-04-09 .
  46. ^ Halevy, Ronen. "PlayBook OS 2.0 Developer Beta incluye WebGL, Flash 11 y AIR 3.0". BerryReview . Consultado el 15 de noviembre de 2011 .
  47. ^ "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 .
  48. ^ 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 .
  49. ^ Kersey, Jason. "Actualización de Chrome Beta para Android". Blog de lanzamientos de Chrome . Consultado el 23 de agosto de 2013 .
  50. ^ Voipio, Riku (7 de junio de 2010). "WebGL en N900". Suihkulokki.blogspot.com . Consultado el 14 de mayo de 2011 .
  51. ^ "Guía de desarrollo: WebGL – Desarrollo de Microsoft Edge". Microsoft . Consultado el 10 de junio de 2016 .
  52. ^ "Opera Mobile 12". Opera Software. Archivado desde el original el 1 de marzo de 2012. Consultado el 27 de febrero de 2012 .
  53. ^ Cunningham, Andrew (17 de septiembre de 2014). "iOS 8, análisis exhaustivo". Ars Technica . Consultado el 19 de septiembre de 2014 .
  54. ^ "HTML5test – ¿Qué tan bien soporta HTML5 su navegador?" . Consultado el 16 de septiembre de 2015 .
  55. ^ "HTML5test – ¿Qué tan bien soporta HTML5 su navegador?" . Consultado el 16 de septiembre de 2015 .
  56. ^ 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.
  57. ^ Barrett, Stephen. "Tegra K1 llega a la nueva Chromebook de Acer". anandtech.com .
  58. ^ "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 .
  59. ^ 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.
  60. ^ 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.
  61. ^ Fulton, Steve; Fulton, Jeff (2013). HTML5 Canvas (2.ª edición). "O'Reilly Media, Inc.", pág. 624. ISBN 978-1-4493-3588-5.
  62. ^ ab "El potencial de WebGL - TypedArray.org". typedarray.org .
  63. ^ "Sitio oficial de Blend4Web - Acerca de". Blend4Web.com . Consultado el 22 de junio de 2015 .
  64. ^ "Edición en vivo de sombreadores WebGL con Firefox Developer Tools". Mozilla Hacks: el blog para desarrolladores web .
  65. ^ "Renderizado en tiempo real · Herramientas de depuración y creación de perfiles WebGL". realtimerendering.com .

Enlaces externos