Photo booth example

In the following example, we will demonstrate the usage of custom shaders while creating the so called "Photo booth" effect. This effect consists of 4 quads where each is displaying the image from the camera where each has a different color overlay.

The shader we will use for this example is pretty simple: it takes the input image from the camera and mixes it with the given color overlay. The whole shader code can be found in the Custom_shader_example/photo_booth folder.

Step 1: Add custom shader to the compile shader path

In the menu toolbar, select Assets → Set custom shader → Add new and select the Custom_shader_example folder where our custom shader code is written.

Step 2: Compile the photo booth shader

From menu toolbar select Assets → Compile shaders → Compile shaders

In the shader compilation window, the user should see a message that the compilation was successful and successfully added to DeepAR Studio.

Step 3: Add 4 quads to the scene

We will render camera output to 4 quad objects in the scene so we will need to add them to the scene.

  • First, create a new effect File → Create new effect

  • After that just add 4 quads to the RootNode by selecting Node → Add Quad from toolbar menu three times

After we've done that, we need to set up a few settings for the model:

The root node must be positioned in the camera space (since the model is not driven by head movement).

  • Select RootNode and in Node properties set Position mode to Position in camera space

  • Next, for each quad in Node properties select the Layer to Post process layer

Each quad must be positioned to fill the one-quarter of the screen.
Now we have to change the position and scale of the quads:

  • Quad1 - Position X → 0.5, Position Y → 0.5, Scale X → 0.5, Scale Y → 0.5

  • Quad2 - Position X → -0.5, Position Y → 0.5, Scale X → 0.5, Scale Y → 0.5

  • Quad3 - Position X → 0.5, Position Y → -0.5, Scale X → 0.5, Scale Y → 0.5

  • Quad4 - Position X → -0.5, Position Y → -0.5, Scale X → 0.5, Scale Y → 0.5

Next, for each quad, we must set the same parameters under the Material properties.

  • For Blend mode choose Alpha

  • Under Select shader list choose the Photo Booth shader that we added before

  • For Diffuse texture choose Postprocessing texture

  • For the Color uniform chose any color you like

Do this for all 4 quads, but choose a different color for each one.

This is how the end result should look like:

Download this example with all assets

Did this answer your question?