AR, VR ve HTML'de 3D için bir Model

Bir yere sıkıştırılmış Safari Teknoloji Önizlemesi 161 sürüm notları yeni bir HTML öğesi ve özniteliği için destek hakkında görünüşte zararsız bir satırdır:

için destek eklendi <model src> ve onur <source type> Öznitellikler ([e-posta korumalı])

Ne zaman tanımadığım bir elementten bahsedildiğini görsem, aklım doğrudan şuraya gidiyor: Ha! Benim için yeni, ama muhtemelen herkes için eski haber. Kötü bir duruş, biliyorum, kolayca olabileceği gibi:

• Hmm, özel bir deneye benziyor.
• Vay canına, gerçekten yeni bir şey!

Gerçek şu ki, üçü de bir çeşit.

Gelişen bir konsept

Olduğu gibi, üzerinde bulduğum biraz resmi görünen ilk şey <model> W3C spesifikasyonunda değildi ama Açıklayıcılar için WebKit deposu. README'de bulunan tek şey, 2021'den dev bir not: <model> öğe, Sürükleyici Web CG'ye taşındı.” Atlamak üzereydim ama gözüm bir yere takıldı. HistoryAndEvolution.md erken bağlamın güzel bir özetini içeren dosya <model> kavram:

The <model> eleman bir sonraki adımı atma ve Safari'nin iOS ile entegrasyon deneyimini geliştirme arzusundan doğdu. AR Hızlı Bakış özelliği.

AR Hızlı Bakış için Apple'ın giriş sayfasına bakmam gerekti. Bazı mağazaların sahip olduğu, telefonunuzun kamerasını kullanarak kendi evinizdeki bir ürünün 3B görüntüsünü aktarabileceğiniz yeni özelliği biliyor musunuz? Bahsettiğimiz bu tür şeyler ve Apple, Metropolitan Museum of Art'tan güzel bir vaka çalışmasıyla bağlantı kuruyor.

Bu sınırlı bağlamdan anladığım kadarıyla:

• bir bırak <model> belgedeki öğe.
• Harici bir kaynak dosyası ekleyin, örn. <model src="assets/example.usdz">.

Orijinal teklif, Sürükleyici Web Komitesi Grubundandır.

takım bu görünüm, Sanal Gerçekliği (VR) ve Artırılmış Gerçekliği (AR) web'in bir parçası haline getirir. Apple depolarını birbirine bağladı, ben de atlamayı yaptım ve gittim doğrudan açıklayıcıya. Bu özellik veya herhangi bir şey değil, orijinal teklif. Öğenin çok daha iyi bir tanımı!

HTML, birçok ortam türünün aşağıdakiler gibi öğeler aracılığıyla görüntülenmesini sağlar: <img>, <picture>ya da <video>, ancak doğrudan 3B içeriği görüntülemek için bildirimsel bir yol sağlamaz. 3B içeriği bir sayfaya gömmek nispeten külfetlidir ve <canvas> eleman. 3B modelleri halihazırda desteklenen diğer ortam türleriyle eşit düzeye getirmenin zamanının geldiğine inanıyoruz.

[...]

HTML <model> element, bir web sitesinin etkileşimli 3B modelleri diğer herhangi bir görsel ortam kadar uygun bir şekilde yerleştirmesine izin vermeyi amaçlar. Modellerin 3B geliştirme araçları tarafından oluşturulması veya dinamik olarak oluşturulması beklenir, ancak sunucu tarafından bağımsız bir kaynak olarak sunulur.

Temel örnek bunu bir araya getirir. gerçekten öyle hissettiriyor <video> or <picture> elementler:

<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? Genelde masamdan geçen dosya türleri değil. Sanırım bunları ve diğer dosya türlerini gözden geçirmem gerekecek. <model> destek olabilir. Yine, tüm bunlar sadece orijinal teklif.

Taslak teklif henüz tam olarak reddedilmedi

Ama öyle güzel bir taslak sağlamak işlerin muhtemelen nereye gidebileceği:

• Belgeye model ekleme
• Etkileşimi etkinleştirme
• Birden çok formatı destekleme
• Yedek içerik sağlama
• Erişilebilir kılmak

Anlaşılacak çok şey var. Orada olanların çoğu, ele alınması gereken belgelenmiş sorunlardır. Ancak, daha fazla ışık tutuyor <model> hatta hissettiren önerilen özellikler gibi Daha sevmek <video> gibi autoplay, controls, loop, muted, poster, vb.

Daha da geriye gidiyor

Bulduğum 3D modellemenin en eski sözü Keith Clark'ın 2018 gönderisi adlı özel bir öğenin prototipini oluşturduğu <x-model>. Bunu, yükleme ve oluşturmanın yapıldığı "DOM ve CSSOM'a erişim sağlayan bir yer tutucu" olarak tanımlıyor. üç.js.

Keith'in fikrinin ardından <model-viewer> bileşen Joe Medley 2020'de paylaştı (ve müteakip güncelleştirme ona). hatta var bunun için ana sayfa ve Neil Armstrong'u uzayda sürüklemek eğlenceli.

Muhtemelen sadece bir deney mi?

Demek istediğim, taslak spesifikasyon detaylandırılmadı. Apple, Safari TP 161 duyurusu sayesinde top oynamaya istekli görünüyor. Bu verilen toplam mantıklı Apple AR konusunda ne kadar iyimser bir bütün olarak. (Apple Gözlükleri, kimse?)

İşlerin Web Bileşenleri tarafında da olsa, Google'ın ayağı kapıda gibi görünüyor. Apple ve Google'ın web'de AR'den istedikleri arasında nasıl bir çıkar çatışması olabileceğini görmek kolaydır.

Bunların hepsi, her şeyi mahvetmeye çalışmaktan aldığım notlar. Şimdiye kadar hakkında bildiklerimden çok daha fazla nüans olmalı. Eminim daha zeki biri etrafına daha düzgün fiyonk bağlayabilir <model> yorumlarda 😉

Safari Teknolojisi Önizlemesinden bahsederken, 162 geçen gün yayınlandı ve sağlar CSS yerleştirme ve CSS göreli renk sözdizimi.

• SEO Destekli İçerik ve Halkla İlişkiler Dağıtımı. Bugün Gücünüzü Artırın.
• Plato blok zinciri. Web3 Metaverse Zekası. Bilgi Güçlendirildi. Buradan Erişin.
• Kaynak: https://css-tricks.com/ar-vr-and-a-model-for-3d-in-html/