Get Started         Best Practices         Developer Guide         FAQ        

Replacing the texture of a 3D model with CraftAR Augmented Reality SDK

Last Updated: Apr 30, 2018
This article applies only to the Augmented Reality SDK.

There are certain applications, such as interactive catalogues where the user is interested in configuring or browsing through different samples of a product. Such interaction can be implemented by changing the visual aspect of a 3D model.

The Augmented Reality SDK let's you render 3D models into the AR scene. This article explains how to replace the texture of a 3D model at run-time with a few lines of code on iOS and on Android.
In the example of this article, we added a button in our layout. When the user taps the button, the model is replaced with a copy of the same model but with different pre-loaded textures. In order to do this, we need to add all resources to our project and initialise the two models we want to display, one with the normal texture and the other with the texture colors inverted. This step has to be done after the video capture has started.
Below are two screenshots of a 3D model where the user can tap a button to change it's visual appearance (texture).
 
 

Replace texture on Android

Start by adding all the resources:
 
String appDataDir = getAppDataDirectory();
boyNormal = new CraftARTrackingContent3dmodel(appDataDir + "/astroboy_walk.dae");
		
String texturePath = appDataDir + "/boy_10_inv.tga";
HashMap textures = new HashMap();
textures.put("./boy_10.tga", texturePath);
boyInverted = new CraftARTrackingContent3dmodel(appDataDir + "/astroboy_walk.dae", textures);
		
modelContent = boyNormal;

Once we have created our ARItem, we add the first model we want to display (in this case the model with the normal texture):
 
myARItem.addContent(modelContent);

Finally, when the user clicks on the button, we remove the model that is being displayed and set the other model with inverted colors as the current one:
 
Button invertButton = (Button)mainLayout.findViewById(R.id.invertButton);
invertButton.setOnClickListener(new OnClickListener() {
@Override
  public void onClick(View v) {
    mCurrentARItem.removeContent(modelContent);
    modelContent = (modelContent == boyNormal) ? boyInverted : boyNormal;
    mCurrentARItem.addContent(modelContent);
  }
});
 

Replace texture on iOS

Start by adding all the resources:
 
- (void) didStartCapture {
    {...}
    
    boyNormal = [[CraftARTrackingContent3dModel alloc] initWithModelNamed:@"astroBoy_walk" ofType:@"dae"];
    boyInvert = [[CraftARTrackingContent3dModel alloc] initWithModelNamed:@"astroBoy_walk" ofType:@"dae" andTextures: @{@"./boy_10.tga": @"./boy_10_inv.tga"}];
    
    //... 
}
Once we have created our ARItem, we add the first model we want to display (in this case the model with the normal texture):
    currentModel = boyNormal;
    [(CraftARItemAR*)item addContent:currentModel];
Finally, when the user clicks on the button, we remove the model that is being displayed and set the model with the inverted colors texture as the current one:
    if (sender == self.mToggleBoy) {
        [mCurrentItem removeContent:currentModel];
        currentModel = (currentModel == boyNormal) ? boyInvert : boyNormal;
        [mCurrentItem addContent:currentModel];
    }

Couldn't find what you were looking for?

support@catchoom.com
https://cdn.desk.com/
false
catchoom
Loading
seconds ago
a minute ago
minutes ago
an hour ago
hours ago
a day ago
days ago
about
false
Invalid characters found
/customer/en/portal/articles/autocomplete