Web: AR Quick Look
İnternet sitenizde üç boyutlu fiziksel objeleri arttırılmış gerçeklik kullanarak gösterin!
Herkese merhaba! 👋 Bu yazımızda, Web’de USDZ türü dosyalar ile AR deneyimleri oluşturmamızı sağlayan “AR Quick Look” özelliğinden bahsedeceğim.🧑💻
Safari, Mesajlar, Mail ve Notlar gibi iOS ve iPadOS’in içinde yerleşik olarak gelen uygulamaların kullandığı bu özellik, oldukça detaylı nesnelerin AR ile gerçek dünyada gösterilmesini sağlıyor.
Eğer AR Quick Look’u önceden denemek isterseniz bu makale için geliştirdiğimiz küçük web uygulamasını kullanabilirsiniz.
Bu özelliği projemize ekleyebilmek için öncelikle bir USDZ dosyasına ihtiyacımız var. Bu makalede kullanılmak üzere hazırlanan TurkishKit yaka kartı dosyasını buradan indirebilirsiniz. Tabii ki bunun dışında herhangi bir USDZ dosyasını da kullanabilirsiniz.
Arttırılmış gerçeklik ile göstereceğimiz model hazır olduğuna göre kodlamaya geçebiliriz.
İlk olarak AR Quick Look’un en basit şekli ile başlayalım:
<a href=”/tkbadge.usdz”>Yaka Kartı</a>
Bu şekilde yerleştirilen bir USDZ dosyası, AR ile önizlenebilse de güzel bir kullanıcı deneyimine sahip olmayacaktır. Safari, linke tıklandığında USDZ dosyasını ayrı bir sayfa gibi açacaktır.
Kullanıcının tuşa basması ile birlikte başka bir sayfaya yönlendirilmesi, zaman kaybı ve çoğu kullanıcı için karmaşa anlamına geliyor. Peki bunu nasıl çözebiliriz?
Çözüm oldukça basit. Öncelikle a elementine rel “attribute”unu eklememiz gerekiyor.
Bundan sonra ise a elementinin içine koyabilmek için göstereceğimiz USDZ dosyasını temsil eden bir görsele ihtiyacımız var. Örnek olarak bu görseli kullanabilirsiniz. Kodumuz artık bu şekilde olmalı.
<a rel=”ar” href=”tkbadge.usdz”>
<img src=”tkbadge.png” alt=”TurkishKit Yaka Kartı”>
</a>
Artık USDZ dosyası istediğimiz şekilde aynı sayfada açılıyor. Peki ya kullanıcılar bu linke Mac gibi AR Quick Look özelliğini desteklemeyen cihazlarda tıklarsa ne olur?
İşte bu bir sorun! USDZ dosyası, kullanıcının cihazında önizlenmek yerine normal bir dosya gibi indiriliyor.
Sorunu çözebilmek için JavaScript kullanarak cihazın AR Quick Look özelliğini destekleyip desteklenmediğini öğrenmemiz gerekiyor. Bunun için de relList.supports("ar") fonksiyonunu kullanabiliriz.
Daha sonra ise özelliğin kullanılabilir olduğu durumlarda a elementinin rel “attribute”una ar değerini, href “attribute”una ise USDZ dosyasının linkini ekleyeceğiz.
Bu aşamada yapılacak şeyler, tabii ki projeye veya sizin alacağınız kararlara göre değişiklik gösterebilir. Örneğin bu özelliğin desteklenmediği bir durumda kullanıcıyı alert() ile uyarabilirsiniz.
Örnek projedeki kod ile şu şekilde:
let badge = document.getElementById(“badge”)function arCheck() {
if (badge.relList.supports(“ar”)) {
badge.rel = “ar”
badge.href = “../tkbadge.usdz”
}
}
Bu şekilde pandemi yüzünden artık düzenleyemediğimiz TurkishKit etkinliklerinde dağıtılan yaka kartlarını cihazlarınızda görüntüleyebilirsiniz. 🥲 Bu yaka kartını gerçekten taktığımız günlerde görüşmek üzere. 👋
