Web-Laufzeitaktualisierungen sind da: Bringen Sie Ihren Browser auf die nächste Stufe

Auf der Unite 2023 haben wir unsere neuesten Web-Runtime-Angebote vorgestellt. Dazu gehörten weitere Details zur mit Spannung erwarteten Unterstützung für mobile Browser, ein erster Blick auf die Möglichkeiten von WebGPU für fortschrittliche Grafik und Rendering in Desktop-Browsern sowie eine spannende Ankündigung mit unseren Partnern bei Meta, Unity-Titel auf die Instant Games-Plattform von Facebook und Messenger zu bringen. Lesen Sie weiter, um zu erfahren, was Sie bei Ihrem nächsten webbasierten Projekt erwartet.
Unity hat eine lange Geschichte mit Web-Laufzeiten. 2006 wurde der Unity-Webplayer als Plug-in für Webbrowser vorgestellt. Mit dem Aufkommen von HTML5 begannen die Browser, die Unterstützung für Plug-ins zu entfernen, und der Webplayer von Unity wurde 2015 veraltet. Als nächstes haben wir WebGL eingeführt, um Spiele direkt im Browser mit asm.js auszuführen. Unity war bei der Entwicklung von WebAssembly (WASM) von Anfang an dabei, und wir haben uns seitdem mit WASM weiterentwickelt. Dies bringt die Leistung der Unity-Engine nahezu nativ ins Web. In 2018.2 hat unsere WebAssembly-Lösung asm.js als Standardlösung ersetzt.
Sie haben schon eine Weile nichts mehr von uns gehört, aber wir glauben, dass wir jetzt an einem Wendepunkt für Unity-Inhalte im Internet angelangt sind.
Zusätzlich zu unseren technischen Fortschritten haben wir unser Namensschema für die Plattform aktualisiert. WebGL wird nun als Unity Web bezeichnet, um die WebGL-Technologie von der Web-Plattform von Unity zu trennen. Wir wollen uns auch auf eine Zukunft mit mehr als einem Rendering-Standard vorbereiten. Schließlich werden Sie in der Lage sein, einen Build mit WebGL, einen mit WebGPU oder einen einzigen Build mit beiden zu erstellen.
Durch das Anbieten von Inhalten auf diese Weise erhalten die Spieler mit einem Klick auf einen Link - oder dem Scannen eines QR-Codes - sofortigen Zugang zu einem Erlebnis, ohne dass sie etwas auf ihren Geräten installieren müssen. Wenn Sie Ihre Inhalte in die sichere Umgebung von Browsern bringen, haben Sie außerdem eine direkte Verbindung zwischen Ihnen und Ihren Spielern, ohne dass ein anderer Online-Shop dazwischenkommt.
Web hat keinen Installationsschritt wie andere Plattformen, was geringe Reibung und sofortiges Engagement verspricht. Dies bedeutet jedoch, dass die Benutzer die Laufzeit- und Startkomponenten beim ersten Laden herunterladen müssen. Das bedeutet, dass für uns, für Sie und für alle Endnutzer die Ladezeit das Wichtigste ist. Es wird eine Menge getan, um die Ladezeiten zu verkürzen, und Sie werden später in diesem Beitrag mehr darüber erfahren.
Die Tiefe und Breite der Engine gibt Entwicklern die Möglichkeit, komplexere Simulationen und interaktive Elemente als bei anderen Webtechnologien zu verarbeiten. Da die Benutzer die Laufzeit- und Startdateien im Voraus herunterladen, ist eine kleinere Version im Web-Kontext fast immer besser - zumindest im Moment.
In Anbetracht dieser Kompromisse gibt es sicherlich einige Arten von Spielen, die im Internet besser funktionieren als andere, wie z. B. Casual- und Hypercasual-Spiele mit ihren mundgerechten Spielsitzungen und leicht zu verstehenden Mechanismen.
Darüber hinaus können Sie sich die reibungsarme Natur des Webs zunutze machen, indem Sie einen kleinen Teil eines größeren Spiels, z. B. Ihren Tutorial-Level, zu einem eigenen Web-Build machen, der vom Rest des Spiels getrennt und für alle verfügbar ist. Dies ermöglicht ein reibungsloses Spielerlebnis beim ersten Mal, ohne dass etwas auf dem Gerät installiert werden muss, und gibt Ihnen die Möglichkeit, den Spieler zur vollständigen nativen App zu konvertieren, nachdem er sich mit der Spielmechanik beschäftigt hat.
Die Artemis Real-time Orbit Website (AROW) ist ein interaktiver Echtzeit-Tracker für die Artemis I-Mission, der im November letzten Jahres gestartet und mit Unity erstellt wurde.
In der Mythologie ist Artemis die Zwillingsschwester von Apollo. Deshalb hat die NASA die Serie von Missionen, die ihre Rückkehr zur Mondoberfläche markiert, nach der griechischen Figur benannt.
Weltraumfans rund um den Globus konnten über ihren Webbrowser verfolgen, wo sich die Orion-Kapsel in der Umlaufbahn befand und wo sie schließlich im Pazifischen Ozean aufsetzte. Die NASA plant, dieses Instrument für alle künftigen Artemis-Missionen zu nutzen und es so zu erweitern, dass nicht nur die Orion-Kapsel, sondern alle Missionskomponenten verfolgt werden können.
AROW wurde von einem Praktikanten, Seth Lambert, ins Leben gerufen, der inzwischen ein Vollzeitmitglied des NASA-Kommunikationsteams ist.
Auf der Unite konnten wir mit Stolz verkünden, dass die Unterstützung für Android- und iOS-Browser in Unity 6 enthalten sein wird. Sie werden bald in der Lage sein, Ihre Unity-Spiele überall im Web auszuführen, auch in iOS- oder Android-Browsern selbst. Sie können Ihre Spiele auch in eine Webansicht in einer nativen App einbetten oder unsere progressive Web-App-Vorlage verwenden, damit sich Ihr Spiel mehr wie eine native App verhält, mit eigener Verknüpfung und Offline-Funktionalität. Wir sind sicher, dass Sie, wenn Sie Unity Web auf Mobilgeräten einsetzen, mit High-End-Mobilgeräten, die in den letzten zwei oder drei Jahren auf den Markt gekommen sind, erfolgreich waren, aber Ihre Ergebnisse können je nach Inhalt variieren. Wenn wir Unity 6 ausliefern, werden wir klarere Richtlinien für die Mindestanforderungen an die Hardware für Unity Web auf Mobilgeräten haben.
Hier können Sie unser aktuelles 2D-Beispielprojekt sehen Fröhliche Ernte das in Safari auf einem iPhone 15 Pro läuft.

