gik|iewicz

Apple zaprezentowało na WWDC26 nowy element HTML <model> pozwalający osadzać obiekty 3D bezpośrednio na stronach internetowych bez użycia JavaScriptu. Rozwiązanie trafia do Safari i WebKit jako natywna funkcja przeglądarki.

TL;DR: Element <model> pozwala osadzać modele 3D (format USDZ) za pomocą jednego tagu HTML, bez bibliotek JavaScript. Funkcja została zaprezentowana na WWDC26 przez zespół Safari i trafia do WebKit. Podobnie jak PrismML prezentuje 1-bitowy model LLM, by uwolnić AI od chmury • The Register, Apple upraszcza dostęp do zaawansowanej technologii.

Czym jest element HTML model i jak działa w praktyce?

Element <model> to natywny tag HTML pozwalający osadzać trójwymiarowe obiekty bezpośrednio na stronie, bez konieczności wczytywania zewnętrznych bibliotek JavaScript. Według prezentacji Web Technology Sessions at WWDC26 | WebKit, nowy tag działa analogicznie do <img> czy <video>, ale dla treści 3D. Wystarczy wskazać źródło pliku, a przeglądarka renderuje obiekt automatycznie.

Zespół Safari zaprezentował ten element jako część szerszej inicjatywy upraszczającej tworzenie interaktywnych elementów formularzy oraz treści multimedialnych. Sesja poświęcona technologiom webowym obejmowała również nowy element Customizable Select, dający kontrolę nad wyglądem list rozwijanych.

Model 3D osadzony przez <model> obsługuje interakcje użytkownika, takie jak obracanie czy przybliżanie, domyślnie, bez dodatkowego kodu. To podejście eliminuje konieczność korzystania z rozwiązań typu Three.js czy Babylon.js w podstawowych scenariuszach. Choć zaawansowane silniki nadal mają swoje miejsce, prostota nowego tagu zachęca do eksperymentów.

Warto sprawdzić dokumentację na stronie WebKit, ponieważ element wprowadza spójny model obsługi treści trójwymiarowych w przeglądarce.

Dlaczego Apple zrezygnowało z JavaScriptu przy osadzaniu 3D?

Do tej pory osadzanie modeli 3D wymagało ciężkich bibliotek JavaScript albo skomplikowanej konfiguracji. Jak zauważa Ito Masanori na note.com, z tą konwencją kończy nowy element promowany przez zespół Safari. JavaScript dodawał warstwę abstrakcji, zwiększał rozmiar strony i wymagał specjalistycznej wiedzy programistycznej.

Apple proponuje podejście deklaratywne. Zamiast pisać kod inicjalizujący scenę, kamerę, światło i materiały, programista wstawia jeden tag HTML. Przeglądarka wykonuje resztę pracy. Co więcej, podejście to jest spójne z ogólnym trendem upraszczania API webowych.

Poniższa lista przedstawia korzyści z deklaratywnego podejścia do 3D:

• Brak konieczności importowania bibliotek 3D
• Mniejszy rozmiar ładowanej strony
• Natywna akceleracja sprzętowa
• Mniej kodu do utrzymania
• Lepsza wydajność na urządzeniach mobilnych
• Szybszy czas renderowania pierwszej klatki
• Mniejsze zużycie pamięci RAM
• Brak konfliktów wersji zależności

Jakie formaty plików obsługuje element model?

Element <model> obsługuje format USDZ, opracowany przez Apple i Pixar. Format ten jest zoptymalizowany pod kątem przeglądarki i urządzeń mobilnych. Wymieniony w dokumentacji WebKit jako główny format dla nowego elementu.

USDZ to format oparty na USD (Universal Scene Description), stworzonym pierwotnie przez Pixar do produkcji filmów animowanych. Apple zaadaptowało go do ekosystemu AR i 3D, wprowadzając zoptymalizowaną wersję dla urządzeń mobilnych.

Natywna obsługa USDZ w Safari istniała już wcześniej, ale wymagała JavaScriptu lub specjalnych linków. Element <model> upraszcza ten proces do jednego tagu HTML. Na przykład, osadzenie modelu produktu w sklepie internetowym wymaga teraz jednej linijki kodu.

Poniższa tabela przedstawia porównanie podejść do osadzania 3D:

Jak element model wpływa na dostępność treści 3D?

