WebXR Project

Authors:

• Albaraa Abushammala : Backend Developer, Server Manager
• Erik Autenrieth : Frontend Developer, Database Manager
• Hamed Sadegh Database Manager, Server Manager

Table of contents

1. About
   
2. Prerequisites
   
3. Running Tests
   
4. Getting Started
   
5. Built Using
   
6. Roadmap
   
7. Known Issues
   
8. License
   

About

The WebXR project is a collaborative effort by Albaraa Abushammala, Erik Autenrieth, and Hamed Sadegh to develop a 3D painter app in augmented reality (AR). The app is designed to allow users to create 3D drawings in a augmented environment. The project leverages cutting-edge technologies like the WebXR Device API, Three.js library, and Firebase database to create a seamless and immersive AR experience.

The 3D painter app is built using the Next.js web framework and React, making it highly responsive and easily scalable. The app's backend is managed by Node.js, and the database is powered by Firebase, which offers real-time data synchronization and seamless integration with other Google Cloud services.

To use the app, users must have access to a WebXR-enabled device, such as a VR headset or a mobile device with AR capabilities. Once connected, users can explore the virtual environment, create 3D paintings using a range of colors and different sizes of brushes. Users can also save their creations to the database, and share them with other users.

The WebXR project is distributed under the MIT License, making it free and open-source for anyone to use and modify. The team is constantly working to improve and enhance the app, with future updates including new tools and features for creating even more realistic and immersive 3D paintings in AR.

Prerequisites

Make sure you have installed all of the following prerequisites on your development machine:

• Git - Download & Install Git.
• Next.js - The project requires Next.js to be installed on your machine. You can download and install Next.js.
• npm - npm (Node Package Manager) is installed with Next.js. You should have the latest version of npm installed on your machine.

Getting Started

1. Clone the project repository from GitHub.
2. Install the required packages by running npm install in the project directory.
3. Run the app in development mode by running npm start in the project directory.
4. Start the development server by running npm run dev.
5. Open your web browser and navigate to http://localhost:3000 to view it in the browser.

Running Tests

npm test

Launches the test runner in the interactive watch mode.
See the section about running tests for more information.

Built Using

• Firebase - Database

• Next.js - Web Framework

• React - Web Framework

• Node.js - Server Environment

• Three.js - JS 3D Library

• WebXR - WebXR Device API

Roadmap

Known Issues and Limitations

• The 3D painter app may not be fully optimized for all WebXR devices and browsers. Some features may not be available or may not work as expected.
• The app is not currently available for download. Users must access the app through a WebXR-enabled device.
• Please note that the app has a maximum file size limit for saved drawings. If you attempt to save a drawing that exceeds this limit, the app may experience performance issues or may even crash. We recommend keeping your drawings at a reasonable size to avoid any potential issues

License

Distributed under the MIT License. See LICENSE for more information.

---

Installed Packages

npm i firebase firebaseeui