Self hosted Virtual Reality space with IdeaSpaceVR and Raspberry PI

5
(1)

Last Updated on 2nd January 2024 by peppe8o

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.

Virtual Reality accessories, starting from Google cardboard up to Oculus, had strong growth in the last years. Users can get VR content with their devices and experience realistic worlds from home. IdeaSpaceVR installed on Raspberry PI make you able to create your own virtual reality content and host them locally.

What is IdeaSpaceVR

IMPORTANT NOTE: at the date, the IdeaSpaceVR projects seems to be discontinued. So, you may need to install a older Raspberry PI OS in order to get it working.

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 navigating virtual reality spaces from a common web browser.

Oculus quest

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, and models). Some templates are free and already available with base installation (free).

You can install IdeaSpaceVR in your own host and customize your template based on a free theme, getting a complete 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 favourite e-commerce shopping cart all the needed hardware, so that at the end you will be able to evaluate overall costs and decide if to continue with the project or remove them from the shopping cart. So, hardware will be only:

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 your RPI, so headless installation can perform better.

Make your OS up to date. From the terminal, use the following:

sudo apt update -y && sudo apt upgrade

Install Needed Packages

IdeaSpaceVR docs refer 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 the 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 additional required packages:

sudo apt install php7.3-mbstring php7.3-gd -y

Enable mod_rewrite:

sudo a2enmod rewrite
sudo systemctl restart apache2.service

Create database and user (if not changed, mysql root has an empty password). Change ideaDB, ideaPassword and IdeaUser with your favourite credentials and consider these instead of mine in the following steps:

sudo mysql -uroot -p
create database ideaDB;
create user ideaUser@'%' identified by 'ideaPassword';
grant all privileges on ideaDB.* to ideaUser@'%';
flush privileges;
quit

check the latest IdeaSpaceVR version from https://www.ideaspacevr.org/download and download it to your Raspberry PI. You can manually download it and transfer it to RPI, or you can copy the download link and run a wget command like the following:

wget https://github.com/IdeaSpaceVR/IdeaSpace/releases/download/v1.2.2/IdeaSpace-1.2.2.zip

Unzip files in the 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 ./* -R

To get mod_rewrite working, we need to allow override for the whole html folder:

sudo nano /etc/apache2/sites-enabled/000-default.conf

append the 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 suggests using at least 256MB. I used it for my RPI (which has 1GB RAM) a value of 512MB. From terminal:

sudo nano /etc/php/7.3/apache2/php.ini

Identify and change the memory_limit parameter to your favourite. In my case:

memory_limit = 512M

Restart apache service:

sudo systemctl restart apache2.service

General Settings and First User

From here we’ll use a common web browser from a computer on the same network as our Raspberry PI. In the next screenshots, I’ll use my RPI IP address (192.168.1.238). Please use your own instead. With your web browser, navigate to URL http://<<YourRpiIPAddress>>, which will automatically redirect to “/install” page. Verify that all checks are ok and go ahead with the confirmation button at the end of this page:

IdeaSpaceVR install check

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:

IdeaSpaceVR install config

Enter info to create your first user by email address, password and username. This user will also be the administrator. Click then on “Install IdeaSpaceVR”:

IdeaSpaceVR install first user

Once installation is completed, your browser will be redirected to login page. Please remember that “/login” will be the URL address for your future logins to your dashboard (simply using IP address will redirect to a link-less page). Login with your just created user credentials:

IdeaSpaceVR install successfull login

Default IdeaSpaceVR dashboard will appear:

IdeaSpaceVR dashboard

Finally, before creating your first space, please go to Settings -> General page (in the 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 the following picture:

IdeaSpaceVR settings general token

Create Your First Virtual Reality Space

Virtual reality spaces are based on special images which create an illusion of a 360° panorama. This can be achieved with modern smartphones, but you can also download free jpg files by searching for “free 360 photos download” in your favourite internet search engine (like google, bing, duckduckgo etc.).

A plain photosphere will appear like the following:

bedroom 360 degrees photosphere plain example
Example of 360 degrees bedroom photo from https://pixexid.com/

So, start finding and downloading one or more free photosphere 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 file format, you need to convert it into one of these. Also, image file resolution and size (2MB) can be limited. You will get a warning in the 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”:

IdeaSpaceVR Theme install 360

Completed theme installation, go to Spaces -> Add New. The first question is to select a theme. For the moment, we have only 1 theme installed. Click “Select” in “IdeaSpace 360”:

IdeaSpaceVR Spaces add new

Start compiling Space Title and path. You can write whatever you want in the Title. The path has a pre-compiled prefix with your server installation IP, just add the final part (which will complete URL to reach your virtual space: For this example, you can use “test” both in the title and path.

Then click the “Add Photo Sphere” button to add your image:

IdeaSpaceVR New Space

In the next screen, only Title and Photo Spere are required. Enter your favourite title (for example “bedroom”) and click “Add Photo Sphere”:

IdeaSpaceVR add photosphere

Go to “Photo Spheres” tab and load your local files. In the following picture, I’ve already loaded 2 images. With your mouse, when moving the pointer over images you will get a sub-menu appearing. Use “insert” link in this menu:

IdeaSpaceVR add photosphere assets_2

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 the following picture:

IdeaSpaceVR test space

Repeat this process to load more photo spheres, if needed. With the “Preview” button on the left panel, you can already test your new space:

IdeaSpaceVR test Space

This is still a draft space, only you can view and test this space. To publish, use “Edit” link on the left panel (near “Status: Draft”), change the space status from draft to published and click ok. Finally, use “Update” button on the 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 a 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!

How useful was this post?

Click on a star to rate it anonymously!

Average rating 5 / 5. Vote count: 1

No votes so far! Be the first to rate this post.

We are sorry that this post was not useful for you!

Let us improve this post!

Tell us how we can improve this post?