{"id":55,"date":"2018-08-25T00:30:14","date_gmt":"2018-08-25T00:30:14","guid":{"rendered":"https:\/\/www.xlsoft.com\/doc\/kudan\/?page_id=55"},"modified":"2018-10-18T20:39:50","modified_gmt":"2018-10-18T20:39:50","slug":"marker-to-markerless","status":"publish","type":"page","link":"https:\/\/www.xlsoft.com\/doc\/kudan\/marker-to-markerless\/","title":{"rendered":"iOS Marker to Markerless"},"content":{"rendered":"
\n
\nThis tutorial takes you through to transfer a node that has been added to an image trackable to ArbiTrack.
\n<\/header>\n

<\/p>\n

\n
\n
\n

<\/i>Advanced Tutorial<\/h3>\n

This tutorial assumes you have gone through both Marker Basics <\/a>and ArbiTrack Basics<\/a>. If you have not, it is strongly recommended that you do so before you head any further.<\/p>\n<\/div><\/div>\n

\n

This tutorial uses the Lego Marker and Kudan Cow assets from the\u00a0Marker Basics<\/a>\u00a0tutorial. If you don’t already have them, head over to\u00a0Marker Basics<\/a>\u00a0and click the download link.<\/p>\n<\/div>\n

\n
<\/div>\n

Create an image trackable<\/h2>\n<\/div>\n
\n

First things first, you’ll need to create an image trackable using the Lego Marker image, then create an image node with the Kudan Cow image and add it to the image trackable.<\/p>\n

You’ll also need to add an extra line of code here to make sure our image node has a unique name. We’ll use this name to find it in the tracker later.\n<\/p><\/div>\n

ViewController.m<\/span><\/div>
[code lang=”Java”]- (void)touchesBegan:(NSSet<UITouch *> *)\/\/ Initialise the image node with our image.
\n\/\/ We don’t include the file extension for this image because it’s a PNG.
\nARImageNode *imageNode = [[ARImageNode alloc] initWithBundledFile:@"Kudan Cow"];<\/p>\n

imageNode.name = @"Cow";[\/code]<\/div><\/div><\/div>\n

\n
<\/div>\n

Register the View Controller as an ArbiTrack delegate<\/h2>\n<\/div>\n
\n

One of the things we need to know is when ArbiTrack starts. Fortunately, we have a delegate for that. Add the following code at the end of your\u00a0setupContent<\/code>\u00a0method:<\/p>\n<\/div>\n

ViewController.m<\/span><\/div>
[code lang=”Java”]- (void)touchesBegan:(NSSet<UITouch *> *)\/\/ Initialise ArbiTrack
\nARArbiTrackerManager *arbiTrack = [ARArbiTrackerManager getInstance];
\n[arbiTrack initialise];<\/p>\n

\/\/Add view controller as an ArbiTrack delegate
\n[arbiTrack addDelegate:self];[\/code]<\/div><\/div><\/div>\n

\n

This will call a delegate method –\u00a0arbiTrackStarted<\/code>\u00a0– when ArbiTrack has started and positioned its world.<\/p>\n<\/div>\n

\n
<\/div>\n

Setup the target node<\/h2>\n<\/div>\n
\n

We’ll be using the target node a little differently here. In the\u00a0ArbiTrack Basics<\/a>\u00a0tutorial, we created a node and used it as a target. In this tutorial, we want ArbiTrack to start tracking at the same position as the image trackable. Therefore, we must use the trackable’s world as ArbiTrack’s target node. Add the following code to your\u00a0setupContent<\/code>\u00a0method:<\/p>\n<\/div>\n

ViewController.m<\/span><\/div>
[code lang=”Java”]\/\/ Use the image trackable’s world as the target node.
\n\/\/ This causes ArbiTrack to start tracking at the trackable’s position.
\narbiTrack.targetNode = imageTrackable.world;[\/code]<\/div><\/div><\/div>\n
\n
<\/div>\n

Implement ArbiTrack’s delegate method<\/h2>\n<\/div>\n
\n

The next thing we need to do is tell ArbiTrack what it needs to do when it starts. To do this, we will implement the\u00a0arbiTrackStarted<\/code>\u00a0delegate method in our View Controller. It looks like this:<\/p>\n<\/div>\n

ViewController.m<\/span><\/div>
[code lang=”Java”]\/\/ Delegate method called once ArbiTrack has started
\n– (void)arbiTrackStarted
\n{<\/p>\n

}[\/code]<\/div><\/div><\/div>\n

\n

To switch between marker and markerless tracking, we’ll need to get the image node that appears when the marker is detected and transfer it to ArbiTrack’s world. We also need to make sure that the image is in the right position and orientation, otherwise it will look like it jumps around when it changes between tracking types, and we don’t want that.<\/p>\n

Add the following code to your\u00a0arbiTrackStarted<\/code>\u00a0method:<\/p>\n<\/div>\n

ViewController.m<\/span><\/div>
[code lang=”Java”]\/\/ Delegate method called once ArbiTrack has started
\n– (void)arbiTrackStarted
\n{
\n \/\/ Find the lego trackable in the tracker using it’s name.
\n ARImageTrackable *imageTrackable = [[ARImageTrackerManager getInstance] findTrackableByName:@"Lego Marker"];<\/p>\n

\/\/ Find the cow node in the lego trackable’s world using it’s name.
\n ARImageNode *cowNode = (ARImageNode *)[imageTrackable.world findChildWithName:@"Cow"];<\/p>\n

ARArbiTrackerManager *arbiTrack = [ARArbiTrackerManager getInstance];<\/p>\n

\/\/ Alter the orientation of the cow node to preserve it’s full orientation as it’s reparented.
\n cowNode.orientation = [arbiTrack.world.orientation.inverse multiplyByQuaternion:cowNode.fullOrientation];<\/p>\n

\/\/ Remove the cow node as a child of the trackable world and add it to ArbiTrack’s world.
\n [imageTrackable.world removeChild:cowNode];
\n [arbiTrack.world addChild:cowNode];
\n}[\/code]<\/div><\/div><\/div>\n

\n

Now, when ArbiTrack starts, it will reparent the image node so that it is tracked markerlessly. We still need to tell ArbiTrack when to start, though.<\/p>\n<\/div>\n

\n
<\/div>\n

Start ArbiTrack<\/h2>\n<\/div>\n
\n

To tell ArbiTrack when to start, we’ll use the same method as the one in the\u00a0ArbiTrack Basics<\/a>\u00a0tutorial to respond to touch input. It looks like this:<\/p>\n<\/div>\n

ViewController.m<\/span><\/div>
[code lang=”Java”]- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event
\n{<\/p>\n

}[\/code]<\/div><\/div><\/div>\n

\n

Now, we need to know whether or not ArbiTrack is running when we tap, because we only want ArbiTrack to start if it hasn’t already started. In addition, we want to know whether or not our trackable is being detected, because we can’t go from marker tracking to markerless tracking if we aren’t tracking a marker.<\/p>\n

Implementing these steps, our\u00a0touchesBegan<\/code>\u00a0method now looks like this:<\/p>\n<\/div>\n

Objective-C<\/span><\/div>
[code lang=”Java”]- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event
\n{
\n \/\/ Get references to the ArbiTracker and Image Trackable.
\n ARArbiTrackerManager *arbiTrack = [ARArbiTrackerManager getInstance];
\n ARImageTrackable *imageTrackable = [[ARImageTrackerManager getInstance] findTrackableByName:@"Lego Marker"];<\/p>\n

\/\/ Only start ArbiTrack if it isn’t currently running.
\n if (!arbiTrack.isTracking)
\n {
\n \/\/ If the marker is not currently detected, exit the method and don’t switch to arbitrack.
\n if (!imageTrackable.isDetected)
\n {
\n return;
\n }<\/p>\n

[arbiTrack start];
\n }
\n}[\/code]<\/div><\/div><\/div>\n

\n

This means that when we tap the screen, if ArbiTrack isn’t already running and the marker is being detected, it will start markerless tracking, which in turn will trigger the\u00a0arbiTrackStarted<\/code>\u00a0method and transfer over our image node.<\/p>\n

You might be wondering why we implement the\u00a0arbiTrackStarted<\/code>\u00a0method at all, since we could just run that same code when we tap the screen. The reason for this is that when ArbiTrack first starts, it doesn’t actually get data from the Gyroscope right away. Because of this, its world’s transform does not get updated for a couple of frames. If we tried to transfer the image node at this point, it would rotate and jump across the screen.<\/p>\n

The\u00a0arbiTrackStarted<\/code>\u00a0method is only called when ArbiTrack has started\u00a0and<\/strong>\u00a0has values, so we can be sure that when this method is called, it’s world has been updated it is safe to transfer our content across.<\/p>\n

If you build and run your app now, you’ll find that you are able to detect a marker and, when you tap the screen, it will switch to markerless tracking. You can add some form of text or implement the touch control as a button press using an IBOutlet if you want more visual feedback when the tracking method changes.<\/p>\n

So far so good, but right now we can only tap the screen once, and we can’t stop ArbiTrack and go back to marker tracking once we’ve made the switch. We’ll need to implement a way to toggle between tracking methods, transferring the image node as necessary.<\/p>\n<\/div>\n

\n
<\/div>\n

Toggle tracking methods<\/h2>\n<\/div>\n
\n

This step is fairly simple. To go back to marker tracking, all we need to do is what we did to go to ArbiTrack, but in reverse. Plus, because the image tracker doesn’t have a world it needs to update, we can perform the transfer right in the\u00a0touchesBegan<\/code>\u00a0method.<\/p>\n

Since we already have an\u00a0if<\/em>\u00a0statement checking whether ArbiTrack is running, all we need is an\u00a0else<\/em>:<\/p>\n<\/div>\n

ViewController.m<\/span><\/div>
[code lang=”Java”]- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event
\n{
\n \/\/ Get references to the ArbiTracker and Image Trackable.
\n ARArbiTrackerManager *arbiTrack = [ARArbiTrackerManager getInstance];
\n ARImageTrackable *imageTrackable = [[ARImageTrackerManager getInstance] findTrackableByName:@"Lego Marker"];<\/p>\n

\/\/ Only start ArbiTrack if it isn’t currently running.
\n if (!arbiTrack.isTracking)
\n {
\n \/\/ If the marker is not currently detected, exit the method and don’t switch to arbitrack.
\n if (!imageTrackable.isDetected)
\n {
\n return;
\n }<\/p>\n

[arbiTrack start];
\n }<\/p>\n

\/\/ If ArbiTrack is running
\n else
\n {
\n \/\/ Find the Cow node in ArbiTrack’s world.
\n ARImageNode *cowNode = (ARImageNode *)[arbiTrack.world findChildWithName:@"Cow"];<\/p>\n

\/\/ Adjust the node’s orientation to lie flat on the marker
\n cowNode.orientation = [ARQuaternion quaternionWithIdentity];<\/p>\n

\/\/ Remove the Cow node from ArbiTrack’s world and add it to the image trackable’s world again.
\n [arbiTrack.world removeChild:cowNode];
\n [imageTrackable.world addChild:cowNode];<\/p>\n

\/\/ Stop ArbiTrack
\n [arbiTrack stop];
\n }[\/code]<\/div><\/div><\/div>\n

\n

Now, if you build and run the app once more, you should see that you can tap the screen while tracking a marker to switch to ArbiTrack,\u00a0and<\/em>\u00a0you can tap again to go back to marker tracking.<\/p>\n<\/div>\n<\/section>\n<\/div>\n","protected":false},"excerpt":{"rendered":"

This tutorial takes you through to transfer a node that has been added to an image trackable to ArbiTrack. This tutorial uses the Lego Marker and Kudan Cow assets from the\u00a0Marker Basics\u00a0tutorial. If you don’t already have them, head over to\u00a0Marker Basics\u00a0and click the download link. Create an image trackable First things first, you’ll need … Read moreiOS Marker to Markerless<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"bekko_page_header":""},"_links":{"self":[{"href":"https:\/\/www.xlsoft.com\/doc\/kudan\/wp-json\/wp\/v2\/pages\/55"}],"collection":[{"href":"https:\/\/www.xlsoft.com\/doc\/kudan\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.xlsoft.com\/doc\/kudan\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.xlsoft.com\/doc\/kudan\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.xlsoft.com\/doc\/kudan\/wp-json\/wp\/v2\/comments?post=55"}],"version-history":[{"count":37,"href":"https:\/\/www.xlsoft.com\/doc\/kudan\/wp-json\/wp\/v2\/pages\/55\/revisions"}],"predecessor-version":[{"id":1410,"href":"https:\/\/www.xlsoft.com\/doc\/kudan\/wp-json\/wp\/v2\/pages\/55\/revisions\/1410"}],"wp:attachment":[{"href":"https:\/\/www.xlsoft.com\/doc\/kudan\/wp-json\/wp\/v2\/media?parent=55"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}