CovarkXR

CovarkXR enables users to upload 3D real estate models for immersive, photorealistic AR viewing—ideal for remote property tours, revolutionizing how we showcase and explore real estate virtually.

Comment

Inspiration

The inspiration for CovarkXR came from a vision to make real estate more accessible, interactive, and immersive, especially in a world where remote interactions are becoming the norm. Traditional property listings often fall short, relying on static images or basic video tours that lack depth. With advancements in augmented reality, I saw an opportunity to create a platform where users could visualize spaces as if they were physically present, making informed decisions without needing to travel.

The project aims to bridge the gap between real estate and technology by offering photorealistic, 3D-AR experiences, making property exploration more engaging for buyers, architects, and designers.

What it does

CovarkXR is a web app designed to enhance real estate visualization using augmented reality. It allows users—whether they’re property buyers, architects, or real estate agents—to upload 3D models of houses, buildings, or real estate properties. Once uploaded, these models can be viewed in AR, giving users an immersive, life-like experience of the space, directly through their device.

This feature allows potential buyers to explore properties from different angles and scales as if they were physically there, helping them make more informed decisions. For architects and real estate professionals, CovarkXR offers a powerful tool for presenting properties with photorealistic detail and true-to-scale visualization, improving communication with clients and enhancing project presentations.

How we built it

Here’s an outline of the development process for CovarkXR using Angular, ARCore, MongoDB, and Express:

  1. Frontend Development with Angular: Angular was used to create an interactive, responsive user interface. This included building the upload feature for 3D models, the interface for managing uploaded properties, and the AR preview feature. Angular's component-based structure allowed for modular development, making it easy to manage the complex functionalities that CovarkXR requires.

  2. Augmented Reality with ARCore: ARCore enabled the app to render 3D models in augmented reality, providing users with immersive, photorealistic views of the uploaded properties. The ARCore SDK integrated with the frontend to process the 3D models and anchor them in the user’s environment, adjusting scale and lighting in real time for a realistic experience.

  3. Backend API with Express: Express.js served as the backend framework, managing requests from the Angular frontend. It handled user authentication, model uploads, and communication with the database. Express also managed routing and acted as the middle layer, ensuring seamless data flow between the frontend and database.

  4. Database with MongoDB: MongoDB stored user data, including uploaded 3D models, metadata, and user accounts. Its flexible schema structure was ideal for handling varied property information, allowing for easy scaling as new types of data are added. MongoDB's cloud capabilities enabled reliable data storage and access, ensuring model data is available whenever a user views it in AR.

Through these technologies, CovarkXR created a robust, scalable, and interactive AR platform, offering a user-friendly way to experience real estate in augmented reality.

Challenges we ran into

  1. ARCore Integration: Required bridging between regular JavaScript and webpacked Angular.
  2. 3D Model Settings: Custom directives were created to override existing model viewer settings.
  3. Three.js Compatibility: Updated the three.js version in the ARCore package due to Angular incompatibility.
  4. Device Compatibility: Backward compatibility was set up for unsupported devices.
  5. CesiumJS Integration: Issues loading 3D maps for on-device view prevented full functionality.

Accomplishments that we're proud of

  1. Mastering a New Field: Successfully developing an AR-based web app in a short timeframe, despite AR and 3D model handling being relatively new areas.
  2. Seamless AR Functionality: Overcoming technical hurdles with ARCore and three.js to deliver an immersive, photorealistic AR experience for real estate models.
  3. Custom Solutions for Flexibility: Designing custom directives to enable more control over 3D model settings, improving user experience.
  4. Cross-Device Compatibility: Implementing backward compatibility to broaden device support, ensuring accessibility across a wider user base.
  5. Enhanced User Interface: Building a responsive, user-friendly Angular interface for managing, uploading, and viewing real estate models with ease.

What we learned

  1. Importance of Flexibility in Frameworks: AR and 3D model integration with Angular required adaptations, such as bridging JavaScript and Webpack, showing the importance of flexible solutions when working with frameworks and SDKs that don’t always align out of the box.

  2. Value of Customization for User Control: Creating custom directives to override model settings highlighted how customization can improve user control and the user experience, especially in complex interfaces like 3D models.

  3. Managing Compatibility Across Devices: Ensuring backward compatibility for devices demonstrated the need to consider a broad range of hardware and software requirements early on in development, particularly for AR applications where device support varies.

  4. Keeping Dependencies Updated: The three.js compatibility issue emphasized the importance of monitoring and updating dependencies, especially in tech-heavy fields like AR, where versions can become quickly outdated.

  5. Problem-Solving with Integrations: The challenges with integrating CesiumJS reinforced the need for thorough research and testing when adding new libraries to an existing stack, especially when the library is integral to core features.

  6. Efficiency in Learning New Technologies: Tackling AR, 3D rendering, and model-viewing within Angular provided a valuable experience in quickly ramping up in new tech areas, underscoring that quick learning is key in dynamic projects.

What's next for CovarkXR

  1. Integrating CesiumJS or an Alternative Mapping Tool: Resolving the issues with CesiumJS to enable detailed, on-device 3D mapping would enhance the AR experience, offering users a more accurate context for their models. If integration remains challenging, exploring alternative mapping libraries could be beneficial.

  2. Enhancing User Interaction with Models: Adding more interactive features, like the ability to zoom in, measure spaces, change lighting, or add annotations, could make the platform more engaging for users and increase its value for real estate presentations.

  3. Optimizing for More Devices: Further refining backward compatibility and optimizing performance on a broader range of devices will increase CovarkXR’s accessibility, especially for users with older or less powerful hardware.

  4. Expanding Storage and Scaling Options: As the app grows, implementing scalable storage solutions, potentially through cloud storage integration, will accommodate more users and larger, more complex 3D models.

  5. Adding Analytics and User Insights: Tracking user interactions with models, such as the time spent viewing or the specific areas of focus, can provide valuable feedback for improvements and insights into user preferences.

  6. Exploring AI-Powered Features: Incorporating AI-driven features like model auto-tagging, or AI-generated summaries for spaces, could add an extra layer of functionality, assisting users with quick property assessments and recommendations.

  7. Rolling Out to Other Platforms: Expanding CovarkXR to other platforms, such as iOS or desktop, could reach a wider audience, allowing more users to access immersive real estate experiences.

Built With

Share this project:

Updates