The gift you actually want for Christmas: Wikitude SDK with ARKit

Eva Triantafillopoulou

They say it ‘Tis the season to be jolly’, so Wikitude is doing its part to help spread the holiday cheer… the developer way!

First, the good news: ARKit is now integrated into the Wikitude SDK and is available for testing. You can get the first developer preview for JavaScript and Native SDKs on our download page.

This integration helps developers to deliver optimal markerless augmented reality experiences on Apple’s high-end devices and overcome the accessibility limitations of ARKit with instant tracking. This means, when ARKit is not supported, Wikitude’s reliable SLAM technology kicks in and delivers the AR experience instead. With ARCore also on the way, we are getting closer and closer to making augmented reality a possibility for all.

The addition of ARKit to Wikitude’s SDK allows developers to optimize markerless AR experiences within a single API, making cross-platform development faster and smoother. Going beyond ARKit, the Wikitude SDK delivers world-class geolocation, marker-based AR, and object recognition features, with ample device coverage (smartphones, smart glasses, and tablets) and multiple platform deployment (iOS, Android).

Now, a holiday bonus: Wikitude has prepared an AR Christmas tutorial so that our fellow developers can put it to the test right now!

The AR experience brings your holiday prepping to the next level! If you are planning to set up a Christmas tree, but aren’t sure which size would look best in your living room, this tutorial is for you.

Augmented Christmas Tree Tutorial – putting ARKit integration to the test

Building the AR experience

To access ARKit’s functionality using the Wikitude JavaScript SDK, very little change is required. In fact, only a single flag needs to be set in the configuration of the AR.InstantTracker.

this.tracker = new AR.InstantTracker({
    [...]
    arKitCoreEnabled: true
});

Setting the arKitCoreEnabled flag to true will result in ARKit’s algorithms to be preferred over Wikitude’s algorithms on devices that support them. On devices that do not support ARKit the tracking will function normally, but without the aid of ARKit.

Although the outlined change is sufficient to enable ARKit, we do recommend adding the newly introduced onChangeStateError callback. Switching from initialization state to tracking state may fail when using ARKit due to a lack of texture detail in the camera view or the absence of a plane estimation. The concrete failure reason is supplied to the function as an input parameter.

this.tracker = new AR.InstantTracker({
    [...]
    arKitCoreEnabled: true,
    onChangeStateError: function(error) {
        alert("Failed to change state. Error code: " + error.id + " Error message: " + error.message);
    }
});

As ARKit provides real-world scaling, the device height above ground input parameter is only required for the initialization phase. The tracking phase will ignore it and use the ARKit supplied scale. Leveraging the real world scale is easy and intuitive: 1 SDU is 1 meter. For the case of our 3D model, that simply means that a distance of 1 in the model’s geometry corresponds to 1 meter.

Examining a model in the 3D modeling software of your choice will tell you its extent. For the Christmas tree, the dimensions happen to be the following.

var modelSize = {
    x: 243.1,
    y: 246.7,
    z: 357.9
}

As a height of 357.9 meters is quite sizeable for a Christmas tree, we calculate a scale factor that will bring it down to a manageable height.

var initialModelHeightMeters = 1.5;
var scaleValue = initialModelHeightMeters / modelSize.z;

Applying this scale value to the AR.Model will yield a tree of exactly 1.5-meter height.

var treeModel = new AR.Model("assets/tree.wt3", {
    scale: {
        x: scaleValue,
        y: scaleValue,
        z: scaleValue
    }
});

Finally, scaling the model such that it fits your particular environment is easily achieved by using the onScaleChanged and onScaleEnded gesture callbacks like so.

var treeModel = new AR.Model(
    [...]
    onScaleChanged: function(scale) {
        var s = scaleValue * scale;
        this.scale = {x: s, y: s, z: s};
    },
    onScaleEnded: function(scale) {
        scaleValue = this.scale.x;
    }
});

You can download the whole sample package from the Beta tab on our Download page.

Special thanks to our community member Florin Necula for the ‘Wikitude tree’ 3D model.

We hope you enjoy working with the developer preview of the Wikitude SDK with ARKit.

Don’t forget to share your holiday AR experiences via social media using the #wikitude on Twitter, Facebook, and Instagram.

Happy holidays from the Wikitude team!

Previous Article
Create an AR furniture app in 5 minutes
Next Article
Create an AR furniture app in 5 minutes