Game Development Reference
In-Depth Information
Renderer effects and postprocessing
Sometimes, effects that change the entire display can give a game or area a lot of
personality. Three.js supports two major kinds of effects: renderer and postprocessing.
Renderer effects can be found in
examples/js/effects
. They change what the
renderer outputs, usually by rendering the scene multiple times with different
settings. For example, the Anaglyph effect produces the familiar red-and-blue
shadows that work with 3D glasses to make the scene pop out of the screen, and it
does this by rendering the scene once for the left eye, once for the right eye, and once
combined. Setting this up is easy:
effect = new THREE.AnaglyphEffect(renderer);
effect.setSize(renderer.domElement.width, renderer.domElement.height);
Then just call
effect.render(scene, camera)
instead of
renderer.
render(scene, camera)
. All of the other renderer effects work the same way except
the ASCII effect, which requires adding a separate canvas so it can render the scene
to text characters.
Postprocessing effects work by applying a GLSL shader over the scene. There are
many shaders that can be used in the
examples/js
,
examples/js/postprocessing
,
and
examples/js/shaders
folders. Most of these are just fun, but a few are useful in
games. The
DOF
(
(depth-of-field)
) effect, for example, blurs distant objects and brings
closer ones into focus.
The
EffectComposer
in
examples/js/postprocessing
makes applying
post-processing easier and allows using multiple effects. For example, to
use the
EdgeShader
, start by adding the necessary files in your HTML:
<script src="EdgeShader.js"></script>
<script src="CopyShader.js"></script>
<script src="ShaderPass.js"></script>
<script src="RenderPass.js"></script>
<script src="MaskPass.js"></script>
<script src="EffectComposer.js"></script>
Then set up the effect:
composer = new THREE.EffectComposer(renderer);
composer.addPass(new THREE.RenderPass(scene, camera));
var effect = new THREE.ShaderPass(THREE.EdgeShader);
effect.uniforms['aspect'].value.x = renderer.domElement.width;
effect.uniforms['aspect'].value.y = renderer.domElement.height;
composer.addPass(effect);
effect = new THREE.ShaderPass(THREE.CopyShader);
effect.renderToScreen = true;
composer.addPass(effect);