Safari unterstützt jetzt WebGL2, so dass Unity Web sowohl auf iOS- als auch auf Android-Geräten funktioniert. Die Geschwindigkeit und Zuverlässigkeit der Mobilfunknetze sowie die CPU- und GPU-Leistung haben sich ständig verbessert. Wir sind der Meinung, dass das moderne Publikum sofortige Erlebnisse mit sehr geringen Reibungsverlusten wünscht und dass die Spieler jetzt für kurze interaktive Inhalte gerüstet sind.
Wie auf der Unite Keynote angekündigt, ist Unity eine Partnerschaft mit Meta eingegangen, um Unterstützung für deren Instant Games-Plattform zu entwickeln. Durch die Freischaltung dieses Ökosystems für Entwickler können die Spieler Spiele sofort auf Facebook und in Messenger-Konversationen finden und spielen. Mit einem Publikum von Hunderten von Millionen Spielern ist dies eine fantastische Gelegenheit für Sie, die Reichweite Ihrer Inhalte auf eine ganz neue Gruppe auszudehnen.
"Die enge Zusammenarbeit zwischen Meta und Unity hat bereits erste vielversprechende Ergebnisse in Bezug auf die Leistungssteigerung von HTML5-Spielen erbracht, die mit Unity entwickelt wurden", so Andrew Mo, Product Lead für Facebook Gaming bei Meta. "Wir freuen uns darauf, diesen Schwung auch im kommenden Jahr fortzusetzen und es Spieleentwicklern einfacher zu machen, ihre Inhalte auf Facebook und Messenger zu bringen."
Er fügte hinzu: "Wir glauben, dass es ein großes Potenzial hat, Spiele sofort zugänglich zu machen, vor allem, wenn sie so konzipiert sind, dass man sie mit seinen Freunden und der Community spielen kann. Und wir freuen uns, mit Unity zusammenzuarbeiten, um dieses Potenzial auf unserer Plattform zu erschließen."
"Es liegt viel Potenzial darin, Spiele sofort zugänglich zu machen, vor allem, wenn sie so konzipiert sind, dass sie mit Freunden und der Community gespielt werden können [...] wir freuen uns, mit Unity zusammenzuarbeiten, um dieses Potenzial auf unserer Plattform zu erschließen." - Andrew Mo, Produktleiter für Facebook Gaming, Meta
Das Team der Unity-Webplattform arbeitet an einer Reihe von Dingen, um diese Partnerschaft zu erleichtern, darunter ein spezielles Build-Target, mit dem Sie Spiele in einem optimierten, auf Instant Games zugeschnittenen Ablauf testen, optimieren und veröffentlichen können. Es wird ein C#-SDK für die Schnittstelle zu Instant Game APIs und eine Vielzahl neuer Optimierungen geben, die sicherstellen, dass die Spieler in Sekundenschnelle ins Spiel einsteigen können.
Wir arbeiten auch mit Spielestudios zusammen, um dieses neue Tool zu validieren. Zu den Launch-Partnern gehören Coatsink, die bereits einige Spiele auf Metas Plattformen anbieten, darunter Ready, Set, Cook! Kurz nachdem Coatsink als Partner für die Markteinführung unterschrieben hatte, wandte das Team von Unity einige frühe Optimierungen an diesem Spiel an, und die Ergebnisse waren äußerst vielversprechend.

