Strony internetowe 3D: kiedy się opłacają i jak sprawić, by działały szybko

Krótka odpowiedź

Strona internetowa 3D ma sens, gdy temat jest przestrzenny albo gdy poruszanie się po nim wyjaśnia coś, czego nie pokaże obraz: produkt, który chcesz obrócić, miejsce, zbiór danych, cały świat. Nie ma sensu, gdy tylko dekoruje stronę, którą zdjęcie albo krótkie wideo wyjaśniłyby równie dobrze. Tak czy inaczej warstwa 3D ma realny koszt w rozmiarze pobieranych plików, zużyciu baterii i dostępności, więc zbuduj stronę tak, by działała bez niej, i traktuj 3D jako rozszerzenie.

Ten poradnik opiera się na dwóch naszych projektach: Janus Observatory, doświadczeniu w przeglądarce z dziesięcioma światami 3D, oraz dardo.studio, którego strona główna otwiera się sceną 3D renderowaną w czasie rzeczywistym.

Kiedy 3D jest warte swojego miejsca

• Odwiedzający musi zobaczyć coś z więcej niż jednej strony: produkt, budynek, urządzenie.
• Przestrzeń jest opowieścią: mapa, plan terenu, podróż przez kolejne miejsca.
• Interakcja wyjaśnia system szybciej niż tekst, na przykład przy porównywaniu scenariuszy albo eksplorowaniu danych.
• Doświadczenie marki jest produktem: premiery, wystawy i kampanie, w których liczy się atmosfera, a odwiedzający oczekują, że będą mogli coś odkrywać.

Kiedy nie

• Scena 3D powtarza to, co już mówią nagłówek i obraz.
• Większość odwiedzających wchodzi na stronę z telefonów ze średniej półki przez internet mobilny i potrzebuje szybko jednej informacji, takiej jak cena, adres czy godziny otwarcia.
• Po starcie nikt w zespole nie będzie utrzymywał modeli, kodu ani wersji awaryjnych.

3D, wideo czy obrazy?

WebGL działa w każdej nowoczesnej przeglądarce. WebGPU jest nowsze i w niektórych zadaniach szybsze, ale jego obsługa wciąż się różni, więc zaplanuj rozwiązanie awaryjne. Wejście 3D na dardo.studio najpierw próbuje użyć WebGPU, a w razie potrzeby przechodzi na WebGL 2, natomiast strony usług, realizacji i kontaktu to zwykły HTML, który nigdy nie czeka na scenę 3D.

Czego nauczyło nas budowanie Janus Observatory

Janus Observatory zamienia dziesięć opublikowanych scenariuszy przyszłości Ziemi w opowieść w 17 rozdziałach, atlas i obserwatorium, z dziesięcioma autorskimi światami low-poly i przegubowym obcym astronomem. Projekt działa w darmowym planie Cloudflare Workers, który ogranicza rozmiar aplikacji. Raport z wydania z 27 września 2026 r. zapisuje, czego wymagało utrzymanie szybkości:

• Kompresuj modele i zachowaj wersję awaryjną. 59 modeli 3D trafia do przeglądarki jako warianty gzip o łącznej wadze 8,2 MB zamiast 15,8 MB, czyli o 47,9% mniej do pobrania. Przeglądarki, które nie potrafią ich rozpakować, dostają pliki oryginalne.
• Dekoduj poza wątkiem głównym, a potem kończ pracę. Dekodowanie Meshopt działa w jednym workerze w tle, który wyłącza się po pięciu sekundach bezczynności.
• Ustal budżet JavaScriptu i go egzekwuj. Początkowy JavaScript strony głównej waży 197 059 bajtów po kompresji gzip przy budżecie 256 000 bajtów, a build to sprawdza.
• Uważaj na lawiny żądań. Pętla spekulatywnego prefetchu w stosie Next.js i OpenNext wygenerowała 11 704 żądania w jednym nieudanym śladzie z przeglądarki. Rozwiązaniem było wyłączenie prefetchu dla tych linków, a testy wymagają teraz zera żądań spekulatywnych.
• Ustal rozdzielczość, zamiast gonić za liczbą klatek. Elementy canvas renderują się ze stałym współczynnikiem pikseli urządzenia od 1 do 1,5. Raport wycofał też wcześniejszy wynik liczby klatek na sekundę, który zależał od obniżenia rozdzielczości, więc żadnego nie podajemy.

Zbuduj stronę tak, by działała bez 3D

Janus ma jedną zasadę, która kształtuje wszystko inne: podstawowe doświadczenie musi działać bez WebGL i bez AI. Wszystkie dziesięć rekordów scenariuszy ładuje się przy wyłączonym JavaScripcie, elementy sterujące działają bez WebGL, a obracanie z klawiatury, widoczny fokus i ograniczony ruch powstawały razem z każdą funkcją. Strona dostępności projektu wymienia elementy sterujące, odpowiedniki niewizualne i znane ograniczenia. Celem jest poziom AA WCAG 2.2, sprawdzany testami automatycznymi w Chromium, Firefoksie i WebKit.

Ta zasada pomaga też wyszukiwarkom i asystentom AI: tekst, nazwy i dane są w HTML, a nie wewnątrz canvasa.

Checklista szybkiej i dostępnej strony 3D

1. Najpierw napisz stronę bez 3D. Jeśli wersja HTML nie ma sensu, 3D tego nie naprawi.
2. Zdecyduj, co wyjaśnia 3D, i wytnij wszystko, co jest tam tylko po to, by robić wrażenie.
3. Ustal budżety dla JavaScriptu, wagi modeli i rozmiaru tekstur, zanim zacznie się modelowanie, i sprawdzaj je w buildzie.
4. Kompresuj modele narzędziami takimi jak meshoptimizer, udostępniaj je w formacie glTF i zachowaj nieskompresowaną wersję awaryjną, gdy polegasz na nowszych funkcjach przeglądarek, takich jak DecompressionStream.
5. Ładuj scenę po treści i dopiero wtedy, gdy za chwilę ma się pojawić na ekranie.
6. Ogranicz współczynnik pikseli, żeby ekrany o wysokiej gęstości nie renderowały czterokrotnie większej liczby pikseli.
7. Respektuj prefers-reduced-motion, zapewnij obsługę każdej interakcji z klawiatury i umieść tekstowy odpowiednik obok każdego canvasa.
8. Testuj na prawdziwych telefonach ze średniej półki i w więcej niż jednym silniku przeglądarki, a po starcie śledź Core Web Vitals.

Ile to kosztuje

3D dodaje czas na modelowanie, optymalizację i testy ponad projekt i development, a wersje awaryjne są częścią pracy, a nie dodatkiem. Gdy wyceniamy 3D, pojawia się ono jako pozycja „animacje na zamówienie, 3D lub interaktywne dane” wśród czynników kosztowych, które opisujemy w poradniku o tym, ile kosztuje strona internetowa w Kolumbii.

Jak Dardo buduje strony internetowe 3D

Projektujemy i budujemy doświadczenia 3D w ramach usługi interaktywnych stron 3D, a lżejsze animacje i efekty przy przewijaniu w ramach kreatywnego developmentu. Dla Hyper zbudowaliśmy w React Three Fiber opowieść 3D sterowaną przewijaniem, która zamienia rozproszone sygnały w jeden profil klienta. Jeśli masz pomysł, który potrzebuje przestrzeni, by można go było zrozumieć, opowiedz nam o nim.