Hi all!
We’re happy to announce the release of our newest tracking type, Curved Tracking.
Curved surface tracking expands upon Zappar’s existing image tracking (which was previously only designed for flat surfaces), opening up a world of new opportunities, especially when it comes to connected packaging, allowing you to create interactive, branded experiences on a range of curved surfaces including cans, cups or bottles.
Here’s a quick showcase of curved tracking in action :
This post details how to get started with the beta version of curved tracking in ZapWorks Studio.
A quick note before you get started with this tracking type - this functionality is currently in beta. This means that we are working on it to make improvements. The beta version is not recommended for live projects. Please consider this carefully; and rigorously test your projects across multiple devices and browsers if you do decide to use this version.
What makes a good curved target image?
- Lots of unique high-contrast texture
- Good coverage over the object
- Repetitive patterns
- Largely see-through or translucent labels
- Fancy finished, e.g very shiny or colour changing
Training a curved image using the ZapWorks CLI
First you’ll need to install and train up a curved target with the ZapWorks CLI. Currently this is the only way to train up a curved target but we’ll be bringing an update into Studio soon to enable curved image training directly in the tool.
To install and use the ZapWorks CLI, first make sure you have Node.js installed, then run the following command in a terminal on your computer:
npm i -g @zappar/zapworks-cli@beta
Once installed, you can use the ‘train’ function to create a .zpt from your PNG / JPG image, as seen in the example below:
zapworks train YOURFILENAME.jpg/png --circumference=..cm --input-height=..cm
So that the image training algorithm knows the curvature of your object, specify exactly one of:
--radius=Xcm
--circumference=Xcm
So that the algorithm knows the real-world size of your target, specify exactly one of:
--input-height=Xcm
--input-width=Xcm
--dpi=X
(Image above showing example command usage)
Importing the .zpt file into Studio
Once you’ve trained your target image, you’ll have a .zpt file in the chosen directory. To import this .zpt file into Studio, simply drag it into the Media Library. It should now appear under the ‘Targets’ tag.
Dragging a target from the Media Library into the Hierarchy will display a preview of the tracking image in the viewport.
Curved images are currently displayed flat in the Studio viewport. We will be bringing an update to Studio soon which will show a curved version of the target image if a curved .zpt is detected.
Once in the Hierarchy, you can build up your scene in the same way as any other tracking type.
Previewing
As this tracking type is still in beta, you’ll need to scan the preview code in our beta WebAR site: https://wtbeta.arweb.app
Publishing
We can deploy this version of the runtime that includes Curved Tracking to any custom WebAR sites, please get in touch with us if you want to learn more!
We hope you have fun experimenting and we’re delighted to see what you create!
Team ZapWorks