Bei einer um nur 25 % verkürzten Ladezeit stiegen die aktiven Sitzungen um 50 % und die Click-to-Play-Raten von 35 % auf 58 %. Das bedeutet, dass sich Ready, Set, Cook! gleich zu Beginn der Optimierungsarbeiten von einem Großteil der Spieler, die noch nie ein Spiel gesehen haben, zu einem Großteil der Spieler entwickelt hat, die mit ihren Freunden ein Spiel spielen. Dies ist nur die Spitze unseres Optimierungseisbergs, aber Sie können sehen, wie relativ kleine Verkürzungen der Ladezeit einen großen Unterschied im Engagement machen können.
Dieses Diagramm zeigt einen Vergleich zwischen dem Original-Build von Coatsink und der optimierten Version mit unseren neuesten Instant Games-ready-Tools. Wie Sie sehen können, haben wir die Zeit bis zur Interaktivität für Ready, Set, Cook! bereits um über 50 % reduziert. Dieser spezielle Test wurde mit einem Pixel 5 durchgeführt, das auf 48 Mbit/s gedrosselt war.

In der obigen Grafik sehen Sie, wie die Ladezeiten vor der Optimierung waren und wo wir derzeit mit Ready, Set, Cook! als Testtitel stehen. Erstens: Drosselung auf 48 Mbit/s - das ist die von Ookla gemeldete weltweite Durchschnittsgeschwindigkeit des Mobilfunknetzes, nicht einmal 5G. Mit einer durchschnittlichen Breitbandgeschwindigkeit von 86 Mbit/s sind wir sogar noch schneller als der Rest der Welt. Bei einer soliden 5G-Verbindung mit 176 Mbit/s konnten wir sogar noch schnellere Geschwindigkeiten feststellen, aber auch eine abnehmende Rendite, da die Netzwerkbandbreite nicht mehr der primär begrenzende Faktor ist.
Um schnelle Ladezeiten zu erreichen, müssen alle Aspekte des Downloads und der Initialisierung Ihres Spiels im Webbrowser berücksichtigt werden.
Ein Web-Build besteht aus mehreren Dateien:
- WebAssembly (.wasm) Datei: Dies ist die ausführbare Binärdatei, die die Unity-Engine und Ihre Spiellogik enthält.
- Eine große Ressourcendatei (.data): Dazu gehören globale Metadaten und Asset-Ressourcen für die im Build enthaltenen Szenen.
- Es kann Vermögensbündel oder Addressables geben.
- Ihre WebGL-Vorlage (HTML und CSS) und einige Unity Framework JavaScript-Dateien, um alles in Gang zu bringen.
Für den Anfang gibt es einige bewährte Verfahren, die Sie befolgen sollten, um ein gutes Release-Build zu erstellen, einschließlich:
- Anweisung an den Compiler und den Linker, die optimale Codegröße zu erreichen
- Verwendung der Brotli-Kompression
- Hinzufügen von HTTP-Preload-Tags zu Ihrer Webvorlage, um alle Asset-Bündel und Addressables, die für die erste Szene erforderlich sind, im Voraus zu laden.
Wir werden diese in der kommenden Instant Games-Build-Target als Standard festlegen.
Überlegen Sie auch, wie Sie die von Ihren Spielern wahrgenommene Ladezeit verringern können, indem Sie einen Startbildschirm oder eine Animation anzeigen, während die Unity Engine geladen und initialisiert wird.
Je nach Spiel können die Assets größer oder kleiner sein als die WebAssembly.
Zunächst sollten Sie einige bewährte Verfahren berücksichtigen. Da die Zeit, die zum Laden der ersten Szene benötigt wird, von entscheidender Bedeutung ist, sollten Sie das Unity Addressables System verwenden, um jedes Asset in einen separaten Download aufzuteilen. Fügen Sie dann HTTP-Preload-Tags hinzu, um Addressables vorzuladen, die für die erste Szene benötigt werden. Nachfolgende Szenen laden dann bei Bedarf Assets aus dem Addressables-System.
Wenn in Ihrem Spiel viel Audio verwendet wird, sollten Sie komprimiertes Audio verwenden und in Erwägung ziehen, es auf Mono zu zwingen und die Audioqualität zu verringern.
Zweitens, schauen wir uns die verwendeten Grafikeinstellungen an. Die Wahl von komprimierten ETC Crunch-Texturen führt zu den kleinsten Download-Größen und hält den GPU-Speicherverbrauch auf mobilen Geräten niedrig. Wenn Sie ASTC-komprimierte Texturen verwenden, achten Sie auf die Blockgröße und wählen Sie größere Blöcke für kleinere Texturen. Konfigurieren Sie auch das Shader-Stripping in den Player-Einstellungen für Ihr Projekt.
Die WebAssembly-Technologie steht nicht still, und wir bringen die Updates zu Unity. Wir sind unglaublich dankbar für die Arbeit, die in den Web W3C-Gemeinschaften zur Unterstützung dieser fortschrittlichen Technologien geleistet wird. Web-Gaming ist ohne die Investitionen und die Unterstützung aller Browser-Entwickler nicht möglich. Wir schätzen besonders die Zusammenarbeit mit dem Chrome-Team von Google. Gemeinsam haben wir daran gearbeitet, die Anwendungsfälle für WebAssembly und die Grafikleistung für komplexe Spiele-Workloads zu verbessern.
Der Emscripten-Compiler bringt Ihren Unity il2cpp-Build zu WebAssembly. Mit jeder neuen Long Term Support (LTS)-Version wird die neueste Version von Emscripten mitgeliefert. Dies ermöglicht schnellere Entwicklungs-Builds und kleinere, optimierte Release-Builds (deren Erstellung eine Weile dauern kann).
In Unity 6 können Sie die Unterstützung von 4 GB Speicher aktivieren. Dies ermöglicht größere 3D-Erlebnisse in Echtzeit im Internet und nutzt den größeren Speicher, der Desktop-Browsern zur Verfügung steht. In Zukunft wird dies den Weg für die Unterstützung von 64-Bit-Speicher ebnen, sobald alle Browser die Unterstützung dafür freigeben.
Wenn Sie derzeit die Ausnahmeunterstützung für Web-Builds aktivieren, entsteht ein gewisser Overhead, z. B. wenn Code zu allen Funktionen hinzugefügt wird, um try/catch zu unterstützen. Mit der nativen Ausnahmebehandlung von WebAssembly, die in Unity 6 als Option verfügbar sein wird, werden Ausnahmen mit geringem Overhead verfügbar sein.
Auch in Unity 6 können Sie die WebAssembly SIMD-Unterstützung aktivieren. Dies beschleunigt die mathematischen Berechnungen der CPU mit vektorisierten Anweisungen. Es funktioniert sowohl auf x64- als auch auf ARM-Geräten und ordnet die WebAssembly-SIMD-Anweisungen entweder SSE oder ARM NEON zu, wenn die Webseite geladen wird. Die Verbesserungen variieren je nach Gerät und Browser, sind aber spürbar.
Diese Funktionen sind optional und nur in neueren Webbrowser-Versionen verfügbar.
Die Einführung eines neuen WebGPU-Backends stellt einen bedeutenden Meilenstein für die webbasierte Grafikbeschleunigung dar und ebnet den Weg für noch nie dagewesene Sprünge in der Grafikwiedergabetreue für Unity-Webspiele.
WebGPU wurde mit dem Ziel entwickelt, moderne GPU-Fähigkeiten für das Web nutzbar zu machen und darzustellen. Diese neue Web-API bietet eine moderne Schnittstelle zur Grafikbeschleunigung, die intern über native GPU-APIs wie DirectX 12, Vulkan oder Metal implementiert wird, je nachdem, welches Desktop-Gerät Sie verwenden.
WebGPU wird die Unterstützung für neue und aufregende Rendering-Funktionen freischalten, die eine bisher im Desktop-Web nicht gekannte Grafiktreue ermöglichen. Wie bei anderen modernen Grafik-APIs eröffnet die Steuerung des Rendering-Setups und der GPU-Ausführung auf einer niedrigeren Ebene neue Optimierungsmöglichkeiten, die zu einer Verringerung des CPU- und GPU-Overheads und einer Verbesserung von Durchsatz und Latenz führen können.
WebGPU bringt außerdem zum ersten Mal Compute-Shader in das Web. GPU Compute Skinning verbessert die Leistung beim Rendern von Mesh-Charakteren mit Skins radikal. Jetzt werden alle Vertex-Transformationen auf den Grafikprozessor verlagert. Die obige Demo nutzt GPU-Skinning, um die Haut dieser Roboter mit dem darunter liegenden Skelett zu mashen und dabei eine relativ hohe Framerate beizubehalten. Würde man dies auf der CPU machen, würde es mit einstelligen FPS laufen.

