Safari 27 bringt das model-Element auf iPhone und Mac und erweitert WebGPU um Clip-Ebenen
Safari 27 erschien am 14. September zusammen mit iOS 27, iPadOS 27 und macOS 27. Apple bietet es außerdem als eigenständiges Update für macOS Sequoia und Tahoe an. Drei Tage später veröffentlichte das WebKit-Team seine Funktionsübersicht. Demnach umfasst die Version 83 neue Funktionen und 844 Fehlerbehebungen – mehr als die 58 Funktionen und 525 Fehlerbehebungen, die im Juni zur Beta angekündigt wurden. Drei dieser Funktionen sind für alle relevant, die 3D-Inhalte in einem Browser rendern. WebKit: Funktionen von Safari 27.0.
Die eigene 3D-Umgebung einer Website umgibt Safari unter visionOS 27, gezeigt in Apples WWDC-Session. Bild: Apple.
Das model-Element verlässt das Headset
Das HTML-Element <model> entstand unter visionOS als Möglichkeit, eine 3D-Datei genauso einfach in eine Seite einzubetten wie ein Video. Safari 27 bringt es auf iOS, iPadOS und macOS. Man verweist damit auf eine USDZ- oder glTF-Datei oder gibt beide mit untergeordneten <source>-Elementen an, wie bei einem Video. Der Browser übernimmt das Laden und die Darstellung, und Nutzer können das Objekt drehen, ohne dass man dafür einen Renderer programmieren muss. Das Attribut environmentmap nimmt eine HDR-Datei für die Beleuchtung entgegen. Unter visionOS 27 geht dasselbe Element noch weiter: Eine Website kann ein Modell als immersive Umgebung bereitstellen und damit über einen einzigen JavaScript-Aufruf das gesamte Browserfenster umgeben. So entstand das Theater im Bild oben. Diese Version ergänzt außerdem die CSS-Eigenschaft dynamic-range-limit für model-Elemente. Damit kann eine Seite festlegen, wie viel HDR-Spielraum ein Modell nutzen darf. Zusätzlich werden zwei Fehler der ersten Implementierung behoben: entityTransform funktionierte nicht wie vorgesehen, und die Gestensteuerung fiel aus, nachdem ein Modell-Player neu geladen wurde.
Das Markup: zwei Quellformate, eine HDR-Umgebungskarte und eine damit beleuchtete Teekanne. Bild: Apple.
Eine 3D-Datei, gerendert auf Mac, iPad und iPhone. Bild: Apple / WebKit.
Es liegt nahe, das als „3D-Viewer sind jetzt in den Browser integriert“ zu verstehen, und für Produktbilder stimmt das ungefähr. Für Spiele gilt das nicht. Das model-Element zeigt ein Modell an. Es führt weder die Spielschleife noch die Physik oder die Shader aus und existiert ausschließlich in Safari. Chrome und Firefox unterstützen es noch nicht. Eine Seite, die davon abhängt, benötigt daher eine Ausweichlösung – praktisch also genau den WebGL- oder WebGPU-Viewer, den man ohnehin entwickelt hätte.
Clip-Ebenen in WGSL
Die für Engines nützlichere Änderung ist weniger auffällig. Safari 27 unterstützt das eingebaute WGSL-Attribut clip_distances. Damit kann ein Vertex-Shader eigene Clip-Ebenen definieren und Geometrie vor der Rasterisierung verwerfen. Planare Reflexionen, Portal-Rendering, Schnittansichten und Wasseroberflächen sind allesamt darauf angewiesen. Bisher musste eine WebGPU-App, die diese Funktion in Safari benötigte, sie mit einem discard im Fragment-Shader nachbilden. Das kostet ausgerechnet bei den ohnehin teuersten Render-Pässen Füllrate.
Canvas, WebGL und die anderen farbverwalteten APIs erhalten außerdem zwei vordefinierte Farbräume: srgb-linear und display-p3-linear. Wer eigenes Tone Mapping durchführt oder HDR-Inhalte in ein Canvas-Element komponiert, kann dem Browser nun Daten mit linearem Licht übergeben und ihn die Übertragungsfunktion anwenden lassen, statt selbst nach sRGB zu kodieren und dabei Präzision zu verlieren.
Apples WWDC-Session zu dieser Version erläutert das model-Element und die übrigen WebKit-Änderungen.
Warum das für uns relevant ist
Unsere Engine rendert mit WebGPU, wenn der Browser es unterstützt, und andernfalls mit WebGL. Seit WebGPU im vergangenen Jahr in Safari eingeführt wurde, ist Safari der Browser, den wir mit der größten Anspannung testen. Clip-Ebenen waren eine der Lücken. Wasserreflexionen sind genau der Render-Pass, der eine solche Ebene benötigt. Unter WebGPU standen dafür bisher nur eine schräge Projektionsmatrix oder ein discard im Fragment-Shader zur Wahl. Letzteres verbraucht auf Smartphones Füllrate – also genau die Ressource, die dort das gesamte Leistungsbudget bestimmt. Safari 27 schließt diese Lücke auf der einen Plattform, auf der wir Nutzer nicht bitten können, den Browser zu wechseln, denn unter iOS basiert jeder Browser im Kern auf Safari.
Die linearen Farbräume helfen auf weniger sichtbare Weise. Die HDR-Ausgabe war eine der wichtigsten Neuerungen in Godot 4.7, und der Weg von einem linearen Render-Ziel bis zum Bildschirm war im Web bislang der umständliche Teil. Wenn das Canvas-Element lineare Daten direkt annehmen kann, entfällt eine Konvertierung, die Engines derzeit selbst durchführen müssen.
Das model-Element werden wir für den Zweck einsetzen, für den es gut geeignet ist: die Anzeige eines einzelnen Assets auf einer Seite. Unser GLB-Viewer und die Asset-Bibliothek behalten ihren three.js-Renderer, weil dieser in jedem Browser funktioniert. Für schnelle Vorschauen lohnt sich jedoch ein nativer Safari-Pfad. Wer prüfen möchte, was der eigene Browser unterstützt, bevor all das relevant wird, erhält mit dem WebGL- und WebGPU-Checker die passende Auskunft. Der Leitfaden zu WebGPU und WebGL für Spiele erklärt außerdem, warum der Unterschied größer ist, als er zunächst klingt.