- Circles Overview
- Circles Interactions
- Running Circles Locally
- Creating A New Circles World
- Circles Structure
- Circles Components
- Circles Events
- Circles Networking
- Learning More About A-Frame and Javascript Development
- Contributing to Circles
- Early Contributors
This CIRCLES framework is meant to easily allow developers to create multi-user and multi-platform WebXR learning activities on top of another WebXR framework A-Frame, with networking provided by Networked-Aframe.
CIRCLES is the practical Work-In-Progress (WIP) implementation of a research project into universal and inclusive multi-user VR considering how people interact with each other, their physical and virtual environments, and with learning artefacts in variable VR space. Our current focus is within both guided and unguided classroom and museum learning contexts; but we aim to keep the framework flexible where possible to allow for greater creativity.
- Click here for a blogpost on Circles and its progress, research, and development.
- Click here to view an open-access paper describing Circles and its core motivation, elements,and features.
While VR/AR technologies first appeared in research and development dating back to middle of the twentieth century (Azuma 1997; Mazuryk and Gervautz 1996) there is tremendous human interest in the concept of simulating reality which can be seen within fiction as early as the 1930s (Weinbaum 1935), and much earlier within the philosophical realm, when humans started to consider whether our perceived reality is an “absolute” reality, rather than merely “shadows on a cave wall” (Plato), “a dream” (Descartes) or a robust “computer simulation” (Bostrom 2003).
Post-Secondary Education in many industrialized countries such as Canada is currently facing performance and outcome challenges due to the lack of student engagement, experiential learning, and higher-order 21st-century skills such as critical thinking, communication, and collaboration. Virtual reality, with its ability to increase engagement, embodiment, experiential learning, and enhanced collaboration across co-located and remote spaces, appears a powerful tool for addressing some of the challenges we face in learning within social learning spaces. However, there are still many challenges concerning the ubiquitous use of virtual reality technology for learning within social learning spaces.
Rather than trying to recreate our physical learning spaces or be a more general communication platform, of which there are many, we are developing the Circles framework as a transformative learning tool for use within social learning spaces, that aims to provide engaging, social, and experiential learning activities from which to springboard toward deeper processing and reflection. This framework is based on the concept of Circle, a collection of virtual environments or worlds that connect to one another - the basic experiential element of the virtual learning environments - and Artefacts - the basic element for sharing and receiving knowledge. Though creating more inclusive VR technologies is an extremely broad objective we choose to use the concept of social accessibility to focus on increasing the comfort of using VR technologies around and with others within social learning spaces.
derived from Scavarelli et al. 2021
-
Accessibility
-
Device Scalability: Platform Scalability refers to a system capable of adapting to a range of VR/AR capable platforms (desktop, mobile, large screens, etc.). This is comparable to a virtual form of UDL (Universal Design for Learning), which suggests increasing the accessibility of learning activities via (1) Multiple Means of Representation, (2) Multiple Means of Expression, and (3) Multiple Means of Engagement (Rose et al., 2006). By supporting multiple platforms (Desktop, Mobile[tablet], and Head-Mounted Display (HMD - Oculus Quest only right now)), VR/AR content can be potentially more accessible with “multiple means of action and expression.” Note that we are only supporting Oculus Quest 1/2 at this time because the Quest does not introduce trip-hazards i.e., wires to a computer, is the most cost-effective immersive HMD on the market, includes the most well-supported HMD WebXR browser, and standalone HMDs have much less friction pushing immersive WebXR content over an HMD wired to a PC.
-
Social Scalability: To create a framework that allows variable forms of one-to-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. Social Scalability is based on Snibbe et al’s definition of social scalability within a museum context whereby “interactions are designed to share with others ... interaction, representation, and users’ engagement and satisfaction should become richer as more people interact” (Snibbe & Raffle, 2009).
-
Reality Scalability [future]: To create a framework that encourages developers to create experiences that allow VR, AR, and physical installation experiences, across a variable number of users. *Note that the recent inclusion of AR into WebXR soon should help with this future goal.
-
-
Consideration of Parallel Realities: There is some work looking at how the virtual work can affect our reality, in how we identify in virtual worlds can change our behaviour (Yee & Bailenson, 2007), in how task performance can be affected by others through social facilitation and social inhibition (Miller et al., 2019), and in how virtual spaces can also change behaviour (MacIntyre et al., 2004; Proulx et al., 2016); but there is still much work to be done on how the physical learning spaces we inhabit may affect our virtual behaviours. We have seen that the very nature of using this technology can inhibit participation and comfort (Brignull & Rogers, 2002; Outlaw & Duckles, 2017; Rogers et al., 2019); but it is still very early beyond some studies into how we prevent collisions in shared virtual spaces (Langbehn et al., 2018; Scavarelli & Teather, 2017). Just as connectivism and activity theory suggest that our digital tools and the socio-historical culture that surround learners become intrinsic part of the learning process, we should also consider how these same processes apply to both virtual environments and physical worlds as it becomes clear that the virtual worlds and physical worlds are not mutually exclusive perspectives.
-
Learning Foundations: Though most VR/AR projects in learning depend on constructivism, experiential learning, and/or social cognitive theory as a foundation for chosen features and properties, there are additional theoretical and methodological foundations within CSCL (Computer-Supported Collaborative Learning) that may help lend more significant consideration to both the virtual and physical environments within a socio-cultural context. Activity theory, in the form of expansive learning, includes not only digital tools and objects/artefacts as an intrinsic part of the learning process; but also the socio-historical properties of learning spaces (Engeström, 2016; Stahl & Hakkarainen, 2020). This could include some exciting explorations into the interplay between the social, spatial, and cultural aspects present within both the virtual and physical learning spaces; and how to better create VR/AR content that acknowledges them. This could include exploring how wearing in HMDs in learning spaces is not yet culturally acceptable (Rogers et al., 2019), or that being a woman in social VR spaces may encourage virtual harassment, decreasing participation in activities using these technologies (Outlaw & Duckles, 2017). The interconnected processes of learning within individuals and their actions, the social environment, and the spatial environments are complex, and as we add in virtual environments that may change behaviour, we may need to look towards additional learning theories that better encapsulate how this learning happens.
- Scavarelli, A., Arya, A., Teather, R.J., Wakelin, R., Gauen, S., McCann, J., “Exploring the Inclusive Design and Use of Social Multi-Platform Virtual Reality for a Post-Secondary Gender Diversity Workshop,” 2024 10th International Conference of the Immersive Learning Research Network (iLRN), Glasgow, Scotland, 2024.
- Scavarelli, A., Arya, A., & Teather, R. J., “Circles: A Framework for Creating Inclusive Virtual Reality Learning Activities in Social Learning Spaces,” Immersive Learning Research – Academic, 1(1), pp. 1–11, 2024.
- Scavarelli, A., Teather, R. J. & Arya, A., “Exploring Selection and Search Usability Across Desktop, Tablet, and Head-Mounted Display WebXR Platforms,” 2023 9th International Conference on Virtual Reality (ICVR), 2023, pp. 505-514, 2023.
- Yong, A., Arya A., & Mantch M., "Indigenous Technology Empowerment Model: A Community-based Design Framework," 2023 IEEE International Conference on Engineering, Technology and Innovation (ICE/ITMC), Edinburgh, United Kingdom, pp. 1-9, 2023.
- Kroma A., Grinyer K., Scavarelli A., Samimi E., Kyian S. and Teather R.J., “The Reality of Remote Extended Reality Research: Practical Case Studies and Taxonomy,” Front. Comput. Sci., 2022.
- Blais, L., Qorbani, H. S., Arya, A., & Davies, J. "A Memory Palace for Brain Anatomy and Function Represented in Virtual Reality. International Association for Development of the Information Society," 19th International Conference on Cognition and Exploratory Learning in Digital Age (CELDA). 2022.
- Scavarelli, A., Arya, A., & Teather, R. J., “Circles: exploring multi-platform accessible, socially scalable VR in the classroom,” 2019 IEEE Games, Entertainment, Media Conference (GEM), pp. 1–4, 2019.
- Scavarelli, A., Teather, R. J., & Arya, A. “Towards a Framework on Accessible and Social VR in Education,” 2019 IEEE Conference on Virtual Reality and 3D User Interfaces (VR), pp. 1148–1149, 2019.
More information on Circles' related research
Within the 3D worlds of Circles all interactions aim towards single-click selections where possible as an exploration into how to make controls symmetric across all three supported platforms (Desktop, Mobile, and HMD). This may change as our user studies and user feedback propose more significant differences between the three platforms. As this is a learning framework is meant for use within social learnig spaces like classrooms and museums it is important that advanced functionality is hidden by default (i.e., hiding joystick movement in HMD VR so that unexpected users do not get motion sickness) and that the interactions are simple and intuitive. We are also inspired to reduce interactions to a form that could be controlled by a single user input for more extreme but significant use-cases.
NOTE: For navigation, we use the Aframe-Extras' "movement-controls" that support nav-meshes.
Interaction |
Default Desktop |
Mobile |
HMD |
Advanced Desktop |
Mobile |
HMD |
|---|---|---|---|---|---|---|
| Navigation | Checkpoint Teleport | Checkpoint Teleport | Checkpoint Teleport | Keyboard's WASD | On-screen Left Joystick | Click-in Left Joysick |
| Look | Left-Mouse Drag | Device Orientation | HMD Orientation | n/a | On-screen Right Joystick | Joysicks left/right (click-in for smooth) |
| Selection | Single Click | Tap | Raycast (laser pointer) | TBD | TBD | TBD |
| Manipulation | Non-Diegetic UI | Non-Diegetic UI | Non-Diegetic UI | TBD | TBD | TBD |
| Release | Single Click | Tap | Raycast Object | TBD | TBD | TBD |
- Clone repo
git clone https://github.com/PlumCantaloupe/circlesxr.git
- Though not necessary, Visual Studio Code is recommended to develop, run, and modify Circles. Additionally, VSCode allows you to easily open an integrated terminal to execute the terminal commands below. It also has many built-in Github features.
- Install mongo community server
- We also recommend installing the MongoDB command line tool so that you can access the Mongo databases via command line, though you can also use the Compass application. This is usually included with the mongo community server install.
- Install node/npm. NOTE: We recommend installing the "LTS" version of npm/node.
- Make sure you have Python installed (as some libraries may require Python to build this project with NPM)
- Go into project folder and install NPM dependencies
npm install
- Set up the Environment file
cp .env.dist .env(or just duplicate the .env.dist file and rename it as .env :)- Make any changes to your .env file that are specific to your environment
- Make sure that a Mongo instance is started and running, either as a service or via command line (see installation and running instructions for your specific operating system).
- Serve 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.
- Please note that due some insecurities around running WebXR (and this library) that we need to serve webXR content using https. Any easy way to do so using localhost is to use a port-forwarding tool like ngrok to run everything properly across all supported WebXR platforms.
- In a browser (recommend Chrome at this time), go to
localhost:{SERVER_PORT}/add-all-test-data(default islocalhost:1111/add-all-test-data) to add both models to mongo db and test users. Note that if you are using localhost your browser (Chrome at this time) may complain about your site re-directing assets to load via https and creating https mismatches so you may try other browsers (i.e., Firefox), or consider [highly recommended] using ngrok to serve up localhost as a remote https endpoint (note for WebXR to properly function on reality-based devices i.e. tablets or HMDs the content must served via https). Though ngrok works very well, please see here for ngrok alternatives. This will also allow you to easily test locally on other devices i.e., a mobile or standalone HMD device, and show your development to other collaborators via a publicly accessible URL.- NOTE: If you need to clean up or modify db contents use th MongoDB Compass Application or mongosh shell. For example, to drop the entire circles db (which you will have to do when we make changes to the db structure) use the following commands within the mongosh shell (the re-add data with
localhost:{SERVER_PORT}/add-all-test-dataurl):use circlesdb.dropDatabase()
- NOTE: If you need to clean up or modify db contents use th MongoDB Compass Application or mongosh shell. For example, to drop the entire circles db (which you will have to do when we make changes to the db structure) use the following commands within the mongosh shell (the re-add data with
- Login with one of the 3 test users when you enter
localhost:{SERVER_PORT}/, or as recommended above using ngrok,https://your_ngrok_url.ngrok.io/(there are also others i.e., t1, r1, p1, p2, p3){username}:{password}s1@circlesxr.com:passwords2@circlesxr.com:passwords3@circlesxr.com:password
- Open another instance of browser (or open incognito mode, or another browser)
- Log in with another user and have fun seeing each other!
Deploying Remotely: If you are planning on running this on a remote instance like AWS please see Networked-Aframe's instructions on doing so with WebRTC, including some notes from the Mozilla Hubs team on potential hosting costs.
- /explore (this is to see the list of worlds included here)
- /register (has been disabled for now)
- /profile
- /campfire
- /add-all-test-data (only do this once, or if you have deleted/dropped the database and need to re-populate test data )
Circles follows the ECS (Entity-Component System) programming design pattern that A-Frame follows, likely be familiar to Unity Developers.
Also note that Circles is built on several libraries, giving you additional functionality. The foundational libraries are:
- A-Frame, which is built on Three.js: This gives us a 3D engine specifically created for building multi-platform WebXR content using HTML and Javascript.
- Networked-Aframe: For quickly networking objects. To send simple message, and synching client states, see Circles Networking.
- Aframe-extras (controls and pathfinding). This library gives us additional multi-platform controls, including the ability to use nav meshes to limit movement within Circles' worlds.
- Aframe-Physics-System: Available for those that wish to include physics into their Circles worlds (see the "KIN_" worlds included as an example).
The general structure of the framework (and the Github repository) follows:
- The Server: Circles uses a javscript server [node.js] and all associated code relevant to the delivery of all HTML and JS content is can be found in this folder. app.js is the main file that connects to a javascript databse MongoDB for saving user information, and serves up Circles' html and javascript pages. Note that router.js is reponsible for creating appropriate paths to content, and controller.js is reponsible for connecting with the mongo database, and that much of the 2D html content (e.g., login and explore pages) are rendered with pug, which allows us to generate HTML and CSS via javascript. All files related to 2D HTML and CSS are found within the web folder.
- Circles Core: All core functionality of the Circles can be found here, including any constants or global functions, we would like to be able to access on both the server and client sides. This will be invisible to most developers. To simplify development for content we also modify code during the webpack project build before we serve it.
- Circles Worlds: All Circles' worlds are placed here. From here they are modified to include Circles specific functionality and copied into an untracked folder on the server.
- Circles Groups: All Circles' users are connected to others within the same "group" (or "room"), no matter which Circles world they are within. You can set this manually by adding
?group=YOUR_GROUP_NAMEmanually to the end of your Circles URL e.g.,http://127.0.0.1:{SERVER_PORT}/w/{YOUR_WORLD_FOLDER}?group={YOUR_GROUP_NAME}, or as recommended above using ngrok,https://your_ngrok_url.ngrok.io/w/{YOUR_WORLD_FOLDER}?group={YOUR_GROUP_NAME}. This group is then passed to the networked-aframe room property to connect users only to users within the same group..
Also note, that a ResearchSpace is currently in development for evaluating Fitts' Law selections and search performance. At this time the ResearchSpace, and the associated research components are local to the "ResearchSpace" world. After more extensive testing it will likely be moved to the Circles core.
There are dozens of components created for use within this framework that you can find in the components folder of this repo; but the following will likely be the most used, and thus the most significant.
Information on components available can be found under [docs/components].
Some useful core functions can be found in [docs/core/core-functions.md]
Circles core events can be found under [docs/core/core-events.md]
- To learn more about A-Frame development, I recommend checking out this brief introduction to A-Frame, and a brief tutorial that overviews some of the most common functionality.
- For a quick refresher on Javascript please see W3 Schools Javascript Introduction.
We can always learn more, and can always do things better. This framework is open-source under the MIT license in the hopes that it can be co-designed and extended by others looking for similar VR learning tools. To contribute, please make a new fork, or if already a collaborator, a new branch, add your changes into that new fork/branch and submit a PR (pull request). We can then review the changes and merge them into to this main branch for us all to use when ready.
Also, of course, if you have any formal or informal bugs, feedback, or suggestions please submit an issue.
🙏 grazie mille! 🙏
The following are several companions that have helped to bring this project into existence. Starting as a prototype for Oculus Launchpad 2018 to showcase Viola Desmond's story as a pioneer for Canadian civil rights, I wanted to recognize them for their early direction and support. Though this project is an extension of my completed Ph.D. research at Carleton University, I hope that their contributions in this open-source repository will also help inspire others as they have myself.
Thank you from an aspiring student of all things XR and learning, Anthony Scavarelli
To all those that helped along the way:
- Dr. Ali Arya, Research Advisor
- Dr. Robert J. Teather, Research Advisor
- Favour Diokpo, 3D Artist
- Virginia Mielke, 3D Artist
- Nathaniel Parant, Storyteller
- Jessica Alberga, Journalist
- Julie McCann, Journalist
- Grant Lucas, Web Developer
- Tetsuro Takara, Web Developer
- Heather Hennessey, WebXR Developer