Getting Started with Patches

In this series of blog posts, we're going to walk through the basic functions of using Patches 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 Patches 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 patches.vizor.io/examples/ball

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

Main Toolbar

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

Status Bar

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

Objects & Patches window

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

Patches Editor View

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.

Program & Build modes

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

The contents of the Ball 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

Patches is still a beta release, and we do not have proper documentation for it yet, but there are several options if you get stuck. The best 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. Patches will publish your file at patches.vizor.io/yourusername/filename

Opening a published project on your desktop

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 patches.vizor.io/yourusername

Opening a published project on your mobile device

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.