When I first heard about render pass before it came out officially on Spark AR, it always puzzled me on what is it really about and how can it help me in creating Instagram AR filters. From the description of those that are already familiar with render pass, it always gave me the impression that it is some magical features that can allow creators to do crazy effects!
Well, they are definitely not wrong. Render pass is indeed awesome and made many things easier! But when I first had the chance to play with it, my first thought was just pure confusion.
What is render pass? When is render pass? How is render pass? Who is render pass?
If you are thinking the same about render pass, don't worry! To save you the time and agony I had to go through to figure render pass out, here's a detailed step-by-step guide on render pass on Spark AR for beginners! At the end of this article, you won't become a render pass expert, but you will surely have a better understanding of how it works! So let's go!
From Object To Texture
In a nutshell, render pass is essentially rendering objects to a texture so that the Device (your phone) can show the texture on your screen. An inaccurate meaning of rendering is drawing, and of course, your phone, PC, or MAC is the one drawing the objects into a texture.
In the default rendering pipeline (there is no pipe here, but we use it to visualize how we render output from upstream, which is the objects, to downstream, the device), we render the whole Device (purple patch) to the Scene Render Pass patch, with Camera texture as background. This means that all objects under the Device in your scene will be rendered out as texture into the screen output under the yellow Device patch.
To repeat again here's what happened in the default render pipeline:
Device as an object (purple patch) ---> Render as Texture---> Device Screen Output
So anything you add under Device in the scene will be rendered out on your phone through Instagram, which is basically the same as not using render pass (Hence the name default).
QUICK QUIZ
Using the default render pipeline, both lights on the left image will be rendered out to the screen output. So will the plane0 on the right image be rendered out using the default render pipeline?
.
.
.
.
.
The answer is no. Simply because plane0 is outside of Device, hence it is not part of Device, which is the only object rendered out to the Screen Output.
Applying Texture Effects On 3D Model
Since we now know that the output of a Scene Render Pass patch is just a texture, any 3D object we rendered out using Scene Render Pass will just be a 2D texture.
Using the Primitive Heart 3D model (Purple patch), Ripple patch and Texture Distortion Shader patch from the Spark AR Library, we can create a distorted 3D heart by setting up the patches like the image shown above.
The result, as seen above, is a distorted 3D heart with the camera texture as background. The image before distortion can be rendered out if we skip the Texture Distortion Shader patch and go directly to the Device Screen Output from Scene Render Pass.
As the Scene Render Pass output a 2D texture which consists of the 3D heart with camera texture as background, we can distort the 3D heart with shaders by treating it as 2D texture! Which is something that couldn't be done before render pass is available.
Similarly, we can apply the following effects on 3D models.
NOTE: Only 1 Heart and 1 Sphere are used to create the example above.
And here's the patch setup! (Note that the combined 3D patch is a null object that consists of both 3D heart and 3D sphere).
Sobel Edge Detection (above)
LUT (above)
Reflection (above)
Reflection + Sobel Edge Detection (above)
Are you starting to get more excited?
But calm down my young padawan, before we proceed to a more complex render pass application, let us do a recap again.
Render pass render objects in the scene into 2D texture using Scene Render Pass patch
You can render 1 single object or a group of objects (such as Device) with 1 Scene Render Pass
Device Screen Output accepts any texture input
Texture output from Scene Render pass can be manipulated like a 2D texture, even with 3D objects
It is ok if you still more time to digest this information, re-read it if you must! But if you are ready, let us proceed to Part 2 of this tutorial for more Render Pass adventure!
Don't forget to follow us on Instagram, @gowaaaofficial ! and oh, you can download the working file from this tutorial HERE.