WebGL

Webgl
WebGL Logo.svg
Originalautor (en) Mozilla Foundation
Entwickler (en) Khronos WebGL Arbeitsgruppe
Erstveröffentlichung 3. März 2011; Vor 11 Jahren[1]
Stabile Version
2.0 / 17. Januar 2017; vor 5 Jahren
Plattform Plattformübergreifend
Verfügbar in Englisch
Typ API
Webseite www.khronos.org/Webgl/

Webgl (Kurz für Webgrafikbibliothek) ist ein JavaScript API Für die Rendern interaktiver 2D- und 3D -Grafiken in allen kompatiblen Grafiken Webbrowser ohne die Verwendung von Plugins.[2] WebGL ist vollständig in andere integriert Webstandards, Ermöglichen der Verwendung von GPU-Beschleunigten von Physik und Bildverarbeitung und Auswirkungen als Teil der Webseiten-Leinwand. WebGL -Elemente können mit anderen gemischt werden Html Elemente und mit anderen Teilen der Seite oder des Seitenhintergrunds zusammengesetzt.[3]

WebGL -Programme bestehen aus dem in JavaScript geschriebenen Kontrollcode und bestehen aus Shader Code, der geschrieben ist in OpenGL es Shading Sprache (GLSL ES), eine Sprache ähnlich wie C oder C ++und wird auf einem Computer ausgeführt Grafikkarte (GPU). WebGL wurde von der entworfen und gepflegt gemeinnützig Khronos Gruppe.[4]

Am 9. Februar 2022 Khronos Gruppe Ankündigte WebGL 2.0 -Unterstützung für alle großen Browser.[5]

Entwurf

WebGL 1.0 basiert auf OpenGL ES 2.0 und liefert an API Für 3D -Grafiken.[6] Es verwendet das HTML5 Leinwandelement und wird mit mithilfe der mit Dokumentobjektmodell (DOM) Schnittstellen.

WebGL 2.0 basiert auf OpenGL ES 3.0 und machte garantierte Verfügbarkeit vieler optionaler Erweiterungen von WebGL 1.0 und enthüllt neue APIs.[7] Automatische Speicherverwaltung wird implizit von zur Verfügung gestellt von JavaScript.[4]

Wie OpenGL ES 2.0 hat WebGL nicht die Funktionsfunktion APIs eingeführt in OpenGL 1.0 und veraltet in OpenGL 3.0. Diese Funktionalität muss, falls dies erforderlich ist, vom Endentwickler implementiert werden, indem Shadercode bereitgestellt und Datenbindungen in JavaScript konfiguriert werden.

Shader in WebGL werden direkt in GLSL ausgedrückt und als Textzeichenfolgen an die WebGL -API übergeben. Die WebGL -Implementierung erstellt diese Shader -Anweisungen in den GPU -Code. Dieser Code wird für jeden einzelnen Scheitelpunkt ausgeführt, der über die API und für jedes Pixel gesendet wird rasterisiert auf den Bildschirm.

Geschichte

WebGL entwickelte sich aus den Canvas 3D -Experimenten, die von gestartet wurden Vladimir Vukićević bei Mozilla. Vukićević demonstrierte 2006 erstmals einen Canvas -3D -Prototyp. Bis Ende 2007 beide Mozilla[8] und Oper[9] hatte ihre eigenen Implementierungen erstellt.

Anfang 2009 die gemeinnützig Technologie Konsortium Khronos Gruppe startete die WebGL -Arbeitsgruppe mit der ersten Teilnahme von Apfel, Google, Mozilla, Oper, und andere.[4][10] Version 1.0 der WebGL -Spezifikation wurde März 2011 veröffentlicht.[1] Ab März 2012 ist der Vorsitzende der Arbeitsgruppe Ken Russell.

Frühe Anwendungen von WebGL inklusive Zygotenkörper.[11][12] Im November 2012 Autodesk kündigte an, dass sie die meisten ihrer Anwendungen auf die Cloud portierten, die auf lokalen WebGL -Clients ausgeführt wird. Diese Anwendungen umfassten Fusion 360 und AutoCAD 360.[13]

