Android XR'da web için geliştirme

Geçerli XR cihazlar
Bu kılavuz, bu tür XR cihazlar için deneyimler oluşturmanıza yardımcı olur.
XR cihaz türleri hakkında bilgi edinin →
XR Kulaklıklar
Kablolu XR Gözlükler
XR cihaz türleri hakkında bilgi edinin →

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

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

WebXR'yi çalışırken görmek için Android XR cihazda veya Android XR Emulator'da Chrome'u başlatın ve resmi WebXR örneklerine göz atın.

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

Geliştirmeye başlamadan önce doğru WebXR çerçevesini seçmeniz önemlidir. Bu sayede kendi üretkenliğiniz önemli ölçüde artar ve oluşturduğunuz deneyimlerin kalitesi iyileşir.

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

Yerel JavaScript ve WebGL kullanmayı tercih ediyorsanız ilk WebXR denemenizi oluşturmak için GitHub'daki WebXR'ı inceleyin.

Android XR'ye uyarlama

Diğer cihazlarda çalışan mevcut WebXR deneyimleriniz varsa Android XR'da WebXR'ı düzgün şekilde desteklemek için kodunuzu güncellemeniz gerekebilir. Örneğin, mobil cihazlara odaklanan WebXR deneyimleri, Android XR'da tek ekrandan iki stereo ekrana uyarlanmalıdır. Mobil cihazları veya mevcut başlıkları hedefleyen WebXR deneyimlerinde, giriş kodunun el öncelikli olacak şekilde uyarlanması gerekebilir.

Android XR'de WebXR ile çalışırken, her göz için bir ekran olmak üzere iki ekran olmasını telafi etmek amacıyla kodunuzu güncellemeniz gerekebilir.

WebXR'de derinlik hissi sağlama hakkında

Kullanıcılar fiziksel alanlarına sanal bir nesne yerleştirdiğinde, bu nesnenin ölçeği doğru olmalı ve nesne gerçekten oraya aitmiş gibi görünmelidir. Örneğin, bir mobilya alışverişi uygulamasında kullanıcıların, sanal bir koltuğun oturma odalarına mükemmel şekilde uyacağına güvenmesi gerekir.

Android XR için Chrome, WebXR'deki derinlik algılama modülünü destekler. Bu modül, cihazın gerçek dünya ortamının boyutlarını ve hatlarını algılama yeteneğini geliştirir. Bu derinlik bilgisi, daha sürükleyici ve gerçekçi etkileşimler oluşturmanıza olanak tanıyarak kullanıcıların bilinçli kararlar vermesine yardımcı olur.

Android XR'daki derinlik algılama, cep telefonlarındaki derinlik algılamanın aksine stereoskopiktir ve iki derinlik haritasını gerçek zamanlı olarak yayınlayarak binoküler görüş sağlar. Stereo derinlik çerçevelerini düzgün şekilde desteklemek için WebXR kodunuzu güncellemeniz gerekebilir.

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

// 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 poz döndürülmelidir.
  • pose.views her göz için bir görünüm döndürür ve buna 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'da birincil etkileşim mekanizması el girişiyle yapılır. Android XR için Chrome, varsayılan giriş olarak Hand Input API'yi destekler. Bu API, kullanıcıların sahnede öğeleri tutmak, 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 kontrol cihazı odaklı XR cihazlar gibi cihazlar henüz el girişini desteklemeyebilir. El girişini düzgün şekilde desteklemek için WebXR kodunuzu güncellemeniz gerekebilir. Ellerle Etkileşimli VR Oturumu, el takibini WebXR projenize nasıl entegre edeceğinizi gösterir.

Aşağıdaki animasyonda, WebXR API ile parmakla yakınlaştırma hareketinin birleştirilerek kullanıcının sanal alanın yüzeyini "silerek" gerçek dünyaya geçiş penceresi açtığı bir örnek gösterilmektedir.

Fiziksel gerçekliği görmek için ekranları silmek üzere elinizi sıkıştırma hareketini kullanmayla ilgili WebXR demosu.

WebXR'daki izinler

İzin gerektiren WebXR API'lerini kullandığınızda Chrome, kullanıcıdan siteye izin vermesini ister. Tüm WebXR API'leri için 3D harita ve kamera izni gerekir. İzlenen yüz, göz ve el verilerine erişim de izinlerle korunur. Gerekli tüm izinler verildiyse 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 olur. Farklı bir alanda WebXR deneyimine erişildiğinde Chrome, izinleri tekrar ister. 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 reddedildiği durumları da uygun şekilde ele almanız gerekir.