Patches Tutorials

Embedding Patches Content on your Website

Esa Ruoho — Wed, 15 Nov 2017 11:59:18 GMT

So you're looking to embed a Patches project to your website? You're in luck.

Getting the embed code is incredibly simple. Just publish a public project, open it and click on the Share-icon.

By clicking on it, you will open up a "Share this" dialog-window. At the bottom of this dialog-window you will see an arrow left of the "Embed code" text. Click on it.

Select the Embed code by clicking on it, and copy it to your clipboard.

You can add this code to any HTML Code block you might have accessible to you on various blogging platforms. Simple.

However, we receive far far far more questions on how to tweak the embed to your preference.

To comprehend what's going on, let's look at a typical public published Patches project.

The elements of your Patches project

When viewing a Patches project as an embed on your browser, your attention might be drawn to the icons at the bottom of the screen:

The Vizor logo
The name of the project
The name of the user that published project
The VR icon to enter VR
The Fullscreen icon to enter Fullscreen
The Edit icon to duplicate the project and edit it in the Patches editor
The Share icon for sharing the URL or getting the embed code

These seven elements are referred to as the header. Not everyone wants to see these, or show them to their clients.

Luckily we have a solution for this issue! All you have to do is add a few words and characters to the embed code and we're there!

In order to hide the header - removing all the controls (VR, Fullscreen, Edit, Share), just add noheader=true.
If you want to start playback of the project - just add autoplay=true at a specific segment in the embed code.
If you want to play around with aspect ratio and proportion, put in your desired width:height, for instance data-aspect="1.33". If you don't add any data-aspect settings, the iframe will default to the standard 16:9 aspect ratio.

These allow you to go from the rigmarole below

to not having to press Play to start the project and never having to see those icons again.

Note: If your Patches project is playing audio, and you embed more than one on your website with autoplay=true, you're going to experience artistic cacophony. Beware!

Embed-what? I'm not a coder! Help!

While the above might seem complex, it's actually something even us mere mortals can tackle. Let the customization begin.

Now, visit your published public project and click on the Share -icon again, and copy the embed code to your clipboard and from there to your blog-post.

Here is an example of an embed code:

In order to hide the interface buttons (VR, Fullscreen, Edit, Share), you can modify the code to look like this:

As you can notice, the only real difference is the added ?noheader=true. The question mark is a part of the universal query syntax.

If you were to wish to add automatic playing into this project's embed code, you would have to add &autoplay=true behind the ?noheader=true.

Witness the result:

Maybe you just want the project to start playing immediately, but would prefer to keep seeing the icons on the header. In that case, you would remove noheader=true& and just retain the ?autoplay=true.

Simple!

P.S. Pay very close attention to autoplay=true - if there is music in the Patches project you wish to embed on your page, be kind and courteous and only set autoplay to true if you are absolutely sure the visitor will not freak out. Also, unless if you are creating an artistic project with multiple embeds emitting sound at the same time, be wary of having more than one sound-source on a website, lest you overpower the visitor with walls of sound.

Here is an example of a functioning embed that automatically starts loading when you enter this blog-post:

Have fun embedding, and join our Public Slack in case you have some questions on your mind or wish to share your amazing Patches project embed.

Multi-user editing of a roomscale VR scene

Idia Erharuyi — Mon, 16 Oct 2017 08:49:19 GMT

Vizor at the 55th New York Film Festival

We got invited to present an interactive VR piece at this year’s New York Film Festival, more precisely at the Convergence sub-event, which is meant to showcase new forms of digital storytelling. The event was held at the Lincoln Center for Performing Arts on the final weekend of September 2017.

Our project for the festival was called Virtual Jockeys (or Reality Jockeys), where we manipulate the VR environment in real-time, while the user is immersed in it. The idea was to show how the virtual space can be a dynamic canvas that we can improvise on, similarly to a DJ selecting music or a VJ selecting visuals. This is made possible by the multi-user editing feature that we already have in Patches. It’s not a well documented feature, so it was a nice challenge for us to put it to use in a real live festival setting.

How the experience works

The idea was to use two computers (in this case laptops) for the experience, one for the VR viewing, and another for the real time editing using the multi-user editor in Patches. This works by making a duplicate of the project and then sending that URL to the other computer for it to be edited at the same time as it is viewed in VR.

The experience starts from a room with a few objects and a clickable light switch. The viewer can turn on the lights and get adjusted to the roomscale VR space by walking around a bit. The viewer is asked what colors they would like for the armchair, walls and shelves, and they will be changed in real time from another computer. These settings can be found inside the ROOM patch in the project.

After the custom colors, we add a few more items to the scene by toggling on the visibility parameter in the material patch of the object. Because it was a Film Festival, these items are movie references and we asked if the viewers recognized them. Adding new items by drag and drop always caused severe frame rate drops and tracking issues, so the visibility toggle was the safest option to not cause the VR view to lag when adding items to the scene.

When the TV and Mask are visible and the viewer has interacted with them, the lights are turned off and the radio will be toggled on. The radio can be clicked on to start the music. The final object is the Red button, which opens the room wall and window for the second half of the experience.

