Unity Template for Importing Pies into a 3D/VR Environment

Freddie Lee Creative Technologist
Freddie Lee, Creative Technologist
May 5, 2023
Unity Template for Importing Pies into a 3D/VR Environment

Importing ProtoPie Prototypes into Unity for 3D and VR Testing

Welcome to the world of high-fidelity prototypes in 3D and VR environments! As a designer, you know that it's crucial to test your prototypes in as many realistic scenarios as possible. However, the process of importing your designs into Unity 3D can be time-consuming and complicated, especially if you have no coding experience.

But worry no more! We have created a unique Unity template that simplifies the process of importing high-fidelity ProtoPie prototypes into Unity, making it easier for you to test and preview your designs in 3D and VR. In this guide, we'll show you how to use our template step by step, so you can start importing your prototypes into Unity today without any hassle.
Whether you're an experienced designer or just starting, our guide will make the process of previewing and testing your prototypes in Unity more flexible and interactive. So grab your ProtoPie prototypes, and let's dive into the world of 3D and VR testing!
Write your awesome label here.

Getting Set Up

Install 3D WebView Plug-in in the Unity Template

  1. Download the Unity template from here.
  1. Download and install Unity on your laptop or PC. The template project in this video was tested with Unity 2020.3.28. So if you would like to test it, we recommend installing this version or any long-term support version that came after it.
  1. Upon opening the template, a window will appear. You should select the "Ignore" option to proceed.
Select the ignore option to proceed
  1. Upon opening the template, you may notice that the CanvasWebViewPrefabs are missing from the project.
Missing part in the project
To resolve this issue, follow the steps below.
  1. Get the Vuplex 3D WebView for Windows and macOS plugin. This plugin allows for the embedding of web content in Unity.
Vuplex 3D WebView for Windows and macOS plugin
  1. In Unity, go to Assets > Import Package > Custom Package.
Go to Assets > Import Package > Custom Package
  1. Locate the Vuplex plugin that you downloaded from the official website and open it.
Locate the Vuplex plugin
  1. Once you have located the Vuplex plug-in, click on "Import" at the bottom right-hand corner of the screen.
Click on "Import" at the bottom right-hand corner of the screen
  1. After successfully loading the plug-in (.unitypackage), you should be able to see the CanvasWebViewPrefab objects in blue within the project. This means the package has been successfully imported.
The package has been successfully imported

Update Shader Code for Chroma-Keying (Background Transparency)

After completing the previous steps, the next task is to update the shader code in order to enable the chroma-keying feature. This will make the background transparent in a certain color range. Please note that while we are currently communicating with the original author of the Vuplex library to simplify this process, for now it needs to be done manually.
  1. To begin, from the toolbar click Assets > Show in Explorer.
Assets > Show in Explorer
  1. Then, locate the following path: Assets > Vuplex > WebView > Core > Shader. From here, open the file named "defaultWebShader.shader" in any text editor of your choice.
Find the defaultWebShader.shader file
  1. Locate and update the following code. You can directly copy the code from here.
Locate and update the codeLocate and update the code part 1

Load Your Prototypes into Unity

To get your prototypes into Unity, you'll need to grab the URLs of your prototypes first. If you're using ProtoPie Connect, here are some simple steps you can follow. But if you're using ProtoPie Studio, don't worry, you can upload your prototypes to the Cloud and still get the same results. Let's get started!
  1. Drag or import your prototypes into ProtoPie Connect. Below are the testing prototypes used in the video guide
Import your prototypes into ProtoPie Connect
  1. For each prototype, open it in your browser by clicking the monitor button next to your prototype.
Open in browser by clicking the monitor button
If you’re using an Oculus headset together with a Mac device, then the below steps will not be applicable. Please directly jump to Build Android Apps From the Template and Load It Onto Quest
  1. To make the webview background transparent, you'll need to find the URL of your prototype first. Then, simply add "&bg=rgb(0,255,0)" at the end of the URL. This applies to both local and ProtoPie Cloud URLs. For example:
  • Your original URL: localhost:9981/pie?pieid=2&name=Video%20Player
  • Your modified URL: localhost:9981/pie?pieid=2&name=Video%20Player&bg=rgb(0,255,0)
Revise the URL of your prototype
  1. Go back to Unity. From the Hierarchy window, locate Main Canvas > CanvasWebViewPrefab.
Locate Main Canvas > CanvasWebViewPrefab
  1. From the Inspector Window, find Initial URL (optional). Paste here the URL just copied.
Paste the URL in the Unity template
In the video guide, we paste the URL of Video Player into Main Canvas > CanvasWebViewPrefab, and the URL of Web Stripe into Side Canvas > CanvasWebViewPrefab.
  1. At this point, the template is ready to be launched. Simply click on the "Play" button and use your Quest headset to interact with the project.

Build Android Apps From the Template and Load It Onto Quest

Unfortunately, the Oculus Link connection is not available on macOS, so the live preview will not be accessible. However, you can still run this template by building it as an Android application and loading it onto your headset.
Solution for macOS
  1. Open ProtoPie Connect. At the bottom of the window (next to your username), find your local IP address.
Find your local IP address
  1. With the prototypes open in the browser, replace "localhost" in your URL with your actual IP address. For example,
  • Your original URL: http://localhost:9981/pie?pieid=2
  • Your revised URL: http://192.168.1.4:9981/pie?pieid=2

Please avoid using "localhost" for the URL when testing the app, as it will not work properly on a different machine. Specifically, when running the app on the Quest headset, the app is not running on the local machine (e.g., a Mac) where ProtoPie Connect is running.

  1. Append the command &bg=rgb(0,255,0) at the end of the URL. For example:
  • http://192.168.1.4:9981/pie?pieid=2&bg=rgb(0,255,0)
  1. Go back to Unity. From the Hierarchy window, locate Main Canvas > CanvasWebViewPrefab.
Locate Main Canvas > CanvasWebViewPrefab
  1. From the Inspector Window, find Initial URL (optional). Paste here the revised URL.
Paste the revised URL
In the video guide, we paste the URL of Video Player into Main Canvas > CanvasWebViewPrefab, and the URL of Web Stripe into Side Canvas > CanvasWebViewPrefab.
  1. Then, save your Unity project and navigate to File > Build Settings...
Navigate to File > Build Settings...
  1. Select Android in the side menu. If this is your first time running the program, you may need to download the Android module.
  1. Connect your headset to your device. Upon connecting your headset to a Mac or PC via USB, please ensure to select the "Allow" option when prompted with the window seeking permission for USB debugging or data access.
  1. To make your Quest headset appear on the Run Device menu on your Mac, simply click the “Refresh” button after connecting.
Click the “Refresh” button after connecting
  1. Once the Refresh command has been executed, the list of available devices will be displayed. Select your Quest device from the list (e.g., Quest 2) to proceed.
Select your Quest device from the list
  1. Choose a name for the APK file and click "Save.”
Name the APK file and click save
  1. Once the building process has been successfully completed, you will be able to immediately access the file on your Quest headset.
Access the file on your Quest headset

Simplify VR Prototype Testing with Our Unity Template Today

We hope this guide has been helpful in simplifying the process of importing ProtoPie prototypes into Unity 3D. With our unique Unity template, you can now enjoy more flexibility and interactivity in testing and previewing your designs in 3D and VR environments.
If you have any questions or comments about our template, please don't hesitate to contact our product specialists. We're always happy to help you get started with the best solution for your design needs. We look forward to seeing the amazing designs you create with it!