Element HTML <model> trafia do każdego systemu operacyjnego Apple

Podczas WWDC 2026 inżynier Safari umieścił trójwymiarowy młotek kempingowy na stronie produktu e-commerce za pomocą jednego znacznika, <model>, bez żadnej biblioteki JavaScript, i pozwolił odwiedzającym obracać go palcem.¹ Element, który to umożliwił, jest dostępny w visionOS już od pewnego czasu. Nowością 2026 roku jest to, że ten sam kod renderuje się teraz w Safari na iPhonie, iPadzie i Macu, a otaczające go API JavaScript dojrzało. Apple ujęło to wprost: „Element Model zapoczątkowaliśmy w visionOS… Teraz element Model trafia do iOS, iPadOS i macOS! Ten sam kod, ten sam element działa na wszystkich platformach Apple.”¹

Poniższy przewodnik podąża ścieżką gotowego do użycia 3D, którą wytycza sesja, od statycznego elementu zastępczego <img>, przez interakcję orbitalną, transformacje sterowane skryptem, odtwarzanie zapieczonej animacji, aż po AR Quick Look. Wszystko, co tu opisano, pochodzi bezpośrednio z sesji 215 WWDC 2026.

W skrócie

• Element <model> zadebiutował wcześniej w visionOS; WWDC 2026 rozszerza go na Safari w iOS, iPadOS i macOS oraz rozwija otaczające go API JavaScript.¹
• Model osadza się jak treść multimedialna: należy wskazać atrybutem src plik USDZ, dodać znaczniki <source> z typami MIME na wzór <video> i zagnieździć wewnątrz element <img> jako rozwiązanie zastępcze dla przeglądarek, które jeszcze nie obsługują tego elementu.¹
• Obietnica ready informuje, kiedy model został wczytany, dzięki czemu można ukryć wskaźnik ładowania; blok catch wyświetla treść zastępczą w razie niepowodzenia.¹
• Atrybut stagemode="orbit" zapewnia interaktywne obracanie za pomocą jednego atrybutu; do sterowania skryptem należy ustawić stagemode="none" i sterować entityTransform przy użyciu DOMMatrix utworzonego metodą rotateSelf.¹
• Zapieczona animacja odtwarza się przez playbackRate w połączeniu z play(), wartość ujemna uruchamia ją wstecz, a opakowanie modelu w <a rel="ar"> udostępnia osobom korzystającym z iOS i iPadOS pełne doświadczenie AR Quick Look.¹

Co właściwie trafiło na rynek

Aleksei z zespołu Safari przedstawia rozszerzenie międzyplatformowe od minuty 0:37.

Uczciwe ujęcie ma tu znaczenie. Element <model> nie jest zupełną nowością. Apple wprowadziło go najpierw w visionOS, gdzie był wyposażony we wbudowane renderowanie stereoskopowe, dzięki czemu produkt mógł sprawiać wrażenie prawdziwej głębi na Apple Vision Pro.¹ WWDC 2026 robi na tym fundamencie dwie rzeczy: wprowadza element do Safari w iOS, iPadOS i macOS, tak aby „treści 3D dotarły do każdego odwiedzającego Safari, niezależnie od tego, czy korzysta z iPhone’a w drodze, z iPada w kawiarni, czy z Maca przy biurku”, oraz rozwija API JavaScript, które zmienia statyczną przeglądarkę w interaktywną.¹

Argumentacja przeciwko obecnemu stanowi rzeczy jest bezpośrednia. Większość treści 3D w sieci działa dziś za pośrednictwem model-viewer, popularnej biblioteki JavaScript. Argument Apple: natywny element nie wymaga dodatkowej biblioteki, renderuje się „bezpośrednio przez platformę” i jest „wyłaniającym się standardem internetowym, więc Twój kod jest gotowy na przyszłość”.¹ Zespół Safari w Apple twierdzi, że „aktywnie współtworzy specyfikację model w W3C”, i zaprasza do przekazywania opinii za pośrednictwem Immersive Web Community Group.¹ Dla przeglądarek, które jeszcze nie obsługują tego elementu, sesja wskazuje na polyfill, który „odtwarza API nowego standardu za pomocą JavaScript”, z jednym zastrzeżeniem wartym przytoczenia: „niektórych funkcji elementu nie da się uzupełnić polyfillem, takich jak wyświetlanie stereoskopowe na platformach przestrzennych, jak Apple Vision Pro”.¹