Ein weiteres Beispiel ist der VFX Graph von Unity, der Geometrie prozedural direkt in Compute Shadern erzeugt. In der folgenden Partikelsimulation werden etwas mehr als eine halbe Million Partikel animiert, die alle durch Compute-Shader auf der GPU bewegt werden.

Vielleicht haben Sie die obige Demo von Boat Attack schon einmal gesehen. Jetzt können Sie sehen, wie es vollständig auf der WebGPU läuft. WebGPU ist heute in Google Chrome und Microsoft Edge unter macOS und Windows aktiviert. In diesem letzten Beispiel zeigen wir einen interaktiven Bootsangriff, gerendert in WebGPU.

Während der Entwicklung des Unity-Backends für WebGPU haben die Unity-Grafikingenieure eng mit dem Chrome-Team zusammengearbeitet, um WebGPU mit großen Szenen und komplexen Shadern zu testen und dabei fantastische Ergebnisse zu erzielen.
Das WebGPU-Grafik-Backend befindet sich noch in der Entwicklung, und wir empfehlen nicht, es für Produktionsanwendungen zu verwenden. Allerdings ist es jetzt im Early Access verfügbar. Einzelheiten zu den ersten Schritten finden Sie im Grafikforum.
Das Web ist unglaublich leistungsfähig, da es ein reibungsloses Engagement und eine direkte Verbindung mit Ihren Spielern ermöglicht. Da sie die WASM- und Starter-Assets im Voraus herunterladen, ist die Verkürzung der Ladezeit für Webprojekte entscheidend. Aufgrund dieser Kompromisse sind kleinere Inhalte in der Regel am besten für das Internet geeignet.
Ab Ende 2024 können Sie Ihre Instant Games für Facebook und Messenger entwickeln und bereitstellen, um ein ganz neues Publikum zu erreichen. Wenn Sie direkt mit Unity und Meta zusammenarbeiten möchten, um frühzeitig Zugang zu Tools und Ressourcen für den Erfolg Ihrer Instant Games zu erhalten, oder wenn Sie über diese neue Plattform-Support-Initiative auf dem Laufenden bleiben möchten, registrieren Sie noch heute Ihr Interesse.
Die Unterstützung für das mobile Web beginnt in Unity 6. Erfahren Sie mehr über Unity 6 auf der Unite Keynote.
Wenn Sie zu den Bastlern gehören, lesen Sie unseren Forenbeitrag über WebGPU - das in Unity 6 erscheinen wird - für Informationen über den frühen Zugang zum WebGPU-Backend. Anschließend können Sie in den jetzt verfügbaren On-Demand-Sitzungen der Unite 2023 noch mehr über die neuesten Entwicklungen der Engine erfahren, darunter die Unite-Sitzung "Instantly get your Unity game to more players on the web" (unten eingebettet).