Ir al contenido

WebGL

De Wikipedia, la enciclopedia libre

Esta es una versión antigua de esta página, editada a las 11:32 5 abr 2017 por ScRyer (discusión · contribs.). La dirección URL es un enlace permanente a esta versión, que puede ser diferente de la versión actual.

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

WebGL (Web Graphics Library) [1]​ es 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[2]​ 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[3]​ (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)[4]​ 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.[5]

Historia

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[6]​ como Opera[7]​ 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.[3][5]​ La versión 1.0 de las especificaciones WebGL fue lanzada en Marzo de 2011.[8]​ Las primeras aplicaciones de WebGL incluyen Zygote Body [9][10]​ 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. [11]

A partir de Marzo de 2012, el presidente del grupo de trabajo es Ken Russell. En Noviembre de 2012, Autodesk anunciaron que portaban la mayoría de sus aplicaciones a la nube que se ejecutaba en clientes WebGL locales. Estas aplicaciones incluyen Fusion 360 y AutoCAD 360.[12]

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

Diseño

WebGL 1.0 está basado en OpenGL ES 2.0[15]​ y proporciona una API para gráficos 3D.[8]​ 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.[13]

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

Como ocurre en OpenGL ES 2.0, WebGL carece de las APIs de funciones de fijación[16]​ 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

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.[17]​ Es posible encontrar información más detallada (como que tipo de renderizador usa el navegador o que extensiones están disponibles) en paginas web de terceros.[18][19]

  • 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.[20][21]​ Por defecto en Windows, Chrome usa ANGLE[22]​(Almost Native Graphics Layer Engine), renderizador para traducir OpenGL ES a Direct3D 9.0, ya que posee mejor soporte de controladores.[23]​ En Linux y Mac OS X el rederizador por defecto es OpenGL.[24]​ Es posible también forzar OpenGL como renderizador en Windows.[23]​ Desde Septiembre de 2013, Chrome posee un nuevo renderizador, Direct3D 11, el cual requiere una tarjeta gáfica más reciente.[25][26]​ 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.[27]​ Desde 2013 Firefox también hace uso de Direct3D en plataformas Windows mediante ANGLE.[22]​ 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 desabilitado por defecto.[28][29][30][31]
  • Opera - WebGL 1.0 está implementado en Opera 11 y 12, aunque a partir de 2014 ha sido desabilitado por defecto.[32][33]​ A partir de Opera 43 WebGL 2.0 está soportado.
  • Internet Explorer - WebGL 1.0 está parcialmente soportado en Internet Explorer 11.[34][35][36]​ 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.[37]​ 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.[38]
  • 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.[39]​ A partir de la versión 10240 WebGL 1.0 está soportado. WebGL 2.0 está planeado con prioridad media en futuras publicaciones.[40]
  • Vivaldi

Bibliotecas en javaScript

Como WebGL es una tecnología diseñada para trabajar directamente con la GPU (unidad de procesamiento gráfico) es difícil de codificar en comparación con otros estándares web más accesibles, por eso han surgido muchas bibliotecas de JavaScript para resolver este problema:

C3DL, CopperLicht, Curve3D, CubicVR, EnergizeGL, GammaJS, GLGE, GTW, JS3D, Kuda, O3D, OSG.JS, PhiloGL, Pre3d, SceneJS, SpiderGL, TDL, Three.js, X3DOM, BabylonJS.

Entre éstas, 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 hecha por trabajadores de Microsoft.

Creación del contenido

Las escenas WebGL se pueden crear sin necesidad de programación utilizando una herramienta de creación de contenidos, como Blender o con Autodesk Maya. Las escenas luego se exportan a WebGL. Esto fue posible por primera vez con Inka3D, un plugin de exportación WebGL para Maya. También hay servicios para publicar contenido en línea 3D interactivo utilizando WebGL como p3d.in y Sketchfab. Unity Engine permite crear contenido (Videojuegos, apps, etc) para navegadores usando WebGL.

WebGL incrustado

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.[41]

Véase también

Referencias

  1. "Khronos Releases Final WebGL 1.0 Specification". khronos.org.
  2. Gregg Tavares (2012-02-09). "WebGL Fundamentals". html5rocks.com.
  3. a b "Kronos Details WebGL Initiative to Bring Hardware-Accelerated 3D Graphics to the Internet". khronos.org.
  4. Tony Parisi (2012-08-15). "WebGL: Up and Running". safaribooksonline.com.
  5. a b c "WebGL – OpenGL ES 2.0 for the Web". khronos.org.
  6. "Canvas 3D: GL power, web-style". web.archive.org.
  7. "Taking the canvas to another dimension". web.archive.org. Archived from the original my.opera.com.
  8. a b "Especificaciones WebGL 1.0". khronos.org.
  9. "Zygote Body". zygotebody.com.
  10. Bhanoo, Sindya N. (2010-12-23). "New From Google: The Body Browser". well.blogs.nytimes.com.
  11. a b "Navegadores Web Compatibles WebGL". developer.mozilla.org.
  12. "Autodesk Fusion 360: The Future Of CAD, PT 1". 3dcadworld.com.
  13. a b "Especificaciones WebGL 2 ". khronos.org.
  14. "OpenGL ES 3.0". wikipedia.org.
  15. "OpenGL ES 2.0". wikipedia.org.
  16. "Funciones de Fijación". wikipedia.org.
  17. "Página de testeo WebGL". webgl.org.
  18. "WebGL Report". webgl.org.
  19. "WebGL Browser Report - WebGL Detection - WebGL Tester" . browserleaks.com.
  20. "Google releases Chrome 9" . techspot.com.
  21. "WebGL in Chrome Stable! - Learning WebGL" . learningwebgl.com.
  22. a b "ANGLE renderer" . wikipedia.org.
  23. a b "(WebGL) How to Enable Native OpenGL in your Browser (Windows)" . geeks3d.com.
  24. "Chromium Blog: Introducing the ANGLE Project" . blog.chromium.org.
  25. [1]"WebGL around the net, 17 Oct 2013 - Learning WebGL" . learningwebgl.com.
  26. "At last! Chrome D3D11 day has come!". tojicode.com.
  27. "Mozilla Firefox 4 Release Notes" . mozilla.com.
  28. "Enable WebGL in Safari" . ikriz.nl.
  29. "Getting a WebGL Implementation" . khronos.org.
  30. "Implementations - WebKit" . khronos.org.
  31. "WebGL Available On WebKit" . webkit.org.
  32. "WebGL and Hardware Acceleration" . web.archive.org. Archived from the original . dev.opera.com.
  33. "Introducing Opera 12 alpha" . web.archive.org. Archived from the original. opera.com.
  34. "WebGL en Windows" . msdn.microsoft.com.
  35. "Internet Explorer 11 Preview Guide For Developers" . msdn.microsoft.com.
  36. "Internet Explorer 11 to support WebGL and MPEG Dash" . engadget.com.
  37. "IE11 fails more than half tests in official WebGL" . connect.microsoft.com.
  38. "IEWebGL" . github.com
  39. "Microsoft Edge WebGL Implementation" . github.com.
  40. "Edge Platform - WebGL 2.0 status" . developer.microsoft.com.
  41. WEBGL embebido en un microcontrolador PIC

Enlaces externos