Short Tutorial

This tutorial assumes you are already familiar with Three.js effect composer. The post-processing effects in Oops.js reuse the code-base of Three.js as much as it is reasonable – this includes passes and shaders from Three.js Add-ons.

Importing

Oops.js is an external add-on, and must be imported explicitly.

// importing Oops.js
import { Effects } from 'oops';

Rendering

The effects composer in Oops.js is called Effects and rendering of post-processing effects is done with its .render method.

// creating effect composer
var effects = new Effects( renderer );

// rendering effects
function animate( time ) {
	effects.render( scene, camera );
}

Adding effects

Tip: For a list of available effects see the Effects Gallery.

Effects are added with the addEffect method. Oops.js reuses the code-base of Three.js. The next example demonstrates how to create a post-processing effect combining the shaders of Sepia and Film effects.

var effects = new Effects( renderer )
		.addEffect( SepiaShader )
		.addEffect( FilmShader );

Run: Adding shaders

Some effects have dedicated passes. It is recommended to always use the pass, as it may contain additional functionality, not present in the shader. The next example uses the pass of Afterimage effect.

var effects = new Effects( renderer )
		.addEffect( new AfterimagePass(0.99) );

Run: Adding passes