CIRCLES Framework
Overview
This CIRCLES framework is meant to easily allow developers to create multi-user and multi-platform WebVR/WebXR content on top of another WebXR framework A-Frame, with networking provided by Networked-Aframe.
CIRCLES development is part of a research project into multi-user VR/AR that will constantly evolve as the research dictates how users will interact with each other in variable VR space. Our current focus is within both the formal (classroom) and informal (museums) educational contexts; but we aim to keep the framework flexible where possible to allow for greater creativity.
The (3) main goals for CIRCLES are as follows:
Device Scalability
To create a framework that allows itself to be displayed across a range of VR/AR capable platforms. The current focus is on supporting desktop, mobile, and standalone HMD (e.g. Oculus Quest). Interaction techniques will be kept simple and straightforward so that they are easily understandable and accessible between platforms.
Social Scalability
To create a framework that allows variable forms of one-many users across both co-located and remote perspectives. This framework should encourage the use of experiences that allow one to interact; but that also the experience should scale naturally and with collaboration and/or competition in mind to provide a more visceral experience as the number of users increases.
Reality Scalability [future]
To create a framework that allows encourages developers to create experiences that allow both VR and AR experiences, across a variable numbver of users using either technology. *Note that the inclusion AR into WebVR (to become WebXR) soon should help with this goal.
TODO: will add more to this later
Running Locally
- Clone repo
git clone https://github.com/PlumCantaloupe/circles_framework.git
- Install mongo
- Create a
data/dbfolder on your PC that Mongo can write tochmod -R 755 /datashould be sufficient (if using Mac OSX Catalina you can will have to create this data/db folder in a non-root area. Make sure to set this in your .env file - see Step 7)
- Install node/npm
- In terminal install webpack globally
npm install --save-dev webpack
- Go into project folder and install NPM dependencies
npm install
- Set up the Environment file
cp .env.dist .env- Make any changes to your .env file that are specific to your environment
- Open another terminal window/session and start Mongo
npm run mongo- You can also query Mongo using the consle by just running
mongoin your terminal (if you also have the mongo db running)
- Server the app so you can view it in your browser
npm run serve- This will build the needed bundles and serve the app for viewing. Check
out the
scriptssection ofpackage.jsonfor more build options and details.
- In a browser (recommend Firefox), go to
localhost:{SERVER_PORT}/add-all-test-datato add both models to mongo db and test users.- Alternatively, you can also go to
localhost:{SERVER_PORT}/add-models-to-dbthenlocalhost:{SERVER_PORT}/add-users-to-dbto add models then users manually. - NOTE: If you need to clean up or modify db contents use the
mongoshell. see here. To drop entire mdmu db (which you will have to do when we make changes to db items) use the following commands within the mongo shell:use mdmudb.dropDatabase()
- Alternatively, you can also go to
- Login with one of the 3 test users
{username}:{password}user1@test.ca:passworduser2@test.ca:passworduser3@test.ca:password
- Open another app instance of browser
- Log in with anbother user (or same) and have fun :)
Instance Routes
- /register
- /profile
- /campfire
- /add-all-test-data
- /add-models-to-db
- /add-users-to-db
- /rooms
Creating your own "world"
- Go to src/worlds and see that each world has its own folder and associated index.html
- See testworld for a simple example of how to set up your own
- Currently, routes are not automatically created for each world ([in progress]); but you can type in URL http://localhost:{SERVER_PORT}/rooms/explore/world/{YOUR_WORLD_FOLDER}
- Note that in testWorld you can see a few HTMl entities that are required for your world to properly connect to all features of this framework. These are replaced when served for the appropriate scripts so please pay attention to their position within the page.
<circles-start-scripts/> <a-scene circles_properties> <circles-assets/> <circles-avatar/> <circles-end-scripts/>

