Cyclone: How to Customize Post Effects

This guide goes over how to apply additional post processing effects to the game.

 

Getting Started

Cyclone allows end users to write and use custom post processing effects in their game. These settings are loaded from a json file and applied to the camera on top existing post processing effects.

You first need to run Cyclone so a userposteffects.json file is created under %APPDATA%\Cyclone(Or the UserData directory).

Caution: Each post processing effect opens and closes the buffer. Too many post processing effects can hinder performance, especially with large resoultions.

Adding Effects

When you first open the userposteffects.json, you’ll come across an empty array container.
{
    "defaultCameraPostEffects": []
}

The brackets “[]” is where you want to define the path look up of your post processing effects. Conveniently, all post processing effects are under a directory Shaders/PostEffects within the data_common.pak file.

To add a shader, you’ll first need to know what file you want to load. For now, lets call the bloom shader.

Edit the json file to it looks like this:

{
    "defaultCameraPostEffects": 
    [
        "Shaders/PostEffects/bloom.lua"
    ]
}

Relaunch the game, and maps should look “brighter”.

Results:

Let’s add another one! All we need to do is add a comma “,” to the last entry we’ve made and define another post processing effect. Let’s try a vignette effect.

{
    "defaultCameraPostEffects": 
    [
        "Shaders/PostEffects/bloom.lua",
        "Shaders/PostEffects/vignette.shader"
    ]
}
Results:

Remember, the order of the shaders matter and can change how the final result looks.

Here’s a list of cool shaders you can try!

  • “Shaders/PostEffects/bloom.lua”
  • “Shaders/PostEffects/filmgrain.shader”
  • “Shaders/PostEffects/grayscale.shader”
  • “Shaders/PostEffects/irisadjustment.lua”
  • “Shaders/PostEffects/ssao.shader”
  • “Shaders/PostEffects/ssr.shader”
  • “Shaders/PostEffects/vignette.shader”
  • “Shaders/PostEffects/vintage.shader”
  • “Shaders/PostEffects/wobble.shader”

Why aren’t some of these default?

One answer: performance!

Crash Courses 00-17 use a colorgrading shader to saturate some colors on LCD displays and that decision was made late in development. Each pixel on the screen gets rendered per frame. The more post processing the frame needs to process, the more slower the render. Originally, Cyclone used no post processing.

Allowing players to make the call over looks over performance based on their system specs seemed like a good option, and hopefully will be taken advantage of.

I know GLSL. Can I write my own?

Yes!

Cyclone loads .shader files which is a text file one file containing the Vertex, Fragment, Geometry shaders and more in one compact file.

Here’s a sample post shader that draws nothing to the screen.

SHADER version 1
@OpenGL2.Vertex
#version 400

uniform mat4 projectionmatrix;
uniform mat4 drawmatrix;
uniform vec2 offset;
uniform vec2 position[4];

in vec3 vertex_position;

void main(void)
{
    gl_Position = projectionmatrix * (drawmatrix * vec4(position[gl_VertexID]+offset, 0.0, 1.0));
}
@OpenGLES2.Vertex

@OpenGLES2.Fragment

@OpenGL4.Vertex
#version 400

uniform mat4 projectionmatrix;
uniform mat4 drawmatrix;
uniform vec2 offset;
uniform vec2 position[4];

in vec3 vertex_position;

void main(void)
{
    gl_Position = projectionmatrix * (drawmatrix * vec4(position[gl_VertexID]+offset, 0.0, 1.0));
}
@OpenGL4.Fragment
#version 400

uniform sampler2D texture1;
uniform bool isbackbuffer;
uniform vec2 buffersize;

out vec4 fragData0;

void main(void)
{
    vec2 icoord = vec2(gl_FragCoord.xy/buffersize);
    if (isbackbuffer) icoord.y = 1.0 - icoord.y;
    fragData0 = texture(texture1,icoord);
}

 

Conclusion

This is the first step allowing players to tweak Cyclone to their liking. I hope you’ve found this interesting.

Thanks to Reepblue for his great guide, all credit to his effort. you can also read the original guide from Steam Community. enjoy the game.

Leave a Comment