Hey everyone!
We’re sure you’re all super excited about the recently announced Sipsmith x ZapWorks competition, so we’ve created an experience to offer some inspiration for your own competition entries.
With Studio 6 introducing world tracking to our already extensive feature list, we’ve made this the focus of our own inspiration piece by creating a world-tracked portal that lets you step into the Sipsmith Distillery.
You can download the experience’s zpp here to take a look at how it was built, and we’ve also made some notes below for you to refer to.
For those of you interested in building a world-tracked portal, but not necessarily looking to enter the competition, the example project is still a good place to refer to, though we are looking at adding this as a project/subsymbol template within Studio soon.
Scan the zapcode below to view the experience:
World Tracked Portal Notes:
Subsymbols: The experience contains six subsymbols, three of which are available as templates through the Symbol Definitions panel (Gravity Environment Light, Hotspot, World Tracking Ground Placement).
- World Tracking Ground Placement: This is the subsymbol in which we place content that we want to be world-tracked.
- Door: This subsymbol contains our 3D door, with the frame and door itself as separate objects so that they could be animated correctly.
- Gravity Environment Light: Contains an environment light which was necessary as our door uses lighting materials.
- Hotspot: The default hotspot template. Used to highlight points of interest within the photosphere environment.
- Age Gate: Contains a very basic age-gate with a binary Yes/No response to being over the minimum age requirement. This is merely a demo for the experience and is not recommended to be used for complete experiences.
- Cube Mask: Contains a five-sided cube (one open side) composed of five plane objects. This essentially acts as a 3D mask which we position around the user to obscure the environment around them, in this case, the photosphere. We used a Square Mask in the parent symbol as the cube’s sixth side so that we could scale it to better fit the dimensions of our 3D door. The Cube Mask state description below explains how this was used to create the masking effect.
Controllers and States: The majority of the experience’s functionality was achieved through the use of controllers and states, along with a couple of timeline animations:
- World Tracker Group: Contains two states which control the World Tracking Ground Placement node’s enabled and visible properties. We hide the group by default so that it isn’t displayed while we have the Age Gate subsymbol displayed on the screen.
- Arrow State: Contains two states in which the floor arrows that direct the user to walk towards the door are visible or hidden.
- Arrow Prompt: Contains the arrow’s timeline animation.
- Cube Mask: Contains two states which control the scale and position of the Cube Mask in the scene. The first state, Mask Room, is the default state and makes the cube mask room-scale so that the user cannot see the photosphere around them when they begin the experience or exit the photosphere through the door. The second state, Mask Door, decreases the scale of the mask so that it only masks the door itself, which gives the effect of being able to ‘look out’ through the door after the user has stepped into the photosphere.
- Door Animation: Contains the opening door timeline animation. The door and door frame were imported as separate models within the Door subsymbol, so that the door could animate correctly along its pivot point.
- Face Pop-Ups: Contains five states, which determine the position and text content of the fact pop-ups displayed in the photosphere.
- Background Music Volume Controller: Contains a timeline which animates the background music’s volume property from [0.2, 0.2] to [1, 1]. This timeline is played when the user enters the photosphere to make the music louder and is played in reverse when the user exits the photosphere to make the music quieter.
Trigger Regions: The scene contains two Trigger Regions. The first, Arrow Trigger Region, detects when the user has walked towards the door and plays the opening door animation. The second, Door Trigger Region, is used to determine whether the user has walked into or out of the photosphere and activate any appropriate states, such as the correct Cube Mask state.
The Player Position Plane node in the Hierarchy is the node which triggers the events with both of these trigger regions. As the trigger regions exist in world-space, the plane’s Relative To property was set to Z.Camera and was moved along its Z-axis to position it in front of the user. This ensures that it triggers the events when the user has walked into the trigger regions in the scene.
Scripts: Although Trigger Regions support the use of Actions, we implemented the trigger region logic through code, as we wanted more control over what happened when the trigger events were emitted. The scripts in the project are fully commented, but below is a brief description of each:
- show: Within this script we constructed an instance of the Age Gate subsymbol, which we then displayed the first time show was emitted by the parent. Then, when the Age Gate subsymbol was closed, we activate the state in which our World Tracker Group node ie enabled.
-
Arrow Trigger Region Script: This script contains a few different functionalities:
- Determines whether the user has finished placing their content in world-space via the World Tracking Ground Placement subsymbol and if so starts the arrow animation and plays the background music.
- Loops the background music when it finishes playing.
- Plays the opening door animation on triggerenter, if the content has been placed.
- Activates the Welcome state from the Fact Pop-Ups controller when the door animation completes.
- Door Trigger Region Script: This script keeps track of the position the user entered the trigger region from (via the Player Position Plane mentioned previously), as well as whether they have already ‘entered’ the photosphere through the door. By tracking whether the user is currently ‘inside’ of the photosphere i.e. has walked through the door, we prevent anything from happening if the user tries to re-enter through the door without exiting first, or vice-versa.
Depending on the value of each variable when triggerenter occurs the script will do one of two things:
- If entering the photosphere: activate the door-scale mask, increase the background music’s volume (via the timeline), and stop the arrow animation.
- If exiting the photosphere: activate the room-scale mask, decrease the background music’s volume (via the timeline), and play the arrow animation.
Hopefully, these notes above have given you a better insight into the workings of the experience, though in order to fully understand what’s happening we highly recommend taking a dive into the project. As always, the best way to learn how things are built is to play around and maybe break a few things :-D.
Best of luck to everyone with the competition!
Seb
I liked this post and I did something similar. Your instructions were easy, I did it quickly. Thanks. 
But, I wanted to make not a photosphere a cave with lava instead - 3-d object. I inserted it. But I can’t walk on it. So a walk through the portal is an illusion? 
I can’t walk because the cave is attached to the phone screen. And when I approach the cave, the cave is moving away…I can’t go inside. I did a house through Spark AR 4 years ago - I walked around and in it. 