Getting Started with Vizor

by Matt Innes

In this series of blog posts, we're going to walk through the basic functions of using Vizor to create VR experiences on the Web. We’ll look at creating simple scenes in the world editor, importing & texturing models, setting up interaction with the patch system and publishing scenes. In part 1, we're looking at the basics of the interface. If you'd prefer a video walkthrough, you can start with the one below. And there are more at our YouTube channel.

The Tools

First you'll need to sign up. You can use Vizor and collaborate on a scene without this, but you can't publish or save your files. Once this is done, you'll find yourself in the World Editor.

Please open the example file at vizor.io/examples/ball

The interface elements you can see are the main Toolbar at top. Here is an outline of the toolbar functions.

Beneath that is the Status Bar, showing you which mode you're in, the file name, and the breadcrumb navigation for the Graph layer.

In the main screen, the World Editor. The windows we can see are an Objects & Patches window at left and a Chat window at right. You can drag objects or patches out of here into the scene (Objects) or Graph (Patches)

At the bottom right, a camera View Switcher, and at centre fullscreen and play controls. The VR camera is represented by the VR headset icon. The light is the globe icon you can see in the sky above.

Tip – you can move the VR camera to the current editor camera position by hitting = See all keyboard shortcuts by hitting ?.

You can control the editor camera with your mouse controls. Left-click and drag to rotate around the scene and change elevation. Zoom in & out with your mousewheel. Right-click and drag to move left-right and up-down.

Tip – you can click G to switch between normal and a concentric circular grid, useful for building scenes around the viewer

If you press Tab, or click Program on the info bar, you will see the graph layer. This is where you control and add interaction to the objects in your scene. Press Tab again to return to Build mode – this is where you can select, move, rotate and scale objects in the world editor.

Try selecting the ball object and moving it around, or scaling it. You can use the keyboard shortcuts for these (M)ove (R)otate and (S)cale. There are plenty more keyboard shortcuts, which you can see at any time by pressing ?.

Build and Program

Now press Tab to go into Program mode. In Program mode, we can see the Graph layer overlaid on the editor, and edit controls in the world are locked so you don't accidentally move things around while editing patches.

Patches in the graph layer need to be connected by cables, to ports on other patches. They can be expanded or minimised with the arrow on their left side. There are various patch types for different functions, and many patches are nested patches, meaning they contain other controls inside the patch. These patches are purple and have a pencil icon on top right.

Try clicking the pencil icon on the Ball patch. You should see the following inside the ball nested patch

To change the colour of the ball, click in the Colour patch, and drag to the colour you want. You can also enter a Hex or RGB value directly or copy and paste.

Look up at the info bar below the main nav. It shows you a breadcrumb trail for your location in the graph layer. Click Root to go back to the first level of your scene. Congratulations – you've just edited your first graph :)

Get Help

Vizor is still a beta release, and we do not have proper documentation for it yet, but there are several options if you get stuck. First is to try the global Chat channel. We're a distributed team, so there's quite often someone up in your timezone. We're happy to help, so try that first.

Another option, especially if you have deeper questions, or you'd like to get more involved, is to join our public Slack channel. And of course, as mentioned earlier, there is our Vimeo tutorials channel.

Publish and Share

To share (and save) your file, click the Publish button, and give it a name. Vizor will publish your file at vizor.io/yourusername/filename

You can open this on a mobile phone with Google Cardboard, or just share it on the web. Your files are also saved on your User Page, which is at vizor.io/yourusername

You can also share your scenes on Twitter and Facebook, with image previews.

Thanks for reading. We'll be back soon with Part 2, looking at importing textures and models and getting started with the graph layer.