Gyro-oriented Environments

There's a template in ZapWorks Studio that accompanies this article called "360 Degree Panorama".

ZapWorks Studio supports using a device's gyroscope (and other sensors) for building experiences that can be looked around by rotating the phone. The functionality can be used for creating targetless augmented reality where content appears in the user's immediate environment, rendered on top of the camera view, or for creating virtual reality experiences that hide the camera view.

AttitudeOrient node

The AttitudeOrient node is the primary tool for building gyroscope-oriented experiences. AttitudeOrient nodes can be added into the Hierarchy from the right-click New > Transforms menu of existing Group nodes (such as root). They operate in the same way as Group nodes in that they can contain other child nodes but differ in that the AttitudeOrient node will be continually rotated so that the content appears stationary in the world around the user as they rotate the phone.

Simulation

ZapWorks Studio provides a number of ways of simulating the gyroscope motions of a device in order to aid in the design of gyro experiences.

The arrow icon at the bottom left of the 3D view pans the view when clicked and held with the mouse - as if the user were rotating the device.

The globe icon on the toolbar above the 3D view hosts two options to help in the placement of content and preview:

Simulate ground displays a grid at a position of y = -1.5 units in the group. Objects placed on this grid will appear to have a scale where one unit approximates one meter in the real-world environment around the user.

Simulate sphere displays a sphere with regular lines of latitude and longitude marked.

Resetting the Heading

When an AttitudeOrient node is created the heading (i.e. north, east, south, west) will depend on the direction the user is facing. It's often useful to reset the heading of the AttitudeOrient node so that the user faces down the negative Z axis. This can be used to ensure that the user is presented with a consistent view at the start of an experience, for example.

AttitudeOrient's resetHeading() is provided for this purpose. It can be called in Script code on a variable referring to an AttitudeOrient node or added as a timeline action by right-clicking on an AttitudeOrient node in the Hierarchy when a timeline is selected in the Controllers panel.

Changing the Focal Length 

When an AttitudeOrient node is added to the Hierarchy its relativeTo property is automatically set to Z.camera. This ensures that the node is centered on the screen and has the same focal length as that of the device's camera.

Sometimes it's desirable to have a different focal length - to give the gyro-oriented environment a less or more "zoomed-in" appearance. This can be done in the following way:

  1. Add a CameraTransform node to the root of the Hierarchy using the right-click New > Transforms menu
  2. Set the AttitudeOrient node's relativeTo property to the newly created CameraTransform node
  3. Change the focalLength property of the CameraTransform node to taste. Values between 1 and 2.5 generally make sense.

360 Panoramas

The gyroscope environment support works particularly well with 360 "photo sphere" panoramas. These are fully immersive photos that can be acquired in a number of ways:

  • Android's camera app in "Photo Sphere" mode
  • 360 degree cameras such as the Ricoh Theta
  • The Internet

A template for new projects "360 Degree Panorama" makes it simple to build an experience using one of these images. The rest of this section describes how such an experience is built from scratch.

The Photo Sphere Object Type

ZapWorks Studio includes a specially configured 3D object called the "Photo Sphere". It can be added to the Media Library using the + icon at the top right of the Media Library panel. The Photo Sphere has the following properties:

  • Its faces point inwards so they are visible from a camera inside the sphere
  • The UV coordinates are mapped so that photo sphere images appear correctly when they are set as the material of a photo sphere object

As the video below demonstrates, adding a photo sphere object inside an AttitudeOrient node, then setting the material to a photo sphere image, is all that is necessary to create a full 360 degree panorama effect.

zapcode branded_zapcode i