scribble

Alocaly

News Word Prospector Chasseur de mots Cardboard VR Other About Us
‹
›

01 May 2016
A Web Vr Editor

I wanted to have the simplest and fastest way to create some VR for people with limited material at their disposal ( no website, no fancy developer tools, and only cardboards… ).

My Goal

To help people of my team (at work) experiment with VR, I wanted to give them an easy - and fast - way to create some VR. I wanted them to be able to create something fast on their computers, and then check it on their personal phones with cardboards.
As our computers are on the company network, I couldn’t just ask them to create a local website : their personal phone won’t be able to access it.

How I did it

So I took the ThreeJs (nicely) created by MrDoob : http://mrdoob.com/projects/htmleditor/
This editor is a web page containing a iFrame and exposing the code of the iFrame, that the user can change to make its own creation.

And I hacked it for my goals :

  • I changed the default program to add Vr specific code
  • I rearrange this code to separate the world creation / update parts that people are more likely to work on
  • I modified the way the editor is hidden because it prevented the mouse to use the orbit controls.
  • In the main page, I added some specific code for the phone version :
  • no editor nor toolbar is displayed
  • the sleep / wake lock is disabled once you touch the screen( because screen that is turning off while in VR is annoying :)
  • The iFrame goes in fullscreen once you touch the screen.

Then I wanted to find a way to have a correct iteration time.

This editor basically works by creating a specific URL containing the whole iFrame code ( so it’s a very long URL ).

The simplest way to send this URL from the computer to the phone is to send a mail :)

For Android specically, I wanted a better way : With adb, it’s possible to open a website on your phone from the computer !
That sounded great !
>adb shell am start -a android.intent.action.VIEW -d http://alocaly.com

So I added a button next to the share button, named adb, to create this specific string, with the long URL…
But it failed… adb command are limited to 1024 characters, and my most basic program is more than 1024 character long.

I finally found another way - thank you, Google and StackOverflow - by pushing a shell file on the phone, that will launch chrome with the correct address :
Basically, here are the commands to execute (on Windows, BTW ): >echo | set /p=am start -n com.android.chrome/com.google.android.apps.chrome.Main -d +_link_to_the_vr_scene_ > website.sh >adb push website.sh /data/local/tmp >adb shell sh /data/local/tmp/website.sh

So now the ‘Adb’ button on the WebVrEditor creates the string with these commands, that you can then copy and paste in a command Window.
It will then request the phone to display the correct page in chrome.
So it just works !
:)

I’m a bad guy

Actually I went against the nice editor made by MrDoob.
The beauty of his editor is the code you have on your screen is exactly what you need to have the result in the background. So you can copy it, put it wherever you want, and it just works !

My editor is not like that for two reasons :

  • The code for going fullscreen and dealing with the wake lock is not included in the iFrame code ( I could add it, but it would make some even longer URLs )
  • The MdDoob editor uses a online three js library accessible everywhere : http://cdnjs.cloudflare.com/ajax/libs/three.js/r57/three.min.js. But I don’t know where I can get the stereo effect and the specific controls in a reliable way on the net ( if you have some suggestions… )

Actually, the end result is here, and I think it will work well enough for what I want.

WebVrEditor



Alocaly at 18:00

scribble