Spark AR is Facebook’s free AR creation platform that enables users to create interactive AR experiences for Facebook and Instagram. More than 400,000 creators in 190 countries have used Spark AR to create their own AR creations
Since the software requires no coding knowledge to use, anyone can now lead the world by creating the next crazy viral Instagram AR effects with little experience in the AR world.
Specialized AR filter designers can cost anywhere from $1,000 to $30,000.
With render channels, you can bypass the default render pipeline and generate multiple render layers with a custom render pipeline. They are a more advanced feature and render passes give you more creative flexibility. In Spark AR Studio, render passes are represented as tiles in the patch editor.
In this tutorial, we’ll look at an effect that uses render passes to add a flash to the stars in the scene:
In this effect, the render is rendered independently of the stars through patches. Multiple renders of the same star are layered on top of the first render, adding an element to each layer, gradually building up the glowing flash — without applying the flash to the Camera Feed.
Download the sample content to see the completed project. This tutorial will explain what each part of the diagram does and how we configure the render channel patch to achieve the final effect.
Link: pan.baidu.com/s/1dtqDxs9U… Extraction code: Q66R
Before we begin, it’s worth taking a look at this article on render channel patches to learn the basics.
Complete the overview of the effects
Before we dive into the details of how each render creates glowing particles via the patch feature, it’s worth looking at the project as a whole. To do this, open the finished effect in the sample content folder. In the patch editor, you should see the following image:
At the beginning there are 2 scene render pass patches:
- The first Scene Render Pass patch renders the Scene object and camera texture.
- The second Scene Render Pass separates the particles and performs a second rendering at low resolution.
The second particle rendering is connected to a series of patch groups that group visual shaders. The first group is marked as AddContrast. It increases the brightness and contrast of the stars. The second group (2) was marked with Blur. They added vertical and horizontal blur effects to the highlighted areas of the stars to create the final glow effect.
The Shader Render Pass patch processes these shaders, followed by a Multiply patch that magnifies the overall effect.
The Add patch then connects the output of the two Scene Render passes to the end of the image, combining the glow created by the second Render Pass with the full Render particles of the first Scene Render Pass to Add glowing surface highlights.
Rendering of the first particle
This patch is the beginning of the rendering pipeline. It renders everything in the scene panel into the foreground of the effect, including the particle system. This is done by connecting a patch representing the Device to the Scene Object input port.
The camera texture is rendered in the Background via a patch representing the camera texture connected to the Background input in the Scene Render Pass patch.
If we connect the Output to the Screen Output patch, we will have a complete render pipeline that will match the default render pipeline. The only difference is distortion and Retouching are not available as they do not support custom rendering pipelines.
Below is a cross-sectional view of the image without any additional render channel patches or visual shaders attached:
The effect looks like there is no custom rendering pipeline. Render a particle system with stars. A physics-based material gives the stars a metallic appearance, but no glowing highlights:
Second particle rendering
In this tutorial, we disconnect the first Scene Render Pass from the Screen Input patch. This means we will see the second rendering of the particle clearly on a black background. At the end of this tutorial, we will combine these two renderings.
The secondScene Render PassThe patch
The second scene Render Pass renders particles a second time by connecting a patch representing the particle system to the Scene Object input port and then connecting the Scene Render pass to the Screen Output patch:
We adjusted the Size value in the Scene Render Pass to Render particles at low resolution, changing each value from 1 to 0.125. The lower resolution builds the blur effect and forms the basis for the final glow while rendering more efficiently.
Here’s how it looks in the simulator:
AddContrast patch group
A patch group called AddContrast groups a series of visual shader patches. This group magnifies the highlights of the stars, so they twinkle more. It was added to the chart after the second Scene Render Pass patch:
Here’s what the patch group looks like:
Blur Patch Group and Shader Render Pass patch
The two Blur patches apply a Blur effect to the highlights created by the AddContrast patch group. One set of horizontal blur highlights and the other set of vertical blur highlights are defined by the Step value in each patch.
Here is the image with two Blur patch groups, each with a Processor Render Pass behind it:
In the Blur patch group, we connected a series of visual coloring patches to create multiple copies of the render channel, offsetting them each time and adding them together to paint the image in the direction set by Step in the patch group. This is called the convolution kernel.
Shader Render Passes processes the group of visually colored patches at resolution (set by the Size value in the patch) and stores the results. Without them, effect processing is slow. Next, a Multiply patch magnifies the effect:
Merge renderer
The final Add patch merges the output of the two Scene Render Pass patches at the end of the graph.
Multiply the Multiply patch by the output of the Screen Size port of the Device patch and pass this data to each Blur patch group via the Texture Size input.
Here is the final image, with the new Multiply and Add patches highlighted in blue:
Here’s the full effect in the simulator:
