OpenGL ES 2.0 / WebGL Demos

Immer mehr Embedded Plattformen enthalten einen leistungsfähigen 3D Graphics-Core (GPU) und OpenGL ES 2.0 etabliert sich als die idealle Programmierschnittstelle für attraktive User Interfaces und komplexe Grafikanwendungen. Die programmierbaren Vertex- und Fragmentshader ermöglichen die Implementierung von anspruchsvollen und kreativen Grafikeffekten - bei gleichzeitiger Reduktion der CPU Last.
Da WebGL auf OpenGL ES 2.0 basiert, können grafische Anwendungen die für Embedded Systems entwickelt wurden mit geringem Aufwand auch in einem Web-Browser ausgeführt werden. Darüberhinaus findet OpenGL ES 2.0 auch in Android und iOS (iPad, iPhone) Verwendung - somit bietet Open GL ES 2.0 ein gutes Fundament für die Realisierung von plattformunabhängigen und architekturunabhängigen Grafikanwendungen.

Auf dieser Seite finden sie einige einfache OpenGL ES 2.0 / WebGL Beispielapplikationen, die direkt im Browser ausgeführt werden können - vorausgesetzt der Browser unterstützt WebGL. Eine kurze Erklärung beschreibt die Implementierung des Beispiels und erläutert den jeweiligen Einsatz von CPU und GPU (mittels programmierbarer Vertex- and Fragmentshader).

Verwenden Sie einen Web-Browser mit WebGL Unterstützung um die Demos erfolgreich ausführen zu können!

SolarSystem

Die "SolarSystem" Demo zeigt ein vereinfaches Modell unseres Sonnensystem mit den acht Planeten die um ihre eigene Achse rotieren und auf einer Umlaufbahn um die Sonne kreisen. Sobald das Modell initialisiert und alle Planetenkoordinaten von der CPU berechnet sind, werden praktisch alle Berechnungen und das Zeichnen der gesamten Szene von der GPU durchgeführt.
Jeder Planet wird duch ein kugelförmiges Drahtmodell gebildet, das aus hundert von Vertices besteht. Für jeden Animationsschritt berechnet der Vertexshader die Position und die Beleuchtung für jeden Punkt des Drahtmodells - abhängig von der Position des Planeten und der aktuellen Betrachtungsposition.
Der Fragmentshader zeichnet schlussendlich die sichtbaren Teile der kugelförmigen Objekte durch Projektion einer Texturbitmap auf das Drahtmodell. Eine entsprechende Blending Operation sorgt für die Umsetzung der gewünschten Beleuchtung.
Klicken Sie auf das Bild um die Demo zu starten...

FireWorks

Das Beispiel "FireWorks" zeigt die Verwendung von sogenannten Partikelsystemen. Das simulierte Feuerwerk zeigt zufällig abgeschossenen Feuerwerksraketen, die jeweils aus hunderten von Partikel bestehen. Jeder Partikel folgt seiner individuellen ballistischen Flugbahn und verfügt über individuelle Parameter (Farbe, Aussehen, zeitlicher Verlauf).
Die CPU wird in diesem Beispiel nur für das Definieren der Parameter eines Partieklsystems benötigt. Jeder Partikel hat seinen eigenen Lebenszyklus - die aktuelle Position des Partikels im Raum, seine aktuelle Größe und Farbe wird vom Vertexshader berechnet. Der Fragmentshader ist verantwortlich für das Zeichnen der Partikel mittels einer Stern-Textur unter Verwendung der berechneten Parameter.
Klicken Sie auf das Bild um die Demo zu starten...

MoonShot

Ein interaktiver Flug über eine künstliche Mondoberfläche wird im Beispiel "MoonShot" gezeigt. Der Anwender kann die Geschwindigkeit und die Richtung des Raumschiffes steuern um eine Kollision mit den schwebenden Gesteinsbrocken zu verhindern...
Die Oberfläche des Mondes wird durch 'Procedural Terrain Generation' erzeugt. Der aktuell sichtbare Ausschnitt wird durch ein Array aus Sektoren mit vielen Gelände-Höhenwerten gebildet. Sobald das Raumschiff einen Sektor verlässt, wird eine neue Reihe mit Gelände Daten erzeugt. Eine ähnliche Technik wird für die schwebenden Gesteinsbrocken verwendet. Jeder Stein besteht aus einer Kugel, wobei der Abstand jedes Punktes des Drahtmodells zum Zentrum modifiziert wird. Die Berechnung der Geländesektoren sowie die Erzeugung der Gesteinsformen wird durch die CPU berechnet.
Der Vertexshader ist verantwortlich für die Berechnung der aktuellen Position, der Beleuchtung und des Nebels. Nebel wird in diesem Beispiel verwendet um alle Geländeteile und Steine abzudunkeln, die weiter entfernt vom Betrachter liegen.
Der Fragmentshader ist letztendlich für das Texturemapping und die Umsetzung der Beleuchtung verantwortlich.
Klicken Sie auf das Bild um die Demo zu starten...