WebXR ile geliştirme

Android XR'de Chrome, WebXR'yi destekler. WebXR, W3C tarafından geliştirilen ve desteklenen tarayıcılara yüksek performanslı XR API'leri getiren bir açık standarttır. Web için içerik oluşturuyorsanız mevcut siteleri 3D modellerle geliştirebilir veya yeni sürükleyici deneyimler oluşturabilirsiniz.

Android için Chrome XR, aşağıdaki WebXR özelliklerini destekler:

WebXR'nin nasıl çalıştığını görmek için bir Android XR cihazda veya Android XR Emulator'da Chrome'u başlatın ve resmi WebXR örneklerine göz atın.

Ön koşul: WebXR çerçevesi seçin

Geliştirmeye başlamadan önce doğru WebXR çerçevesini seçmeniz önemlidir. Bu, üretkenliğinizi önemli ölçüde artırır ve oluşturduğunuz deneyimlerin kalitesini iyileştirir.

  • 3D sahneler üzerinde tam kontrol sahibi olmak ve özel veya karmaşık etkileşimler oluşturmak için three.js ve babylon.js'i öneririz.
  • Hızlı prototip oluşturmak veya 3D sahneleri tanımlamak için HTML benzeri söz dizimi kullanmak istiyorsanız A-Frame ve model-viewer'ı öneririz.
  • Daha fazla çerçeve ve örnek kodu da inceleyebilirsiniz.

Yerleşik JavaScript ve WebGL kullanmayı tercih ediyorsanız ilk WebXR denemenizi oluşturmak için GitHub'daki WebXR başlıklı makaleyi inceleyin.

Android XR için uyarlama

Diğer cihazlarda çalışan mevcut WebXR deneyimleriniz varsa kodunuzu Android XR'da WebXR'yi düzgün şekilde destekleyecek şekilde güncellemeniz gerekebilir. Örneğin, mobil cihazlara odaklanan WebXR deneyimlerinin Android XR'de bir ekrandan iki stereo ekrana uyarlanması gerekir. Mobil cihazları veya mevcut kulaklıkları hedefleyen WebXR deneyimlerinin giriş kodunu el öncelikli olacak şekilde uyarlaması gerekebilir.

Android XR'de WebXR ile çalışırken, her göz için bir ekran olduğu gerçeğini telafi etmek üzere kodunuzu güncellemeniz gerekebilir.

WebXR'de derinlik hissi sağlama hakkında

Kullanıcılar fiziksel alanlarına sanal nesneler yerleştirirken bu nesnelerin ölçeği, gerçekten oraya aitmiş gibi görünecek şekilde doğru olmalıdır. Örneğin, mobilya alışverişi yapan kullanıcıların, sanal bir koltuğun salonlarına mükemmel şekilde sığacağına güvenmesi gerekir.

Android XR için Chrome, cihazın gerçek dünyadaki ortamının boyutlarını ve dış hatlarını algılama özelliğini artıran WebXR'deki Derinlik Algılama Modülü'nü destekler. Bu ayrıntılı bilgiler, daha etkileyici ve gerçekçi etkileşimler oluşturmanıza olanak tanıyarak kullanıcıların bilinçli kararlar almasına yardımcı olur.

Android XR'deki derinlik algılama, cep telefonlarındaki derinlik algılamanın aksine stereoskopiktir ve iki derinlik haritasını anlık olarak yayınlar. WebXR kodunuzu stereo derinlik çerçevelerini düzgün şekilde destekleyecek şekilde güncellemeniz gerekebilir.

Aşağıdaki örnekte derinlik bilgileri stereoskopik olarak oluşturulmuştur:

// Called every time a XRSession requests that a new frame be drawn.
function onXRFrame(t, frame) {
  const session = frame.session;
  session.requestAnimationFrame(onXRFrame);
  const baseLayer = session.renderState.baseLayer;
  const pose = frame.getViewerPose(xrRefSpace);

  if (pose) {
    gl.bindFramebuffer(gl.FRAMEBUFFER, session.renderState.baseLayer.framebuffer);

    // Clears the framebuffer.
    gl.clearColor(0, 0, 0, 0);
    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

    // Note: Two views will be returned from pose.views.
    for (const view of pose.views) {
      const viewport = baseLayer.getViewport(view);
      gl.viewport(viewport.x, viewport.y, viewport.width, viewport.height);

      const depthData = frame.getDepthInformation(view);
      if (depthData) {
        renderDepthInformationGPU(depthData, view, viewport);
      }
    }
  } else {
    console.error('Pose unavailable in the current frame!');  }
}

Kodla ilgili önemli noktalar

  • Derinlik verilerine erişmek için geçerli bir duruş döndürülmelidir.
  • pose.views, her göz için bir görünüm döndürür ve karşılık gelen for döngüsü iki kez çalışır.

WebXR derinlik algılama API'si kullanılarak gerçek zamanlı derinlik görselleştirmesi. Kırmızı, daha yakın pikselleri, mavi ise daha uzak pikselleri gösterir.

WebXR'de el etkileşimi ekleme

WebXR uygulamanıza el etkileşimi eklemek, daha sezgisel ve etkileyici deneyimler sunarak kullanıcı etkileşimini artırır.

Android XR'de birincil etkileşim mekanizması el girişidir. Android XR için Chrome, varsayılan giriş olarak Hand Input API'yi destekler. Bu API, kullanıcıların sahnedeki öğeleri yakalamak, itmek veya değiştirmek için hareketleri ve el hareketlerini kullanarak sanal nesnelerle doğal bir şekilde etkileşim kurmasına olanak tanır.

Cep telefonları veya denetleyici odaklı XR cihazlar gibi cihazlar henüz el girişini desteklemeyebilir. WebXR kodunuzu, el girişini doğru şekilde destekleyecek şekilde güncellemeniz gerekebilir. Ellerle Immersive VR Oturumları, el izlemenin WebXR projenize nasıl entegre edileceğini gösterir.

Aşağıdaki animasyonda, kullanıcının gerçek dünyaya geçiş penceresi göstermek için sanal bir alanın yüzeyini "silerek" uzaklaştırdığı bir sahneyi göstermek üzere sıkıştırma işleminin WebXR API ile birleştirilmesine dair bir örnek gösterilmektedir.

Fiziksel gerçekliği görmek için ekranları silmek üzere el sıkıştırma özelliğinin kullanıldığı WebXR demosu.

WebXR'deki izinler

İzin gerektiren WebXR API'lerini kullandığınızda Chrome, kullanıcıdan siteye izin vermesini ister. Tüm WebXR API'leri 3D harita oluşturma ve kamera izleme izni gerektirir. İzlenen yüz, göz ve el verilerine erişim de izinlerle korunur. Gerekli tüm izinler verilmişse navigator.xr.requestSession('immersive-ar', options) çağrısı geçerli bir WebXR oturumu döndürür.

Kullanıcı tarafından seçilen izin tercihi her alan için geçerli kalır. Farklı bir alandaki bir WebXR deneyimine erişmek, Chrome'un izinleri tekrar istemesine neden olur. WebXR deneyimi için birden fazla izin gerekiyorsa Chrome her izin için ayrı ayrı istem gösterir.

Web'deki tüm izinlerde olduğu gibi, iznin reddedilmesiyle ilgili durumları uygun şekilde ele almanız gerekir.