Back

Post-Processing

In this guide we will learn how to use post-processing effects inside of nunuStudio, post-processing effects are applied after the base image was rendered. These effects can be used to give a totally different atmosphere to a scene.

The Post-processing pipeline is composed of a series of steps used to produce the final image, each step is performed by order (changing its order produces a different results). The pipeline is attached to the camera object.

To open the post-processing pipeline editor double click the camera object on the explorer.

Each post-processing step has its own custom set of attributes that can be adjusted in the editor and during runtime. Post-processing steps can be enabled/disabled and used as an output for the final image.

To try this example in the editor you can download the project file or open it on the Web Editor.

Custom effects

It is possible to create custom post-processing effects using GLSL shaders. This can be achieved using a script object that creates a custom shader pass and attaches is to the camera object as shown bellow.

The programmer has to be carefull and manage its own uniform values passed to the shader. If the effects craeted need to render to the screen dont forget to set the renderToScreen variable true.

include("SepiaShader.js");

function initialize()
{
	camera = scene.getObjectByName("camera");

	//custom shader pass
	var effect =
	{
	uniforms:
		{
			"tDiffuse": { value: null },
			"amount":   { value: 1.0 }
		},
		vertexShader: [
			"varying vec2 vUv;",
			"void main() {",
				"vUv = uv;",
				"gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);",
			"}"
		].join("\n"),
		fragmentShader: [
			"uniform float amount;",
			"uniform sampler2D tDiffuse;",
			"varying vec2 vUv;",
			"void main() {",
				"vec4 color = texture2D(tDiffuse, vUv);",
				"vec3 c = color.rgb;",
				"color.r = c.r * 2.0;",
				"color.g = c.g / 1.2;",
				"color.b = c.b;",
				"gl_FragColor = vec4(color.rgb , color.a);",
			"}"
		].join("\n")
	}

	camera.composer.passes[0].renderToScreen = false;

	var sepia = new ShaderPass(THREE.SepiaShader);
	camera.composer.addPass(sepia);
	sepia.renderToScreen = true;
}

To try this example in the editor you can download the project file or open it on the Web Editor.