Book Image

Learning Three.js - the JavaScript 3D Library for WebGL

By : Jos Dirksen
Book Image

Learning Three.js - the JavaScript 3D Library for WebGL

By: Jos Dirksen

Overview of this book

Table of Contents (20 chapters)
Learning Three.js – the JavaScript 3D Library for WebGL Second Edition
Credits
About the Author
Acknowledgments
About the Reviewers
www.PacktPub.com
Preface
8
Creating and Loading Advanced Meshes and Geometries
Index

Setting up Three.js for postprocessing


To set up Three.js for postprocessing, we need to make a couple of changes in our current setup. We need to take the following steps:

  1. Create THREE.EffectComposer, which we can use to add postprocessing passes.

  2. Configure THREE.EffectComposer so that it renders our scene and applies any additional postprocessing steps.

  3. In the render loop, use THREE.EffectComposer to render the scene, apply the passes, and show the output.

As always, we have an example that you can use to experiment with and adopt for your own uses. The first example for this chapter can be accessed from 01-basic-effect-composer.html. You can use the menu in the top-right corner to modify the properties of the postprocessing step used in this example. In this example, we render a simple globe and add an old-television-like effect to it. This television effect is added after the scene is rendered using THREE.EffectComposer. The following screenshot shows this example:

Creating THREE.EffectComposer...