Web Interfaces for Augmented Reality and WebXR Integrations

AR / WebXR; 2025

WebXRenables AR/VR experiences directly in a browser. In 2025, use cases from e-commerce to industrial fieldwork use web interfaces that place 3D objects over the camera feed, track movement and provide real-time feedback.

B10 Digital Agency • 10 October 2025 • Reading time: ~7 min

WebXR Basics: Minimum Requirements for AR

Secure context: https:// is required; camera and IMU access require user permission.
Device support: Chrome/Android and recent Safari versions are compatible with limited AR APIs; the fallback plan is essential.
3D assets: glTF/GLB with PBR materials, and USDZ for iOS Quick Look are preferred.

“An AR experience is more than a web page: its interface overlays the camera view.”

Quick Start: WebXR AR Session

// 1) Check XR support
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 }
 });
 // Connect WebGL/WebGPU and start the render loop
}

Tip: hit-test detects surfaces to place the model on the ground; dom-overlay keeps HTML buttons above the AR scene.

UI Architecture: 2D + 3D Layers

Layer	Task	Technology
3D scene	Model, lighting, shadows, tracking	Three.js / Babylon.js / WebGPU
2D UI	CTA, product variant, help	DOM Overlay / HTML + CSS
Perception Layer	Hit-test, anchor, pose	WebXR Device API

Performance: Approaching 60 FPS on Mobile

Mesh optimisation: Reduce triangle count; use LOD and instancing.
Materials: For PBR textures, use basisu / ktx2 compression; avoid resolutions above 2K.
Rendering technique: In WebGL, use single pass; when WebGPU is enabled, consider bindless strategies.
Pipeline: Compress the model with draco and load it progressively as a stream.

E-Commerce Scenario: See Product in Room

// Load the GLB and place it on a surface (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); // Attach it to the scene

Conversion tip: Keep “Add to basket” fixed in the AR session using DOM Overlay; keep variant and colour selection within the AR experience.

Fallback strategies

Model-Viewer: If WebXR is unavailable, use <model-viewer> for 3D viewing and launching AR.
USDZ/Quick Look: For native AR on iOS, use a rel="ar" link.
360° rotation: Use sprite or turntable views on basic devices.

<a href="/assets/chair.usdz" rel="ar">Open AR on iOS</a> <model-viewer src="/assets/chair.glb" ar ar-modes="webxr scene-viewer quick-look" camera-controls></model-viewer>

Usability & Accessibility (A11y)

Permission flow: Explain camera access in a simple modal dialog.
Quiet environments: Guide users with haptics or icons; offer a session output such as a saved screenshot.
Keyboard use: Give DOM Overlay buttons a visible keyboardfocus ring.

Security and KVKK

Local processing: Keep surface and depth data on the device; do not send them to the server.
Permission logs: Record each user-granted permission, such as camera or location access, as an event.
CSP: Define a strict Content-Security-Policy for camera and WebXR scripts.

Analytics: ROI of AR Sessions

Time per session (time spent in AR)
Number of placements (how often the model was positioned)
CTA conversion (AR → basket / lead)

// Simple event example
window.dataLayer.push({ event: 'ar_place', sku: 'CHAIR-01' });

“AR does more than show: it helps persuade. Measure, optimise and iterate.”

B10 Approach: WebXR Product Package

With Three.js and WebXR Device API: hit-test, anchors and light estimation
GLB/USDZ dual-output pipeline (Draco + KTX2)
AR flows with Model-Viewer fallback, ready for A/B testing
Low latency through edge delivery and CDN; model versioning with ISR

Move your products into the customer's world.
The B10 Digital Agency offers WebXR-based AR experiences along with performance, safety and measurement.

Start AR Project Tags: WebXR • AR • Three.js • Babylon.js • glTF • USDZ • model-viewer • e-commerce AR • KVKK • B10 Digital Agency