Formatem treści jest USDZ, „Universal Scene Description, spakowane do jednego pliku”, który „pakuje wszystko, czego potrzebuje model 3D: geometrię, materiały, tekstury, animacje”.¹ Safari obsługuje inne formaty, ale sesja zaleca USDZ dla najlepszego efektu.¹ To, skąd biorą się zasoby, to osobna kwestia. Apple zaleca podejście Capture, Convert, Create — skanowanie rzeczywistych obiektów iPhonem, konwersję istniejących plików lub tworzenie od podstaw w narzędziach takich jak Blender.¹ Sesja zauważa również, że w ekosystemie istnieją narzędzia generatywne; wymienione aplikacje, Tripo3D i Meshy.ai, to usługi firm trzecich, a nie produkty Apple.¹

Umieść model na stronie

Element zachowuje się jak znaczniki multimedialne, które zna już każdy programista stron. „Tak jak w przypadku znacznika <img> czy <video>, znacznik <model> wskazuje plik za pomocą atrybutu source, a przeglądarka zajmuje się resztą. Żadne wtyczki nie są wymagane.”¹ Można też użyć zagnieżdżonego znacznika <source> z typem MIME, tym samym wzorcem co <video> (sesja pokazuje wzorzec bez podawania wartości; model/vnd.usdz+zip to standardowy typ multimedialny USDZ). Rozwiązanie zastępcze to element, dzięki któremu wdrożenie jest dziś bezpieczne: należy umieścić <img> wewnątrz <model>, a starsze wersje Safari lub przeglądarki bez obsługi wyrenderują zamiast tego obraz.¹

<model src="mallet.usdz">
  <source src="mallet.usdz" type="model/vnd.usdz+zip">
  <img src="mallet.jpg" alt="Młotek kempingowy" width="480" height="480">
</model>

Modele 3D mogą zajmować „dziesiątki megabajtów lub więcej”, więc ich wczytywanie wymaga czasu.¹ Obietnica ready rozwiązuje się, gdy model został faktycznie wczytany i jest gotowy do wyświetlenia. Należy pokazać wskaźnik ładowania na czas oczekiwania, ukryć go po rozwiązaniu ready i obsłużyć wszelkie nieoczekiwane sytuacje w bloku catch, ujawniając treść zastępczą:

const model = document.querySelector("model");

try {
  await model.ready;
  spinner.hidden = true;       // model is loaded and ready to display
} catch (error) {
  spinner.hidden = true;
  fallback.hidden = false;     // show fallback content on failure
}

Pewien szczegół renderowania bywa zaskoczeniem. Element <model> „renderuje się we własnej przestrzeni wirtualnej, więc nie przejmie tła strony”.¹ Aby dopasować go do projektu strony, należy ustawić background-color bezpośrednio na modelu. Sesja dodaje ograniczenie: „tło jest zawsze renderowane jako nieprzezroczyste, nawet jeśli określisz kolor z przezroczystością, zostanie ona przekonwertowana”.¹

Pozwól odwiedzającym je eksplorować

Najtańsza interaktywność kosztuje jeden atrybut. Dzięki stagemode="orbit" odwiedzający „obracają model swobodnie na boki, a jeśli przechylą go w górę lub w dół, delikatnie wraca on sprężyście do pierwotnego kąta”.¹ Model nieco się też zmniejsza, aby żadne jego części nie zostały przycięte podczas obracania.¹ Dla większości stron produktów ten jeden atrybut to cała funkcja: „tryb sceny orbit zapewnia interaktywne 3D za pomocą jednego atrybutu”.¹

Gdy potrzebne są dokładne kąty, model należy sterować z poziomu JavaScript. Właściwość entityTransform „pozwala ustawić dokładne kąty widzenia za pomocą JavaScript”.¹ Aby z niej skorzystać, należy najpierw wyłączyć orbitę, usuwając atrybut stagemode albo ustawiając go na "none".¹ Sesja ostrzega, że ręczne transformacje mogą przyciąć lub ukryć części modelu, jeśli obróci się go poza widoczny obszar, więc może być konieczne dostosowanie pozycji.¹ Orientację buduje się za pomocą DOMMatrix, który „reprezentuje orientację modelu w przestrzeni 3D”, wywołuje się rotateSelf, aby zdefiniować obrót, a następnie przypisuje:

// disable orbit: <model stagemode="none"> in the markup