![Open space] (https://d2mxuefqeaa7sj.cloudfront.net/s_387A3FD3B85494168B055066E46586A705FF4D86F58995471ED1068D68750957_1507892907515_image.png)

The second phase of the experience opens a large landscape of mountains and a space sky. The control panel on the rails has 3 clickable buttons, which the viewer can press. The yellow button hides the room and gives you a better view of the landscape. The red button tilts the landscape up slowly, and the blue button resets the tilting. After the buttons, the editor can start adding art visuals little by little.

The landscape has several different art visuals to be toggled on. The galaxy will be made visible first by increasing it’s opacity, which makes it look like it fades in to the landscape. Next the mountains should be turned off and planet turned on so that the viewer can look down to see the planet Earth. Then add the giant exploding flowers and finally before the music ends add the flying manta rays. The viewer will have time to look around and enjoy the relaxing visuals.

The experience with all the objects visible can be found here: https://patches.vizor.io/nyff/nyff
The template with objects off can be found here: https://patches.vizor.io/nyff/nyff-template/edit

Well, how did it go?

Thanks for asking! It was a very positive experience for us. We did the demo for about 90 people during the course of 15 hours over 3 days. For the great majority of people there this was the first time they tried roomscale VR, and this particular piece was actually a good place to start. We had designed several things into the piece to make sure the viewer gets a good sense of presence, and happily it seemed to work.

The key moment in the piece is the transition from a closed indoor space to the open outdoor balcony - when this happened we managed to get a “wow” reaction from everyone. As the first part of the experience already gives you the feeling of presence in the room, when the second part is revealed the user had already suspended their disbelief and were happy just to relax and chill out to the 3D space visuals for a couple of minutes more.

After the experience ended, we published the piece individually for each visitor - this way they had a personal URL to the piece they could take home and share with their friends. We are happy to notice that these published URLs have been viewed quite a lot, meaning people did actually share and re-watch them.

We’d like to thank everyone who came to check out the piece, NYFF/Convergence for inviting us and a special shout out to our support team: Anna Rosa for coordinating the whole thing, Kschzt for the music, and Sketchfab users for some 3D objects we used (CC Attribution can be found in the piece). Full list of credits can be found here.

Import Google Blocks Materials to Patches

Idia Erharuyi — Tue, 15 Aug 2017 12:27:07 GMT

This tutorial shows how to import Google Blocks models with materials to Vizor Patches, and how to customize those materials.

First, plan on which objects you want to group as one mesh in Google Blocks, for example a landscape or a character. In the example used here, the whole landscape has been grouped into one mesh, and the fish are grouped separately. Grouping items in Blocks will result them exporting as one mesh, which will make modifying them much easier.

You can group objects in Blocks by selecting all the needed parts with the grab tool, and pressing the group button (A button in Oculus Touch).

Manage materials in Blender

Download the free 3D software Blender and download your Blocks file. Here’s the example used in this tutorial.

After downloading Blender, open it and you can simply click and delete the box in the new scene. Go to File > Import > Wavefront (.obj) and find your exported Blocks file.

Click on your imported mesh to select it. In this case all the landscape parts have been grouped so it selects all of the parts within. It also imports the materials, which in this case are simply colored Lambert materials.

To get a better look at the materials, go to the Materials tab on the right toolbar.

Here you can see each color you have used in Blocks as their own materials. The names can be confusing when modifying them later, so we’ll give them better names.

While having the mesh selected (yellow outlines on the mesh), press Tab on your keyboard to switch to edit mode, or select the edit mode below the 3D view.

If the mesh appears completely yellow/orange when you enter edit mode, it means all the geometry has been selected. Press A to deselect all. Now in the Materials menu, click on one of the materials and click on the Select button below the list.

This makes a selection to all the geometry that has this material, and in this case it’s all the rocks. We can now rename this material as “Rocks”. Double click on the material name to change it.

Now press A again to deselect everything, and repeat this step for the next material. Select, rename, deselect and so on.

If you used the transparent material in Blocks, you can see it better by switching the view to Material Shading.

Now the water appears transparent (although not very pretty) and we can see the fish and rocks underwater.

Export to Patches and modify materials

Select the mesh you want to export, and go to File > Export > Wavefront (.obj) and on the bottom left menu enable the following options:

Selection only
Triangulate Faces
Material Groups

These three options are not enabled by default, and are important for the object to display correctly in Patches.

The object exports into two files with .obj and .mtl file formats. Select both of these files and create a ZIP file of them with WinRAR or another archiving software.

Go to Vizor Patches and open your project or create a new one. From the objects patches list, drag and drop a 3D model into the scene to use as a base for your Blocks file.

The default 3D model appears as a flamingo.

To change the size of the object open the Inspector from the toolbar menu at the top of the screen. Change the Scale values to 1 or greater so that when you change the object it will be visible. The flamingo will appear gigantic, but no need to worry about that.

While still having the model selected, press Shift + Tab to enter the 3D model patch. On the 3D Geometry Loader click the change button and Upload the zip file of the exported Blocks model.

Now the model is imported with it’s correct materials. The default material is shiny and not very pleasing to look at, so the next step is to add material slots and change them.

Back inside the 3D model, search for Material Modifier and add it to the patch.

Connect the 3D Geometry Loader material to the Modifier’s slot, and the Modifier to the Mesh material. It looks like nothing has changed, which is fine, and now you can click Add Slot until you can see all of the materials you named in Blender.

With all the different slots, you can add a different material for each of them and they will change the parts of the mesh with those materials. It is highly recommended to use Nested Patches for each material, since there are so many of them. To do this, press 2 on your keyboard and name it after any of the materials.

Enter the patch by clicking the edit button, and when inside press 0 to add an Output. Name the output as material.

Now search and add a Standard Material patch and connect it to the material output.

Add a Color Picker and connect it to the color slot in the material. Now you can go back to the 3D model patch by pressing , (comma) and there you can connect the new material on any of the modifier slots you want.

The material changes and now you can modify it and see the results in real time. To reduce the shininess of the material, go back inside the material patch and press 3 twice to add two Sliders. Connect them to the Roughness and Metalness slots. Increasing the roughness makes it less shiny, and increasing the metalness makes the color darker. Play with these sliders until you’re satisfied with the result.

If you want to feel adventurous, you can also add a texture in the material. Search for Texture and add it, then click on it to browse the library or upload your own texture image. For seamless repeating textures it’s recommended to also add an UV Modifier patch. Connect the texture to it, and press 4 to add a number in it. Connect the number to u repeat and v repeat, and then connect the modifier to the material texture slot.

Back in the 3D model patch, you can simply copy and paste the nested texture patch for another slot and change it’s colors and textures, to avoid building it it all over from scratch.

To make a standard material transparent, add a Boolean Toggle patch in it and attach it to the Transparent slot. Switching the toggle on makes the material transparent. Press 9 to add a Knob patch and connect it to the Opacity slot. Use this to change how transparent the material is.

Play around with material settings for each of the slots in the model. When uploading other models into the scene, like the fish for example, you can copy and paste the patch of the first model and upload the new model into the 3D Geometry Loader. This way you can have the material modifier and materials ready without having to start them over.

Here’s the bridge model with materials and animations done in Patches: https://patches.vizor.io/lintu/bridge3/edit

The fish, bubbles and leaves have been exported separately to make it easier to animate them.

Here’s another version with textures added: https://patches.vizor.io/lintu/bridge-texture/edit

These kind of low poly models generally look better without texture, but it is fun to try them out. Feel free to look at the patches and copy the materials for your own use from these links.

Using 360 Video in your Patches Project

Esa Ruoho — Wed, 09 Aug 2017 11:14:00 GMT

Here is a tutorial for adding 360 Video to your Patches project.

We have tested this template using Safari on an iPad Pro running iOS 11 Beta. Note: iOS 10 and older are not supported.

You can also test your project on Google Chrome, Safari and Firefox on Mac OS X and Google Chrome on Windows.

Over the course of this tutorial, we will cover the following 360 video gear:

Ricoh Theta SC
Samsung Gear 360
Giroptic iO

Ricoh Theta SC

We will start off by using a video recorded using the RICOH Theta SC 360 camera.

Let's make sure the video is ready to be put into Patches. You have imported the 360 video file to your Mac or PC.

When playing the video on your computer, does it currently look like this? If it does not, move forwards in the tutorial to The conversion process. If, however, you are seeing two orbs, well, you're in luck, because we are going to fix that right now.

In order to prepare the video, you will have to load it into the RICOH THETA app and save it as an equirectangular video. The app makes it fairly simple.

When you launch the app, it will prompt you to Drag and drop the spherical image.

Disobey these instructions and drag in a video instead.

You're good to go! Just click on Start, wait for the conversion to finish and close the app. Now you have a equirectangular video and skip to The Conversion Process.

Samsung Gear 360

After importing the actual file from your camera to your computer, install the free Gear 360 app from Samsung (Windows, Mac OS X)

Click on the 360 player on the left.
Open up the Preferences of the app.

You will now see the location of where the stitched videos will be saved to. Change it to the folder you wish them to be saved to by clicking on Browse.

Exit Preferences.
Click on the + on the top of the window and select the file you wish to stich and process.

After you wait a while, your video will be stitched and processed.

You are now ready to begin The Conversion Process.

Giroptic iO

Since Giroptic iO can be directly connected to your mobile device, the stitching is done within the Giroptic iO app on your mobile device. Therefore all you need to do is transfer this video file to your computer by any means necessary, and begin The Conversion Process.

The Conversion Process

When uploading 360 video to Patches, we recommend using the popular .M4V format. In order to do that, you can install the free app Handbrake. After installation, follow these instructions:

Launch Handbrake and click on Open Source.
A file dialog opens. Select your equirectangular video and click on Open.
You can now click on the Toggle Presets icon on the top right corner to show the ready-made presets available in Handbrake.
After the Toggle Presets has been opened, pick the Apple 1080p30 Surround which is behind the Devices dropdown list.
Now click Start.
Wait for the process to finish.

Still with us? Your file is now ready to be added to the Patches 360 Video loader template.

Loading the 360 Video into Patches.

Now for the finishing touches of this project.

Open a browser window and bring up http://patches.vizor.io/examples/360-video/edit.
Press Tab to switch to the Program mode in Patches.
Remember to log in! Otherwise you will not be able to upload files.
Click on Source in the 360 Video object.
Click on the Upload tab in the File Browser.
Click on Browse and select your file.
Click on Open.
Begin the uploading process by clicking on Upload. After the successfully finishes, you are transported back to the Browser -tab of the File Browser. Your 360 video file will be automatically selected.
Click on Select to exit the File Browser and insert the video to the 360 Video Player -object.

Voilà! Your 360 video is now playing and the possible audio in the recording will also play. The video will play till the end and then loop.

We have added some controllers to control the video and the audio with. If the video should be flipped vertically or horizontally, click on the On/Off buttons. If you wish to silence the audio, click on the Audio On/Off button.

If you find that the video is tilted or otherwise requires more than simply horizontal/vertical flipping, fret not! We'll work on that too.

I made a perfect video but it's all diagonal and weird, I don't like my life. Help!

Exit the Program mode and switch to the Build mode by pressing Tab again.
Now press V to enter the VR Camera viewmode. (Alternatively, click on this icon on the bottom row)

While on this mode, click on the 360 video.

The appearance of the Move tool signals that you have successfully selected the 360 video.
Click on the Inspector on the top bar.

Start modifying the Rotation parameters until you are happy with where the camera is pointing and what the video looks like.

Are we good? Good. You are now ready to press Publish.

Press Publish and tell all your friends!

Thank you for using Patches.

If you're especially proud of your 360 video, join us on the Vizor public Slack channel at https://vizorvr.herokuapp.com. You could also post it on Twitter and mention @VizorPatches.

Import Google Blocks files to Vizor Patches

Idia Erharuyi — Wed, 02 Aug 2017 11:59:52 GMT

Download a model from Google Blocks.

Download and open the free Blender 3D software and select File > Import > Wavefront (.obj)

Find and import the object you downloaded from Blocks.

After importing your object, select all of it’s parts by pressing A on the keyboard.

Go to File > Export > Wavefront (.obj) and on the bottom left menu enable the following options:

Selection only
Triangulate Faces
Material Groups

These three options are not enabled by default, and are important for the object to display correctly in Patches.

The object exports into two files with .obj and .mtl file formats. Select both of these files and create a ZIP file of them with WinRAR or another archiving software.

Go to Vizor Patches and open your project or create a new one, and simply drag and drop your ZIP file into the scene.

Now your object should appear in the scene as it looked like in Google Blocks.

Make your 3D Objects Grayscale

Fthr — Thu, 20 Jul 2017 10:06:17 GMT

In today's quick tutorial, we learn how to turn a coloured 3d Object into gray-scale to match our grayscale project.

Launch http://patches.vizor.io/fthr/grayscale-character/edit
Press Duplicate.
Press Tab (switch to Program -mode).
Open Nested Patch Grayscale character.
Select only the Nested Patch Grayscale material.
Press Save Patch.
Save as Grayscale material.

Now you can use this Nested Patch to turn any object into grayscale.

Test this by opening http://patches.vizor.io/templates/3d-object-story/edit

Press K to see the first scene.
Navigate into and open the Scene 1: Beginning -Nested Patch
Add any object from the Object: Character -list.
Connect the Object to the Scene.
Enter the Nested Patch of the Object.
Search for Grayscale material on your Patches -list.
Add it to the editor.
Connect the Grayscale material to the Material -slot of the Mesh -object.
Connect the Texture to the "the texture" input of Grayscale material.
You can, if you want to, open the Grayscale material -nested patch and tweak the various sliders to your taste.

Patches 3D Object Story Template Tutorial

Idia Erharuyi — Wed, 05 Jul 2017 07:59:59 GMT

This tutorial shows how to use the 3D Object Story template to create a story with 360 photos, music and audio narrative.

More Patches tutorials can be found from https://techstart.github.io/.

Getting started

First, go to https://patches.vizor.io/templates where you’ll find the project named 3D Object Story.

The Start button begins the story and the Next buttons go to the next scenes. In the last scene the End button goes back to the Start screen.

Each scene has their own 3D object, which can be replaced and moved around.

To edit the template, click on anywhere in the experience and it will show icons in the middle. Click on the Pencil icon, which is the Edit button.

This brings you to the edit mode, where you can customize the project.

First, click on the Duplicate button at the top left corner on the toolbar. This will create a copy of the project for you to work on.

To switch between the Build and Program modes, you can either press Tab on your keyboard, or click on the Build and Program buttons on the toolbar.

In Program mode you will see the patches that contain all the content in the project. Patches are modules, which together combine a computer program. In this case the program is our template, which switches between four scenes.

In the middle are the patches for all the scenes. These purple patches are called nested patches, which means they have more patches inside of them. The blue “Switch Scenes” patch shows the scenes and switches between them.

To look inside the Scenes, click on the edit button on the nested patch (pencil icon).

After entering a nested patch, you can go back to the previous stage by clicking on the patch names in the Breadcrumb at the top right corner of the screen, below the toolbar.

More tutorials about Vizor basics can be found at the Techstart Github.

Changing the title texts

When you enter the Scene 0: Start screen patch, you’ll see the contents of that scene.

When you made a duplicate of the project, the title text may have disappeared from the view. You can get them back by reconnecting the blue text boxes to their patches.

To change the title and description, simply type your own text into the blue text boxes.
To view your project from the VR camera view, click on the camera button at the bottom right corner of the screen, or press V to switch between the VR and editor cameras.

Switching to VR camera lets you see how the scene would look like in a VR headset. Press Tab on your keyboard to hide the patches and see your scene.

Go back to the program view with Tab to see the patches. When you click on the Project Title or Project Description patches, you can see arrows appear in the scene. These arrows are the move tool, and you can move the text around to a place you like. Hide the patches again to click and drag the arrows.

If you cannot see the move tool in build mode, try to press H on your keyboard. This hides or shows all the tools in the view.

Changing the background color

To change the background color of the start screen, click on the edit button on the Background Sphere patch.

Inside you’ll find a Color picker, where you can change the color. Above it is a Texture patch where you can also upload your own texture image.

Replacing the 3D objects

To help with navigating the scenes, there are key shortcuts for each scene:

J = Start screen
K = Beginning
L = Middle
P = Ending

Press K to to see the Beginning scene with the green landscape and the Next button.
To change the 3D objects, go to the Scene 1: Beginning patch. There you can see several nested patches connected to a Scene patch.

In the Sky patch, you can change the color of the sky from the color picker patch.
In the Lighting patch you can change the intensity and color of the light.
The Floor patch has a color picker for changing the ground color.

All other patches below the Floor patch are the 3D objects in the scene.
Here is what a nested patch with a 3D object generally looks like.

Texture

To enable texture, connect the texture patch to the texture slot in the material. To add you own texture file click on the pencil icon on the texture to open the image file window. Here you can choose an image from the Vizor library, or upload your own. To upload your own image make sure you are logged in to your account and click on the Upload tab. Click on Browse to look for your own texture image on your computer, select it and click upload.

Color

Change the color of the object with the color picker

Mesh

The mesh patch combines the 3D object and materials together.

object3d: this is where more complex 3D objects would connect, like a model of a house or a car.
geometry: simple 3D geometry objects like a box, cylinder or sphere
material: the material for the object

To add new 3D objects to the scene, make sure you are in the Program view and in the Scene 1: Beginning patch.

If not already open, click on the Patches icon on the top right corner of the toolbar.

This open a window with a list of patches for you to use.

Here you can find 3D objects from any of the drop down menus labeled as “OBJECTS”.
Open any of the menus you’d like to try, and drag and drop an object to the program view.

If the patch you dropped in is minimized, simply click on the arrow to open it and then you can connect it into the scene.
The objects usually appear in the middle of the scene, right on top of the camera, so it is good to view it in the Editor camera (V) and move the object to a better place.
To select a 3D object, click on it and drag it around with the move tool arrows. If the arrows don’t appear, press M to activate the Move tool.

Other 3D object tools are Scale and Rotate. These can be found at the top left of the toolbar, next to the Duplicate button.

Hotkeys for these tools are M, S and R.
With Scale you can change the size of an object, and with rotate you can turn it in different directions.

Drag and drop any items you like into the scene to create your own scenery, and you can delete the template objects out of the way.

Adding audio tracks

Adding audio works the same way as adding images in the previous step of the tutorial.
Go to Root in the Program view, and go inside the Audio Control patch. There are three patches for music files, and three for audio narrative files if you have recorded speech.

To add music to the first scene click on the Source button on the blue Music1 patch.
This brings up a similar window as the image uploader, except for this you upload a music file. The second scene music is on Music2 and the ending is Music3.

To make the audio files work on most browsers and devices, it’s recommended to use .ogg or .m4a file formats. You can convert audio files to this format with free audio editor software, like Audacity for example.

Freesound.org is a good place to find royalty free music and other audio for your project. The music in the template are from there.

Scene timer

In the Root of the Program view, there’s a patch called Timer. This will change the scenes automatically without the viewer having to press the next buttons.
To enable or disable this, click on the On/Off button.

Under the On/Off toggle are three patches for the scene lengths. In these you can write numbers as seconds. Those seconds tell how long the scene will show before it switches to the next one.

For example, if you have a voice recording that is 50 seconds long, you can write that number on the timer and it will change the scene when the audio has played.

If you use the timer and want to disable the Next buttons, you can do so by disconnecting them from their scenes.

Publishing your project

To publish your project you have to be logged in to your account.
Click on the Publish button at the top right corner of the screen, and it will ask you to give your project a name and if you want to publish it as a Public or Private project.

It is good to publish your work after making major changes to the project, as it works like saving. You can then continue editing without losing any progress in case if the browser crashes for example.

After publishing, your project can be shared anywhere by simply sharing the URL.

Idia Erharuyi (Pixelface Oy/Vizor.IO)
idia@vizor.io

Feel free to check out our public slack for more conversation about Patches!

Uploading 3D Objects to Patches - Part 3

Idia Erharuyi — Mon, 03 Jul 2017 17:48:19 GMT

Patches

Uploading to Patches

To upload files to Patches you need to create an account at https://patches.vizor.io/. If you already have an account simply log in.

In this example the default scene will be used, but the same method works for any scenes like your own projects.

In the editor, look for a 3D object from the Patches menu. For example the 3D model from Objects: Basic menu.

Click on it and it will appear in the editor view. This model is a flying flamingo.

To replace the 3D model, select the model by clicking on it and press Shift + Tab to enter the model’s patch.

The dark blue patch 3D Geometry Loader is where you can upload your model. Click on the Change button. From the file window click on the Upload tab and click Browse to find your exported OBJ file.

When you have the file selected, click Upload and it will load your file. Click Ok at the bottom of the window to confirm the upload.

If the file appears invisible like in this example, it might be because of the object scale in patches.

To change the scale press Tab to hide the patches and click on the Inspector icon at the top right corner of the toolbar. This opens the Inspector with the object’s properties.

The scale here has been set to 0.01, which is why it’s too small to see in the view. Change the values to 1.00 to see the object in it’s original scale.

Now the object has it’s true scale which was defined in Blender.

Uploading textures

The example model in this tutorial had textures in it, so this part will show how to add a material to the object and upload textures in it.

Select the model and press Shift + Tab to open it’s patches. In the Patches menu search for a material, for example Standard Material. Drag and drop it to the scene and connect it to the Material slot in the Mesh patch.

The model now has shadows with the new material. To add a texture search for Texture in the Patches menu and drag it next to the material. Connect it to the Texture slot in the Stardard Material patch.

To upload your own texture click on the pencil icon on the texture patch, and similar to the 3D uploading, look for the texture file and upload it.

Different materials look different so it’s good to try out a few to see which one looks the best for you and play with the different material slot options for effects and better looking results.

* **[Uploading 3D Objects to Patches - Part 1](http://blog.vizor.io/uploading-3d-objects-to-vizor-part-1/)** * **[Uploading 3D Objects to Patches - Part 2](http://blog.vizor.io/uploading-3d-objects-to-vizor-part-2/)** * **[Uploading 3D Objects to Patches - Part 3](http://blog.vizor.io/uploading-3d-objects-to-vizor-part-3/)**

Uploading 3D Objects to Patches - Part 2

Idia Erharuyi — Mon, 03 Jul 2017 17:47:24 GMT

Blender

Import Files

Download the free 3D software Blender from https://www.blender.org/download/

After installing it, open it and you should see the default 3D view. Click on anywhere in the empty space to close the splash screen.

Before clicking on anything else, go to File > User Preferences

In this window go to the Input tab, and change the Select With option to Left. By default it’s set to Right click, which can be confusing when selecting objects. Click Save User Settings to save your changes.

If you are using a laptop or a keyboard without the Numpad, it’s recommended to check the Emulate Numpad option. This allows you to use the main 1 to 0 buttons similarly to Numpad keys.

Now you can close the settings window and click on the default box in the 3D view. You can remove it with the Delete button on your keyboard. The same can be done to the camera, which is the black triangle. The small dot icon on the right is the default light.

After deleting the box and camera go to File > Import and select Wavefront (.obj) or another file format corresponding the file you downloaded from Sketchfab.

Search for the file location, click on it and press enter. Now the 3D object appears in the empty scene. If the object appears to be huge like in this example, zoom out with the Middle Mouse Button (MMB) scroll to see it better.

To rotate the view click and drag with the MMB.
To pan the view press and hold Shift and drag the MMB.

Scale objects

If your file is large like this example, it’s good to scale it smaller. Select the object by clicking on it (the outline turns yellow), then press N to open the Transform properties window.

Take a look at the Scale and Dimensions. If all Scale values are 1 it means the object is in it’s original size. The Dimensions might be in Blender units by default, so it’s good to change them to Metric system to match the measures in Patches.

To change units, go to the Scene options at the far right menu, the third icon on the row.

Under the Units menu, select Meters from the drop down and change Length to Metric. Now the object measures show in meters.

To scale down the object, press S and drag your mouse to scale it down. Keep an eye on the Dimensions. To stop scaling, click anywhere on the screen to accept your new scale. For this example I scaled down the object until it was about 1 meter wide.

Change Object Center Point

Often when downloading Sketchfab files the object doesn’t have a center pivot point. This means it will be difficult to scale and move the object in 3D space, because the pivot point is somewhere outside the model.

To give the object a center point, move it by dragging the arrows until the area where you want the new pivot point to be is approximately at the center of the grid.

For easier object placement, press 5 on the Numpad (or main numbers if you have Emulate Numpad option on) to switch to Orthographic view. The numbers work as hotkeys for changing the view angle.

1 = Front
3 = Right
5 = Othrographic / Perspective
7 = Top
9 = bottom
Other numbers rotate the angle manually.

The orange dot is the object’s center pivot point. The goal is to move it to the center of the grid, where the red/white circle is located. This is the 3D Cursor which can be used to determine a new pivot point place.

To make sure the 3D Cursor is at the center of the grid, press Shift + C to reset it’s location.

At the far left menu on the screen is a drop down menu called Set Origin. If it’s not visible, make sure you are in the Tools tab at the top left corner of the menu. Click on it and select Origin to 3D Cursor. This changes the object’s pivot point to the 3D Cursor location.

Now the point has moved and is at the center of the object. This makes it easier to transform in any 3D scenes.

Decimate Objects

High resolution 3D models often have a lot of polygons, which is not ideal for the web. Blender has a simple tool for reducing the polycount while still keeping the geometry the same.

Select the 3D model (in this case the table) and in the far right menu go to the Modifiers tab, which has a wrench icon.

Click on the Add Modifier menu, and select the Decimate modifier.

Now the object has the Decimate modifier.
The eye icon displays or hides the modifier in the viewport. When it’s dark grey it’s enabled and shows the modifier. The Ratio is the amount of reduction you want to do. 1 equals 100%, which means there is no reduction. 0.5 is 50% and halves the polycount of the object. Click on the Ratio type the value you want to try and press enter.

For this example the ratio used is 0.45. Notice the difference in the amount of Faces under the Ratio. This shows how much geometry the object has after the reduction. Depending on how much the reduction is, you can see the change on the object in the view.

The most detailed part of this model changed to look slightly more simple. The best amount of Ratio is to have a value as low as possible but still keep the object almost identical to the original one. Making the value too low will start to break the object as it tries to find ways to reduce the polygons.

The modifier can be left on the list, or it can be applied to the object itself. Note that this will completely remove polygons from the object and won’t be undoable later on. To make the changes to the object, click on the Apply button on the Decimate modifier. The modifier then disappears from the list.

Export objects

The best file format to export for Patches is obj. To export your 3D object make sure your object is selected, go to File > Export and choose Wavefront (.obj).

This opens the browser window where you can name and choose where to export your file. The bottom left corner has Export OBJ options. From these options check the Selection Only and Material Groups options. Everything else is fine by default.

The export outputs two files: MTL and OBJ. The OBJ is the one needed for Patches.

* [Uploading 3D Objects to Patches - Part 1](http://blog.vizor.io/uploading-3d-objects-to-vizor-part-1/) * [Uploading 3D Objects to Patches - Part 2](http://blog.vizor.io/uploading-3d-objects-to-vizor-part-2/) * [Uploading 3D Objects to Patches - Part 3](http://blog.vizor.io/uploading-3d-objects-to-vizor-part-3/)

Uploading 3D Objects to Patches - Part 1

Idia Erharuyi — Mon, 03 Jul 2017 17:46:25 GMT

This tutorial explains how to download a 3D model from Sketchfab, how to optimize it in Blender, and how upload it into Patches.

Sketchfab

Download 3D Models

Find and download a 3D model from Sketchfab
Search for an object by typing the name to the search bar at the top.

In this example the search target is a table.
When you see the results, click on the View all results link.

Now you can see more search results. To make sure the object is downloadable, click on the Filters link at the top right corner above the search results.

This opens a list of filter options for the search. Click on Features and check the Downloadable option.

Now the results only show downloadable models, which you can use for your Patches project.

When choosing a model to download, the best file format is obj but other formats like blend or fbx can work as well, because they will be imported to Blender for editing. You can see the file format under Download Info at the 3D model page.

Download the model by clicking on the blue Download button below the preview.

Unzip the download file into a folder. Some downloads might include texture maps, others might only have the 3D model. This example includes textures.

To check how the model looks like, download and open Blender 3D software.

Animations and Interactivity in Patches

Idia Erharuyi — Sat, 01 Jul 2017 21:17:07 GMT

This tutorial shows how to add animation to a 3D object and how to toggle it on and off.

Object Mesh

First add a 3D object to your scene. In this example a default 3D model Flamingo will be used. Open the Program view by pressing Tab and go to Patches > Objects: Basic > 3D Model

While in Program view, drag and drop the 3D model to the Root or inside a nested scene patch. Connect the model to the Scene patch to see it in the viewport.

Press Tab to hide the Program view, and click on the 3D model to select it. Now press Shift+Tab to enter the 3D model patch.

This is a shortcut for pressing the edit button on the patch (pencil icon) and is useful if you have several objects in the scene and want to edit objects quickly.

Inside the object you can see a few patches. Open the Mesh patch to look at it’s slots.

This patch shows the 3D object in the scene. This tutorial goes through how to add animation to the object’s position, rotation and scale.

Add Animation

While still inside the 3D model patch, go to the Patches list and search for Toggle Sine Animation. Drag and drop this patch into the model.

The Sine Oscillator creates a looping animation between two values, which are the Min and Max values. This patch contains four editable slots.

Ray Up from Object: Choose an object which works as an interactive button for toggling the animation on and off.
Animation Speed in Seconds: How long the animation plays in seconds.
Min/Max: Minimum and maximum values for the animation.

The Float output will be connected to the position, rotation or scale slots in the Mesh patch. To be able to do this, it needs a converter patch between them to work. Connect Float to the X, Y and Z slots.

Press 7 on your keyboard to add a XYZ to Vector patch. This will convert the Oscillator values (Min/Max) into Vector format, which can be then attached to the Mesh. Connect it to one, two or all of the position, rotation and scale slots to see the animation.

The Min and Max values are set to 0 and 1, which means the object is animated between those values. The model moves 1 meter and then goes back to it’s original position at 0. You can add negative values like -5 for example to make it animate with more range. You can also animate only one or two of the XYZ coordinates to create more unique animations.

To change the interaction object for toggling the animation, select the object you want to use from the drop down menu on the Ray Up from Object patch. This can be any object in the scene.

In this example the toggle is the flamingo model, so when it is clicked the animation will stop. Clicking on the flamingo again continues the animation. To interact with objects, hide the Program view with Tab and press V to enter the VR Camera. Now press H to hide the grid and all other tools and enable interactions. Now the object can be clicked and it will toggle the animation on and off.

To change how fast or slow the object animates, change the value in Animation Speed in Seconds. The lower the value, the faster the animation will be. For example the value 5 means the animation plays in 5 seconds, and 1 means it plays in one second and will be much faster. You can enter any value expect 0, which will not play anything.

Examples

You can also have multiple Oscillators to have a different animation for different slots. Just leave the Ray Up the same to enable the animation toggle on the same object.

In this example the position and rotation have their own animations. Position is animated with X coordinate and rotation is animated with Y and Z.

When animating scale, it’s good to know that to keep the object in it’s own proportions, all the three XYZ coordinates should be animated. Otherwise it will make empty coordinate slots into 0 value, which will scale the object so small it’s invisible.

However, animating only two coordinates for scale can create fun 2D effects. It will leave one value to 0, making the object look flat like a paper.

Here’s an example where the animation is toggled from the pink cylinder. Clicking the cylinder starts or stops the animation.

Play around with the slots and values to find what works the best for your objects.

Patches 360 Photo Story Template Tutorial

Idia Erharuyi — Fri, 30 Jun 2017 07:39:04 GMT

This tutorial shows how to use the 360 Photo Story template to create a story with 360 photos, music and audio narrative. More Patches tutorials can be found from https://techstart.github.io/.

Getting started

First, go to https://patches.vizor.io/templates where you’ll find the project named 360 Photo Story.

The Start button begins the story and the Next buttons go to the next scenes. In the last scene the End button goes back to the Start screen.

Each scene has their own 360 photo, which can be replaced.

To edit the template, click on anywhere in the experience and it will show icons in the middle. Click on the Pencil icon, which is the Edit button.

This brings you to the edit mode, where you can customize the project.

First, click on the Duplicate button at the top left corner on the toolbar. This will create a copy of the project for you to work on.

To switch between the Build and Program modes, you can either press Tab on your keyboard, or click on the Build and Program buttons on the toolbar.

In Program mode you will see the patches that contain all the content in the project. Patches are modules, which together combine a computer program. In this case the program is our template, which switches between four scenes.

To look inside the Scenes, click on the edit button on the nested patch (pencil icon).

After entering a nested patch, you can go back to the previous stage by clicking on the patch names in the Breadcrumb at the top right corner of the screen, below the toolbar.

More tutorials about Patches basics can be found at the Techstart Github.

Changing the title texts

When you enter the Scene 0: Start screen patch, you’ll see the contents of that scene.

When you made a duplicate of the project, the title text may have disappeared from the view. You can get them back by reconnecting the blue text boxes to their patches.

Switching to VR camera lets you see how the scene would look like in a VR headset. Press Tab on your keyboard to hide the patches and see your scene.

If you cannot see the move tool in build mode, try to press H on your keyboard. This hides or shows all the tools in the view.

Changing the background color

To change the background color of the start screen, click on the edit button on the Background Sphere patch.

Inside you’ll find a Color picker, where you can change the color. Above it is a Texture patch where you can also upload your own texture image.

Replacing the 360 photos

To help with navigating the scenes, there are key shortcuts for each scene:

J = Start screen
K = Beginning
L = Middle
P = Ending

Press K to to see the Beginning scene with the blue grid and the Next button.
To change the 360 photo, go to the Scene 1: Beginning patch. There you can see the Texture patch where you can upload your own 360 photo.

Click on the pencil icon on the texture to open the image file window. Here you can choose an image from the Vizor library, or upload your own. To upload your own 360 image make sure you are logged in to your account and click on the Upload tab. Click on Browse to look for your own 360 image on your computer, select it and click upload.

Now you’ll have your own 360 image in the scene. Repeat this step for the Middle and Ending scenes. Switch between scenes with the J, K, L and P shortcuts.

Adding audio tracks

Adding audio works the same way as adding images in the previous step of the tutorial.
Go to Root in the Program view, and go inside the Audio Control patch. There are three patches for music files, and three for audio narrative files if you have recorded speech.

Freesound.org is a good place to find royalty free music and other audio for your project. The music in the template are from there.

Scene timer

Under the On/Off toggle are three patches for the scene lengths. In these you can write numbers as seconds. Those seconds tell how long the scene will show before it switches to the next one.

For example, if you have a voice recording that is 50 seconds long, you can write that number on the timer and it will change the scene when the audio has played.

If you use the timer and want to disable the Next buttons, you can do so by disconnecting them from their scenes.

Publishing your project

After publishing, your project can be shared anywhere by simply sharing the URL.

Idia Erharuyi (Pixelface Oy/Vizor.IO)
idia@vizor.io

Feel free to check out our Public Chat on Slack for more conversation about Patches!

Adding hotspots to your 360 photos

Fthr — Tue, 22 Nov 2016 12:24:53 GMT

There's a new category in the Objects/Patches menu of Patches: Hotspots. These will make it very easy for you to add pop-up cards that open up on interaction.

To create the basic pop-up card hotspot, just drag and drop the "Hotspot" item from the Objects menu to use it.

To change the contents of the hotspot, you have to into the visual programming side of Patches. Press Tab to show the patches. Then press the Edit icon of the "Hotspot" patch to see its content. From there you can see the three images that make up the hotspot - Open icon, the info card and Close icon. These are all just .png images. Press their edit button to upload your own.

You can move the hotspot to your desired location by using the Move and Rotate tools that you can find in the top toolbar of Patches.

Here's what the final result will look like in action.

There's also another hotspot called "Video hotspot". That one is quite self explanatory: instead of popping up an image, it will pop-up a video. Just like the image one, you can upload your own video. You may have to publish your project to see the video play correctly.

Happy hotspotting!

Managing your Projects in Patches

Matt Innes — Wed, 14 Sep 2016 10:18:45 GMT

If you're a power user of Patches, your user page has probably been getting pretty cluttered with all of your test projects. We still have some way to go, but we've just introduced some improvements to help you manage your projects, and control what you show publicly, and what you keep private. There have been quite a few changes, so we thought it best to explain what's new and how it can help you.

Getting Set Up

If you visit your user page, while logged in, in my case, that's patches.vizor.io/matt you'll see a new tab labelled Account Settings.

From here, we can:

add your name, used for a nicer appearance in Chat and on your user page
change your password
change your email address
add a short bio
put a link to your site, twitter, dribble, behance or whatever you like
set a user avatar, best above 200px square
add a background for your user page, best at 1400 x 450px
set the default publish type to public or private. This can be overridden from the Publish dialogue.
sign out or delete your account

Manage Privacy

It's not the perfect solution yet, but for now, we've divided Projects into Public & Private types. Public will show on your public page whenever someone visits it. Private is for drafts and sketches you are working on and would like to keep to yourself.

You still need to publish these (which is a bit odd) but you should keep the switch set to Private when you do. If you want to always make everything public the preference in Settings will allow you to make this your default. From your user page, you can also just create a project as one of those types from the start.

Trashing Stuff

Finally, we've also introduced some file management tools to the project tiles themselves. If you mouseover a project tile while logged in you'll see some new options. The trashcan icon allows you to delete old projects (yay!), while the switch allows you to make public projects private and vice versa.

This is very much a first iteration of these tools, so we'll be rolling out some more polish and changes again soon. Meantime, if you have any suggestions about improving things, I'd love to hear from you. You can find me on our Slack or you can email me directly — Matt at Vizor.io.

Creating Animation in Patches

Matt Innes — Mon, 05 Sep 2016 04:40:02 GMT

Patches does not have any tools for creating keyframe animations natively yet but this doesn't mean you cannot build animations with it! As it is built on top of the three.js library, it supports all the options in three.js, including boned, keyframe and morph animations.

In this tutorial, illustrator Jeremy Edelblut takes us through his process for importing keyframed animations from Blender.

Along the way, he will look at how to:

setting up Blender to export to the threejs JSON format
prepping your model & material for export to Patches
importing your animation to a Patches project
importing your material & applying it

He also has some tips on setting things up in Blender to get your models to import properly in Patches.

Here is his published Patches project:

Here are the resources for the tutorial.

download the assets for the Blender project here
get the Blender JSON importer from the three.js Github
download Blender here in case you need it

If you need some help, you can always ask us over on our Slack channel.