Import Google Blocks Materials to Patches

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.