Cloud-Rendering: Alternative zu WebGL auf dem Vormarsch

Dieser Artikel erschien in leicht abgewandelter Form zunächst auf PAGE Online. Hier geht es zum Original-Artikel.

Was waren das noch für Zeiten, in denen wir all unsere Daten auf USB-Sticks, externen Festplatten und sogar CDs, ja CDs!, gespeichert haben. Viel Zeit ging für das Organisieren und Kopieren von Dateien sowie das Erstellen endloser Backups drauf. Das Konzept der Cloud verändert dieses Paradigma nachhaltig, indem es uns diese lästige Arbeit abnimmt. Und das Ganze zeitsparend und kostengünstig.

Heutzutage steht die Cloud kurz davor, einen weiteren Bereich zu transformieren: Real-Time-Rendering. Im Vergleich zur "klassischen" Variante, computergenerierte Bilder in Echtzeit auf der GPU des Desktop-PCs oder eines mobilen Geräts zu erstellen, beschreibt Cloud Streaming oder Pixel Streaming eine Technik, die jedem Benutzer eine leistungsstarke Remote-Maschine zur Verfügung stellt und fotorealistische, hochwertige Bilder in der Cloud berechnet. Die finalen Bilder werden anschließend in Echtzeit auf die Hardware des Anwenders gestreamt. Die Benutzereingabe wird an die Anwendung in der Cloud zurückgeschickt.

Doch wie ausgereift ist diese Technologie inzwischen? Kann sie das Echtzeit-Rendering mit WebGL im Browser ersetzen? Dafür lohnt sich ein Blick hinter die Kulissen.

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. Zusätzlich begrenzt die Rechenleistung des Endgerätes die möglichen Effekte und die Komplexität der Szene.

Als Digitalagentur aus dem Bereich Creative Technologies haben wir in den letzten Jahren häufig WebGL in unseren Web-Experiences eingesetzt. Da wir viele Experten für Echtzeit-Grafik und Shader-Programmierung im Haus haben, ist es uns gelungen, für die Produkte unserer Kunden qualitativ hochwertige WebGL-Erlebnisse zu erzielen. Eine gute Referenz für diese Projekte sind unsere High-End-Produktkonfiguratoren wie z.B. für Helmade und Smart. Diesen fotorealistischen Look in einer Web-Umgebung zu erreichen, erfordert jedoch eine Menge Forschung, Aufwand und Feinabstimmung.

Hier ist ein Vergleich zwischen WebGL und Cloud-Streaming in Unity. Das obere Beispiel wird in WebGL auf der Grafikkarte gerendert, das untere als Stream in der Cloud.

Der Streaming-Player lässt sich problemlos in jede Website einbetten. Per Websocket baut der Client-Browser zwischen dem Streaming-Server eine Verbindung auf, um Daten in beide Richtungen auszutauschen.

Als Beispiel lässt sich hier das Interface eines Autokonfigurators anbringen, welchen man zunächst mit Webtechnologien umsetzt und das Ergebnis anschließend in hoher Qualität in einer 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.

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.artphones 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. Produktkonfiguratoren, die z.B. 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.

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 5 Cent pro Minute Streaming pro Benutzer.

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 eher interessant sein, als für einen länger ausgelegten Online-Showcase. Ein weiterer spannender Anwendungsfall könnte eine personalisierte Microsite für Kunden eines kostspieligen Autos oder interessierte Käufer einer hochpreisigen Villa sein. 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 wird 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.

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 die Website nicht mehr online (Hinweis auf den Abschnitt über die Preisgestaltung 😉 ), 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 noch die Anwendungsfälle und das Design der Experiences 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 zu einer noch relevanteren Alternative zu WebGL. Mit diesem Ausblick im Hinterkopf sollten Technologieagenturen und Unternehmen sich schon heute mit Cloud-Rendering auseinandersetzen, da es die Art und Weise wie wir Echtzeitgrafiken im Web konsumieren, nachhaltig verändern wird.