Natywny element HTML zapewnia lepszą dostępność (accessibility) niż rozwiązania JavaScriptowe. Przeglądarka traktuje <model> jak każdy inny element multimedialny, umożliwiając screen readerom interpretację treści. Atrybuty takie jak alt pozwalają dodać opisy tekstowe dla użytkowników niewidomych.

Rozwiązania oparte na JavaScript, na przykład Three.js, renderują modele na płótnie Canvas, które z natury jest niedostępne dla technologii asystujących. Element <model> rozwiązuje ten problem, integrując 3D ze standardową strukturą DOM.

To ważny krok w kierunku uczynienia treści trójwymiarowych dostępnych dla wszystkich użytkowników. Apple konsekwentnie promuje dostępność w swoich technologiach webowych, co widać również w innych nowościach z WWDC26.

Jakie są ograniczenia nowego elementu?

Element <model> jest obecnie rozwijany w WebKit i trafia do Safari. Brak informacji o wsparciu w Chrome czy Firefox oznacza, że twórcy muszą zapewniać fallback dla innych przeglądarek. Format USDZ jest specyficzny dla ekosystemu Apple, co może ograniczać adopcję.

Ponadto, zaawansowane scenariusze 3D, takie jak animacje szkieletowe, cienie w czasie rzeczywistym czy niestandardowe shadery, mogą nadal wymagać pełnoprawnych silników JavaScript. Element <model> celuje w podstawowe przypadki użycia: prezentacja produktów, modele edukacyjne, podgląd obiektów.

Najważniejsze jest zrozumienie, że element <model> nie zastępuje Three.js czy Babylon.js w skomplikowanych projektach. Rekomenduję traktować go jako uzupełnienie narzędziówki, nie jako zamiennik. Podobnie jak Najnowsze wiadomości – Apple Developer informują o innych nowościach, element <model> jest częścią szerszego ekosystemu.

Jak wygląda kod z elementem model?

Przykład użycia elementu <model> jest prosty i przypomina osadzanie obrazka:

<model src="product.usdz" alt="Trójwymiarowy model produktu" interaction="rotate-zoom">
  <p>Twoja przeglądarka nie obsługuje elementu model.</p>
</model>

Atrybut src wskazuje plik USDZ, alt dodaje opis dla dostępności, a interaction kontroluje zachowanie użytkownika. Zawartość tagu jest wyświetlana w przeglądarkach bez obsługi <model>, zapewniając degradację.

Element można stylować za pomocą CSS, podobnie jak inne elementy blokowe. Obsługuje również atrybuty wymiarów (width, height) oraz responsywne jednostki. To podejście znane z innych elementów HTML.

Kiedy element model będzie dostępny w Safari?

Element <model> został zaprezentowany podczas WWDC26 i trafia do WebKit jako eksperymentalna funkcja. Safari w najnowszych wersjach beta macOS i iOS obsługuje ten element. Pełne wsparcie pojawi się w stabilnych wydaniach systemów Apple jesienią 2026 roku.

Deweloperzy mogą testować element w Safari Technology Preview oraz w kompilacjach WebKit nightly. Dokumentacja jest dostępna na blogu WebKit, gdzie opisano również inne sesje technologiczne z konferencji.

Jak element model współpracuje z CSS i responsywnym projektowaniem?

Element <model> integruje się ze standardowymi mechanizmami stylowania CSS, co pozwala na precyzyjne kontrolowanie jego wyglądu i zachowania na różnych rozmiarach ekranów. Według dokumentacji Web Technology Sessions at WWDC26 | WebKit, nowy tag obsługuje właściwości takie jak width, height, object-fit czy aspect-ratio, działając analogicznie do elementów <img> i <video>. Deweloperzy mogą więc osadzać modele 3D w elastycznych siatkach layoutu bez dodatkowej konfiguracji.

Co więcej, element reaguje na media queries, umożliwiając warunkowe ładowanie lub ukrywanie treści trójwymiarowych na urządzeniach o mniejszej wydajności. Przykładowo, na wąskich ekranach mobilnych model może przyjmować pełną szerokość kontenera, a na desktopie – zająć przemyślaną, ograniczoną przestrzeń.

Poniżej lista kluczowych właściwości CSS wspieranych przez <model>:

