Does have instagram masks specified UI to chage the 3d objects instead changing textures only?

Question

So i have 3 different, which contains different 3d objects with special animations.

First is 3d objects rotating above the head and change the angle of orbit with our head shakes. The second one is falling 2d sprites all around character calling by eye closing. And the third one is simple facemesh with grid texture on it. Im draw special UI and code it, so in ArPlayer it works perfects, but when im try to upload it to facebook this UI not working and i have only mask number 1. So im try to search the solution on Youtube and have only this, but this works only with texture changing i think. So my question is: Can i use instagram changing ui with my effects and if yes, how i can do this. Thaks a lot!

P.S: All images u can find.

Answer 1

Effects must not use custom buttons, keyboards, pickers or sliders - effects may use the native UI picker and slider only. (Spark AR Review Policies 2.6)

Using the Native UI picker, you can not only change textures, but also the visibility of objects.

Example:

1. Create a new project
2. Create several plane objects on the scene (for example 3 pieces) and name them obj0, obj1, obj2 and make them invisible
3. In Capabilities add Native UI -> Picker
4. Add 3 textures to the project and name them icon_1, icon_2, icon_3 and check the "No compression" option for everyone
5. Add such a script

const NativeUI = require('NativeUI');
const Textures = require('Textures');
const Scene = require('Scene');

Promise.all([
    Textures.findFirst('icon_1'),
    Textures.findFirst('icon_2'),
    Textures.findFirst('icon_3'),
    Scene.root.findFirst('obj0'),
    Scene.root.findFirst('obj1'),
    Scene.root.findFirst('obj2')
]).then(onReady);


function onReady(assets) {

    const texture0 = assets[0];
    const texture1 = assets[1];
    const texture2 = assets[2];

    const objects = [assets[3],assets[4],assets[5]];

    const picker = NativeUI.picker;

    const index = 0;

    const configuration = {

      selectedIndex: index,

      items: [
        {image_texture: texture0},
        {image_texture: texture1},
        {image_texture: texture2}
      ]

    };

    picker.configure(configuration);
    picker.visible = true;

    picker.selectedIndex.monitor({fireOnInitialValue:true}).subscribe(function(index) {
      objects[index.newValue].hidden = false;
      if(index.oldValue != undefined)
      {
          objects[index.oldValue].hidden = true;
      }
    });
}

A similar official example is from developers, there they used Native UI picker (script) + patch to hide objects. Launch Spark AR Studio and create new project from template "3D Stickers" and watch how they did it. If you don’t have such a project template, update Spark AR Studio.