Virtual Reality accessories, starting from Google cardboard up to Oculus, had a strong growth in last years. Users can get VR contents with their devices and experience realistic worlds from home. IdeaSpaceVR installed on Raspberry PI make you able to reate your own virtual reality contents and host them locally.
In this tutorial I’m going to show you how to install and configure IdeaSpaceVR on Raspberry PI and experience a fully customizable Virtual Reality environment hosted in your own small and cheap computer board.
Basically, IdeaSpaceVR is a free, open-source, self-hosted CMS platform. Built for creating, publishing and managing virtual reality and interactive 3D websites, it works with common VR devices like Oculus Quest, Oculus Go, Samsung Gear VR, HTC Vive, Google Daydream and Windows Mixed Reality headsets. It also allows to navigate virtual reality spaces from a common web browser.
IdeaSpaceVR manages spaces like blog posts. Each space is built from a theme (something like a base template) and can include one or more assets (like images, photo spheres, models). Some templates are free and alredy available with base installation (free).
You can install IdeaSpaceVR in your own host and customize your template based on a free theme, getting a comeplete VR environment running without any coding experience.
In this tutorial I will use a Raspberry PI 3 Model B+, but this procedure will work also with newer Raspberry PI models.
What We Need
As usual, I suggest adding from now to your favorite e-commerce shopping cart all needed hardware, so that at the end you will be able to evaluate overall costs and decide if continuing with the project or removing them from the shopping cart. So, hardware will be only:
- Raspberry PI (including proper power supply or using a smartphone micro usb charger with at least 3A)
- high speed micro SD card (at least 16 GB, at least class 10)
- Optionally, you can use a VR device instead of a simple web browser
Check hardware prices with following links:
Step-by-Step Procedure
Prepare Operating System
Start installing your OS. I suggest to install Raspberry PI OS Lite (for a headless, fast OS), but you can also use this tutorial with Raspberry PI OS Desktop (with a complete desktop environment, working from its internal terminal). Please consider that a desktop environment consumes resources in you RPI, so headless installation can perform better.
Make your OS up to date. From terminal, use following:
sudo apt update -y && sudo apt upgradeInstall Needed Packages
IdeaSpaceVR docs refers following server requirements:
- PHP (>= 5.5.9) -> to be installed
- OpenSSL PHP Extension -> included with php7.3 (post-installation check with php -r “phpinfo();” | grep OpenSSL)
- PDO PHP Extension -> included with php7.3 (post-installation check with php -r “phpinfo();” | grep PDO)
- Fileinfo PHP Extension -> included with php7.3 (post-installation check with php -r “phpinfo();” | grep fileinfo)
- Mbstring PHP Extension -> to be installed
- Tokenizer PHP Extension -> included with php7.3 (post-installation check with php -r “phpinfo();” | grep Tokenizer)
- GD Library or ImageMagick PHP Extension -> to be installed
- MySQL or MariaDB or PostgreSQL database -> to be installed
- Apache web server (or NGINX) with mod_rewrite module enabled -> to be enabled
- HTTPS protocol -> to be configured
We’ll install these requirements with following steps.
Please use install LAMP server tutorial to get Apache, MariaDB and PHP installed. You can freely choose to install or not phpmyadmin.
Once done, install addictional required packages:
sudo apt install php7.3-mbstring php7.3-gd -yEnable mod_rewrite:
sudo a2enmod rewrite
sudo systemctl restart apache2.serviceCreate database and user (if not changed, mysql root has empty password). Change ideaDB, ideaPassword and IdeaUser with your favourite credentials and consider these instead of mine in following steps:
sudo mysql -uroot -p
create database ideaDB;
create user ideaUser@'%' identified by 'ideaPassword';
grant all privileges on ideaDB.* to ideaUser@'%';
flush privileges;
quitcheck latest IdeaSpaceVR version from https://www.ideaspacevr.org/download and download it to your Raspberry PI. You can manually download it and transfer to RPI, or you can copy download link and run a wget command like following:
wget https://github.com/IdeaSpaceVR/IdeaSpace/releases/download/v1.2.2/IdeaSpace-1.2.2.zipUnzip files in apache default web folder:
sudo unzip IdeaSpace-1.2.2.zip -d /var/www/html/Extracted files are all inside an IdeaSpace-v.v.v folder. We need to move files outside this folded at html root, remove apache index.html template and grant permissions to www-data apache user:
cd /var/www/html/
sudo rm index.html # remove old index.html apache template
sudo mv IdeaSpace-1.2.2/* ./
sudo mv IdeaSpace-1.2.2/.[!.]* ./ # required to move also hidden files
sudo rmdir IdeaSpace-1.2.2/
sudo chown www-data:www-data ./* -RTo get mod_rewrite working , we need to allow override for whole html folder:
sudo nano /etc/apache2/sites-enabled/000-default.confappend following lines at the end:
<Directory /var/www/html>
AllowOverride All
Order allow,deny
allow from all
</Directory>Finally we need to increase php memory limit. Its default value is 128MB, but IdeaSpaceVR suggest to use at least 256MB. I used for my RPI (which has 1GB RAM) a value of 512MB. From termina:
sudo nano /etc/php/7.3/apache2/php.iniIdentify and change memory_limit parameter to your favourite. In my case:
memory_limit = 512MRestart apache service:
sudo systemctl restart apache2.serviceGeneral Settings and First User
Frome here we’ll use a common web browser from a computer on same network as our Raspberry PI. In next screenshots I’ll use my RPI ip address (192.168.1.238). Please use your own instead. With your web browser, navigate URL http://<<YourRpiIPAddress>>, which will automatically redirect to “/install” page. Verify that all checks are ok and go ahead with confirmation button at the end of this page:
Database credentials are now required. Fill Database Name, User Name and Password according to your ones. Leave default values on Database Host. If you prefer, you can set your own Table Prefix or leave default:
Enter info to create your first user by email address, password and username. This user will also be administrator. Click then on “Install IdeaSpaceVR”:
Once installation is completed, your browser will be redirected to login page. Please remember that “/login” will be address your future logins to your dashboard (simply using ip address will redirect to a link-less page). Login with your just created user credentials:
Default IdeaSpaceVR dashboard will appear:
Finally, before creating your first space, please go to Settings -> General page (in left sidebar) to set WebVR tokens. As Google discontinued WebVR trial token, looking in IdeaSpaceVR I found that these settings can be filled with whatever you want… So I used a banal “abc” string both for Token and Data Feature, while using a future date for Expiration as in following picture:
Create Your First Virtual Reality Space
Virtual reality spaces are based on special images which create illusion of a 360° panorama. This can be achieved with modern smartphones, but you can also download free jpg files searching for “free 360 photos download” in your favourite internet search engine (like google, bing, duckduckgo etc.).
A plain photo sphere will appear like following:
So, start finding and downloading one or more free photo sphere images. Please remember that IdeaSpaceVR will let you use only “jpg” and “png” files. If you have, for example, a jpeg file you need to rename it to jpg. If you have a different fil format, you need to convert into one of these. Also image file resolution and size (2MB) can be limited. You will get a warning in loading step if your file exceeds these limitations. However, you can reduce size/change file type with common graphic editors like Microsoft Paint, Pinta or GIMP.
Back to IdeaSpaceVR dashboard, before creating your first Space you need to activate at least a theme. Go to Themes, find “IdeaSpace 360” and click “Install Theme”:
Completed theme installation, go to Spaces -> Add New. First question is to select theme. For the moment, we have only 1 theme installed. Click “Select” in “IdeaSpace 360”:
Start compiling Space Title and path. You can write whatever you want in Title. Path has prefix pre-compiled with your server installation IP, just add final part (which will complete url to reach your virtual space: For this example, you can use “test” both in title and path.
Then click “Add Photo Sphere” button to add your image:
In next screen only Title and Photo Spere are required. Enter your favourite title (for example “bedroom”) and click “Add Photo Sphere”:
Go to “Photo Spheres” tab and load your local files. In following picture, I’ve already loaded 2 images. With your mouse, when moving pointer over images you will get a sub-menu appearing. Use “insert” link in this menu:
Back to “Add New Photo Spere” page, scroll to the bottom side and click “Save”.
Back to your test page, you should have something like following picture:
Repeat this process to load more photo spheres, if needed. With “Preview” button on left panel you can already test your new space:
This is still a draft space, only you can view and test this space. To publish, use “Edit” link on left panel (near “Status: Draft”), change space status from draft to published and click ok. Finally, use “Update” button on same left panel to save your project.
Enable HTTPS
This part is not strictly required, but suggested if you want to use VR devices instead of simple web browser.
You can create a self signed SSL certificate by using my Self Signed Certificate for Raspberry PI tutorial or Digitalocean self signed ssl certificate tutorial, excluding “Step 3 – Adjusting the Firewall” part (as Raspberry PI OS doesn’t use ufw).
Enjoy!
