PAGE online

Cloud-Rendering: WebGL-Alternative auf dem Vormarsch

Cloud Streaming ist im Begriff, das Rendern von Bildern in Echtzeit zu revolutionieren. Doch welche Vor- und Nachteile birgt die WebGL-Alternative?

videogame balenciaga szene mit modellen auf der straße Das Konzept der Cloud hat sich in der Optimierung von Prozessen und Abläufen, und besonders in der Bereitstellung von Computerressourcen bewährt und etabliert. Nun ist das Modell kurz davor, einen weiteren Bereich zu transformieren: Real-Time-Rendering. Im Vergleich zur vergleichsweise klassischen WebGL-Variante, wo man Bilder in Echtzeit auf der GPU des Desktop-PCs oder eines mobilen Geräts berechnet und generiert, beschreibt Cloud Streaming oder Pixel Streaming eine Technik, die fotorealistische Bilder bereits auf einem Server in der Cloud berechnet und dem Benutzer remote als Stream zur Verfügung stellt. Gleichzeitig lassen sich Benutzereingaben an die Anwendung in der Cloud zurückschicken. Doch wie ausgereift ist diese Technologie? Kann sie das Echtzeit-Rendering mit WebGL im Browser ersetzen? Dafür lohnt sich ein Blick hinter die Kulissen.

Cloud-Rendering setzt neue Qualitätsstandards

Fangen wir mit dem größten Vorteil von Cloud Rendering gegenüber WebGL an: die Qualität! Bei WebGL begrenzen zwei Faktoren die erreichbare grafische Leistung. Zum einen ist die vom Browser unterstützte Grafik-API auf einen bestimmten Satz von Funktionen beschränkt. Einige wirklich erstaunliche Grafikeffekte, die typischerweise in Triple-A-Spielen zu finden sind, lassen sich so im Browser gar nicht erst realisieren.

Zusätzlich möchte man die Webanwendung in der Regel einem breiteren Publikum zugänglich machen und eine Vielzahl von Geräten und Browsern (Desktop und Mobile) unterstützen. Dabei begrenzt die Rechenleistung der verschiedenen Endgeräte die möglichen Effekte und die Komplexität der Szene. Mit Cloudstreaming erreicht man also potentiell mehr Endgeräte. Trotz der Einschränkungen ist es zwar möglich in WebGL eine hohe Darstellungs-Qualität zu erreichen. Allerdings bedarf es – vor allem mit Blick auf die Echtzeit-Grafik und Programmierung realistischer Shader – einen enorm großen zeitlichen und finanziellen Aufwand für Konzeption und Umsetzung.

PDF-Download: eDossier: »WebGL: Making-ofs und Workshops«

Neue Praxisreports, Case Studys und Tutorials aus Design & Entwicklung mit WebGL

0,00 €
AGB

Beim Cloud-Streaming sieht die Sache anders aus. Der Hosting-Provider bietet sehr leistungsfähige Hardware an, um in der Cloud erstaunliche fotorealistische Bilder zu rendern. Dabei unterstützt es alle neuesten Rendering-Funktionen moderner Game-Engines wie Unity oder Unreal, was die benötigte Zeit für Künstler und Entwickler reduziert. Ein Streaming-Player lässt sich problemlos in jede Website einbetten. Per Websocket baut sich zwischen Client-Browser und Streaming-Server eine Verbindung auf, über die sich Daten in beide Richtungen austauschen lassen.

Blauer Sportwagen WebGL
Hier ein Vergleich zwischen WebGL und Cloud-Streaming bei Unity. Das obere Beispiel wird in WebGL auf der Grafikkarte gerendert, das untere  als Stream in der Cloud.
Blauersportwagen Cloudstream
Schatten und Lichter lassen sich im Stream noch realistischer darstellen.

Als Beispiel dient hier das Interface eines Autokonfigurators , welchen man im Frontend zunächst mit WebGL/Webtechnologien umsetzt und das Ergebnis der Konfiguration anschließend in hoher Qualität als Streamingansicht präsentiert. Auf diese Weise schafft man eine nahtlose User Journey, bei der die Benutzer vielleicht nicht einmal wissen, dass die schönen Bilder in der Cloud und nicht auf der eigenen Hardware entstehen.

5G als Gamechanger

Wir wissen nun, dass die Qualität der WebGL-Experience von der Hardware des Endgerätes abhängt. Cloud-Rendering verlagert diesen Engpass auf die verfügbare Internetverbindung. Dies ist besonders interessant, wenn man sich an viele mobile Nutzer wendet. Smartphones oder Tablets verfügen in der Regel über keine ausreichende GPU, um schöne WebGL-Bilder zu rendern, dafür aber über eine schnelle Internetverbindung über Wifi und Mobilfunk. Dieser Vorteil wird sich in den nächsten Jahren mit der breiteren Verfügbarkeit von 5G noch verstärken. Für eine optimale User-Experience empfehlen Hosting-Anbieter eine minimale Download-Geschwindigkeit von 15 Mbps, eine Upload-Geschwindigkeit von 5 Mbps und eine Latenz von 70 ms. (Quelle: Link).

