Przedstawiamy 1.1

Modele 3D na Twojej stronie internetowej są równie łatwe jak pisanie kodu HTML.

Joe Medley

Rob Kochman

Modele 3D są teraz ważniejsze niż kiedykolwiek wcześniej. Sprzedawcy umożliwiają klientom zakupy w sklepach stacjonarnych. Muzea udostępniają w internecie modele 3D swoich artefaktów. Jeśli jednak nie masz dogłębnej wiedzy o technologiach 3D lub hostujesz treści 3D w witrynie firmy zewnętrznej, trudno jest dodać do niej model 3D w sposób zapewniający użytkownikom wygodę. Komponent internetowy <model-viewer>, wprowadzony na początku 2019 r., ma sprawić, że umieszczanie modeli 3D w internecie jest tak proste, jak napisanie kilku wierszy kodu HTML. Od tego czasu zespół zajmuje się opiniami i prośbami od społeczności. Ostatnim etapem prac był <model-viewer> w wersji 1.0, którą opublikowano na początku tego roku. Ogłaszamy udostępnienie <model-viewer> 1.1. Informacje o wersji możesz przeczytać na GitHubie.

Co nowego od zeszłego roku?

Wersja 1.1 zapewnia wbudowaną obsługę rzeczywistości rozszerzonej (AR) w internecie, usprawnioną szybkość i jakość grafiki oraz inne często żądane funkcje.

Rzeczywistość rozszerzona

Wyświetlanie modelu 3D na pustym obszarze roboczym jest fajne, ale możliwość zobaczenia go ze swojej przestrzeni jest jeszcze lepsza. Filmy 3D i AR są dostępne tylko w przeglądarce. Android obsługuje rzeczywistość rozszerzoną dzięki technologii WebXR.

Demonstracja funkcji AR w <model-viewer>.

Gdy będzie gotowy, możesz go użyć, dodając atrybut ar do tagu <model-viewer>. Inne atrybuty pozwalają dostosować środowisko WebXR AR, jak pokazano w przykładzie WebXR na stronie modelviewer.dev. Poniższy przykładowy kod pokazuje, jak to może wyglądać.

<model-viewer src="Chair.glb"
  ar ar-scale="auto"
  camera-controls
  alt="A 3D model of an office chair.">
</model-viewer>

Wygląda on na przykład w przypadku filmu umieszczonego pod tym nagłówkiem.

Ustawienia aparatu

<model-viewer> ma teraz pełną kontrolę nad wirtualnym aparatem wykorzystywanym w widoku (perspektywą widza). Obejmują one cel kamery, orbitę (w stosunku do modelu) i pole widzenia. Możesz też włączyć autoobracanie i ustawić ograniczenia interakcji użytkowników (np. maksymalne i minimalne pola widoku).

Adnotacje

Możesz też dodawać adnotacje do modeli za pomocą kodu HTML i CSS. Ta możliwość jest często wykorzystywana do „dołączania” etykiet do części modelu w sposób, który porusza się wraz z modelem podczas manipulowania. Można je dostosowywać, w tym wygląd oraz zakres ich ukrywania przez model. Adnotacje działają też w AR.

<style>
  button{
    display: block;
    width: 6px;
    height: 6px;
    border-radius: 3px;
    border: 3px solid blue;
    background-color: blue;
    box-sizing: border-box;
  }

  #annotation{
    background-color: #dddddd;
    position: absolute;
    transform: translate(10px, 10px);
    border-radius: 10px;
    padding: 10px;
  }
</style>
<model-viewer src="https://modelviewer.dev/assets/ShopifyModels/ToyTrain.glb" alt="A 3D model of a Toy Train" camera-controls>
  <button slot="hotspot-hand" data-position="-0.023 0.0594 0.0714" data-normal="-0.3792 0.0004 0.9253">
    <div id="annotation">Whistle</div>
  </button>
</model-viewer>

Skarb kosmiczny z adnotacją.

Więcej informacji znajdziesz na stronie dokumentacji adnotacji.

Edytor

Wersja 1.1 zawiera i udostępnia narzędzie do edycji <model-viewer>, które umożliwia szybki podgląd modelu, wypróbowanie różnych konfiguracji <model-viewer> (np. ekspozycji i zmiękczania cieni), generowanie obrazu plakatu i interaktywne uzyskiwanie współrzędnych adnotacji.

Ulepszenia renderowania i wydajności

Jakość renderowania jest znacznie ulepszona, zwłaszcza w środowiskach High Dynamic Range (HDR). <model-viewer> używa teraz też bezpośredniej ścieżki renderowania, gdy w widocznym obszarze znajduje się tylko 1 element <model-viewer>, co zwiększa wydajność (zwłaszcza w Firefoksie). Wreszcie dynamiczne skalowanie rozdzielczości renderowania znacząco poprawiło liczbę klatek. Przykład poniżej pokazuje niektóre z tych najnowszych ulepszeń.

<model-viewer camera-controls
              skybox-image="spruit_sunrise_1k_HDR.hdr"
              alt="A 3D model of a well-worn  helmet"
              src="DamagedHelmet.glb"></model-viewer>

Model 3D dobrze noszonego kasku.

Stabilność

Gdy <model-viewer> osiąga swoją pierwszą główną wersję, stabilność interfejsu API jest priorytetem. Dlatego nie będzie można wprowadzać zmian powodujących niezgodność do czasu opublikowania wersji 2.0.

Co dalej?

<model-viewer> w wersji 1.0 zawiera najczęściej oczekiwane funkcje, ale nasz zespół jeszcze nie ma na swoim koncie. Dodamy więcej funkcji, a także ulepszenia wydajności, stabilności, dokumentacji i narzędzi. Jeśli masz jakieś sugestie, zgłoś problem na GitHubie. Zachęcamy też do kontaktu z zespołem PR. Możesz być w kontakcie, obserwując <model-viewer> na Twitterze i sprawdzając czat społeczności w Spectrum.