Die Entwicklung der WebGL 2 -Spezifikation begann 2013 mit dem Finale im Januar 2017.[14] Diese Spezifikation basiert auf OpenGL ES 3.0.[15] Die ersten Implementierungen sind in Firefox 51, Chrome 56 und Opera 43.[16]

Implementierungen

Fast native Grafikschichtmotor

Fast native Grafikschichtmotor (Winkel) ist eine Open -Source -Grafikmotor, die WebGL 1.0 implementiert (2.0, die eng mit ES 3.0 entspricht) und OpenGL ES 2,0 und 3.0 Standards. Es ist ein Standard-Backend für Google Chrome und Mozilla Firefox auf Windows-Plattformen und funktioniert, indem sie WebGL- und OpenGL-Anrufe in verfügbare plattformspezifische APIs übersetzen. Angle bietet derzeit Zugriff auf OpenGL ES 2.0 und 3.0 auf Desktop OpenGL, OpenGL ES, Direct3d 9 und Direct3d 11 APIs.[17] "[Google] Chrome verwendet den Winkel für alle Grafiken, einschließlich der beschleunigten Canvas2D -Implementierung und der nativen Client -Sandbox -Umgebung "."[18]

Software

WebGL wird von modernen Browsern häufig unterstützt. Die Verfügbarkeit hängt jedoch von anderen Faktoren ab, wie der GPU, die sie unterstützt. Die offizielle WebGL -Website bietet eine einfache Testseite.[19] Detailliertere Informationen (z. B. was Renderer der Browser verwendet und welche Erweiterungen verfügbar sind) werden auf Websites von Drittanbietern bereitgestellt.[20][21]

Desktop -Browser

  • Google Chrome - WebGL 1.0 wurde auf allen Plattformen mit einer fähigen Grafikkarte mit aktualisierten Treibern seit Version 9 aktiviert, die im Februar 2011 veröffentlicht wurden.[22][23] Standardmäßig unter Windows verwendet Chrome das WINKEL (Fast native Grafikschicht -Engine) Renderer zum Übersetzen von OpenGl ES auf Direkt x 9.0c oder 11.0, die einen besseren Fahrerunterstützung haben.[24] Unter Linux und Mac OS X ist der Standard -Renderer jedoch OpenGL.[25] Es ist auch möglich, OpenGL als Renderer unter Windows zu zwingen.[24] Seit September 2013 hat Chrome auch eine neuere Direct3d 11 Renderer, für das jedoch eine neuere Grafikkarte erforderlich ist.[26][27] Chrome 56+ unterstützt WebGL 2.0.
  • Feuerfuchs - WebGL 1.0 wurde auf allen Plattformen mit einer fähigen Grafikkarte mit aktualisierten Treibern seit Version 4.0 aktiviert.[28] Seit 2013 verwendet Firefox auch DirectX auf der Windows -Plattform über WINKEL.[24] Firefox 51+ unterstützt WebGL 2.0.
  • Safari - Safari 6.0 und neuere Versionen installiert auf OS X Mountain Lion, Mac OS X Löwe und Safari 5.1 auf Mac OS X Snow Leopard Implementierte Unterstützung für WebGL 1.0, das standardmäßig vor Safari 8.0 deaktiviert wurde.[29][30][31][32][33] Safari Version 12 (verfügbar in MacOS Mojave) bietet Unterstützung für WebGL 2.0, derzeit als "experimentelle" Funktion.
  • Oper - WebGL 1.0 wurde in Opera 11 und 12 implementiert, wurde jedoch im Jahr 2014 standardmäßig deaktiviert.[34][35] Opera 43+ unterstützt WebGL 2.0.
  • Internet Explorer - WebGL 1.0 wird teilweise unterstützt in Internet Explorer 11.[36][37][38][39] Es wurde zunächst die Mehrheit der offiziellen WebGL -Konformitätstests nicht bestanden, aber Microsoft veröffentlichte später mehrere Updates. Die neueste 0,94 WebGL -Engine besteht derzeit ~ 97% der Khronos -Tests.[40] Der WebGL-Support kann auch manuell zu früheren Versionen von Internet Explorer mit Plugins von Drittanbietern wie IeWebgl hinzugefügt werden.[41]
  • Microsoft Edge -Für Microsoft Edge Legacy unterstützt die anfängliche stabile Version die WebGL-Version 0.95 (Kontextname: "Experimental-Webgl") mit einem Open-Source-GLSL zu HLSL Transpiler.[42] Version 10240+ unterstützt WebGL 1.0 als vorangestellt. Die neueste Chrom-basierte Edge unterstützt WebGL 2.0.

