WebXR ile Tarayıcıda AR Deneyimleri

WebXR, tarayıcıda VR ve AR deneyimleri sunmak için W3C standardıdır. Uygulama indirmeden, web linki ile immersive deneyimler yaşatın.

WebXR Nedir?

• W3C immersive web standardı
• WebVR'ın yerini aldı
• VR ve AR tek API'de
• Chrome, Edge, Firefox desteği

WebXR Özellikleri

• Immersive VR sessions
• Immersive AR sessions
• Hit testing (ray casting)
• Anchors (spatial persistence)
• Hand tracking
• Layers (compositor)

Tarayıcı Desteği

Three.js + WebXR

import * as THREE from "three";
import { ARButton } from "three/examples/jsm/webxr/ARButton.js";

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
renderer.xr.enabled = true;

document.body.appendChild(ARButton.createButton(renderer, {
    requiredFeatures: ["hit-test"]
}));

// Hit test ile placement
renderer.xr.addEventListener("sessionstart", () => {
    const session = renderer.xr.getSession();
    session.requestReferenceSpace("viewer").then((viewerSpace) => {
        session.requestHitTestSource({ space: viewerSpace }).then((source) => {
            // Hit test logic
        });
    });
});

A-Frame WebXR

<a-scene webxr="requiredFeatures: hit-test">
  <a-box position="0 1 -3" color="red"></a-box>
  <a-sky color="#ECECEC"></a-sky>
</a-scene>

WebXR Device API

// Session başlatma
if (navigator.xr) {
    navigator.xr.isSessionSupported("immersive-ar").then((supported) => {
        if (supported) {
            navigator.xr.requestSession("immersive-ar", {
                requiredFeatures: ["hit-test", "local-floor"]
            }).then(onSessionStarted);
        }
    });
}

Polyfill'ler

• WebXR Polyfill (eski tarayıcılar)
• WebXR Emulator (geliştirme)

Kullanım Alanları

• E-commerce product preview
• Real estate virtual tours
• Educational simulations
• Marketing experiences

WebXR, immersive web'in standardıdır. Uygulama bariyerini kaldırarak AR/VR'ı herkes için erişilebilir kılıyor.