- Meta Spark Studio
- Meta Spark Hub
- Features
- Learn
- Programs
- Blog
- Community
- Create AR effects for Instagram and Meta.Get Started
Visual Shaders Overview
Use visual shader patches with other patches in a graph to change the appearance of a material. This way, you can apply more complicated changes than you can using the shaders found in the Inspector.
Some visual shader patches use different data types to other patches in Meta Spark Studio.
For more information on using visual shaders, see the Introduction to Visual Shaders tutorial.
Available Visual Shaders
| Patch | Description |
|---|---|
Visually represents a property of a material, like its position or scale. Usually appears at the end of a graph to specify how the material appears in the effect. | |
A producer patch that applies a texture to the material. | |
Blends two colors or textures together. | |
Outputs a texture’s RGB, HSV, and HSL color values. Useful for isolating the color values to change the texture's appearance. | |
Outputs two combined functions as a single data stream. | |
Automatically outputs a fallback value when you disconnect the main value. For example, a color could be used as a fallback value for an image. | |
Processes each fragment in a texture individually instead of processing a texture at the vertices. | |
Used as an identity function. It always returns the same value as its argument. | |
Creates a grayscale gradient. Use with a Mix patch to create a color gradient. | |
Defines each color you want to use in a color gradient. Use this patch multiple times to add multiple colors. | |
Outputs the render target size. Useful for building effects using shaders requiring the exact pixel size, like pixel blurring. | |
Captures standard derivatives. | |
Samples a texture at the specified coordinates. | |
Used with a 2D Transform Pack patch to scale, rotate, pivot and reposition a 2D texture on a 2D or 3D object. | |
Provides the value of the selected vertex attribute among a selection of parameters. | |
Provides a vertex transformation matrix from a dropdown. |
Previewing the output of a shader patch
When you build a graph with a visual or SDF shader patch, you can see a preview of the shader patch’s output at the bottom of the patch. This lets you see the result of adding and editing a shader patch in your graph, before completing your effect.
Enabling the preview
If you can’t see the preview section on your shader patch, or the section is blank, make sure:
- Your patch graph contains a consumer patch representing the Device screen output and that it’s connected to a patch in your graph.
- The preview section is expanded. The preview is collapsed by default, click the arrow on the bottom right of the patch to expand it.
Also keep in mind that the preview section only appears on the intermediary shader patches in your graph. These are the patches in the middle section of your graph that manipulate the information taken from a producer patch, such as a Texture Asset Patch or a Function Patch. There’s also no preview section in the Gradient Step Patch.
Example
In the example below, we’re previewing the result of connecting a Blend shader patch to the patch representing the Device screen output. The result changes depending on the Blend Mode selected.
To see the result of the Blend patch reflected in the Simulator we need to connect the output of the Shader Render Pass patch to the Device screen output patch.
