Creating a Glow Effect with Render Passes

The user is surrounded by glowing stars.

With render passes you can bypass the default render pipeline to produce multiple rendered layers through a custom render pipeline. While they’re a more advanced feature to work with, render passes can give you greater flexibility in what you’re able to create. In Spark AR Studio, render passes are represented as patches in the Patch Editor.

In this tutorial we’ll look at an effect that uses render passes to add a glowing sparkle to stars in the scene:

In this effect render pass patches to isolate a render of the stars. Multiple renders of the same stars are layered over the top of the first render, each layer adding an element that gradually builds the glowing sparkle - without applying the glow to the camera feed.

Download the sample content to take a look at the finished project. This tutorial will explain what each part of the graph does, and how we configured the render pass patches to achieve the finished effect.

Before you start, it’s worth taking a look at this article on render pass patches to learn the basics.

Overview of the finished effect

Before we go into detail on how each render pass patch functions to create the glowing particles, 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’ll see this graph:

The patch graph.

There are 2 Scene Render Pass patches at the start:

  • The first Scene Render Pass patch renders the scene objects and camera texture.
  • The second Scene Render Pass isolates the particles and renders the a second time, in low resolution.

The second particle render is connected to a series of patch groups, grouping visual shaders. The first group is labeled AddContrast. It adds highlight and contrast to the stars. The second 2 groups are labeled Blur. They add vertical and horizontal blurring effects to the highlighted areas of the stars - creating the final glowing effect.

Shader Render Pass patches process these shaders, followed by a Multiply patch which amplifies the overall effect.

An Add patch then connects the outputs of both Scene Render Pass patches at the end of the graph, combining the glow created by the second render pass with the fully rendered particles from the first scene render pass to add the glowing surface highlight.

The first particle render

This patch is the start of the render pipeline. It renders everything in the Scene panel into the foreground of the effect, including the particle system. This is achieved by connecting a patch representing the Device to the Scene Object input port.

The camera texture is rendered in the background, through a patch representing the camera texture connected to the Background input in the Scene Render Pass patch.

If we connected the output to the Screen Output patch, we’d have a complete render pipeline that would match the default render pipeline. The only difference is the distortion and retouching aren’t available, as they’re not supported by custom render pipeline.

Here’s how the section of the graph would look, without any additional render pass patches or visual shaders connected:

The simplified graph.

The effect would look the same as if would without a custom render pipeline. A particle system with stars is rendered. A physically-based material gives the stars the metallic appearance, but no glowing highlights:

The stars are shown in the Simulator, but do not glow.

The second particle render

For this section of the tutorial we’ve disconnected the first Scene Render Pass from the Screen Input patch. This means we’ll clearly see the second render of the particles, on a black background. We’ll combine both renders at the end of the tutorial.

The second Scene Render Pass patch

The second scene render pass renders the particles a second time by connecting a patch representing the particle system to the Scene Object input port, then connecting the Scene Render Pass to the Screen Output patch:

A patch graph containing three patches.

We made adjustments to the Size values in the Scene Render Pass patch to render the particles in low resolution, changing each value from 1 to 0.125. The low resolution builds a blurred effect, forming the basis of the final glow while rendering more efficiently.

Here’s how the effect looks in the Simulator:

The stars can be seen, but the user can't.

The AddContrast patch group

A patch group named AddContrast groups a series of visual shader patches. This group exaggerates the highlight in the stars, so they'll twinkle more. It’s added to the graph after the second Scene Render Pass patch:

A patch graph containing 4 patches.

Here’s how the effect looks in the Simulator after adding this patch group:

The stars can be seen, but the user can't.

The Blur patch groups and Shader Render Pass patches

The two Blur patch groups apply a blurring effect to the highlights created by the AddContrast patch group. One group blurs the highlight horizontally, and the other blurs the highlight vertically as defined by the Step values in each patch.

Here’s the graph with the two Blur patch groups added, each followed by a Processor Render Pass:

A patch graph containing 10 patches.

Inside the Blur patch groups, we’ve connected a series of visual shader patches to create multiple copies of the render pass, offsetting them each time and adding them back together smear the image in the direction set by the step in the patch group. This is known as a convolved kernel.

The Shader Render Passes process the visual shader patch groups at the resolution set through the Size value in the patch, then stores the result. Without them the effect processing would slow down. A Multiply patch then amplifies the effect:

The stars glow more than before.

Combining the renders

A final Add patch combines the outputs of both Scene Render Pass patches at the End of the Graph.

A Multiply patch multiplies the output from the Screen Size port in the Device patch and passes this data to each Blur patch group through the Texture Size input.

Here’s how the final graph looks, with the new Multiply and Add patches highlighted in blue:

A large patch graph.

Here's how the complete effect will look in the Simulator:

The finished effect
Was this article helpful?