Welcome to ZapWorks Studio. It's a tool designed from the ground up for building interactive short-form 3D experiences. Here are just a few of the features that make it possible to surprise and delight your users:

  • Supports vision-based augmented reality and gyroscope-oriented 3D environments
  • Designed for mobile first
  • Roadmap towards wearables
  • Fully scriptable
  • Powerful and expressive tools for animation
  • Designed for modularity / sharing of components

It can be daunting starting out with a new creative tool such as ZapWorks Studio so this documentation should get you up and running in no time. You can also check out the ZapWorks Forum, a handy way to ask questions of other ZapWorks users, or drop us a line at

Building a Simple Scene

The Hierarchy and Media Library

Creating an object from a media file

Zappar experiences consist of a tree of nodes called the Hierarchy. There are many different types of nodes, including, but not limited to, 3D objects, groups, scripts, sounds and videos.

The Media Library contains the files that can be used in the project. These are added to the experience by dragging from the Media Library into a group in the Hierarchy, such as the topmost entry "root".

New projects already include the "Plane" object type in the Media Library. A plane is a 3D object that's square and flat and is generally used for displaying images in an experience or for defining areas that users can tap on or interact with.

Importing an image file for use as the material of a plane

The Media Library supports a number of different file types and formats. To make a plane display an image, first drag an image file from your computer into the Media Library. Both PNG and JPEG files are supported, but, for technical reasons, the images may not be larger than 2048 pixels in either width or height.

Once imported, select the plane object in the Hierarchy and change the "materials" property to the name of the image that was dragged in.

Dragging an image file directly from the Media Library into the Hierarchy will create a plane object with the "materials" property already set to the image.

Positioning Nodes

Setting the position, scale, and rotation of an object

In addition to the "materials" property, objects have properties for their position, scale and rotation in scene. These can be set in the Properties area or using the tools that appear over the object in the 3D view. Use the "P", "S" and "R" buttons at the top of the 3D view to switch between the tools for the different properties.

Objects in ZapWorks Studio exist in 3D space and so have values for X, Y and Z for position and scale, and three axis for rotation. See our Coordinate Systems article for more information.

Grouping Nodes

Grouping nodes

It's possible to create Group nodes by right-clicking on the "root" node, or indeed other group nodes, and selecting New > Group.

By default an object's position, scale and rotation are relative to that of its parent groups, all the way up the tree to the "root" node. This way moving a group also moves all of the nodes within it.

Where there are multiple overlapping objects in a scene they are displayed in the order they appear in the Hierarchy view - objects further down the view appear on top of objects that are higher up. It's possible to change this behaviour on an object-by-object basis, and doing so is necessary for fully 3D content that is viewed from multiple angles. For more information see our Render Order article.

It's important to note that in this case the object further down the hierarchy may appear on top, however if you plan on adding events to the object you will need to make sure that it is positionally in front for it to work as expected. A simple way to do this here would be to change the position of the object you want in front to have a higher Z value than the one behind it.

Previewing the Experience

Previewing the experience

Whilst working on an experience it's important to regularly preview it on a mobile device.

The Preview button uploads your project to a temporary zapcode that can be scanned by a mobile phone running the Zappar app. You will need to login to ZapWorks the first time you complete this process.

A button is provided for launching the experience directly in Zappar for Mac (or Zappar for Windows) without requiring the code to be scanned.

Automatic Saving

ZapWorks Studio automatically saves projects as they are modified. When the a project is opened it is in the same state as when it was last closed. This also counts for scripts in case you're used to manually saving code.

Key stages in development can be marked by creating commits - these record the exact state of a project at the current point in time and can be returned to in the future.

Next Steps

A solid understanding of the Media Library and Hierarchy are essential to producing amazing experiences with ZapWorks Studio.

The next article introduces Controllers and States - the fundamental way of animating experiences.

Next article: Tracking Images

Open in new window