3D

Pixel Streaming und WebGL: Möglichkeiten von 3D im Web

// Artikel

Echtzeit-Rendering mit Pixel Streaming und WebGL! Wir beleuchten die Grundlagen beider Technologien, erklären die Unterschiede und zeigen auf, für welche Anwendungsfälle sie jeweils am besten geeignet sind. Tauchen Sie ein in die Welt der realistischen Grafiken und nahtlosen Streaming-Lösungen!

Dynamische Echtzeit-Renderings

3D im Web ist mehr als nur ein statisches Bild – es ist eine interaktive, nicht-lineare Erfahrung. Statt vorgegebener Perspektiven erkunden Sie Ihre Szene frei, passen Blickwinkel und Details nach Ihren Bedürfnissen an. Visuelle Effekte, Animationen und Konfigurationen lassen sich dynamisch überlagern und individuell steuern. Natürlich können auch alle Möglichkeiten der 3D-Animation, die es auch in linearen Renderings gibt, genutzt werden.

Sales statt Show

Interaktive 3D-Visualisierung

3D im Web bedeutet mehr als nur Betrachten – es bedeutet Gestalten. Durch klickbare Features, Hotspots und Konfigurationsmöglichkeiten erschaffen Nutzer ihre eigene Variante eines Produkts oder seiner Umgebung. Vom einfachen 3D-Viewer bis hin zum vollumfänglichen Konfigurator lässt sich der Interaktionsgrad individuell für derartige Webpräsentationen frei wählen – bis hin zur direkten Anbindung an Produktionsprozesse ist vieles möglich. So entsteht ein einzigartiges, intuitives Erlebnis, das inspiriert, Entscheidungen erleichtert und Vielfalt erlebbar macht.

Pixel Streaming und WebGL im Vergleich

Beide Technologien ermöglichen die interaktive Darstellung dreidimensionaler Inhalte im Browser. Der grundlegende Unterschied liegt darin, wo die Bilder berechnet werden.

WebGL ist eine Grafikschnittstelle, die 3D-Szenen direkt im Browser mithilfe der Grafikhardware des Endgeräts rendert. Modelle, Texturen und weitere benötigte Daten werden dafür zunächst geladen. Anschließend können Perspektiven, Objekte und Animationen lokal berechnet werden.

Pixel Streaming verlagert die Berechnung auf einen leistungsfähigen Server. Eine 3D-Anwendung, beispielsweise auf Basis der Unreal Engine, erzeugt dort in Echtzeit das Bild. Dieses wird als Videostream an den Browser übertragen. Eingaben über Maus, Tastatur oder Touchscreen gelangen zurück zur Anwendung und verändern unmittelbar die dargestellte Szene.

Zwei Renderingtechnologien im Web: Remote oder lokales Rendering
Während Pixel Streaming rechenintensive Szenen serverseitig rendert und als Videostream überträgt, bringt WebGL die Grafik direkt ins Gerät des Users. Beide Ansätze haben ihre Stärken – je nach Use Case, Performance-Anforderungen und Zielgruppe. In den folgenden Absätzen erläutern wir die Unterschiede im Detail.

Pixel Streaming als Vertreter des Remote Renderings

Pixel Streaming ist eine Technologie der Unreal Engine 5, die es ermöglicht, 3D-Inhalte auf einem leistungsstarken Remote-Rechner oder in der Cloud auszuführen und die gerenderten Frames sowie Audiodaten in Echtzeit an Endgeräte zu übertragen. Nutzerinnen und Nutzer können über Tastatur, Maus oder Touch-Eingaben interaktiv mit der Anwendung agieren – ganz ohne zusätzliche Software. Die Anwendung selbst wird dabei vom restlichen Webinhalt entkoppelt betrieben und benötigt lediglich eine Verwaltungsinstanz (den sogenannten Matchmaker), die bei Bedarf eine Verbindung zum passenden Server herstellt und die Kommunikation zwischen Nutzer und Anwendung ermöglicht.

Diagramm, das den Prozess der Verwaltung durch einen Matchmaker zeigt. Der Matchmaker kommuniziert mit einem Render-Server und einem Signaling-Server, der mit einer Unreal Engine 5 Anwendung verbunden ist. Der Frontend-Bereich (Website) erhält Audio- und Videostreams sowie Eingaben von Tastatur, Maus und Touchgeräten.

Flexibilität und Sicherheit für Unternehmen

Durch Pixel Streaming werden keine 3D-Modelle oder sensiblen Daten auf das Endgerät des Nutzers übertragen, sondern lediglich ein Video-Stream. Das sorgt für höchste Datensicherheit, da Designs und proprietäre Informationen nicht heruntergeladen oder manipuliert werden können. Die Nutzerin oder der Nutzer bauen eine Verbindung zum Server auf und bekommen nur audiovisuelle Bildinformationen der 3D Szenen, die sie mit ihren Eingaben interaktiv steuern können. Allerdings ist hier auch eine solide und stabile Internetverbindung notwendig.

