İçeriğe geç

Web için VR Geliştirmek – 3 | A-Frame ile Tanışalım

Tahmini Okuma Süresi: 7 dakika

Bu bölümde, WebVR geliştirme için A-Frame kütüphanesi hakkında önemli bilgileri paylaşacak ve gerekli eklentileri nasıl bulup kullanacağımızı öğreneceğiz.

Özellikle, A-Frame’in çeşitli bileşenlerini ve yapı taşlarını nasıl kullanacağımızı, daha iyi performans için nesneleri önbelleğe almayı, nesnelere dokular uygulamayı ve WebVR uygulamalarını sistemimizde çalıştırmayı öğreneceğiz.

A-Frame Kütüphanesi

Mozilla VR ekibi 2015 yılının ortalarında A-Frame’i geliştirdi. A-Frame, güçlü ama karmaşık WebGL’yi tanımak zorunda kalmadan HTML ile kodlamaya izin vererek sanal gerçeklik deneyimlerini uygulamayı daha hızlı ve kolay hale getiren bir WebVR çerçevesidir. Açık kaynaktır ve amacı A-Frame kitaplığını kullanarak oluşturabileceğiniz VR sahneleri, akıllı telefonlar, masaüstü bilgisayarlar ve diğer çoğu VR cihazında çalışır. Mozilla VR ekibinin amacı, WebVR ekosisteminde genel web geliştiricilerinin ilgisini çekmekti.

A-Frame ile 3D sanal gerçeklik içeriği, tasarımcılar, web geliştiricileri ve WebGL ile hiç tecrübesi olmayan bir çok topluluk tarafından kolaylıkla üretilebilir.

A-Frame, modeller, gökyüzü, imleçler, animasyonlar ve benzeri gibi sanal gerçeklik sahnelerinin temel yapı taşlarıyla birlikte gelir. Bazı temel sahneler için zaten mevcut şablonlar bir web geliştiricisinin başlamasını kolaylaştırır.

A-Frame’i HTML dosyalarımıza dahil etmek için “ <a-scene> “ adlı özel bir etiket kullanmamız gerekiyor.

Bir Örnek ile Başlayalım

Sanal gerçeklik sahneniz için içeriği kodlamadan önce, JavaScript oluşturma komut dosyasını HTML belgesinin <head> etiketine eklemeniz gerekir.

Bunu yapmanın en kolay yolu, aşağıdaki gibi içerik yayınlama ağından (CDN) JavaScript yapısını dahil etmektir:

<!– Production Version, Minified –>
<script src=”https://aframe.io/releases/0.3.2/aframe.min.js”></script>
<!– Development Version, Uncompressed with Source Maps –>
<script src=”https://aframe.io/releases/0.3.2/aframe.js”></script>

Ayrıca dilerseniz, verdiğim bağlantılardan dosyaları indirip bilgisayarınız üzerinden local olarak da çalıştırabilirsiniz.

İlk Uygulamamızı Yapalım

A-Frame kütüphanesini kullanarak ilk denememizi yapalım ve öğrenmeye başlayalım. 🙂

Klasik HTML etiketlerini atlayıp, direkt olarak A-Frame ile alakalı olan kodları kısa kısa açıklayalım.

<a-scene> etiketi: Oluşturmakta olduğunuz VR web sitesinin tamamı bu HTML etiketinde yer alacaktır. Konteyner olmaktan başka hiçbir özel fonksiyonu yoktur.

<a-box> etiketi: Bu, basit bir kutu görüntüleyen bir kutu ilkel şeklidir. Bunu daha sonra tartışacağız.

<a-sky> etiketi: Bir sanal gerçeklik sahnesinin 360 derece küre arka planına gökyüzü denir ve <a-sky> etiketini kullanarak belirtilebilir. Ya, hexa-decimal bir kod kullanarak belirtilen düz bir renk olabilir veya 360 derecelik bir resim olabilir. 

Uygulamanın bir örneğine de http://celikemre.com/webvr/app.html  adresinden ulaşabilir ve WASD + mouse yardımıyla etkileşime geçebilirsiniz. 🙂

O zaman bir workflow açıklayabiliriz.

Başlangıçta, HTML belgesinin temel yapısıyla başlarsınız. Ardından, <head> etiketinin içinde, JavaScript bağımlılığına bir referans eklersiniz. <body> etiketinde, önceki listede açıklandığı gibi <a-scene> adlı özel bir etiket eklersiniz ve VR web sitesinin tüm içeriğini içine eklersiniz.