Mobile Browser

  • Blackberry 10 - WebGL 1.0 ist für BlackBerry -Geräte seit Betriebssystemversion 10.00 verfügbar[43]
  • Blackberry Playbook - WebGL 1.0 ist über Webworks und Browser in Playbook OS 2.00 erhältlich[44]
  • Android -Browser - im Grunde genommen nicht unterstützt, aber der Sony Ericsson Xperia Die Auswahl an Android -Smartphones hatte nach einem Firmware -Upgrade WebGL -Funktionen.[45] Samsung Smartphones haben auch WebGL aktiviert (überprüft auf Galaxy SII (4.1.2) und Galaxy Note 8.0 (4.2)). Unterstützt in Google Chrome, das den Android -Browser in vielen Telefonen ersetzt (aber kein neuer Standard -Android -Browser).
  • Internet Explorer - Das vorangestellte WebGL 1.0 ist auf verfügbar Windows Phone 8.x (11+)
  • Firefox für Mobilgeräte - WebGL 1.0 ist seit Firefox 4 für Android- und Meego -Geräte verfügbar.[46][47]
  • Firefox OS[47]
  • Google Chrome - WebGL 1.0 ist für Android -Geräte verfügbar, da Google Chrome 25 seit Version 30 standardmäßig aktiviert ist.[48]
  • Maemo - Im Nokia N900Das WebGL 1.0 ist ab dem PR1.2 -Firmware -Update im Stock -Mikrob -Browser verfügbar.[49]
  • Meego - WebGL 1.0 ist im Börsenbrowser "Web" nicht unterstützt. Es ist jedoch durch verfügbar Feuerfuchs.[47]
  • Microsoft Edge - Das vorangestellte WebGL 1.0 ist unter Windows 10 Mobile verfügbar.[50]
  • Opera Mobile - Opera Mobile 12 unterstützt WebGL 1.0 (nur auf Android).[51]
  • Segelfisch os - WebGL 1.0 wird im Standard -Segelfischbrowser unterstützt.[52]
  • Tizen - WebGL 1.0 wird unterstützt[53]
  • iOS - WebGL 1.0 ist für mobile Safari verfügbar, in iOS 8.[54]

Werkzeuge und Ökosystem

Dienstprogramme

Die niedrige Natur der WebGL-API, die nur wenig für die Erzeugung von wünschenswerten 3D-Grafiken schnell zur Schaffung von Bibliotheken beitrug, die typischerweise zum Aufbau von Dingen in 3D-Grafiken verwendet werden (z. Transformationen anzeigen zum Shader, Frustum anzeigen etc.). Grundlegende Aufgaben wie das Laden Szenengrafiken und 3D -Objekte in den beliebten Branchenformaten sind auch abstrahiert durch die Bibliotheken (von denen einige waren portiert zu JavaScript aus anderen Sprachen), um zusätzliche Funktionen bereitzustellen. Eine nicht exexhustive Liste von Bibliotheken, die viele hochrangige Funktionen bieten A-Frame (VR), Babylonjs, Playcanvas, drei.js, Osg.js und Copperlich. X3d machte auch ein Projekt namens x3dom, um X3D zu machen und Vrml Inhalt, der auf WebGL ausgeführt wird. Das 3D -Modell wird in XML -Tag in HTML5 und Interactive Skript verwendet JavaScript und DOM. BS Content Studio und InstanTreality X3D Exporteur können X3D in HTML exportieren und mit WebGL ausgeführt werden.

Spiele

Es gab auch ein schnelles Auftauchen von Game Engines für WebGL, beide 2d und 3d,[55] einschließlich Unwirklicher Motor 4 und Einheit.[56] Das Stage3d/Flash-basiert Away3d Die hochrangige Bibliothek hat auch einen Port zu WebGL via Typoskript.[26][57] Sylvester.js ist eine leichte Dienstprogrammbibliothek, die nur die Vektor- und Matrix-Mathematik-Dienstprogramme für Shaders bietet.[58][59] Es wird manchmal in Verbindung mit einer WebGL -spezifischen Erweiterung namens GLUTILS.JS verwendet.[58][60]

