Memperkenalkan 1.1

Model 3D untuk laman web Anda semudah menulis HTML.

Joe Medley

Rob Kochman

Model 3D kini semakin relevan. Retailer menghadirkan pengalaman berbelanja di dalam toko ke rumah pelanggan. Museum membuat model 3D dari artefaknya tersedia untuk semua orang di web. Sayangnya, mungkin sulit untuk menambahkan model 3D ke situs dengan cara yang memberikan pengalaman pengguna yang luar biasa tanpa pengetahuan mendalam tentang teknologi 3D atau menggunakan hosting konten 3D pada situs pihak ketiga. Komponen web <model-viewer>, yang diperkenalkan pada awal 2019, berupaya menjadikan penempatan model 3D di web semudah menulis beberapa baris HTML. Sejak saat itu, tim telah berupaya untuk menanggapi masukan dan permintaan dari komunitas. Puncak dari karya tersebut adalah <model-viewer> versi 1.0, yang dirilis awal tahun ini. Sekarang kami mengumumkan rilis <model-viewer> 1.1. Anda dapat membaca catatan rilis di GitHub.

Apa yang baru sejak tahun lalu?

Versi 1.1 menyertakan dukungan bawaan untuk augmented reality (AR) di web, peningkatan kecepatan dan fidelitas, serta fitur lainnya yang sering diminta.

{i>Augmented reality<i}

Melihat model 3D di kanvas kosong memang sangat bagus, tetapi dapat melihatnya di ruang Anda akan jauh lebih baik. Untuk 3D dan AR yang sepenuhnya ada di browser, Chrome Android mendukung augmented reality menggunakan WebXR .

Jika sudah siap, Anda dapat menggunakannya dengan menambahkan atribut ar ke tag <model-viewer>. Atribut lain memungkinkan Anda menyesuaikan pengalaman AR WebXR, seperti yang ditunjukkan dalam contoh WebXR di modelviewer.dev. Contoh kode di bawah menunjukkan seperti apa tampilannya.

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

Konten ini tampak seperti video tersemat yang ditampilkan di bawah judul ini.

Kontrol kamera

<model-viewer> kini memberikan kontrol penuh atas kamera virtual tampilan (perspektif pelihat). Hal ini mencakup target kamera, orbit (posisi relatif terhadap model), dan ruang pandang. Anda juga dapat mengaktifkan rotasi otomatis dan menetapkan batas interaksi pengguna (misalnya, kolom tampilan maksimum dan minimum).

Anotasi

Anda juga dapat menganotasi model menggunakan HTML dan CSS. Kemampuan ini sering digunakan untuk "melampirkan" label ke bagian-bagian model dengan cara yang bergerak bersama model saat dimanipulasi. Anotasi dapat disesuaikan, termasuk penampilan dan sejauh mana anotasi tersebut disembunyikan oleh model. Anotasi juga berfungsi di 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>

Lihat halaman dokumentasi anotasi untuk mengetahui informasi selengkapnya.

Editor

Versi 1.1 memperkenalkan dan menghosting alat"pengeditan" <model-viewer>, yang memungkinkan Anda melihat pratinjau model dengan cepat, mencoba berbagai konfigurasi <model-viewer> (misalnya eksposur dan kelembutan bayangan), menghasilkan gambar poster, dan mendapatkan koordinat anotasi secara interaktif.

Peningkatan rendering dan performa

Fidelitas rendering sangat meningkat, terutama untuk lingkungan rentang dinamis tinggi (HDR). <model-viewer> kini juga menggunakan jalur render langsung saat hanya satu elemen <model-viewer> yang ada di area pandang, sehingga meningkatkan performa (terutama di Firefox). Terakhir, menskalakan resolusi render secara dinamis meningkatkan kecepatan frame secara drastis. Contoh di bawah ini menampilkan beberapa peningkatan terbaru ini.

<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>

Stabilitas

Dengan <model-viewer> yang mencapai versi utama pertamanya, stabilitas API menjadi prioritas, sehingga perubahan yang dapat menyebabkan gangguan akan dihindari hingga versi 2.0 dirilis.

Apa langkah selanjutnya?

<model-viewer> versi 1.0 menyertakan kemampuan yang paling banyak diminta, tetapi tim belum selesai. Lebih banyak fitur akan ditambahkan, begitu juga peningkatan performa, stabilitas, dokumentasi, dan alat. Jika Anda memiliki saran, ajukan masalah di GitHub; juga Anda dapat menghubungi PR. Anda dapat tetap terhubung dengan mengikuti <model-viewer> di Twitter dan melihat chat komunitas di Spectrum.