How to use Post-Processing Stack in STYLY

I introduce how to use Post-Processing Stack for Unity in STYLY.

I use Post-Processing Stack and Playmaker in this article.

Introduction

In STYLY, you can change the impression of a scene by the Filter function.

STYLY Filters

However, you would face the situation where you want to fine-tune the settings for Post-Processing as you start looking at the details.

Playmaker allows you to use the Post-Processing Profile you made by your self.

I published the sample Unity project.

https://github.com/styly-dev/STYLY-Unity-Examples/tree/master/Assets/STYLY_Examples/SetPostProcessing

About Post-Processing Stack, please refer to the following presentation material by Mr. Keijirou Takahashi.

Preparation

Firstly, clone or download as .zip the repository of STYLY-Unity-Examples from GitHub.

https://github.com/styly-dev/STYLY-Unity-Examples

Open the project downloaded by Unity 2017.4.x and open the SetPostProcessing Scene.

\Assets\STYLY_Examples\SetPostProcessing\SetPostProcessing

SetPostProcessing Scene

Import Post-Processing Stack and Playmaker(a paid add-on).

Post-Processing Stack

https://assetstore.unity.com/packages/tools/visual-scripting/playmaker-368

Playmaker

https://assetstore.unity.com/packages/tools/visual-scripting/playmaker-368

Once you run Unity Editor, the PostProcess will be set.

It changes the impression a lot, doesn’t it?

Use Post Processing Stack

How to use SetPostProcessing

  1. Prepare the Post-Processing Profile you want to apply.
  2. Select SetPostProcessing(Upload to STYLY) prefab and assign it to “Post Processing Profile” under “Post Processing FSM”.

    How to Use SetPostProcessing

  3. Run Unity to make sure the specified PostProcessing Profile is applied.
  4. Upload SetPostProcessing(Upload to STYLY) to STYLY by UnityPlugin.

 

Precautions

Invalid settings for Profile

Some settings in Post Process Profile won’t work well in STYLY or VR.

Invalid settings due to the settings of STYLY (As Forward Rendering/MSAA is enabled)

  • Fog: deferred Rendering Path only works.
  • Antialiasing: Fast Approximate Anti-aliasing only works. Temporal Anti-aliasing won’t work.
  • Screen Space Reflection
Invalid settings for VR
  • Depth Of Field
  • Motion Blur
  • Chromatic Aberration: The chromatic-aberration effect towards the edges of the screen. It’s not so effective in VR.
  • Grain: The effect to add noises to the screen. I don’t recommend it for VR.
  • Vignette: The effect to blur the periphery of the screen with black colour. I don’t recommend it for VR.

Don’t place more than two SetPostProcess in one Scene.

Multiple SetPostProcess in one scene cause a confliction.

It also conflicts with Filter functions in STYLY so don’t use it either.

About Playmaker

Now, I explain about “Set Post Processing FSM”.

Open “Set Post Processing FSM” by PlaymakerEditor.

Variables

camera To get and store “Main Camera” that Post-Processing is applied to.
Post Processing Profile the file of Post Processing Profile
PostProcessingBehaviourCamera The component of “Post Processing Behaviour” to assign to “Camera”

 

 

 

 

Variables

 

They are displayed in Controls on Playmaker FSM by checking Inspector box.

It’s handy as you can set and check them without opening Playmaker Editor.

 

How to add a component to variables

I explain this as it’s a bit confusing.

For example, add a new variable with “Variable Type” set to “Object” at first in order to add the PostProcessingBehaviour component.

 

Once you added it, select Object Type>UnityEngine>PostProcessing>PostProcessingBehaviour.

You can add PostProcessingProfile in the same way.

 

The explanation about State and Action

States and Actions

Once you run it, the state of SetPostProcessing is activated and execute the following actions in sequence.

  1. “Get Main Camera” acquires “Main camera” and store it to “camera”.
  2. “Add Component” adds the PostProcessingBehaviour component to the camera, and store it to the PostProcessingBehaviourCamera variable at the same time. “Check Remove On Exit” to delete it automatically at the end of the sequence.
  3. Set the Post Processing Profile you want by SetProperty.

Run it on Unity to check out how PostProcessingProfile is executed.

 

That is all about how to use Post-Processing Stack in STYLY and the explanation about Playmaker FSM.