Virtul Tour Sleman

System Overview & Objective

Virtual Expo Sleman is a web-based virtual exhibition platform designed in response to physical restrictions during the pandemic. The system digitalizes physical exhibition spaces into a 360-degree interface, integrating 50 SME (Small and Medium Enterprises) tenants into a single interactive ecosystem. The objective is to deliver a seamless spatial navigation experience while facilitating product promotion and sales workflows directly within the virtual environment.

Core Logic & Architecture

• 360° Spatial Rendering & Hotspot Mapping: The application's core logic focuses on rendering 360° panoramic images (utilizing WebGL/Canvas-based libraries) directly in the browser. The system maps spatial coordinates (X, Y, Z / yaw, pitch) to render interactive hotspots. As the user changes their field of view, the engine recalculates hotspot positions in real-time to ensure they remain anchored to objects within the image.

• Asynchronous Asset Delivery: Serving high-resolution visual assets (360° panoramas) for 50 different booths introduces significant performance challenges. The front-end architecture implements lazy loading and asset pre-fetching strictly for virtual routes adjacent to the user's current position. This minimizes main thread blocking and maintains low load times, even when accessed from mobile devices.

• Integrated Catalog State Management: Each hotspot is linked to a relational database storing product metadata (price, description, stock). When a hotspot is clicked, the system fetches data via REST API and displays it in a modal/overlay without refreshing the virtual tour's state, preserving continuous user navigation.