WebGL-Performance auf Safari und Apple Vision Pro
Safari – insbesondere auf iOS – wird seit jeher als die Spitze der Performance-Herausforderung für Entwickler betrachtet, die auf dem 3D-Web arbeiten. Die Metal-basierte Implementierung von WebGL, zusammen mit den einzigartigen Leistungsmerkmalen von WebKit, machen es besonders interessant zu handhaben.
In diesem Artikel geben wir Dir einige Einblicke, wie Du die Leistung Deiner WebGL-Apps auf Safari verbessern kannst.
Apple Vision Pro
Mit der Einführung des Apple Vision Pro hat die WebGL-Leistung auf Safari noch mehr an Bedeutung gewonnen, da die Vision-Version von Safari alle Leistungsmerkmale von Safari auf MacOS und iOS übernommen hat.
Wir werden bald einen ausführlichen Artikel über WebXR mit Apple Vision Pro veröffentlichen, abonniere unseren Newsletter, um benachrichtigt zu werden.
Wonderland Engine auf Apple Vision Pro
Wenn Du bereits die Wonderland Engine nutzt, haben wir gute Nachrichten: Alle Optimierungen, die wir für unser 0.9.0 Release vorgenommen haben, gelten auch für Apple Vision Pro.
Entwickler mit Zugang zum Apple Vision Pro berichten von großartigen Leistungen ihrer auf der Wonderland Engine basierten Apps:
Optimierung für Safari
Wenn Du mit einem anderen Framework arbeitest, schau Dir unbedingt unseren WebGL Performance Profiling Blogpost an. Dieser Blogpost enthält Tipps, wie Du die Engpässe Deiner Anwendung finden kannst, um herauszufinden, was optimiert werden sollte.
Zusätzlich findest Du unten einige Anmerkungen dazu, was Du möglicherweise in Safari beim Profiling entdecken könntest. Es handelt sich hierbei nicht um universelle Lösungen. Profiliere Deine Anwendung, um herauszufinden, welche dieser Punkte Dir Schwierigkeiten bereiten.
Engpässe
Hier sind einige weitere typische Probleme, die Du möglicherweise beim Arbeiten mit WebGL auf Safari antreffen könntest:
Uniform Buffers
Aufgrund der Unterschiede zwischen Apples Grafik-API Metal und WebGL muss Safari einen WebGL-ähnlichen Uniform-Buffer im Hintergrund emulieren. Diese Emulation erschwert es, die Leistung von UBOs vorherzusagen: Manche Anwendungen funktionieren einwandfrei, während andere einen 150-ms-Einbruch verursachen können, wenn Daten zum falschen Zeitpunkt hochgeladen werden.
Dieser Code-Schnipsel aus der Metal-Implementierung von Angle (die von WebKit zur Implementierung der WebGL2-API verwendet wird) zeigt die Implementierung des GLES-Äquivalents zu WebGLs bufferSubData. Er verdeutlicht uns, welchen Aufwand Browser-Entwickler betreiben, um uns ein konsistentes Grafik-API zu bieten. Und zeigt auch, wie die Wonderland Engine darauf achtet, die Browserleistung zu verstehen und für Dich zu optimieren.
Es gab viel Unzufriedenheit darüber, dass Safari so lange gebraucht hat, um Unterstützung für WebGL2 zu bieten. Entgegen der Spekulationen, dass sie es vielleicht nie unterstützen würden, wurde WebGL2 im September 2021 mit Safari 15 veröffentlicht. Das Studium des WebKit- und Angle-Codes weckt etwas Verständnis dafür, warum es nicht einfach war, dies zu erreichen.
WebGL State Access
Die Funktion getParameter von WebGL hält einige Performance-Überraschungen für Dich bereit. Was wie eine harmlose Funktion erscheint, kann viel Performance-Budget beanspruchen.
WebGL Error
Obwohl das Überprüfen von Fehlern mit getError grundsätzlich eine gute Idee ist, sollte es außerhalb Deines Frame-Callbacks vermieden werden, da es teurer sein kann, als es sein sollte.
Speicher und Limits
WebGL Safari wird Beschränkungen für Texturgrößen, Schichten, Uniform-Buffer-Größen und mehr melden. Ein nützliches Tool, um diese Limits zu überprüfen, ist webglreport.com.
Während Safari es theoretisch erlaubt, bis zu diesen Limits zu packen, kann dies dazu führen, dass Deine Seite abstürzt.
Um Speicherressourcen auf iOS effizienter zu nutzen, bietet die Wonderland Engine ein Feature namens Texture Streaming, das Texturteile dynamisch je nach Bedarf in und aus dem Speicher austauscht. Es ist standardmäßig aktiviert.
Schlussworte
Wir werden in Kürze mit einem detaillierten Blogpost über WebXR auf Apple Vision Pro fortfahren. Abonniere unseren Newsletter, um benachrichtigt zu werden, wenn wir ihn veröffentlichen.
Bis dahin hoffen wir, dass Du der Wonderland Engine eine Chance gibst! Vor allem, wenn Du von Unity kommst, ist die Wonderland Engine leicht zu erlernen.
Tritt unserem Discord-Server bei, da wir Dir gerne die richtigen Ressourcen zum Einstieg zeigen.