TileMart Suite
TileMart 3D Digital Showroom transforms how customers explore and select tiles through an immersive WebGL-powered environment that mirrors the physical store experience in the browser. Built with React Three Fiber, the platform provides virtual showroom navigation, real-time product visualization, and seamless integration with TileMart's e-commerce ecosystem.
2 Projects
TileMart 3D Digital Showroom is a Next.js App Router + React Three Fiber experience that mirrors the physical store in the browser, letting staff and customers explore tiles in an immersive 3D scene. The platform provides a virtual showroom experience where users can walk through curated bays, view tiles in realistic 3D settings, and make informed purchasing decisions from anywhere. Built with modern WebGL capabilities, the application bridges the gap between physical showroom experiences and online shopping convenience while maintaining the performance and accessibility expected of modern web applications.
Tile selection is inherently visual and spatial—customers need to see products in context, understand scale and texture, and envision how tiles work together in real spaces. Traditional e-commerce product pages with 2D images fail to capture the tactile and spatial qualities essential for tile selection. TileMart needed a solution that replicated the showroom experience digitally without requiring customers to visit physical locations, while maintaining the performance and accessibility expected of modern web applications. The platform had to work seamlessly across devices, from high-end desktops to mid-range smartphones, while providing an engaging experience that kept users exploring longer than traditional catalog pages.
A WebGL-powered 3D showroom application that recreates physical showroom environments in the browser. The platform features multiple curated 'bays' (thematic showroom sections) where tiles are displayed in realistic 3D contexts—on walls, floors, and feature installations. Users navigate through spaces using intuitive controls, search SKUs, filter by type/colour/size, and jump to preset camera views to inspect bays and shelves without walking the floor. The admin console provides staff with tools to configure showroom layouts, update product displays, and manage content without developer intervention. Performance is tuned with instanced meshes and staged loading to keep navigation smooth even with large catalogs.
Built with React and Three.js (via React Three Fiber), the application leverages modern WebGL capabilities while maintaining broad browser compatibility. The 3D environment uses optimized geometries and texture compression to ensure fast load times even on mobile networks. Showroom layout is procedurally generated and sized via config, ensuring bays/zones/camera presets stay consistent with store dimensions. State management with Zustand handles complex interactions between 3D navigation and UI overlays. The admin system is a separate React application sharing the same data models, enabling real-time preview of content changes. All 3D assets and textures are served from a CDN with aggressive caching strategies.
The 3D Showroom integrates seamlessly with the existing TileMart e-commerce platform. Product data is synchronized with the WooCommerce backend, ensuring pricing and availability remain current. The Hub Local system (on-premise IT management) provides store staff with tools to update showroom configurations from physical locations. When customers find tiles they want to purchase, they're directed to the main e-commerce site with products pre-selected, maintaining continuity between discovery and purchase. This integration creates a cohesive digital ecosystem where discovery, exploration, and transaction flow naturally from one platform to another.
The interface prioritizes exploration over efficiency—customers should feel like they're browsing a physical showroom, discovering products organically rather than searching through lists. Navigation uses familiar gaming-style controls (WASD or click-to-move) that require minimal learning. Information overlays appear contextually without obscuring the 3D environment. The admin interface contrasts this exploratory UX with a data-dense dashboard optimized for rapid content updates and bulk operations. Mobile devices receive touch-optimized controls and adapted layouts while maintaining the core exploration experience.
3D web applications face unique performance challenges. The showroom implements progressive asset loading—only tiles visible in the current view are loaded at high resolution. Texture compression (KTX2/Basis) reduces bandwidth requirements by 70% compared to standard JPEG/PNG. Level-of-detail (LOD) systems swap high-poly models for simplified versions at distance. Instanced meshes enable efficient rendering of repeated geometries. Mobile devices receive optimized geometries and shader complexity adjustments. These optimizations enable smooth 60fps experiences on devices ranging from high-end desktops to mid-range smartphones.
The 3D Showroom extends TileMart's reach beyond physical store locations, enabling customers across Australia to experience the full showroom without travel. Early metrics show users spend significantly longer exploring products in the 3D environment compared to traditional catalog pages, leading to more confident purchasing decisions and reduced return rates. The admin system empowers store staff to refresh displays without technical support, enabling rapid response to inventory changes and seasonal promotions. The platform reduces coordination cost between sales and ops by providing a single control plane for merchandising and showroom updates.
Planned features include augmented reality (AR) capabilities allowing customers to preview tiles in their own spaces via smartphone camera, virtual reality (VR) support for even more immersive experiences, AI-powered product recommendations based on browsing patterns, and collaborative features enabling customers to share showroom sessions with designers or contractors for real-time consultation. These enhancements will further bridge the gap between digital exploration and physical installation, creating a seamless end-to-end customer journey.
