Back

Post-Processing

In this guide we will learn how to use post-processing effects inside of nunuStudio.

Custom effects

It´s 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.