Unity Template for Importing Prototypes for 3D/VR Testing

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 future of spatial design with high-fidelity prototypes made for 3D and VR environments! As a designer, you know that it's crucial to test and refine your prototypes in as many realistic scenarios as possible. With ProtoPie Connect, you can now seamlessly integrate with top-tier VR headsets, such as the Meta Quest (Oculus), and the recently unveiled Apple Vision Pro. This template ensures your designs achieve their full potential, even without any coding experience.

Gone are the days of time-consuming and complex processes of bringing your designs into Unity 3D. We've simplified how to import high-fidelity prototypes made with ProtoPie for you. Whether you're an experienced designer or just starting, this template 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

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=transparent" 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=transparent
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=transparent at the end of the URL. For example:
  • http://192.168.1.4:9981/pie?pieid=2&bg=transparent
  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!