Varlık – Bileşen Sistemi

A-Frame, varlık bileşeni sistemi (ECS) üzerine kurulmuştur. Genellikle oyun geliştiricileri tarafından kullanılır ve çoğunlukla bileşenler arasındaki ilişkileri vurgular.

VBS: Bir varlık, hiçbir işlevselliğe sahip olmayan genel bir yer tutucudur, ancak gerekli görünümü ve işlevselliğini sağlamak için çeşitli bileşenleri onunla ilişkilendirmenize izin verir. Bileşenler, takılı oldukları varlıklara belirli ayrıntıları ekler. Bir sistem, benzer bir bileşen grubunu yönetir ve onlara gerekli hizmetleri sağlar.

Performansı Artırmak İçin Varlıkları Önbelleğe Alma

A-Frame’in varlık yönetimi sistemi, tüm varlıkları tek bir yere yerleştirmenize olanak tanıyan güçlü bir araçtır. Ayrıca, varlık yönetimi sistemi aracılığıyla depolanan ve kullanılan varlıklar, geleneksel olarak tek tek bileşen / varlıkların içinde bulunanlara kıyasla bir avantaja sahiptir. Bu öğeler, web sitesi başlatıldığında önceden yüklenir ve çalışma süresi boyunca daha iyi performans için önbelleğe alınır.

Bir varlık yönetimi sistemini, tüm varlıkları içine yerleştirdiğiniz <a-assets> </ a-assets> etiketleriyle tanımlarsınız. Varlık yönetimi sistemi tarafından desteklenen çeşitli varlıklar ise şunlardır:

  • <a-asset-item>: Özel bir 3D model gibi, çeşitli ve nadiren kullanılan bir varlığa sahip olabilir.
  • <audio>: Ses dosyalarını içerir.
  • <img>: Görüntüleri içerir.
  • <video>: Videoları içerir.

Mixins

Sık kullanılan bileşen niteliklerini bildirmek için mixins kullanıyorsunuz. Bileşenler daha sonra bu karışıklıklardan birini veya daha fazlasını kullanabilir ve bunları yeniden biçimlendirebilir. Mixinler her zaman bir öznitelik olarak bir kimliği vardır ve bileşenler mixinlere kimlik numaralarıyla (ID) erişirler.

Mixins, önceki kodda gösterildiği gibi doğrudan <a-assets> etiketinde bildirilir. Aslında mixinler belirli bir varlığın içermesi gereken tüm nitelikleri temsil eder. Bu şekilde, her seferinde bunları yazmak zorunda kalmadan, birçok varlıkta aynı tür özelliklerin tekrar kullanılması daha kolay hale gelir.

Uygulamanın bir örneğine de http://celikemre.com/webvr/mixins.html  adresinden ulaşabilir ve WASD + mouse yardımıyla etkileşime geçebilirsiniz. 🙂

A-Frame Bileşenleri ve Yapı Taşları

Daha önce açıkladığımız gibi, bir bileşen, bir varlığın niteliğini açıklayan bir yığın veridir. Varlığın görünümünü ve işleyişini değiştirmek için bu nitelikleri kullanırız. Örneğin, bir araba bir varlıktır ve vites sayısı, beygir gücü ve benzeri özellikleri taşır.

A-Frame’de, bir bileşen aşağıda gösterildiği gibi bir varlık için kaydedilebilir ve yapılandırılabilir:

Varlıklar ile bileşenleri, HTML ile CSS birlikteliğine benzetebiliriz.

Uygulamanın bir örneğine de http://celikemre.com/webvr/entity.html  adresinden ulaşabilir ve WASD + mouse yardımıyla etkileşime geçebilirsiniz. 🙂


Web için VR Geliştirme serisinde #3 yazımızda, örnek uygulamalar ile A-Frame’in özelliklerini, varlık-bileşen ilişkisini işledik. Sizler de paylaştığım kodları kullanıp, geliştirip daha kapsamlı uygulamalar yaparak uygulamalarınızın linkini ya da görsellerini benimle paylaşabilirsiniz. 🙂

Elbette ki bana, sağ üst köşedeki sosyal medya linklerinden ya da yorumlar kısmından ulaşabilirsiniz. Bu yazıyı beğendiyseniz paylaşmayı unutmayın, iyi çalışmalar. 🙂

İlk Yorumu Siz Yapın

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir