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