WebGL – Effiziente 3D-Darstellung im Browser

WebGL (Web Graphics Library) ist eine API, die 3D-Inhalte in Echtzeit im Browser darstellen kann und die Hardwarebeschleunigung der GPU nutzt. Da es ohne zusätzliche Plugins auskommt, ist es eine weit verbreitete Lösung für interaktive Visualisierungen, Produktkonfiguratoren und Echtzeitgrafiken. Besonders bei weniger komplexen Szenen spielt WebGL seine Stärken aus, da es mit vergleichsweise geringen Datenmengen arbeitet und somit schnelle Ladezeiten ermöglicht. Ein großer Vorteil von WebGL ist die hohe Skalierbarkeit, da theoretisch unbegrenzt viele Nutzer gleichzeitig darauf zugreifen können. Inhalte werden direkt auf dem Endgerät berechnet und nur einmal heruntergeladen, was Serverressourcen schont und eine kosteneffiziente Lösung für viele Unternehmen darstellt.

Ihre 3D-Webanwendung – So einzigartig wie Ihr Produkt

Sie möchten Realtime-3D in Ihr Web-Erlebnis integrieren? Die Möglichkeiten sind so vielfältig wie Ihre Anforderungen. Von einfachen Visualisierungen bis hin zu interaktiven Konfiguratoren, die sich nahtlos in Shops oder Produktionsprozesse einfügen, gestalten wir eine maßgeschneiderte Lösung für Sie. 

Im Folgenden sehen Sie einen Vergleich von Pixel Streaming und WebGL anhand verschiedener Projektkriterien. Die Bewertung erfolgt auf einer Skala von 1 (weniger geeignet) bis 10 (sehr gut geeignet) – je höher der Wert, desto passender ist die Technologie für das jeweilige Kriterium.

Ein Radardiagramm vergleicht verschiedene Parameter, darunter Administration, Laufende Kosten und Flexibilität. Die Daten sind in zwei überschnittenen Flächen dargestellt, die unterschiedliche Bewertungsprofile zeigen. Die Hintergrundfarbe ist dunkel, und die Achsen sind beschriftet.
braucht passende Infrastruktur.
Interaktivität

WebGL oder Pixel Streaming: Handlungsempfehlungen

WebGL empfiehlt sich für interaktive Produktdarstellungen und Konfiguratoren, die für viele Nutzer auf unterschiedlichen Endgeräten zugänglich sein sollen. Auch umfangreiche Produkte mit zahlreichen Bauteilen und Konfigurationsmöglichkeiten lassen sich damit umsetzen, sofern die 3D-Daten entsprechend optimiert werden. Besonders bei öffentlich zugänglichen Anwendungen bietet WebGL durch die lokale Grafikberechnung Vorteile hinsichtlich Skalierbarkeit und laufender Kosten.

Pixel Streaming eignet sich besonders für komplexe 3D-Umgebungen mit hohen Anforderungen an die visuelle Qualität, dynamische Beleuchtung und aufwendige Echtzeitberechnungen. Die serverseitige Verarbeitung ermöglicht solche Anwendungen auch auf weniger leistungsfähigen Endgeräten. Bei der Auswahl sollten jedoch die laufenden GPU-Kosten, die Anzahl gleichzeitig aktiver Nutzer und die erforderliche Internetverbindung berücksichtigt werden. Auch der Schutz sensibler 3D-Konstruktionsdaten kann ein Argument für Pixel Streaming sein.

Damit Pixel Streaming seine visuellen Stärken ausspielen kann, müssen auch die zugrunde liegenden 3D-Inhalte entsprechend aufbereitet werden. reaze bringt dafür umfassendes 3D-Know-how ein – von der Modellierung über Materialien und Beleuchtung bis zur Animation. Diese Kompetenzen kommen ebenso bei hochwertigen Renderings und weiteren interaktiven Anwendungen zum Einsatz. Einen Überblick bietet das 3D-Leistungsspektrum von reaze.

//
Projekte

Passende Cases

KLEUSBERGKLEUSBERGBauindustrie
App
Web
3D

Neue Schulgebäude konfigurieren. Mit Pixelstreaming-Technologie.

Zwei Personen sitzen zusammen vor einem Computer, auf dem ein digitales Layout oder Plan angezeigt wird. Der Bildschirm ist beleuchtet und zeigt verschiedene Bereiche und Elemente des Plans. Die Umgebung ist eher dunkel, sodass der Fokus auf dem Monitor liegt.
Ein Klassenraum mit mehreren Tischen und Stühlen. An einer Wand befinden sich zwei Tafeln. Die Tür ist teilweise geöffnet, was einen Blick auf den Raum ermöglicht. Der Boden ist blau, und die Wände sind hellgrau.
//
FAQ

Pixel Streaming vs. WebGL.
Die Unterschiede im Überblick.

//
Transfer

Wollen wir Wissen tauschen? Zum Beispiel bei einem guten Frühstück?