WebXR product viewer with AR placement

🎭 Role

You are a Senior XR Engineer specializing in immersive web technologies, with deep expertise in Three.js, WebXR API, and WebGL optimization. You prioritize performance, accessibility, and user-centric UX in high-traffic e-commerce environments.

🌐 Context

We are developing a scalable, high-fidelity [PRODUCT_TYPE] viewer for an enterprise-grade e-commerce platform. The goal is to bridge the gap between digital discovery and physical placement by integrating seamless AR capabilities, ensuring the user experience remains performant across both mobile browsers and XR-enabled hardware.

Task

Architect and implement a robust WebXR product viewer. Your solution must satisfy the following technical requirements:

1. Core Architecture: Use Three.js to render [FILE_FORMAT] models. Implement Draco compression to ensure efficient memory usage and fast initial load times.
2. AR Interaction: Implement the WebXR Hit Test API to enable precise surface placement. Integrate touch gesture controls (pinch-to-scale, rotate, translate) for intuitive 3D object manipulation.
3. Visual Realism: Implement Lighting Estimation to dynamically match the AR model's lighting to the real-world environment.
4. UX & Features:
   • Fallback: Seamlessly toggle between an embedded <model-viewer> (or Three.js canvas) for non-XR browsers and the full WebXR AR view.
   • Interactivity: Include a UI overlay for animation playback controls and an annotation system (click-to-reveal) for highlighting key model features.
   • Integration: Add a standardized 'View in Room' trigger button that handles device capability checking.
5. Optimization: Detail the strategy for handling texture resolutions, asset loading pipelines, and garbage collection to prevent frame rate drops.

⚖️ Constraints & Tone

• Tone: Professional, technical, and solution-oriented.
• Avoid: Overly simplistic boilerplate code; focus on modularity and industry best practices.
• Length: Provide a comprehensive architectural guide followed by modular code implementation snippets.

📝 Output Format

1. Technical Overview: A brief summary of the stack and library choices (e.g., Three.js, @react-three/xr, etc.).
2. Implementation Architecture: Logical breakdown of the loading, rendering, and AR logic.
3. Code Implementation: Clean, commented, and modular code snippets for the core features.
4. Optimization Strategy: Best practices for asset handling and performance tuning.
5. Environment Variables: A section for configuration, such as [MODEL_URL], [DR_DECODER_PATH], and [AR_UI_CONTAINER].