AR, VR, dan Model untuk 3D dalam HTML

Terselip di suatu tempat di Pratinjau Teknologi Safari 161 catatan rilis adalah baris yang tampaknya tidak berbahaya tentang dukungan untuk elemen dan atribut HTML baru:

Dukungan tambahan untuk <model src> dan kehormatan <source type> atribut ([email dilindungi])

Setiap kali saya melihat penyebutan beberapa elemen yang tidak saya kenali, pikiran saya langsung tertuju Hah! Baru bagi saya, tapi mungkin berita lama untuk orang lain. Ini postur yang buruk, saya tahu, karena bisa dengan mudah:

• Hmm, sepertinya eksperimen milik sendiri.
• Wow, hal yang benar-benar baru!

Sebenarnya, ini agak ketiganya.

Ini adalah konsep yang berkembang

Seperti, hal pertama yang terdengar agak resmi yang saya temukan di <model> tidak dalam spesifikasi W3C tetapi dalam Repo WebKit untuk penjelasan. Semua yang ada di README adalah catatan raksasa dari tahun 2021 bahwa “The <model> elemen telah dipindahkan ke Immersive Web CG.” Aku hendak melompat tapi mataku menangkapnya HistoryAndEvolution.md file yang memiliki ikhtisar bagus tentang konteks awal pada <model> konsep:

Grafik <model> elemen lahir dari keinginan untuk mengambil langkah selanjutnya dan meningkatkan pengalaman integrasi Safari dengan iOS AR Lihat Cepat fitur.

Saya harus melihat halaman splash Apple untuk AR Quick Look. Anda tahu fitur baru yang dimiliki beberapa toko di mana Anda dapat mengubah urutan rendering 3D suatu produk di rumah Anda sendiri menggunakan kamera ponsel? Itulah hal-hal yang sedang kita bicarakan, dan Apple menghubungkan studi kasus yang bagus dari Metropolitan Museum of Art.

Seperti yang saya pahami dari konteks terbatas ini:

• Jatuhkan <model> elemen dalam dokumen.
• Tambahkan file sumber eksternal, mis <model src="assets/example.usdz">.

Proposal asli berasal dari Grup Komite Web Immersive

Itu tim mencari membuat Virtual Reality (VR) dan Augmented Reality (AR) bagian dari web. Apple menautkan repo mereka, jadi saya melompat dan pergi langsung ke penjelas. Ini bukan spek atau apapun, tapi proposal aslinya. Definisi elemen yang jauh lebih baik!

HTML memungkinkan tampilan banyak jenis media melalui elemen seperti <img>, <picture>, atau <video>, tetapi tidak menyediakan cara deklaratif untuk menampilkan konten 3D secara langsung. Menyematkan konten 3D dalam halaman relatif rumit dan bergantung pada pembuatan skrip <canvas> elemen. Kami percaya inilah saatnya untuk menempatkan model 3D sejajar dengan jenis media lain yang sudah didukung.

[...]

HTML <model> elemen bertujuan untuk memungkinkan situs web menyematkan model 3D interaktif semudah media visual lainnya. Model diharapkan dibuat oleh alat pembuat 3D atau dibuat secara dinamis, tetapi disajikan sebagai sumber daya yang berdiri sendiri oleh server.

Contoh dasar menarik ini bersama-sama. Rasanya benar-benar seperti <video> or <picture> elemen:

<model style="width: 400px; height: 300px"> <source src="assets/example.usdz" type="model/vnd.usdz+zip"> <source src="assets/example.glb" type="model/gltf-binary">
</model>

.usdz? .glb? Bukan jenis file yang biasanya melintasi meja saya. Sepertinya saya perlu memolesnya dan semua jenis file lainnya <model> mungkin mendukung. Sekali lagi, semua ini hanyalah proposal asli.

Draf proposal belum selesai

Tapi memang begitu memberikan garis besar yang bagus dari mana hal-hal yang mungkin terjadi:

• Menambahkan model ke dokumen
• Mengaktifkan interaktivitas
• Mendukung banyak format
• Menyediakan konten cadangan
• Membuatnya dapat diakses

Ada banyak hal yang harus diketahui. Sebagian besar dari apa yang ada adalah masalah terdokumentasi yang perlu ditangani. Namun, hal itu menjelaskan lebih banyak <model> seperti atribut yang diusulkan yang membuatnya terasa rata lebih 'like' <video> seperti autoplay, controls, loop, muted, poster, Dll

Ia kembali lebih jauh

Penyebutan pemodelan 3D paling awal yang saya temukan adalah Postingan Keith Clark 2018 di mana dia membuat prototipe elemen khusus yang disebut <x-model>. Dia mendeskripsikannya sebagai “placeholder yang menyediakan akses ke DOM dan CSSOM” tempat pemuatan dan rendering dilakukan tiga.js.

Ide Keith diikuti oleh <model-viewer> komponen yang dibagikan Joe Medley pada tahun 2020 (dan selanjutnya memperbarui untuk itu). Bahkan ada beranda untuk itu dan menyenangkan menyeret Neil Armstrong ke luar angkasa.

Itu mungkin hanya percobaan?

Maksud saya, draf spesifikasinya belum disempurnakan. Apple sepertinya mau main bola berkat pengumuman Safari TP 161. Itu sangat masuk akal seberapa bullish Apple di AR secara keseluruhan. (Kacamata Apple, siapa saja?)

Google tampaknya memiliki kaki di pintu, meskipun di sisi Komponen Web. Sangat mudah untuk melihat bagaimana mungkin ada konflik kepentingan antara apa yang Apple dan Google inginkan dari AR di web.

Ini semua hanya catatan saya dari mencoba grok semuanya. Pasti ada lebih banyak nuansa daripada sedikit yang saya ketahui sejauh ini. Saya yakin seseorang yang lebih pintar dapat mengikat busur yang lebih rapi <model> di komentar. 😉

Dan sementara kita membicarakan Pratinjau Teknologi Safari, 162 baru saja dirilis beberapa hari yang lalu dan itu memungkinkan CSS bersarang dan Sintaks warna relatif CSS.

• Konten Bertenaga SEO & Distribusi PR. Dapatkan Amplifikasi Hari Ini.
• Platoblockchain. Intelijen Metaverse Web3. Pengetahuan Diperkuat. Akses Di Sini.
• Sumber: https://css-tricks.com/ar-vr-and-a-model-for-3d-in-html/