# RemixVR [![codecov](https://codecov.io/gh/teliportme/remixVR/branch/master/graph/badge.svg)](https://codecov.io/gh/teliportme/remixVR) ## RemixVR RemixVR is a tool to collaboratively build editable VR experiences. The editable VR experiences are called VR templates. Anyone can create a VR template. Each VR template will have configurable options that can be selected by the user. These options allow the user to create custom VR experiences from a single VR template. ![RemixVR](https://media.giphy.com/media/KZfKUhK06Gc8KL0O6Y/giphy.gif) For example, let's look at the [ObjectsVR](https://github.com/teliportme/remixVR/tree/master/templates/packages/objectsvr) template. It has three options. You can change the object, the 360 background and the sound it creates when hovering on the object. In the initial version, these options are updated by editing the code. However, as we continue to develop RemixVR, we'll be including a visual way to update the options. ### Getting Started These instructions will get you a copy of the project up and running on your local machine for development and testing purposes. ### Documentation You can read [RemixVR docs](https://docs.remixvr.org/) to view all the documentation about the project. ### Demos * [Atomic Bohr Model](https://bohrmodel-remixvr.netlify.com/) * [360 VR](https://360vr-remixvr.netlify.com/) * [Particles VR](https://particlevr-remixvr.netlify.com/) * [Objects VR](https://objectsvr-remixvr.netlify.com/) ### Installing RemixVR To install and setup RemixVR, please see the [installation guide](/installation#steps-to-setup-remixvr-on-your-computer). #### Running a VR template Once you have installed all the dependencies, to start a VR template, go to the template folder and in the terminal run `yarn start`. For example, to start the ObjectsVR template, go to the template folder. ```bash cd packages/objectsvr ``` Once you're inside the template folder, then start the development server. ```bash yarn start ``` You can view the template by going to `http://localhost:8080/` on your browser. ### Running the tests To run the test, navigate to the root folder of remixVR. Then run: ```bash yarn run test ``` The test files are present inside the template folder. The test files ends with *.test.js* in their file name. You can look at [ObjectsVR test](https://github.com/teliportme/remixVR/tree/3bfcac83b55bf003900a1b90e61a49466b3a5bf4/templates/packages/objectsvr/objectsvr.test.js) file to see an example. ### Built With * [a-frame](https://aframe.io/) * [webpack](https://webpack.js.org/) * [karma](https://karma-runner.github.io/) * [mocha](https://mochajs.org/) * [chai](http://www.chaijs.com/) * [sinon](http://sinonjs.org/) ### Contributing Please read [CODE OF CONDUCT](https://github.com/teliportme/remixVR/tree/3bfcac83b55bf003900a1b90e61a49466b3a5bf4/CODE_OF_CONDUCT.md) for details on our code of conduct. Please read [CONTRIBUTING GUIDE](https://github.com/teliportme/remixVR/tree/3bfcac83b55bf003900a1b90e61a49466b3a5bf4/CONTRIBUTING.md) before contributing. ### Versioning We use [SemVer](http://semver.org/) for versioning the VR templates. ### Authors * [**Rison Simon**](https://risonsimon.com) See also the list of [contributors](https://github.com/teliportme/remixVR/contributors) who participated in this project. ### License This project is licensed under the GPL v3 License - see the [LICENSE.md](https://github.com/teliportme/remixVR/tree/3bfcac83b55bf003900a1b90e61a49466b3a5bf4/LICENSE.md) file for details. # Installation How to setup RemixVR ## Before you start There are couple of things you need to understand about how RemixVR is setup before you start. There are 3 main parts to RemixVR. 1. [Frontend](/installation#frontend) 2. [Backend](/installation#backend) 3. [Templates](/installation#templates) In the next section, you can see how to setup each part of RemixVR on your computer. ## Steps to setup RemixVR on your computer ### Prerequisites To make sure the projects runs on your machine, you need to have the following items installed on your machine. #### Downloading RemixVR First, we need to clone this Github repo and open the folder. ```bash git clone https://github.com/teliportme/remixVR.git cd remixVR ``` Once you're inside this folder, you can see 3 main folders which you should be aware of. 1. Frontend 2. Backend 3. Templates #### Frontend * Node.js * Yarn [Install node.js](https://nodejs.org/en/download/package-manager/) on your machine. We'll be using node.js for running our development server and building our project using [webpack](https://webpack.js.org/). We'll use [yarn](https://yarnpkg.com/en/) as our [dependency manager](https://yarnpkg.com/lang/en/docs/managing-dependencies/). If you don't have `yarn` on your machine, make sure to [install yarn](https://yarnpkg.com/en/docs/install). Once these are installed, go into the frontend folder. ```bash cd frontend ``` Here we have to install the dependencies. ```bash yarn install ``` This will download the project dependencies to `node_modules` folder. Once it is complete, you can use the following command to start the frontend. ```bash yarn start ``` The frontend part of RemixVR will now be available at . #### Backend * Python 3 * Virtualenv For RemixVR backend, we're using [Flask](http://flask.pocoo.org/) framework. To install flask and all the dependencies, make sure you have Python 3 installed on your computer. If you're not sure you have Python installed, you can run the following command in your terminal. ```bash python --version ``` If you have Python 3 installed, you'll get something like `3.x.x` as the result. If you get an error saying Python is not installed or if the Python version is `2.x.x`, then [install Python 3](https://realpython.com/installing-python/). Once you're ready with Python on your computer, you can go to the *backend* folder inside RemixVR directory. ```bash cd backend ``` Once here, we'll first setup [`virtualenv`](https://virtualenv.pypa.io/en/latest/) for our project. To install `virtualenv`, run the following command. ```bash pip install virtualenv ``` Once you've installed `virtualenv`, create a new environment inside the `backend` directory. ``` virtualenv env ``` This will create a new folder called *env* which will save all the python dependencies there. Once the setup is complete, you'll need to run the following command to start using the correct dependencies in *env* folder. ```bash source env/bin/activate ``` Now you're ready to install the rest of Python dependencies. Since we're using `virtualenv`, Python will use the version of dependency specified in *env* folder for our project. When we finish working with backend, we can stop using the dependency versions in *env* folder by running the following command. ```bash deactivate ``` If we didn't use `virtualenv`, then all the dependencies will be shared with rest of the python projects, which makes it difficult to use correct version of dependency for your project. Inside *requirements* folder, you can see there are two files, called *dev.txt* for development environment and *prod.txt* for production environment. For our local machine, we'll download the dependencies in *dev.txt.* This includes additional packages used for development, compared to production environment. ```bash pip install -r requirements/dev.txt ``` Once the installation is complete, all the backend dependencies for your project are installed. There are couple more steps needed before we start our application. First, set your app's secret key as an environment variable. For example, add the following to `.bashrc` or `.bash_profile`. ```bash export remixvr_SECRET='something-really-secret' ``` Before running shell commands, set the `FLASK_APP` and `FLASK_DEBUG` environment variables ```bash export FLASK_APP=/path/to/autoapp.py export FLASK_DEBUG=1 ``` {% hint style="warning" %} In the above command, make sure FLASK\_APP points to *autoapp.py* in your backend folder. For example, `/projects/remixVR/backend/autoapp.py` {% endhint %} Run the following commands to create your app's database tables and perform the initial migration ``` flask db init flask db migrate flask db upgrade ``` To run the web application use: ``` flask run --with-threads ``` This will start the backend at #### Templates Templates in RemixVR is what makes VR possible inside RemixVR. All the VR based code lives inside templates. To develop on templates shipped with RemixVR, you need to go inside *templates* folder inside *remixvr* directory. ```bash cd templates ``` The templates in this directory share the dependencies in a common `node_modules` folder by using [yarn workspaces](https://yarnpkg.com/lang/en/docs/workspaces/). This reduces the amount of space used by dependencies when common dependencies are involved. Once inside *templates* folder, run the following command to install the dependencies. ```bash yarn install ``` All the templates are placed inside *packages* folder inside the *templates* folder. ```bash cd packages ``` Inside *packages* folder, you can see the a folder for each of the template. You can go to any of the folder (*for example, 360vr*) and run the following command to open the template in development mode. ```bash cd 360vr yarn start ``` This will open the VR template in development mode inside your browser. You can run the following command to build the template and get it ready for production. ```bash yarn build ``` To learn more about templates and about how to create VR templates, you can learn them at [Template section](/templates). # Templates RemixVR offers VR templates to help you create VR experiences faster. The best way to understand VR templates is through an example. Let's say there is a VR template for creating a VR tour. The scaffolding for the VR tour is the VR template. This template can be used to create other VR experiences. The photos or any media added in the VR tour is part of the VR experience. The VR templates simplifies creating similar VR experiences and makes it easy for anyone to get started with VR experiences. Perhaps the biggest advantage is that when a VR template is created, it can be used to create a lot more VR experiences. For example, if a teacher wants to create a virtual field trip to pyramids in Egypt, she can get started by adding images to VR tour template and quickly use it in her class. The same VR template can be used by another teacher to create a field trip to Peru. Although the content and the images are changed, the basic structure is similar. This basic structure is extracted to create a VR template. And if they choose to make these VR experiences public, it can be reused in classrooms around the world. The flexibility and options in a VR template is totally upto the developer. Anyone can create these VR templates with a few lines of code. These templates will help others to customise their VR experiences for their classes. ## How do I create a VR template? You can create a VR template by writing a few lines of code. While RemixVR does not limit you to a certain framework, our recommendation is to use Aframe since it makes it easy to get started and encourages the use and reuse of components which in turn helps the community. Let's create a simple VR template to see how it works. With this template, we'll create a simple 3D model viewer. So anyone can add a model to the scene and use it for any purpose. In this tutorial, we'll be using Aframe. ```markup ``` In this simple VR experience, we've added a bear model to the scene. We'll be able to see a bear in our VR scene. Right now, anyone can update the model in the scene by changing a few lines of code. In the future, there will be more non-coder friendly way to update the VR template and publish it without touching code.