- Spark AR Studio
- Spark AR Hub
- Features
- Learn
- Creators
- Partners
- Blog
- Community
- Create AR effects for Instagram and Facebook.Get Started
Gallery Textures and the Gallery Picker
The gallery picker lets people add an image from their phone’s camera roll to an effect, like a green screen.
To create an effect with the gallery picker, all you need to do is add the gallery texture to a material in your scene. The material can be applied to any object, for example a 3D object or a rectangle to create a segmentation effect.
You can also download and adapt this template project. The project is similar to Instagram's Green Screen effect. It lets someone add a photo or video from their device to the background of an effect. The project includes a script and patch graph that detects the width and height of the photo or video and resizes it in-line with the size of the device screen.
Adding the gallery texture
First create the gallery texture:
- Go to the Assets panel.
- Click Add Asset.
- Select Gallery Texture from the list.
A texture labeled galleryTexture0 will be listed in the Assets panel.
To render the texture in the scene, add it to the Texture property of a material:
The material can then be added to a scene object, depending on the type of effect you want to create.
Showing a temporary texture or color
By default, the gallery texture renders as a blank white color. You can add a texture or color to the gallery texture, to be replaced with the image selected by the person using your effect.
To do this:
- Select the gallery texture in the Assets panel.
- In the Inspector, check the box next to Holding Texture.
- Set the Type option to either Color or Texture.
- Choose a color, or apply your own texture.
Previewing
In the Simulator
When you've added the gallery texture, you'll see an Add Media button in the Simulator. Click this to test the gallery texture by importing an image from your computer.
In the Instagram app
To send the effect to the Instagram app:
- Click the Test on Device icon in the toolbar.
- Next to Instagram Camera, select Send to App then Send.
In Spark AR Player
In Spark AR Player, tap the Add Media button to test an effect with the gallery texture using images or videos from your camera.
How effects appear in the camera
If an effect includes the gallery texture, an add media button will appear at the bottom of the effect:
People can then browse and add images from their media library.
Properties
Edit the gallery texture’s properties to change how it appears in the effect.
Pending texture
Checking this box lets you select an initial texture to show in the effect. This texture will be replaced with the image selected by the person using your effect.
Type
Choose a color or texture:
- If the Type is set to Texture, add an image file here.
- If the Type is set to color, select a color from the menu.
Used by
Any materials the texture is applied to will be listed here.
Limitations
When planning effects that use the gallery texture, it’s worth considering:
- Only one camera roll texture can be selected by users at a time.
- People can select either photos or videos to add to effects with the gallery texture in.
- People can select square, horizontal or vertical images or videos, so you might need to resize the image to fit the area where you want to use it.