AR / WebXR • 2025

WebXR, tarayıcıdan doğrudan AR/VR deneyimleri sunmayı mümkün kılar. 2025’te e-ticaretten endüstriyel sahaya kadar birçok senaryo, kamera akışı üzerinde 3B nesneleri konumlandıran, hareketi takip eden ve gerçek zamanlı geri bildirim veren web arayüzleriyle hayata geçiyor.

B10 Digital Agency • 10 Ekim 2025 • Okuma süresi: ~7 dk

WebXR Temelleri: AR için Minimum Gereksinimler

• Güvenli bağlam: https:// zorunlu; kamera/IMU izinleri kullanıcıdan alınır.
• Cihaz desteği: Chrome/Android ve son Safari sürümleri sınırlı AR API’leriyle uyumlu; fallback planı şarttır.
• 3B varlıklar: glTF/GLB (PBR malzeme), USDZ (iOS Quick Look) tercih edilir.

“AR deneyimi bir web sayfası değil; kameranın üstünde çalışan bir arayüzdür.”

Hızlı Başlangıç: WebXR AR Oturumu

// 1) XR desteği kontrolü
if (navigator.xr) {
  const supported = await navigator.xr.isSessionSupported('immersive-ar');
  if (supported) startAR();
}

async function startAR(){
  const session = await navigator.xr.requestSession('immersive-ar', {
    requiredFeatures: ['hit-test', 'dom-overlay'],
    domOverlay: { root: document.body }
  });
  // WebGL/WebGPU bağla, render döngüsünü başlat
}

UI Mimarisi: 2D + 3D Katmanları

Performans: Mobilde 60 FPS’e Yaklaşmak

• Mesh optimizasyonu: Üçgen sayısını azaltın; LOD ve instancing kullanın.
• Malzeme: PBR dokuları için basisu / ktx2 sıkıştırma, 2K üstünü kaçının.
• Render tekniği: WebGL’de single pass, WebGPU açıksa bindless stratejiler.
• Pipeline: Modeli draco ile sıkıştırıp stream yükleme.

E-Ticaret Senaryosu: Ürünü Odada Gör

// GLB'yi yükleyip yüzeye yerleştirme (Three.js pseudo)
const loader = new GLTFLoader();
const model = await loader.loadAsync('/assets/chair.glb');
const anchor = xrFrame.createAnchor(hitPose, referenceSpace);
anchor.context.attach(model.scene); // sahneye sabitle

Fallback Stratejileri

• Model-Viewer: WebXR yoksa <model-viewer> ile 3B + çevrim içi AR çağrısı.
• USDZ/Quick Look: iOS’ta yerel AR için rel="ar" linki.
• 360° döndürme: Basit cihazlarda sprite/turntable.

<a href="/assets/chair.usdz" rel="ar">
  iOS'ta AR ile Aç
</a>
<model-viewer src="/assets/chair.glb" ar ar-modes="webxr scene-viewer quick-look" camera-controls></model-viewer>

Kullanılabilirlik & Erişilebilirlik (A11y)

• İzin akışı: Kamera erişimi açıklamasını sade bir modalla verin.
• Sessiz ortam: Haptik/ikonla yönlendirin; kullanıcıya oturum çıktısı sağlayın (ekran görüntüsü kaydet).
• Klavyeyle kullanım: DOM overlay butonlarına klavye odak halkası (focus ring) ekleyin.

Güvenlik ve KVKK

• Yerel işleme: Yüzey/derinlik verilerini cihazda tutun; sunucuya göndermeyin.
• İzin günlükleri: Kullanıcıdan alınan her izni (kamera/konum) event olarak loglayın.
• CSP: Kamera ve WebXR script’leri için sıkı Content-Security-Policy tanımı.

Analitik: AR Oturumlarının ROI’si

• Oturum başına süre (AR’da geçirilen zaman)
• Yerleştirme sayısı (kaç kez model konumlandı)
• CTA dönüşümü (AR → Sepet / Lead)

// Basit event örneği
window.dataLayer.push({ event: 'ar_place', sku: 'CHAIR-01' });

“AR, yalnızca ‘göster’ değil; ‘ikna et’ katmanıdır: ölç, optimize et, yinele.”

B10 Yaklaşımı: WebXR Ürün Paketi

• Three.js + WebXR Device API ile hit-test, anchor ve ışık tahmini
• GLB/USDZ çift çıkış pipeline’ı (Draco + KTX2)
• Model-Viewer fallback’li, A/B test edilebilir AR akışları
• Edge dağıtım + CDN ile düşük gecikme, ISR ile model versiyonlama