Entwickler sollten versuchen, die Wahrnehmbarkeit der Latenz zu reduzieren, indem sie die Anwendungen auf eine bestimmte Weise gestalten. Produkt-Konfiguratoren, die beispielsweise eine umlaufende Kamera verwenden, sind von einer etwas weniger reaktionsschnellen Interaktion nicht so stark betroffen wie Spiele mit einer First-Person-Kamera. Die zu übertragenden Daten lassen sich zusätzlich reduzieren, indem man die Auflösung der Renderansicht einschränkt. Diese lässt sich beispielsweise über einen sogenannten iframe in ein kleineres Fenster auf der Seite integrieren.

Kostspieliger Streaming-Luxus

Für jeden Benutzer gleichzeitig eine identisch hohe Rechenleistung in der Cloud sicherzustellen, hört sich doch sehr teuer an, oder? Und das ist es auch! Hosting-Anbieter berechnen etwa fünf Cent pro Minute Streaming pro Benutzer. Ein Rechenbeispiel gefällig? Gehen wir von einer Microsite aus, die einen Monat lang online ist und insgesamt 150.000 Nutzern vorweist, welche wiederum je drei Minuten auf der Plattform verbringen. Die Hosting-Kosten würden sich so für einen einzelnen Monat auf satte 22.500€ belaufen. Die Preisstruktur limitiert definitiv die Anzahl der Use Cases für Cloud Streaming. Für eine kurze Kampagnen-Website mit einer begrenzten Anzahl von erwarteten Nutzern könnte es daher interessanter sein als für einen länger ausgelegten Online-Showcase.

Weitere spannende Anwendungsfälle wären eine personalisierte Microsite für Kunden eines kostspieligen Autos oder interessierte Käufer einer hochpreisigen Villa. Wenn Unternehmen erwarten, dass Menschen viel Geld für etwas bezahlen, könnten sie auch daran interessiert sein, das Produkt oder ein Gebäude auf eine realistische und ansprechende Weise zu präsentieren. So werden das individuelle Anpassen und Konfigurieren zu einem unterhaltsamen sowie besonderen Erlebnis. Auch eintägige virtuelle Veranstaltungen, Konferenzen oder Shows mit einer begrenzten Anzahl von Teilnehmern könnten von Cloud-Streaming profitieren.

videogame balenciaga flammen hände
Teuer aber schick: Mit Cloudrendering lassen sich aufwendige Szenarien erstellen, wie für das Videogame von Balenciaga

Cloud-Rendering – der Anfang ist gemacht

Das Cloud-Rendering hat also ein enormes Potenzial, die Möglichkeiten des Echtzeit-Renderings im Web-Kontext zu verändern. Ein gutes Beispiel für ein gestreamtes Erlebnis ist das von Balanciaga mit viel Medienrummel produzierte Videospiel. Leider ist das Erlebnis nicht mehr online, aber ein Video davon ist unter diesem Link zu sehen. Ein Spielerlebnis mit dieser visuellen Qualität und Detailfülle wäre schlichtweg in WebGL nicht realisierbar. Ein weiteres gutes Beispiel ist der Autokonfigurator von Pagani. Da die Hypercars ein kleines Vermögen kosten, ist es für potentielle Käufer sehr wichtig zu sehen, welche Qualität sie für ihr Geld bekommen.

An diesem Punkt schränken die Preis- und Latenzaspekte die Anwendungsfälle und das Design der Experiences noch ein. Steigende Maschinenleistung, reduzierte Hosting-Kosten und die breitere Verfügbarkeit von 5G in naher Zukunft machen Cloud-Rendering mit der Unity- oder Unreal-Engine jedoch zu einer relevanten WebGL-Alternative. Dadurch wird sich auch die Art und Weise wie wir Echtzeitgrafiken im Web konsumieren, nachhaltig verändern und Technologieagenturen und Unternehmen sollten sich mit diesem Ausblick im Hinterkopf schon heute mit der Technologie auseinandersetzen. Oder wie Arthur C. Clarke sagen würde:

Any sufficiently advanced technology is indistinguishable from magic.

Schwarz-Weiß Foto Jan Beutgen imProfilAls Director Realtime 3D bei Demodern ist es mir möglich schon früh in neue Projekte einzusteigen und das technische Konzept so zu formen, dass es im Sinne der Kundenvorgaben dem aktuellen Stand der Technik entspricht. Auch aus diesem Grunde nehme ich mir regelmäßig die Zeit neue Technologien zu erforschen und zu testen, um deren Potenzial für künftige Projekte einzuordnen. Dies ist letztlich die Basis für die Entwicklung einzigartiger und qualitativ hochwertiger Experiences, die Usern ein neuartiges Erlebnis ermöglichen.

Produkt: eDossier »Parallax Scrolling – Basics, Cases, Tutorials«
eDossier »Parallax Scrolling – Basics, Cases, Tutorials«
Webdesign Trends und Parallax Scrolling Tutorials

Schreiben Sie einen Kommentar

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Das könnte Sie auch interessieren