01 May 2016

How to use the Wev Vr Editor

Here is how to use this Web Vr editor to get the most of it with a cardboard, and have a fast iteration cycle.

WebVrEditor link

The editor

The editor is basically the one created by MrDoob : http://mrdoob.com/projects/htmleditor/
It lets you write some code to create your VR world that is interpreted in the background.
You can probably just write some code in the init and the update part of the world.

Some specials keys :

• <ESC> : let you toggle code visibility. Use it to quickly see the result, and return to your code !
• Ctrl-S : let you save your code
• Ctrl-Enter: if you are not in auto update mode, let you update your code.

And that’s basically it.

When you save your code, it will be saved in the browser local storage ( so you can then close the browser and find it again later ).
Share creates an url containing your code, so you can send it and it will work everywhere !
You need to save your code before using the share option.

On the phone, the editor is hidden, so just have to enjoy it through your cardboard.

How to use with a phone

This editor basically works by creating a specific URL containing the whole 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 specifically, I wanted a better way :
You need adb ( Android Debug Bridge ) and the phone developer drivers on your computer.
Open a command window in a temp directory.
Then press the Adb button on the website, copy the selected text, and paste it in the command window.
It will automagically send a command to your phone to display the current page on your phone !

So the flow is basically :

• Tweak your code on Pc
• Press the ADB button on the Web Vr Editor
• copy the text and paste it a command window

Have fun and share your results !!

Some very simple exemples I made :
A small forest
A simple shader from ShaderToy
A sample from ShaderToy
(Original from ShaderToy)

Alocaly at 19:00