Skip to main content
Version: 1.0.0

Technologies

Author: Gabriele Gilio Creation Date: 19/08/2025
Last Reviewer: Gabriele Gilio Last Updated: 20/08/2025

This document outlines the comprehensive technology stack powering the 3D AR Viewer.

Frontend Technologies​

React Ecosystem​

  • React 18.3.1 - Core frontend framework with latest features and performance optimizations
  • React Router DOM 6.28.0 - Client-side routing with useParams, useLocation, and dynamic route handling
  • Redux Toolkit 2.3.0 - State management with brandViewer and modelGlasses slices
  • React Redux 9.1.2 - React bindings for Redux with hooks support
  • React Three Fiber 8.17.10 - React wrapper for Three.js enabling declarative 3D scenes
  • React Three Drei 9.114.3 - Essential helpers (OrbitControls, Stage, useGLTF, useAnimations)

Build Tools & Utilities​

  • Create React App - Development environment and build configuration
  • JavaScript ES6+ - Modern JavaScript features with async/await, destructuring, and modules
  • CSS Modules - Scoped styling with .module.css files for component isolation
  • Axios 1.7.9 - HTTP client for API requests and file fetching
  • JS Cookie 3.0.5 - Browser cookie management for session tracking
  • UUID 11.0.5 - Unique identifier generation for device and session management
  • React Device Detect 2.2.3 - Device and browser detection for platform-specific features

3D Rendering Technologies​

Core 3D Engine​

  • Three.js 0.172.0 - Primary 3D graphics library with full WebGL/WebGL2 support
  • WebGL 2.0/1.0 - Hardware-accelerated 3D graphics with automatic fallback detection
  • GLTF/GLB 2.0 - Standard 3D model format with PBR materials and animation support
  • SkeletonUtils - Advanced model cloning with animation and bone structure preservation

Advanced Rendering Features​

  • Physically Based Rendering (PBR) - Realistic material system with metalness/roughness workflow
  • Post-Processing Pipeline - Custom EffectComposer with bloom, gamma correction, and SMAA antialiasing
  • HDRI Environment Lighting - High Dynamic Range imaging for realistic reflections and lighting
  • Custom Shader Materials - Subsurface scattering and specialized material effects
  • Real-time Shadow Mapping - PCF soft shadows with configurable intensity and bias

Material System​

  • MeshPhysicalMaterial - Advanced PBR materials with transmission, clearcoat, and sheen
  • Custom Blending Modes - Specialized transparency effects for lenses and transmissive materials
  • Dynamic Material Management - Runtime material swapping and preset application
  • Material Normalization - Production-ready export with sheen color scaling and property validation

Augmented Reality Technologies​

WebXR Implementation​

  • WebXR Device API - Native browser AR support with session management
  • WebXR Hit Test API - Real-world surface detection and model placement
  • WebXR DOM Overlay - UI integration within AR sessions without interruption
  • WebXR Reference Spaces - Coordinate system management for accurate tracking

Cross-Platform AR Support​

  • Google Scene Viewer - Android AR fallback with intent-based deep linking
  • Apple Quick Look - iOS AR integration using .usdz models and rel="ar" anchors
  • Browser Compatibility Detection - Automatic platform detection with graceful degradation

AR Interaction System​

  • Multi-touch Gesture Recognition - Single finger dragging, dual finger scaling and rotation
  • Raycasting Engine - Precise intersection detection with horizontal planes
  • Haptic Feedback - Native device vibration for interaction confirmation
  • Visual Feedback System - Dynamic reticle with color-coded status indicators

Backend & Cloud Technologies​

Firebase Platform​

  • Firebase 11.0.2 - Complete backend-as-a-service platform
  • Firestore Database - NoSQL document database with real-time synchronization
  • Firebase Storage - Cloud asset hosting for 3D models, textures, and images
  • Firebase Hosting - Global CDN deployment with automatic SSL and caching
  • Firebase Authentication - User authentication and session management

Database Operations​

  • Atomic Transactions - Firestore transactions for bandwidth counters and data consistency
  • Compound Queries - Complex filtering and searching with where clauses
  • Batch Operations - Efficient parallel data fetching with Promise.all
  • Real-time Updates - Live data synchronization for session tracking and analytics

Development & Debugging Tools​

Live Development Tools​

  • Leva 0.10.0 - Real-time material property debugging with interactive GUI
  • R3F Perf 7.2 - Performance monitoring with frame rate and render statistics
  • Browser DevTools Integration - Console logging, error tracking, and network monitoring
  • Hot Module Replacement - Fast development with instant code updates

Export & Authoring Tools​

  • GLTFExporter - Production-ready model export with material baking and animation preservation
  • Material Preset System - Cloud-based material configuration management
  • Screenshot Rendering - High-resolution image generation with custom camera positioning
  • Model Validation - Comprehensive error checking for naming conventions and material consistency

UI/UX Technologies​

Component Libraries​

  • Ant Design 5.22.1 - Professional React UI components with consistent design system
  • Google Model Viewer 4.0.0 - Web component for 3D model display with legacy fallback support
  • Custom CSS Modules - Responsive design with mobile/desktop adaptive layouts
  • Theme Integration - Dynamic color customization with CSS custom properties
  • Icon Systems - SVG-based iconography with optimized asset loading

Responsive Design​

  • Mobile-First Approach - Adaptive layouts with device-specific optimizations
  • Touch Interaction Support - Gesture handling optimized for mobile devices
  • Viewport Meta Management - Proper mobile viewport configuration
  • Cross-browser Compatibility - Support for modern browsers with polyfill fallbacks

Performance & Optimization Technologies​

Asset Management​

  • Browser Caching API - Intelligent model caching with cache status detection
  • Lazy Loading - On-demand resource loading with Suspense boundaries
  • Memory Management - Comprehensive disposal of geometries, materials, and textures
  • Asset Optimization - Automatic model compression and texture optimization

Rendering Optimizations​

  • Frustum Culling - Automatic object culling with skinned mesh adjustments
  • Level of Detail (LOD) - Adaptive quality based on distance and performance
  • Texture Compression - Optimized texture formats for different platforms
  • Batch Processing - Efficient parallel operations for material and preset management

Network & Data Optimization​

  • CDN Integration - Global content delivery through Firebase Hosting
  • Compression - GZIP compression for assets and API responses
  • Bandwidth Tracking - Real-time consumption monitoring with atomic counters
  • Offline Support - Service worker integration for offline model viewing

Platform Integration​

Environment Detection​

  • User Agent Analysis - Browser, device, and WebView detection
  • Capability Testing - WebXR support detection with automatic fallbacks
  • Platform-Specific Features - iOS, Android, and desktop optimizations
  • WebView Handling - Specialized behavior for in-app browser environments

Analytics & Monitoring​

  • Session Tracking - Comprehensive user behavior analytics with Firebase
  • Performance Metrics - Loading times, interaction patterns, and error rates
  • Usage Analytics - Model view duration, variant switching, and feature utilization
  • Error Reporting - Automated error tracking with contextual information

This technology stack represents a production-ready, enterprise-grade 3D/AR platform designed for scalability, performance, and cross-platform compatibility.