Ir al contenido

WebGL

De Wikipedia, la enciclopedia libre
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]

WebGL (Web Graphics Library)[2]​ es una especificación estándar que define unaAPIimplementada enJavaScriptpara larenderizacióndegráficos en 3Ddentro de cualquiernavegador web.No precisa del uso deplug-ins[3]​ adicionales en cualquier plataforma que soporteOpenGL2.0 uOpenGL ES2.0. WebGL está integrada completamente en todos los estándares web del navegador, permitiendo la aceleraciónhardware[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 elementosHTMLy 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 aCoC++,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 lucroKhronos Group.[6]​

Historia

[editar]

WebGL creció desde los experimentos del canvas 3D comenzados por Vladimir Vukićević enMozilla.Vukićević mostró por primera vez un prototipo de Canvas 3D en 2006. A finales de 2007, tantoMozilla[7]​ comoOpera[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 deApple,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 incluyenZygote Body[10]​[11]​ y las podemos encontrar enFirefox2.0,Chrome9,Internet Explorer 11,Opera 12,Safari5.1 yEdge.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ñíaAutodeskanunció 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 enOpenGL ES 2.0[16]​ y proporciona unaAPIpara gráficos 3D.[9]​ Se utiliza el elemento canvasHTML5al que se accede mediante interfacesDocument 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 mediantecódigo de sombreadoy 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 pixelrasterizadoen 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 transcompiladorHLSL.[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- EnNokia 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 enIOS 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 incluyeA-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.jses 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.BabylonJStambién ha ganado bastante popularidad debido a estar programada por trabajadores de Microsoft.

También ha habido una abrupta aparición demotores de juegopara WebGL,[59]​ incluyendoUnreal Engine 4yUnity 5.[60]​ La biblioteca de alto nivelStage3D/Away3Dbasada en flash también posee un puerto para WebGL a través deTypeScript.[26]​[61]​ Una biblioteca de menor peso que proporciona solo las utilidades matemáticas de vector y matriz para shaders essylvester.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 comoCocos2d-xoPixi.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 porasm.js.(De forma similar, la introducción de Stage3D expuso los problemas de rendimiento deActionScript,los cuales fueron resueltos con proyectos comoCrossBridge).[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 comoBlender,Autodesk MayaoSimLab Composerpueden ser utilizados para este propósito. Esto fue posible por primera vez con Inka3D, un plugin de exportación WebGL para Maya. Particularmente,Blend4Webpermite 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 comoCopperCubey el editor WebGL en línea Clara.io. Las plataformas en línea comoSketchfaby 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]​

X3Dtambién hizo un proyecto llamado X3DOM para hacer que el contenido X3D yVRMLse ejecute en WebGL. El modelo 3D en la etiqueta XML<X3D>en HTML5 y el script interactivo utilizará JavaScript y DOM.BS Content Studioy 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, unmicrocontrolador 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 desdeel originalel 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.
  4. ↑ab"Kronos Details WebGL Initiative to Bring Hardware-Accelerated 3D Graphics to the Internet"Archivadoel 19 de abril de 2012 enWayback Machine.. khronos.org.
  5. ↑Tony Parisi (2012-08-15)."WebGL: Up and Running".safaribooksonline.
  6. ↑abc"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 fromthe originalmy.opera.
  9. ↑ab"Especificaciones WebGL 1.0".khronos.org.
  10. ↑"Zygote Body".zygotebody.
  11. ↑Bhanoo, Sindya N. (2010-12-23)."New From Google: The Body Browser".well.blogs.nytimes.
  12. ↑ab"Navegadores Web Compatibles WebGL".developer.mozilla.org.
  13. ↑"Autodesk Fusion 360: The Future Of CAD, PT 1".3dcadworld.
  14. ↑ab"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.
  21. ↑"Google releases Chrome 9".techspot.
  22. ↑"WebGL in Chrome Stable! - Learning WebGL"Archivadoel 28 de mayo de 2015 enWayback Machine..learningwebgl.
  23. ↑ab"ANGLE renderer".wikipedia.org.
  24. ↑ab"(WebGL) How to Enable Native OpenGL in your Browser (Windows)".geeks3d.
  25. ↑"Chromium Blog: Introducing the ANGLE Project".blog.chromium.org.
  26. ↑ab[1]Archivadoel 8 de agosto de 2014 enWayback Machine."WebGL around the net, 17 Oct 2013 - Learning WebGLArchivadoel 8 de agosto de 2014 enWayback Machine.".learningwebgl.
  27. ↑"At last! Chrome D3D11 day has come!".tojicode.
  28. ↑"Mozilla Firefox 4 Release Notes".mozilla.
  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 fromthe original.dev.opera.
  34. ↑"Introducing Opera 12 Alpha".web.archive.org. Archived fromthe original.opera.
  35. ↑"WebGL en Windows".msdn.microsoft.
  36. ↑"Internet Explorer 11 Preview Guide For Developers".msdn.microsoft.
  37. ↑"Internet Explorer 11 to support WebGL and MPEG Dash".engadget.
  38. ↑"IE11 fails more than half tests in official WebGL".connect.microsoft.
  39. ↑"IEWebGL".github
  40. ↑"Microsoft Edge WebGL Implementation".github.
  41. ↑"Edge Platform - WebGL 2.0 status"Archivadoel 27 de diciembre de 2018 enWayback Machine..developer.microsoft.
  42. ↑McDonough, Larry."WebGL: 3D Gaming on the Web Arrives"Archivadoel 13 de abril de 2013 enWayback Machine.. devblog.blackberry.
  43. ↑"Blackberry PlayBook".wikipedia.org.
  44. ↑Halevy, Ronen."PlayBook OS 2.0 Developer Beta Includes WebGL, Flash 11, & AIR 3.0".berryreview.
  45. ↑"Sony Ericsson Xperia".wikipedia.org.
  46. ↑"Xperia™phones first to support WebGL ". web.archive.org. Archived fromthe original.blogs.sonyericsson.
  47. ↑iclkevin"WebGL on Mobile Devices"Archivadoel 7 de abril de 2017 enWayback Machine..ichemlabs.
  48. ↑ab"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.
  50. ↑"Navegador MicroB para Nokia".wikipedia.org.
  51. ↑"WebGL on N900".suihkulokki.blogspot.
  52. ↑"Dev guide: WebGL - Microsoft Edge Development".docs.microsoft.
  53. ↑"Opera Mobile 12".web.archive.org. Archived fromthe original.opera.
  54. ↑"WebGL Quake 3 on Jolla".youtube.
  55. ↑"WebGL on Tizen".developer.tizen.org.
  56. ↑"WebGL on Ubuntu Touch".askubuntu.
  57. ↑"WebGL on WebOS".webosnation.
  58. ↑Cunningham, Andrew."IOS 8: Thoroughly Reviewed".arstechnica.
  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.ISBN978-1-4493-6395-6.
  60. ↑Stephen Barrett."Tegra K1 Lands in Acer´s Newest Chromebook".anandtech.
  61. ↑"Blog > Away3D Typescript 4.1 Alpha > Away3D"Archivadoel 8 de agosto de 2014 enWayback Machine..away3d.
  62. ↑abAlexey Boreskov; Evgeniy Shikin."Computer Graphics: From Pixels to Programmable Graphics Hardware".books.google.es. CRC Press. p. 370.ISBN978-1-4398-6730-3.
  63. ↑Andreas Anyuru."Professional WebGL Programming: Developing 3D Graphics for the Web".books.google.es. CRC Press. p. 370.ISBN978-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.ISBN978-1-4493-3588-5.
  65. ↑ab"The WebGL potential".typedarray.org.
  66. ↑"Blend4Web Official Site - About".blend4web.
  67. ↑"Live editing WebGL shaders with Firefox Developer Tools".hacks.mozilla.org.
  68. ↑"Real-Time Rendering - WebGL Debugging and Profilling Tools".realtimerendering.
  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»