// capture the original orientation up front, for Reset
const initialTransform = model.entityTransform;

// Side view: rotate 135 degrees around the Y axis
sideButton.addEventListener("click", () => {
  const matrix = new DOMMatrix();
  matrix.rotateSelf(0, 135, 0);
  model.entityTransform = matrix;
});

// Reset to the original orientation
resetButton.addEventListener("click", () => {
  model.entityTransform = initialTransform;
});

Przypisanie transformacji przełącza widok natychmiast. Aby wygładzić przejście, sesja animuje obrót za pomocą requestAnimationFrame, używając czasu trwania animacji 500 milisekund, „pół sekundy, co sprawia wrażenie żwawego, lecz płynnego”, łagodząc obrót na przestrzeni klatek i aktualizując entityTransform świeżym DOMMatrix w każdej klatce.¹ Uczciwy kompromis, słowami samego Apple: niestandardowe transformacje „dają pełną kontrolę, ale wymagają dodatkowej pracy: ramek ograniczających, przycinania, ręcznego kodu animacji”.¹ Po transformacje sterowane skryptem należy sięgać wtedy, gdy są potrzebne, a w pozostałych przypadkach polegać na stagemode="orbit".

Odtwórz zapieczoną animację, a potem przejdź do AR

Modele mogą również nieść własny ruch. Animacje „są zwykle tworzone w narzędziach 3D, takich jak Blender czy Maya, i zapieczone w pliku USDZ”, a element „odtwarza pierwszą ścieżkę animacji”.¹ Odtwarzaniem sterują dwie linie JavaScript: należy ustawić playbackRate na modelu, a następnie wywołać jego metodę play(). Wartość dodatnia odtwarza do przodu, wartość ujemna odwraca kierunek, a sesja używa 5 i -5 dla szybszego odtwarzania:

function play(rate) {
  model.playbackRate = rate;   // positive plays forward, negative reverses
  model.play();
}

play(5);    // fast forward
play(-5);   // fast reverse

Ostatni krok przenosi produkt z ekranu do pomieszczenia. „Opakuj model w znacznik <a> z atrybutem rel="ar", wskaż ten sam zasób, a na iOS i iPadOS Twoi klienci otrzymają pełne doświadczenie AR Quick Look.”¹

<a rel="ar" href="mallet.usdz">
  <model src="mallet.usdz">
    <img src="mallet.jpg" alt="Młotek kempingowy">
  </model>
</a>

W visionOS element już wcześniej sprawiał, że 3D „wydawało się naturalną częścią sieci”, dzięki renderowaniu stereoskopowemu, które pozwala klientom „wyciągnąć produkt ze strony i obejrzeć go, jakby trzymali go w dłoniach”, i zasila immersyjne środowiska witryn, które umieszczają odwiedzającego wewnątrz sceny prosto z Safari.¹

Wyślij to mniejsze

Pliki lokalne wyglądają świetnie; te same pliki przez internet wczytują się powoli. Sesja uruchamia na modelu narzędzie wiersza poleceń usdcrush: „bez żadnej zmiany jakości plik schodzi z 7,9 MB do 1,9 MB”, a dwie wersje otwarte obok siebie w Safari wyglądają identycznie.¹ Towarzyszące narzędzie usdrecord generuje miniaturę lub obraz zastępczy bezpośrednio z pliku 3D, gdy jeszcze się go nie ma, z opcjami takimi jak format wyjściowy czy renderowanie z niestandardowej kamery zapisanej w pliku.¹ Oba narzędzia „są już zainstalowane na Twoim Macu” jako część większego pakietu USD, a sesja zauważa, że usdrecord można uruchomić skryptowo na całym katalogu.¹ Co do samego formatu, Alliance for OpenUSD publikuje pełną specyfikację USDZ jako „przejrzyste, niezależne od dostawcy źródło odniesienia” wraz z narzędziami do konwersji.¹

Co laboratoria dodały w kwestii rozmiaru i wczytywania

Laboratoria WWDC uzupełniły kilka szczegółów, które sesja pozostawiła otwarte.

W kwestii kompresji usdcrush koduje teraz tekstury do AVIF; wcześniej używał JPEG.² Apple powiedziało również, że prowadzi rozmowy z Alliance for Open Media na temat odpowiedniego formatu kompresji siatki.²

W kwestii rozmiaru panel nie podał twardych limitów, ale zasugerował, że maksymalna jakość wizualna mieści się w okolicach 10 MB dla modelu na stronie. Środowiska immersyjne mogą być zasadnie większe.²

W kwestii wczytywania panel przyznał, że istnieje luka: dziś nie ma pseudoklasy CSS dla stanu wczytywania modelu, więc omówiona wcześniej obietnica ready jest narzędziem do tego zadania.² Panel zwrócił też uwagę na dwufazowe rozróżnienie warte zapamiętania: pobranie bajtów to nie to samo co przetworzony i gotowy do użycia zasób.²

Najważniejsze wnioski

Dla programistów stron: - Dodaj <model> już dziś z zagnieżdżonym wewnątrz elementem zastępczym <img>, aby przeglądarki bez obsługi schodziły do statycznego obrazu, a obsługujące Safari automatycznie podnosiły go do interaktywnego 3D.¹ - Uzależnij wyświetlanie od obietnicy ready i obsłuż niepowodzenia w catch, ponieważ wielomegabajtowy plik USDZ potrzebuje realnego czasu na wczytanie.¹

Dla artystów 3D: - Zapiecz swoją pierwszą ścieżkę animacji w USDZ w programie Blender lub Maya; element ją odtworzy i udostępni playbackRate oraz play() do sterowania odtwarzaniem do przodu i wstecz.¹ - Przed wysyłką uruchom usdcrush, aby zmniejszyć rozmiar pliku bez widocznej utraty jakości, oraz usdrecord, aby wygenerować element zastępczy <img> z samego modelu.¹

Dla zespołów produktowych i handlowych: - Użyj stagemode="orbit" do interaktywnego obracania jednym atrybutem, a sterowane skryptem entityTransform zarezerwuj na przypadki wymagające dokładnych kątów lub niestandardowego UI.¹ - Opakuj model w <a rel="ar">, aby kupujący w iOS i iPadOS mogli umieścić produkt we własnej przestrzeni dzięki AR Quick Look.¹

FAQ

Czy element HTML <model> jest zupełną nowością w 2026 roku?

Nie. Apple wprowadziło element <model> najpierw w visionOS. WWDC 2026 rozszerza go na Safari w iOS, iPadOS i macOS z tym samym kodem oraz rozwija otaczające go API JavaScript (obietnica ready, entityTransform, odtwarzanie zapieczonej animacji i <a rel="ar">).¹

Jak dodać rozwiązanie zastępcze dla przeglądarek bez obsługi <model>?

Należy zagnieździć znacznik <img> wewnątrz znacznika <model>. Starsze wersje Safari oraz przeglądarki, które jeszcze nie obsługują tego elementu, wyrenderują zamiast niego obraz, więc odwiedzający nadal zobaczą produkt. Dostępny jest również polyfill, choć niektórych funkcji, takich jak wyświetlanie stereoskopowe w visionOS, nie da się uzupełnić polyfillem.¹

Jakiego formatu pliku używa element <model>?

USDZ, Universal Scene Description spakowane do jednego pliku, który pakuje geometrię, materiały, tekstury i animacje. Safari obsługuje inne formaty, ale Apple zaleca USDZ dla najlepszego efektu, a Alliance for OpenUSD publikuje pełną specyfikację.¹

Jak sprawić, by model był interaktywny?

Należy ustawić stagemode="orbit" dla swobodnego obracania na boki za pomocą jednego atrybutu. Dla dokładnych kątów należy ustawić stagemode="none", zbudować DOMMatrix metodą rotateSelf i przypisać go do właściwości entityTransform modelu, animując na przestrzeni klatek za pomocą requestAnimationFrame, jeśli zależy nam na płynnym przejściu.¹

Jak przenieść model z sieci do rzeczywistości rozszerzonej?

Należy opakować <model> w znacznik <a> z atrybutem rel="ar" wskazującym ten sam zasób USDZ. Na iOS i iPadOS daje to odwiedzającym pełne doświadczenie AR Quick Look, dzięki czemu mogą umieścić produkt w swoim otoczeniu.¹

Element <model> opiera się na tym samym fundamencie USD, który Apple promuje na wszystkich swoich platformach: zobacz nowy, natywny dla Swifta framework USD od Apple, USDKit, oraz kontekst przestrzenny w nowościach w visionOS 27. Argument za znacznikiem zamiast biblioteki wpisuje się w szerszą tezę z manifestu no-build oraz HTML to format, którego chcą agenci. Centrum całej serii to seria Apple Ecosystem.

Źródła