Erste Schritte mit WebGL

Die Web Graphics Library (WebGL) ist der neue Standard für das 3D-Rendering im Web, mit dem Webentwickler Spieleanimationen, Datenvisualisierungen, Produktanzeigen und mehr mithilfe von JavaScript-APIs, einem modernen Web- oder mobilen Browser und einer Standardwebtechnologie erstellen können Stapel.

WebGL ist Teil des Khronos Group-Konsortiums offener Standards für Grafik, Medien und parallele Berechnungen. Der einzige Zweck des Unternehmens besteht darin, offene Standards zu erstellen, um das Erstellen und Beschleunigen von Grafiken, Rich Media und parallelen Berechnungen auf einer Vielzahl von Plattformen und Geräten zu ermöglichen. WebGL ist eine Webtechnologie, die hardwarebeschleunigte 3D-Grafiken in den Browser bringt, ohne in den meisten Fällen zusätzliche Software zu installieren. WebGL ist eine der fünfzehn Arbeitsgruppen innerhalb des Konsortiums und als JavaScript-Bindung an OpenGL ES in einem Browser auf jeder Plattform konzipiert, die die OpenGL- oder OpenGL ES 2.0-Grafikstandards für das Web unterstützt. WebGL wird über das HTML5-Canvas-Element als DOM-Schnittstelle (Document Object Model) aufgedeckt.

Implementierungen

Aktuelle Implementierungen umfassen die folgenden Desktop-Browser:

• Mozilla Firefox 8.0 und neuere Versionen
• Google Chrome 13.0 und neuere Versionen
• Safari 5.1 und neuere Versionen, die unter Mac OS X Lion und Mac OS X Snow Leopard installiert sind, haben die Unterstützung für WebGL implementiert
• Opera 11 und 12 Alpha (Vorabversion)
• Internet Explorer - Microsoft hat keine Pläne zur Unterstützung von WebGL angekündigt. Es sind jedoch Plug-Ins verfügbar, mit denen Internet Explorer 6.0 und neuere Versionen die Unterstützung für WebGL hinzufügen können.

Die folgenden Implementierungen für mobile Browser umfassen:

• Nokia N900 - WebGL ist im PR1.2-Firmware-Update verfügbar.
• BlackBerry PlayBook - WebGL ist über WebWorks und den Browser in PlayBook OS 2.0 verfügbar
• Firefox für Handys - WebGL ist für Android-Geräte verfügbar
• Die Sony Ericsson Xperia-Reihe von Android-Smartphones verfügt nach einem Firmware-Upgrade über WebGL-Funktionen.
• Opera Mobile 12 final unterstützt WebGL (nur für Android)

Entwicklung und Programmierung von WebGL-Inhalten

Es gibt viele Ressourcen, um mit der WebGL-Codierung zu beginnen. Tatsächlich beginnen die meisten Online-Tutorials oder Bücher und Referenzen mit der Verwendung des HTML5-Canvas-Elements zusammen mit JavaScript, um die grundlegenden Grafiken im Browser zum Laufen zu bringen. Es gibt Dienstprogramme, Bibliotheken und Frameworks, die dem WebGL-Entwickler Optionen zum Programmieren von Grafiken und Spielen bieten.

Verfügbare WebGL-Dienstprogramme:

• WebGL-Spielplatz: Bietet eine einfache Möglichkeit, die Ergebnisse in einem Browser zu bearbeiten und anzuzeigen. Geben Sie einfach Ihren Code in den Editor ein und zeigen Sie Ihre Ergebnisse im Bildschirm "Ausführen" an. Es ist nicht erforderlich, zwischen dem Editor und dem Browser zu wechseln und den Skelettcode einzurichten. Alle notwendigen Dinge werden hinter den Kulissen hinzugefügt.

JavaScript-Dienstprogramme:

• webgl-utils.js - Allgemeines JavaScript-Dienstprogramm für WebGL-Aufgaben
• J3DI.js - Grundlegendes WebGL J3DI-Hilfsprogramm
• J3DIMath.js - Dienstprogramm J3DI Math Classes

WebGL-Matrixbibliotheken:

• Sylvester - Vektor- und Matrixmathematik für JavaScript-Bibliothek
• webgl-mjs - JavaScript-Vektor- und Matrix-Mathematikbibliothek, optimiert für die Verwendung von WebGL
• gl-matrix - JavaScript-Matrix- und Vektorbibliothek für leistungsstarke WebGL-Apps

WebGL-Frameworks:

• Canvas 3D JS-Bibliothek - Die Canvas 3D JS-Bibliothek (C3DL) ist eine JavaScript-Bibliothek, die das Schreiben von 3D-Anwendungen mit WebGL erleichtert.
• GLGE - GLGE ist eine JavaScript-Bibliothek, die die Verwendung von WebGL vereinfachen soll. Dies ist im Grunde eine native Browser-JavaScript-API, die direkten Zugriff auf openGL ES2 bietet.
• Jax - Jax ist eine vollständige WebGL-Entwicklungsumgebung mit Schwerpunkt auf Produktivität, mit der Sie mit wenig Zeit und Aufwand zur Implementierung gelangen.
• X3DOM - Ausgesprochen X-Freedom, dies ist ein experimentelles Open-Source-Framework und eine Laufzeit, um die laufende Diskussion in den Web3D- und W3C-Communities zu unterstützen, wie eine Integration von HTML5- und deklarativen 3D-Inhalten aussehen könnte.

Beispiele für WebGL in Aktion

WebGL Water - Ein interaktives Wasserbecken mit einer Kugel, die bewegt werden kann und Wellen und Wellen erzeugt. Durch Bewegen des Cursors wird auch ein Welleneffekt erzeugt. Zu den Merkmalen gehören strahlverfolgte Reflexionen und Refraktionen, analytische Umgebungsokklusion, Höhenfeldwassersimulation, weiche Schatten und Ätzmittel. Ein Screenshot des WebGL-Wassers in Chrome 18.0.1 ist in Abbildung A dargestellt.

Abbildung A.

Google Books-Bücherregal - Mit einem rotierenden mehrstufigen Karussell von Büchern können Sie Tausende von Titeln in Google Books mit Suchoptionen nach Betreff durchsuchen. Standardmäßig werden Bestseller geöffnet. Klicken Sie auf die aktuelle Themenüberschrift und wählen Sie dann aus 28 Themen aus, darunter Biografien und Memoiren, Computer und Internet, Fantasy, Fiktion, Geschichte, Referenz und andere. Klicken Sie auf ein Buchcover und das Volumen wird zu einer größeren Ansicht erweitert. Klicken Sie dann auf das Cover, um eine Zusammenfassung und einen Link zum Bestellen des Buches anzuzeigen. Ein Screenshot des in Chrome 18.0.1 angezeigten Abschnitts "Google Books Bookcase History" ist in Abbildung B unten dargestellt.

Abbildung B.

ROM "3 Dreams of Black" - Ein interaktiver Film von Chris Milk und einigen Freunden bei Google, der das kreative Potenzial von WebGL zeigt. Bewegen Sie die Maus, um verschiedene Winkel des Films im Verlauf anzuzeigen. Ein Screenshot des Filmabschnitts, wie er in Chrome 18.0.1 angezeigt wird, ist in Abbildung C unten dargestellt.

Abbildung C.

Floating Shiny Knot - Von Jaume Sanchez ist dies eine Demo eines Shaders, der gleichwinklige Panoramen direkt aus der Google Street View als Umgebungs-Mapping-Texturen verwendet. Die verwendete Technologie umfasst WebGL, HTML5-Canvas und JavaScript. Die WebGL-Anwendung verwendet Millionen von Umgebungskartentexturen mit Google Street View-Panoramen und verfügt über einen Klick- und Drag-Panorama-Viewer. Verwenden Sie das Mausrad zum Vergrößern und Verkleinern, verwenden Sie das Suchfeld, um Adressen zu finden, oder klicken Sie auf die Karte, um einen neuen Ort auszuwählen. Sie können Ihre eigenen Umgebungskarten erstellen, nachdem Sie dem Tutorial von Paul Lewis gefolgt sind. Jeder Standort verfügt über eine eindeutige URL, die Sie freigeben können. Die Ansicht in Abbildung D ist beispielsweise Taos, NM, wie in Chrome 18.0.1 angezeigt.

Abbildung D.

WebGL Aquarium - Mit Greggman und Human Engines können Sie die Anzahl der Fische auswählen. Verwenden Sie die Maus, um verschiedene Einstellungen zu ändern, klicken Sie auf *, um weitere Einstellungen aufzurufen, drücken Sie die LEERTASTE, um die Ansicht zu ändern, und drücken Sie L für Haie mit Lasern. Die Seite enthält auch die tatsächlichen Renderings für Bilder pro Sekunde. Die in Chrome 18.0.1 angezeigte Beispielansicht ist in Abbildung E unten dargestellt.

Abbildung E.

Es gibt viele andere WebGL-Beispiele und experimentelle Anwendungen im Web. Weitere Informationen finden Sie in den Google WebGL-Experimenten, einem Schaufenster für kreative Webexperimente, die mit Technologien wie HTML5, Canvas, SVG und WebGL erstellt wurden.