Wednesday, 25 March, 2020 UTC


This article is first published on GOWAAA.
This article assumes you have some basic knowledge of Spark AR, which is the software made by Facebook to develop Augmented Reality filters for Instagram and Facebook. If not, you can refer to my previous article and learn how you can easily make a face filter in 15 minutes!
If you are still here, awesome! Let’s get on with it!
By now, I believe you would have known about Native UI picker, which is one of the two types of visible buttons/controls you can add on an Instagram Filter to change your effect; the other being native sliders.
Example of Native UI picker, which is mostly used to change materials, on GOWAA’s Instagram filter for Singapore Night Festival
The script to use Native UI picker to change materials were already demonstrated by quite a few awesome creators in the Spark AR Community Facebook page. One that I would suggest you use is the script + patch method done by Billy Ng (Also check out his Spark AR TV, where you collated all available Spark AR video tutorials on his website!)
However, there are not many examples of how you can use Native UI picker to toggle the visibility of an object in Spark AR for your Instagram filter. The good news is it is not that difficult to set it up! All you need is some adjustment in the script to toggle visibility of your objects using the method “.hidden”. If you have not yet done any scripting in Spark AR before, I also strongly encourage you to try understanding the script below (it’s not hard, trust me!) as it is a good stepping stone to get into scripting in Spark AR!
To demonstrate, I will be using the above’s setup to show how you can toggle the visibility of the 4 planes named “object 0, 1, 2 & 3”. I have already set up 4 materials and 4 textures corresponding to the 4 planes in the following manner:
  • Green — Object 0
  • Blue — Object 1
  • Red — Object 2
  • Yellow — Object 3
Next, click on “Project” on the top left-hand corner -> Edit Properties and select “Capabilities” as shown above. Search and add “Native UI Control” by clicking on “+”, then check on the box for “Picker”.

Trending AR VR Articles:

1. Augmented Reality Robotics
2. Infographic: The Future of Virtual Reality
3. Mario Kart in a real vehicle with VR!
4. How XR Can Unleash Cognition
Finally, I added a script into asset and switch to my code editor (VS code highly recommended!) to set up the scripting part for the native UI Picker.
const Scene = require('Scene');
const NativeUI = require('NativeUI');
const Textures = require('Textures');
//Declare an empty list
const object = [];
//Enter no. of object you wish to toggle visibility with native UI picker
const object_no = 4
// Find your objects
//make sure you name your object in order back in Spark AR starting from 0
//e.g Object0, Object1, Object2 etc...
for(let i = 0; i<object_no; i++){
//Set default visibility when effect launch
//Note that when hidden is false, object will be visible
for(let i = 0; i<object_no; i++){
if (i == 0){
object[i].hidden = false;
object[i].hidden = true;
//Set index = 0
const index = 0;
// Create a configuration object
const configuration = {
// The index of the selected item in the picker
selectedIndex: index,
// The image textures (in sequence) to use as the items in the picker
// Make sure these textures are set to uncompressed or this *will not work*
items: [
{image_texture: Textures.get('Green')},
{image_texture: Textures.get('Blue')},
{image_texture: Textures.get('Red')},
{image_texture: Textures.get('Yellow')}
// Create our picker
const picker = NativeUI.picker;
// Load the configuration
// Set the visibility to true
picker.visible = true;
// When the user selects an item form the picker, a new val value will be passed into the loop below
picker.selectedIndex.monitor().subscribe(function(val) {
for(let i = 0; i<object_no; i++){
//val.newvalue will be 0 when 1st picker is chosen, and 1 when 2nd picker is chosen so on and so forth
//hence, every time a new picker option is chosen, this for loop will check which picker is chosen and set the corresponding
//object to be visible
if (i == val.newValue){
object[i].hidden = false;
object[i].hidden = true;
Hooray! Now you are all set! Save your code, go back to Spark AR and you will be able to toggle the 4 planes when different pickers are chosen. To use the code for your own Instagram filter, you just need to change your object’s name to suit the format “object0, object1, object 2 etc.” and the object_no in the script into your total no. of objects you wish to toggle visibility with native UI picker accordingly.
You can try out what Instagram filters I made with the script above HERE! Also, don’t forget to tag me @gowaaaofficial when your filters are ready so I can see it! =)
You can find more useful articles on Spark AR on GOWAAA’s website too.

Don’t forget to give us your 👏 !
Using Native UI Picker in Spark AR to toggle visibility of object For Instagram Filters was originally published in AR/VR Journey: Augmented & Virtual Reality Magazine on Medium, where people are continuing the conversation by highlighting and responding to this story.