• width i height – kontrola wymiarów w pikselach lub jednostkach względnych
• object-fit – dopasowanie modelu do kontenera (np. contain, cover)
• aspect-ratio – zachowanie proporcji niezależnie od rozmiaru
• border-radius – zaokrąglanie rogów kontenera modelu
• opacity i transform – przejrzystość oraz transformacje 2D/3D
• display: none – warunkowe ukrywanie na wybranych breakpointach
• margin i padding – standardowe odstępy w układzie strony
• background – tło widoczne, gdy model ma przezroczyste obszary

Zarządzanie responsywnością odbywa się w pełni deklaratywnie. Nie trzeba wywoływać funkcji JavaScript do przeliczania wymiarów po zmianie orientacji urządzenia.

Jakie scenariusze biznesowe otwiera natywne osadzanie 3D?

Prezentacja elementu <model> na WWDC26 wskazuje na konkretne zastosowania komercyjne, w szczególności w branży e-commerce. Jak relacjonuje CNET w podsumowaniu WWDC26, sklepy internetowe mogą teraz osadzać w pełni interaktywne modele produktów za pomocą jednego tagu HTML, eliminując potrzebę utrzymywania kosztownych silników renderujących.

Dla branży edukacyjnej oznacza to możliwość tworzenia interaktywnych materiałów dydaktycznych bez zatrudniania specjalistów od WebGL. Modele anatomiczne, repliki zabytków czy symulacje mechanizmów fizycznych stają się dostępne dla każdego twórcy treści posługującego się podstawową wiedzą HTML.

Sektor nieruchomości również zyskuje nowe możliwości. Wirtualne spacery i trójwymiarowe wizualizacje wnętrz można osadzać bezpośrednio na stronach agencji, bez przekierowywania użytkowników do zewnętrznych platform.

Jak wygląda kompatybilność z innymi przeglądarkami?

Element <model> jest obecnie rozwijany wyłącznie w silniku WebKit i trafia do przeglądarki Safari. Brak oficjalnych komunikatów od Google (Chrome/Chromium) oraz Mozilla (Firefox) oznacza, że wsparcie dla nowego tagu poza ekosystemem Apple jest nieokreślone.

Twórcy muszą przewidzieć mechanizmy fallbackowe dla użytkowników korzystających z innych przeglądarek. Zawartość tagu <model> wyświetla się automatycznie w przeglądarkach bez obsługi tego elementu, co pozwala na wstawienie alternatywnego obrazka lub komunikatu.

Poniższa tabela przedstawia status wsparcia w popularnych przeglądarkach:

Ograniczenie to jest istotne dla projektów wymagających szerokiego zasięgu. W przypadku stron o zasięgu globalnym element <model> będzie prawdopodobnie uzupełnieniem, a nie głównym kanałem dystrybucji treści 3D.

Jakie są perspektywy standaryzacji elementu model?

Proces standaryzacji nowego elementu HTML wymaga akceptacji przez W3C i HTML Working Group. Apple zaprezentowało <model> jako propozycję dla społeczności webowej, ale droga od implementacji w jednym silniku renderującym do statusu standardu jest długa.

Historycznie wiele elementów HTML zaczynało jako eksperymenty jednego dostawcy. Tagi takie jak <canvas> czy <video> przeszły podobną drogę od proprietarnych rozwiązań do powszechnych standardów. Element <model> może podążyć tą samą ścieżką, jeśli społeczność deweloperów wykaże zainteresowanie.

Kluczowym czynnikiem będzie otwartość Apple na współpracę z komitetami standaryzacyjnymi. Specyfikacja formatu USDZ jest dostępna publicznie, co może ułatwić innym silnikom implementację obsługi tego kontenera.

Jak zabezpieczyć modele 3D przed nieautoryzowanym użyciem?

Osadzanie plików USDZ bezpośrednio w kodzie HTML oznacza, że modele są dostępne pod publicznym adresem URL, podobnie jak obrazy czy pliki wideo. Twórcy muszą uwzględnić ten fakt w strategii ochrony własności intelektualnej. Podobnie jak MacRumors: Wiadomości i plotki o Apple informują o nowych funkcjach systemowych, element <model> wymaga przemyślanego podejścia do bezpieczeństwa zasobów.

Mechanizmy ochrony mogą obejmować:

