Sipsmith Portal - Inspiration Project


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).

  1. World Tracking Ground Placement: This is the subsymbol in which we place content that we want to be world-tracked.
  2. Door: This subsymbol contains our 3D door, with the frame and door itself as separate objects so that they could be animated correctly.
  3. Gravity Environment Light: Contains an environment light which was necessary as our door uses lighting materials.
  4. Hotspot: The default hotspot template. Used to highlight points of interest within the photosphere environment.
  5. 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.
  6. 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:

  1. 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.
  2. Arrow State: Contains two states in which the floor arrows that direct the user to walk towards the door are visible or hidden.
  3. Arrow Prompt: Contains the arrow’s timeline animation.
  4. 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.
  5. 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.
  6. Face Pop-Ups: Contains five states, which determine the position and text content of the fact pop-ups displayed in the photosphere.
  7. 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:

  1. 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.
  2. Arrow Trigger Region Script: This script contains a few different functionalities:
    1. 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.
    2. Loops the background music when it finishes playing.
    3. Plays the opening door animation on triggerenter, if the content has been placed.
    4. Activates the Welcome state from the Fact Pop-Ups controller when the door animation completes.
  3. 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:

  1. If entering the photosphere: activate the door-scale mask, increase the background music’s volume (via the timeline), and stop the arrow animation.
  2. 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!

World Tracking Portal with 360 Video
Deadline extended - July 14th closing date
What components shall I use?
World tracking + User position

Thank you! Very nice it fills in some wholes I had about doing things.
One question. When in the photosphere you can’t walk closer to things like the hotspots to read them better. Is that because of my testing environment or the photosphere?



Hey @stevesanerd,

Hope you’re doing well! Glad you found the example project useful :slight_smile:

The photosphere itself exists in world space, but has been scaled up significantly in order to prevent the user from getting close enough to notice the sphere’s curvature, which would make the projected image look distorted.

You could make the photosphere smaller to give the illusion that the user is walking closer to parts of the scene, but you’d then have to be wary of the curvature mentioned previously.

Additionally, as the image on the photosphere is simply a 2D projection rather than a 3D environment, it is difficult to make the user’s movement match their position within the photosphere in a way that ‘feels right’. This is also the reason why photospheres in world space seem much more natural when they project an environment located at a distance from the user, such as a horizon/cityscape (much like the Lufthansa experience).

Hope this helps.

Best of luck with your entry!


How do you remove the age gate?



Hi @jzierow,

To remove the age gate, delete the Age Gate subsymbol from the Symbol Definitions panel, then delete lines 5 and 17-27 from the show script node.

Hope this helps.

All the best,


Is there anyway to add a 360 video behind the door instead of a photosphere?


I followed your instruction above and this doesn’t seem to have worked as the door is not visible at all now.


Got it working without the age gate. apologies.


Thanks! I figured it out right before you answered. I have another question thought…I can’t figure out how to remove the first animation. The first animation is of a phone moving left and right and it confuses people when they open the zap code. They move their phone side to side when they actually need to move it forward and backward. Is there a way to remove that animation or make it indicate forward motion instead of right and left motion?


It looks like the code doesn’t flip for portrait or landscape. You may have to tweak the code to fix that.



I’m having trouble isolating what code is dictating it


They fixed it. Take a look at this post.