- Meta Spark Studio
- Meta Spark Hub
- Features
- Learn
- Programs
- Blog
- Community
- Create AR effects for Instagram and Meta.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 +.
- Select Texture then 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, selecte 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, select Send.
In Meta Spark Player
In Meta Spark Player, tap the Add Media button to test an effect with the gallery texture using images or videos from your camera.
If you don't see any preview options, make sure to select an experience for your project in the project properties.
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.
Holding texture
Selecting 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 using the texture. Click the arrow to the left of the material to show any other assets indirectly using the texture. For example, any objects that the material is applied to.
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.
