Studio 3D

O projekcie

Zdjęcie pokazuje produkt z jednej strony i w jednym ujęciu. W 3D odbiorca sam wybiera, co chce zobaczyć: obraca, przybliża, zmienia kolor, nalewa, miesza. Najlepiej sprawdzić to samemu, dlatego zamiast opisywać efekty, zebrałem je w laboratorium, w którym możesz przetestować każdy z nich.

Laboratorium: przetestuj sam

Siedem eksperymentów działających na żywo w przeglądarce, na komputerze i na telefonie, bez instalowania czegokolwiek. W większości wybierasz gotowy styl, ustawiasz suwaki i kopiujesz link z ustawieniami, żeby pokazać komuś dokładnie to, co widzisz.

• Studio 3D: produkt do obracania, zmiana koloru obicia, AR na telefonie i Twój własny model .glb.
• Kawa 3D: nalewasz przyciskiem, mieszasz łyżeczką, wrzucasz ziarna. Szkło, para i crema w prawdziwym 3D.
• Strumień kawy: ćwierć miliona drobinek, których ruch liczy karta graficzna (WebGPU).
• Mieszanie: jeden płyn w drugim, jak mleko w kawie albo atrament w wodzie.
• Tafla: fale na wodzie, a pod nią napis albo logo.
• Krople: płyn 3D, który się zlewa i podąża za kursorem.
• Strumień ziaren: ziarna kawy płyną przez ekran i rozstępują się przed kursorem.

Otwórz laboratorium →

Studio produktu

Najbardziej rozbudowany z eksperymentów, pomyślany pod kartę produktu w sklepie. Możesz go wypróbować tutaj, bez wychodzenia ze strony.

Model wczytuje się w formacie glTF (plik .glb), czyli w standardzie Khronos Group do 3D w internecie. Warianty kolorów są zapisane w samym pliku, więc próbki na dole przełączają prawdziwe materiały zamiast podmieniać zdjęcia. Światło pochodzi ze zdjęcia 360° prawdziwego studia fotograficznego, dzięki czemu aksamit mieni się na krawędziach, a mosiężne stopki odbijają otoczenie.

W zakładce Twój model możesz przeciągnąć na stronę własny plik .glb i od razu zobaczyć go w tym samym studiu, z cieniem, obracaniem i zmianą kolorów, jeśli plik je ma. Plik nie opuszcza Twojego komputera, przeglądarka czyta go na miejscu. Jeżeli nie masz pod ręką żadnego modelu, w tej samej zakładce czekają gotowe przykłady: but, skórzana sofa, szklane wazony i dwa modele z animacją.

Gdzie to się przyda

• Sklep meblowy: klient ogląda sofę z każdej strony i sprawdza kolor obicia, zanim zamówi próbkę tkaniny.
• Obuwie, zegarki, akcesoria: zbliżenie na detal, którego nie widać na zdjęciu.
• Kawiarnia, palarnia, marka napojów: pierwszy ekran, z którym można się pobawić, zamiast kolejnego zdjęcia w tle.
• AR na telefonie: iPhone otwiera model w Quick Look, Android w Scene Viewer. Mebel staje w pokoju w swoich prawdziwych wymiarach.

Na czym to działa

Eksperymenty są napisane w three.js. Prawie wszystkie działają na WebGL 2, który obsługuje praktycznie każda współczesna przeglądarka, także na telefonie. Strona pobiera modele i tekstury w chwili otwarcia, a światło i materiały (drewno, marmur, tynk) pochodzą z Poly Haven, na wolnej licencji CC0.

Strumień kawy działa już na WebGPU, nowszym interfejsie, przez który przeglądarka korzysta z karty graficznej. Tłumaczę go we wpisie WebGPU: co to jest i co zmienia na stronach.