The Patch Editor
Render Pass Patches
Introduction to Render Passes

Render Passes Overview

Render passes let you bypass the default render pipeline in Spark AR Studio to produce multiple rendered results in your AR effect. While they’re a more advanced feature to work with, they give greater flexibility in what you’re able to create.

A render pass is a computation that uses a combination of textures and numerical parameters to produce another texture. Connecting the result to another render pass patch adds further complexity.

Use them to render scene objects, textures and visual shaders. They’re particularly useful for applying different visual shader treatments to separate scene elements or to the final camera feed.

In Spark AR Studio render passes are represented as patches in the Patch Editor. Take a look at how we've used render passes to add a glow effect to objects in this tutorial.

Available patches

PatchDescription
Scene Render Pass

Renders a scene object and all of its children. Create this patch using the menu in the Patch Editor.

Shader Render Pass

Renders one or more visual shaders or textures, creating complex textures formed of multiple images.

Delay Frame Patch

Use the Delay Frame patch to reuse a render pass from the previous frame in the current frame.

Face Extraction Render Pass

Use the Face Extraction Render Pass patch to add the face tracker texture to effects that use render pass patches.

Rendering the output

To set up a custom render pipeline with render passes you’ll first need a patch representing the Screen Output property of the Device scene object. You can either:

  • Add this patch individually.
  • Add a pre-made patch graph that includes the Screen Output patch, setting up a default render pipeline you can then edit.

Adding the Screen Output patch individually

To create this patch:

  1. Select the Device in the Scene panel.
  2. Go to the Inspector.
  3. Click the circle on the left of Render Pass.

A consumer patch labeled Screen Output will be added to the Patch Editor:



What’s rendering is now driven by patches. Because there are no patches connected to the Screen Output patch the Simulator video will be replaced by a blue screen:

The default render pipeline

This is patch graph that includes a Scene Render Pass patch, creating a complete render pipeline.

To create this graph:

  1. Select the Device in the Scene panel.
  2. In the Inspector, go to Default Pipeline.
  3. Click the Create button.

A graph will be added to the Patch Editor, containing a:

  • Screen Output patch.
  • Scene Render Pass patch.
  • Patch representing the camera texture.
  • Patch representing the Device scene object.


The camera texture patch is connected to the Background input in the Scene Render Pass patch. This renders the camera texture across the background of the scene.

The patch representing the device is connected to the Scene Object input port, rendering all children of the Device in the Scene panel over the input in the Background port.

In the image below we’ve added the default render pipeline to a scene featuring 3D text. The 3D text renders over the camera texture:

Without the camera texture patch the background of the scene is black by default:

To edit the background color, adjust the Default Color value in the patch.

The output of the Scene Render Pass patch is an image. The render size of the image can be set using the Size values in the Scene Render Pass patch.

Limitations

You can’t use these objects and capabilities with render passes:

  1. Face deformation.
  2. The retouching material.
  3. The face tracker texture. Use the Face Extraction Render Pass instead.

Scene Render Pass patches won’t render an alpha channel.

Best Practices

Planning

Using a custom render pipeline will impact how you arrange your scene hierarchy, so plan your effect and rendering strategy in advance.

Testing

As with any AR effect, test early and iterate, adding complexity as you go.

Because large render pipelines can impact performance, it’s important to test on a range of devices.

Building your graph

Visually debug your graph by frequently moving the Screen Output patch, connecting it at different stages.

To improve efficiency, take a non-linear approach - rather than render something again, recycle it from an earlier stage of your visual shader graph.

Was this article helpful?