• Podpisywanie URL-i z limitem czasowym (signed URLs)
• Ograniczanie dostępu przez nagłówki HTTP (Referer, CORS)
• Dodawanie znaków wodnych do samych modeli 3D
• Monitorowanie ruchu i wykrywanie masowego pobierania plików
• Stosowanie uproszczonych modeli do podglądu webowego
• Wykorzystanie tokenów dostępu w nagłówkach żądań
• Stosowanie rate limiting dla konkretnych zasobów
• Dynamiczne generowanie unikalnych adresów URL dla sesji

Zabezpieczenie zasobów trójwymiarowych jest szczególnie ważne w branży produktowej, gdzie modele mogą stanowić tajemnicę przedsiębiorstwa.

Jak przygotować pliki USDZ do osadzania w elemencie model?

Format USDZ ma specyficzne wymagania dotyczące optymalizacji. Pliki przeznaczone do osadzania na stronach powinny być skompresowane i pozbawione niepotrzebnych metadanych. Według informacji z sesji WWDC26, kluczowa jest optymalizacja rozmiaru pliku pod kątem szybkiego ładowania na połączeniach mobilnych.

Proces przygotowania modelu obejmuje redukcję liczby poligonów do poziomu wystarczającego do realistycznego wyświetlania na ekranach urządzeń mobilnych. Tekstury powinny być skompresowane w formatach wspieranych przez GPU urządzeń docelowych.

Podobnie jak Wytrenuj własny model LLM od zera wymaga optymalizacji zasobów obliczeniowych, tak przygotowanie modeli USDZ wymaga balansu między jakością wizualną a rozmiarem pliku. Narzędzia takie jak Reality Converter od Apple umożliwiają konwersję i optymalizację modeli z popularnych formatów (OBJ, FBX) do USDZ.

Często zadawane pytania

Czy element model działa na urządzeniach z systemem Android?

Element <model> jest obecnie implementowany wyłącznie w silniku WebKit, co oznacza brak obsługi w przeglądarkach na systemie Android. Użytkownicy Androida zobaczą zawartość fallbackową umieszczoną wewnątrz tagu, zgodnie z informacjami z dokumentacji WebKit.

Czy można kontrolować kamerę i oświetlenie modelu przez JavaScript?

Prezentacja na WWDC26 pokazała element <model> jako rozwiązanie deklaratywne bez konieczności pisania kodu JavaScript. Zaawansowana kontrola parametrów renderowania nadal wymaga silników takich jak Three.js, co potwierdzają materiały z sesji technologicznych.

Jaki jest maksymalny rozmiar pliku USDZ obsługiwanego przez element model?

Apple nie podało oficjalnego limitu rozmiaru pliku, jednak zalecenia dla webu sugerują utrzymywanie zasobów poniżej kilku megabajtów dla optymalnego czasu ładowania. Sesje WWDC26 podkreślają znaczenie optymalizacji modeli pod kątem wydajności mobilnej.

Czy element model obsługuje animacje wewnątrz modelu 3D?

Format USDZ obsługuje animacje, jednak zakres interaktywności dostępnej przez element <model> zależy od implementacji WebKit. Podstawowe animacje zdefiniowane w pliku powinny być odtwarzane automatycznie, jak wskazują informacje z prezentacji Safari.

Podsumowanie

Element <model> wprowadza deklaratywne podejście do osadzania treści 3D na stronach internetowych, eliminując konieczność korzystania z zewnętrznych bibliotek JavaScript w podstawowych scenariuszach.

Ograniczenie do silnika WebKit i formatu USDZ oznacza, że technologia ta jest obecnie użyteczna głównie w ekosystemie Apple, wymagając fallbacku dla innych przeglądarek.

Integracja ze standardowymi mechanizmami CSS i responsywnym projektowaniem sprawia, że element wpisuje się w znany model pracy frontendowców.

Perspektywy standaryzacji przez W3C zależą od adopcji przez innych dostawców przeglądarek i zainteresowania społeczności deweloperów.

Zabezpieczenie plików USDZ wymaga osobnej strategii, ponieważ osadzenie modelu na stronie udostępnia go pod publicznym adresem URL.

Jeśli tworzysz treści dla użytkowników Safari i ekosystemu Apple, warto zacząć eksperymentować z <model> już teraz w Safari Technology Preview. Więcej informacji o nowościach z WWDC26 znajdziesz w Najnowsze wiadomości – Apple Developer oraz w Sztuczna inteligencja | The Verge.