This page has been translated automatically.
Programming
Fundamentals
Setting Up Development Environment
UnigineScript
High-Level Systems
C++
C#
File Formats
Rebuilding the Engine and Tools
GUI
Double Precision Coordinates
API
Containers
Common Functionality
Controls-Related Classes
Engine-Related Classes
Filesystem Functionality
GUI-Related Classes
Math Functionality
Node-Related Classes
Networking Functionality
Pathfinding-Related Classes
Physics-Related Classes
Plugins-Related Classes
Rendering-Related Classes
Warning! This version of documentation is OUTDATED, as it describes an older SDK version! Please switch to the documentation for the latest SDK version.
Warning! This version of documentation describes an old SDK version which is no longer supported! Please upgrade to the latest SDK version.

Creating a Custom Shader for Post-Processing

Unigine engine allows you to create your own post-effects by writing custom shaders. To write post-effect shaders, you should use the same workflow as for deferred and forward rendering passes: create the material, write vertex and fragment shaders.

This tutorial explains how to create a post-effect material, write shaders for it (both vertex and fragment), add a parameter to the material to be able to specify the value from the UnigineEditor.

See Also

Create a Material

As in all other shaders tutorials, you should create the material first. Let's add the material to the existing *.mat library of your project.

To create post-effect material, you should specify the post pass for shaders and textures.

The material will have the following structure:

Source code (XML)
<?xml version="1.0" encoding="utf-8"?>
<materials version="2.3">
	
	<!-- Other materials defined here -->

	<!-- Custom post material -->
	<material name="custom_post">

		<!-- Post-effect shaders -->
		<shader pass="post"
			defines="BASE_POST"
			vertex="<your project folder>/data/shaders/vertex/post.vert"
			fragment="<your project folder>/data/shaders/fragment/post.frag"/>
		
		<!-- Textures -->
		<texture name="color" pass="post" unit="0" type="procedural"/>
		
		<!-- Parameters -->
		<parameter name="grayscale_power" type="slider" shared="1" min="0.0" max="1.0"
		flags="max_expand">0.5</parameter>
		
	</material>
	
</materials>

The key features of the post material are:

  • Added a post pass shaders and textures.
  • Added the shared grayscale_power parameter.
Warning
You should reload the materials by using materials_reload console command, if you change the material .mat file whilst the engine is running.

Create Vertex Shader

Since we write a simple shader example, let's write a simple shader like the vertex shader for the deferred rendering pass.

  1. Write the shader code in the plain text editor:
    Source code (UUSL)
    // Include the UUSL header
    #include <core/shaders/common/common.h>
    
    // Input data struct
    STRUCT(VERTEX_IN)
    	INIT_ATTRIBUTE(float4,0,POSITION)	// Vertex position
    	INIT_ATTRIBUTE(float4,1,TEXCOORD0)	// Vertex texcoords
    	INIT_ATTRIBUTE(float4,2,COLOR0)		// Vertex color
    END
    
    // Output data struct
    STRUCT(VERTEX_OUT)
    	INIT_POSITION		// Output projected position
    	INIT_OUT(float2,0)	// Texcoords (x and y only)
    END
    
    MAIN_BEGIN(VERTEX_OUT,VERTEX_IN)
    	
    	// Set output position
    	OUT_POSITION = getPosition(IN_ATTRIBUTE(0));
    	OUT_DATA(0).xy = IN_ATTRIBUTE(1).xy;
    	
    MAIN_END
    
    // end
    Warning
    You should add a new line (press Enter) after closing the instruction (after MAIN_END command).
  2. Save the shader file with the post.vert name and extension to the data/shaders/vertex folder.

The code of the vertex shader is so simple since we don't need to work with the geometry.

Notice
Use the shaders_reload command to reload shaders whilst the engine is running.

Create Fragment Shader

This sections contains instruction how to create a fragment shader (also known as pixel shader).

To create the fragment shader for post-process pass, perform the following:

  1. Open a plain text editor, and write the following:
    Source code (UUSL)
    // Include the UUSL fragment shader header
    #include <core/shaders/common/fragment.h>
    
    // Define the texture of the scene
    INIT_TEXTURE(0,TEX_SCENE)
    
    INIT_TEXTURE(TEX_SCENE)
    
    // Input values
    STRUCT(FRAGMENT_IN)
    	INIT_POSITION		// Projected position
    	INIT_IN(float2,0)	// Texcoords
    END
    
    // Define the grayscale_power parameter
    CBUFFER(parameters)
    	UNIFORM float grayscale_power;
    END
    
    MAIN_BEGIN(FRAGMENT_OUT,FRAGMENT_IN)
    	
    	// Get the UV
    	float2 uv = IN_DATA(0);
    	
    	// Get the scene color
    	float4 scene_color = TEXTURE_BIAS_ZERO(TEX_SCENE,uv);
    	
    	// Calculate the grayscale
    	float3 gray_scene_color = FLOAT3(dot(float3(0.3f, 0.59f, 0.11f), scene_color.rgb));
    	scene_color.rgb = lerp(scene_color.rgb,gray_scene_color,FLOAT3(grayscale_power));
    	
    	OUT_COLOR = scene_color;
    	
    MAIN_END
    
    // end
    Warning
    You should add a new line (press Enter) after closing the instruction (after MAIN_END command).
  2. Save the shader file with the post.frag name and extension to the data/shaders/fragment folder.

Well, let's clarify what is under the hood of this fragment shader:

  • We get the texture which was specified in the post-effect material.
  • By applying a standard grayscale equation, we change the color of the scene.
  • By using lerp function (which performs a linear interpolation), we add the custom parameter to adjust the grayscale power.
Notice
Use the shaders_reload console command to reload shaders whilst the engine is running.

See Also

Editing the Material

Material has been created, shaders have been written, it's time to use it in the project!

  1. Open UnigineEditor and launch your project.
  2. Create a new material by inheriting recently created in the Materials settings window.
  3. Open the Rendering Settings window by choosing Windows -> Rendering Settings on the main tab (or pressing the Alt+R hotkey combination.

  4. In the Common tab of the Rendering Settings window, specify the name of the child post material in the Post field.

    The grayscale post-effect will be applied.

  5. Go to the Material settings, open the Parameters tab of the applied post material.

    Set up the grayscale post-effect by adjusting the grayscale power parameter.

    The final scene.
Last update: 2017-07-03
Build: ()