Es gibt auch einige 2D -Bibliotheken, die auf WebGL aufgebaut sind Cocos2d-x oder pixi.js, die aus Leistungsgründen auf diese Weise implementiert wurden, in einem Schritt, der entspricht, was mit dem passiert ist Starling -Framework über Stage3d in der Flash -Welt. Die WebGL-basierten 2D-Bibliotheken kehren auf die HTML5-Leinwand zurück, wenn WebGL nicht verfügbar ist.[61]

Das Entfernen des Rendering -Engpasses durch fast direkten Zugriff auf die GPU enthüllte auch Leistungsbeschränkungen in den JavaScript -Implementierungen. Einige wurden von angesprochen von ASM.JS und WebAssembly (In ähnlicher Weise die Einführung von Stadium3D exponierte Leistungsprobleme innerhalb Aktionen, die von Projekten wie angesprochen wurden Brücke überqueren).[61]

Inhaltserstellung

Wie für jede andere Grafik -API muss Inhalte für WebGL -Szenen erstellt werden müssen eine reguläre Verwendung verwendet 3D -Inhaltserstellungstool und exportieren die Szene in ein Format, das von der Zuschauer- oder Helferbibliothek lesbar ist. Desktop 3D Authoring -Software wie z. Mixer, Autodesk Maya oder SIMLAB -Komponist kann für diesen Zweck verwendet werden. Im Speziellen, Blend4Web Ermöglicht eine WebGL -Szene vollständig in Blender und exportiert in einen Browser mit einem einzigen Klick, auch als eigenständige Webseite.[62] Es gibt auch einige WebGL-spezifische Software wie z. Kupfer und der Online-WebGL-basierte Editor Clara.io. Online -Plattformen wie z. Sketchfab Mit Clara.io können Benutzer ihre 3D -Modelle direkt hochladen und mit einem gehosteten WebGL -Viewer anzeigen.

Umgebungsbasierte Tools

Zusätzlich, Mozilla FoundationIn seinem Firefox-Browser hat integrierte WebGL-Tools implementiert, beginnend mit Version 27, die das Bearbeiten von Scheitelpunkten und Fragment-Shadern ermöglichen.[63] Eine Reihe anderer Debuggen und Profilerstellung Auch Tools sind entstanden.[64]

Siehe auch

