Augmented Reality

Overview

Wikitude's augmented reality Cordova plugin has recently become available in the PhoneGap Developer App allowing developers to build apps that can detect images or locations and project 2D images or 3D models.

See the demo in action on our PhoneGap Day EU 2016 T-Shirts!

Running from Hosted Template

You can test the above demo by downloading and launching the PhoneGap Developer App (v1.7.0 and higher - Windows Phone not supported). Then use this address: ar.phonegap.com in the url section of the PhoneGap Developer App.

PhoneGap Developer App and Wikitude

Running from Local Template

Instead of running from ar.phonegap.com you can create your own augmented reality PhoneGap project by using the command:

$ phonegap create myApp --template wikitude-augmented-reality
$ cd myApp
$ phonegap serve

Developing

There's one additional line you'll need to include when using the Wikitude plugin with the PhoneGap Developer App specifically. When loading the AR worlds, you'll need to specify the cordova.file.dataDirectory + path/to/ARWorld location.

For example:

// To load AR worlds in the Phonegap Developer App must pre-prend with cordova.file.dataDirectory
app.wikitudePlugin.loadARchitectWorld(function succes(){}, function error(){},
    cordova.file.dataDirectory + architectWorld.path,
    architectWorld.requiredFeatures,
    architectWorld.startupConfiguration
);

Examples and Guides

The most comprehensive guide to developing with the Wikitude plugin can be found at Wikitude's developer guides. You may also want to github clone Wikitude's sample repo. Just remember that when using phonegap serve to serve the wikitude-cordova-plugin-samples, you must use cordova.file.dataDirectory + architectWorld.path here.

To see the PhoneGap Day EU 2016 T-Shirt demo, you may find the project's repo here.

Uploading your own images to detect

In order to detect your own images, you must signup to the Wikitude developer program. Once there, you can upload your files and download a .wtc file. See this guide for more info.

Going beyond the PhoneGap Developer App

If you want to include the Wikitude cordova project into your own app, then you must sign up for a license or free trial. Once you obtain your sdk key, simply place it in the wikitude.js file and install it in your app. See this guide for more info.

Edit this page on GitHub