Hi everyone!
If you’ve seen Simon’s ‘First Look’ post, you will know that we’ve been working hard to deliver our new and improved World Tracking for WebAR implementation for some time now. Today, we’re pleased to announce that new and improved World Tracking for WebAR is available on the beta branches for our Universal AR SDKs!
With the warnings out of the way, here’s how you can get started!
Click the drop downs below to learn how to either develop a new project or convert an existing one.
Developing New Projects
Web-based Universal AR SDKs (A-Frame, Three.js, Babylon.js, React Three.js)
To create a new improved World Tracking for WebAR experience with the web-based Universal AR SDKs, simply follow the usual installation steps for your chosen library, then add ‘@beta
’ to the end of your NPM installation command. For example:
npm install --save @zappar/zappar-threejs@beta
For now, new and improved World Tracking for WebAR is only available via NPM.
The beta branches of the npm modules no longer support Webpack 4, Webpack 5 is required. One advantage of this switch is that it is no longer necessary to add the specific rule for zcv.wasm to your project’s webpack.config file.
Universal AR for Unity SDK
To create a new improved World Tracking experience for WebAR with Unity, simply follow the usual installation steps, then add ‘#beta
’ to the end of your imported Git URL. For example:
https://github.com/zappar-xr/universal-ar-unity.git#beta
Universal AR for PlayCanvas SDK
To create a new improved World Tracking experience for WebAR with PlayCanvas, simply fork the beta branch project, found here.
Converting Existing Projects
Web-based SDKs (A-Frame, Three.js, Babylon.js, React Three.js)
To update existing web-based projects, you can simply run the same installation command as above to update your project’s Universal AR SDK dependency to the beta branch.
For example for projects using the Universal AR SDK for Three.js:
npm install --save @zappar/zappar-threejs@beta
The beta branches of the npm modules no longer support Webpack 4, Webpack 5 is required. If your project is currently using Webpack 4 you may want to upgrade to webpack 5 first and ensure the build still works before updating the Universal AR SDK.
One additional required change for existing projects is to remove the specific zcv.wasm webpack rule from your project’s webpack config. This rule is no longer required and needs to be removed for bundling to work correctly with the beta branch:
{
test: /zcv\.wasm$/,
type: "javascript/auto",
loader: "file-loader"
}
Universal AR for Unity SDK
To use the Unity Package Manager to update your existing project, simply follow the usual steps to import the package, then add ‘#beta
’ to the git import URL. Unity should automatically fetch and update the package for you.
Otherwise, you may want to edit your project’s manifest.json
file instead. Simply add ‘#beta
’ to the end of the Zappar dependency entry. For example:
"com.zappar.uar": "https://github.com/zappar-xr/universal-ar-unity.git#beta"
Then save manifest.json
. The next time that you enter your project, Unity should automatically resolve the package for you.
Universal AR for PlayCanvas SDK
To update an existing PlayCanvas project, simply click on your Zappar Universal AR scene settings in the PlayCanvas Editor, then find ‘External Scripts’ in the right sidebar:
You should then replace the following script URL:
https://libs.zappar.com/zappar-js/0.3/zappar.js
With the new script URL:
https://libs.zappar.com/zappar-js/0.4.0-beta.5/zappar.js
We really hope you enjoy experimenting with this new functionality, happy creating!
All the best and have a wonderful day,
Team ZapWorks