Verweise

  1. ^ a b "Khronos veröffentlicht die endgültige WebGL 1.0 -Spezifikation". 3. März 2011. Abgerufen 2015-05-18.
  2. ^ Tavares, Gregg (2012-02-09). "WebGL -Grundlagen". HTML5 Rocks.
  3. ^ Parisi, Tony (2012-08-15). "WebGL: UP -Laufen". O'Reilly Media, integriert. Archiviert von das Original Am 2013-02-01. Abgerufen 2012-07-13.
  4. ^ a b c "WebGL - OpenGL ES 2.0 für das Web". Khronos.org. Abgerufen 2011-05-14.
  5. ^ "WebGL 2.0 unterstützt allgegenwärtige Unterstützung von allen wichtigen Webbrowsern". Die Khronos -Gruppe. 2022-02-09. Abgerufen 2022-02-13.
  6. ^ "WebGL -Spezifikation". Khronos.org. Abgerufen 2011-05-14.
  7. ^ "WebGL 2.0 -Spezifikation". Khronos.org. Abgerufen 2017-02-27.
  8. ^ "Canvas 3D: GL Power, Web-Stil". Blog.vlad1.com. Archiviert von das Original Am 2011-07-17. Abgerufen 2011-05-14.
  9. ^ "Die Leinwand in eine andere Dimension bringen". My.opera.com. 2007-11-26. Archiviert von das Original Am 2007-11-17. Abgerufen 2011-05-14.
  10. ^ "Khronos Details WebGL-Initiative, um die 3D-Grafiken mit Hardwarebeschleunigungen ins Internet zu bringen". Khronos.org. 2009-08-04. Archiviert von das Original Am 2012-04-19. Abgerufen 2011-05-14.
  11. ^ "Google Body - Google Labs". Bodybrowser.googlelabs.com. Archiviert von das Original Am 2011-05-13. Abgerufen 2011-05-14.
  12. ^ Bhanoo, Sindya N. (2010-12-23). "Neu von Google: Der Bodybrowser".Well.blogs.nytimes.com. Abgerufen 2011-05-14.
  13. ^ "Autodesk Fusion 360: Die Zukunft von CAD, Pt. 1". 3dcadworld.com. Abgerufen 2013-08-21.
  14. ^ "WebGL 2 Spezifikation". khronos.org. 2013-09-26. Abgerufen 2013-10-28.
  15. ^ "WebGL 2.0 -Spezifikation".
  16. ^ "WebGL - Web -APIs". Mdn.
  17. ^ "Winkel - fast native Grafikschicht -Engine". 2019. Abgerufen 21. Juni, 2019.
  18. ^ "Winkel - fast native Grafikschicht -Engine". 2019. Abgerufen 21. Juni, 2019.
  19. ^ "WebGL -Testseite". webgl.org.
  20. ^ "WebGL -Bericht". webglreport.com.
  21. ^ "WebGL -Browserbericht - WebGL -Erkennung - WebGL -Tester - Browserleaks". browserleaks.com.
  22. ^ Mah, Paul (8. Februar 2011). "Google veröffentlicht Chrome 9; kommt mit Google Instant, WebGL - Fiercecio: TechWatch". Fiercecio. Archiviert von das Original Am 2011-10-25. Abgerufen 2012-03-20.
  23. ^ "WebGL in Chrome Stable! - Lernen Webgl". LearningWebgl.com. Archiviert von das Original Am 2015-05-28. Abgerufen 2014-08-07.
  24. ^ a b c "(Webgl) So aktivieren Sie native OpenGL in Ihrem Browser (Windows)". Geeks3d.com.
  25. ^ "Chromium -Blog: Einführung des Angle -Projekts". Chrom -Blog.
  26. ^ a b "WebGL rund um das Netz, 17. Oktober 2013 - Lernen Webgl". LearningWebgl.com. Archiviert von das Original am 8. August 2014. Abgerufen 5. August 2014.
  27. ^ "Endlich! Chrome D3D11 Day ist gekommen!". tojicode.com.
  28. ^ "Mozilla Firefox 4 Release -Notizen". Mozilla.com. 2011-03-22. Abgerufen 2012-03-20.
  29. ^ "Neu in OS X Lion: Safari 5.1 bringt WebGL, verfolgt nicht und mehr". Fairerplatform.com. 2011-05-03. Archiviert von das Original Am 2012-03-19. Abgerufen 2012-03-20.
  30. ^ "WebGL in Safari aktivieren". Ikriz.nl. 2011-08-23. Archiviert von das Original Am 2012-03-04. Abgerufen 2012-03-20.
  31. ^ "Eine WebGL -Implementierung erhalten". Khronos.org. 2012-01-13. Abgerufen 2012-03-20.
  32. ^ "Implementierungen/Webkit". Khronos.org. 2011-09-03. Abgerufen 2012-03-20.
  33. ^ "WebGL jetzt in Webkit Nightlies verfügbar". Webkit.org. Archiviert von das Original Am 2012-03-08. Abgerufen 2012-03-20.
  34. ^ "WebGL und Hardware Beschleunigung". My.opera.com. 2011-02-28. Archiviert von das Original Am 2011-03-03. Abgerufen 2012-03-20.
  35. ^ "Einführung der Oper 12 Alpha". My.opera.com. 2011-10-13. Archiviert von das Original Am 2011-10-15. Abgerufen 2012-03-20.
  36. ^ "Webgl (Windows)". microsoft.com. Microsoft.
  37. ^ "Internet Explorer 11 Preview Guide für Entwickler". Microsoft. 2013-07-17. Abgerufen 2013-07-24.
  38. ^ "Webgl". Microsoft. 2013-07-17. Abgerufen 2013-07-24.
  39. ^ "Internet Explorer 11, um WebGL und MPEG Dash zu unterstützen". Engadget. 2013-06-26. Abgerufen 2013-06-26.
  40. ^ "IE11 fällt in der offiziellen WebGL -Konformitätstestsuite nicht mehr als die Hälfte der Tests.". Microsoft Connect.
  41. ^ "Iewebgl". Iewebgl. Abgerufen 2014-08-14.
  42. ^ "GitHub - Microsoft Edge WebGL -Implementierung". Microsoft. 2016-06-04. Abgerufen 2016-06-10.
  43. ^ McDonough, Larry. "WebGL: 3D -Gaming im Web kommt an". BerryReview. Archiviert von das Original 2013-04-13. Abgerufen 2013-04-09.
  44. ^ Halevy, Ronen. "Playbook OS 2.0 -Entwickler Beta enthält WebGL, Flash 11 und Air 3.0". BerryReview. Abgerufen 2011-11-15.
  45. ^ "Xperia ™ Telefone zuerst zur Unterstützung von WebGL ™ - Entwicklerwelt". Blogs.Sonyericsson.com. Das Sony Ericsson Developer -Programm. 2011-11-29. Archiviert von das Original Am 2011-12-03. Abgerufen 2011-12-05.
  46. ^ "WebGL auf mobilen Geräten". Ichemlabs. 2011-11-12. Archiviert von das Original Am 2013-01-27. Abgerufen 2011-11-25.
  47. ^ a b c "Mobile HTML5 -Kompatibilität auf dem iPhone, Android, Windows Phone, Blackberry, Firefox OS und anderen mobilen Geräten". Abgerufen 2015-09-16.
  48. ^ Kersey, Jason. "Chrome Beta für Android -Update". Chrome Releases Blog. Abgerufen 2013-08-23.
  49. ^ Voipio, Riku (2010-06-07). "Webgl auf N900". Suihkulokki.blogspot.com. Abgerufen 2011-05-14.
  50. ^ "Dev Guide: WebGL - Microsoft Edge Development". Microsoft. Abgerufen 2016-06-10.
  51. ^ "Opera Mobile 12". Opera -Software. Archiviert von das Original am 1. März 2012. Abgerufen 27. Februar 2012.
  52. ^ "HTML5TEST - Wie gut unterstützt Ihr Browser HTML5?". Abgerufen 2015-09-16.
  53. ^ "HTML5TEST - Wie gut unterstützt Ihr Browser HTML5?". Abgerufen 2015-09-16.
  54. ^ Cunningham, Andrew (2014-09-17). "iOS 8, gründlich überprüft". ARS Technica. Abgerufen 2014-09-19.
  55. ^ Parisi, Tony (13. Februar 2014). Programmieren 3D -Anwendungen mit HTML5 und WebGL: 3D -Animation und Visualisierung für Webseiten. "O'Reilly Media, Inc.". S. 364–366. ISBN 978-1-4493-6395-6.
  56. ^ Barrett, Stephen. "Tegra K1 landet in Acers neuestem Chromebook". anandtech.com.
  57. ^ "Blog> Away3d TypeScript 4.1 Alpha> Away3d". Away3d.com. Archiviert von das Original Am 2014-08-08. Abgerufen 2014-08-05.
  58. ^ a b Boreskov, Alexey; Shikin, Evgeniy (2014). Computergrafik: Von Pixeln bis hin zu programmierbarer Grafikhardware. CRC Press. p. 370. ISBN 978-1-4398-6730-3.
  59. ^ Anyuru, Andreas (2012). Professionelle WebGL -Programmierung: Entwicklung von 3D -Grafiken für das Web. John Wiley & Sons. p. 140. ISBN 978-1-119-94059-3.
  60. ^ Fulton, Steve; Fulton, Jeff (2013). HTML5 -Leinwand (2. Aufl.). "O'Reilly Media, Inc.". p. 624. ISBN 978-1-4493-3588-5.
  61. ^ a b "Das WebGL -Potenzial - typeDarray.org". typeDarray.org.
  62. ^ "BLEEND4WEB Offizielle Seite - über". Blend4Web.com. Abgerufen 2015-06-22.
  63. ^ "Live -Bearbeitungs -Webgl -Shader mit Firefox Developer Tools". Mozilla Hacks - Der Webentwicklerblog.
  64. ^ "Echtzeit-Rendering · WebGL-Debugging- und Profiling-Tools". realtimerendering.com.

Externe Links