Graphics Reference
In-Depth Information
In this recipe, we've only used a single postprocessing step, but you can use as
many steps as you want. You just have to remember that in the final step, you set
the
renderToScreen
property to
true
.
How it works...
In a couple of recipes, we've already explained that Three.js uses WebGL shaders
to render the 3D scenes.
THREE.EffectComposer
uses the same approach. Each
of the steps you add run a simple vertex and fragment shader on the output from
the previous step. In the
Creating custom postprocessing steps
recipe, we'll dive into
more detail and create a custom postprocessing step ourselves.
There's more
Three.js provides a large number of standard shaders and steps you can use in
THREE.EffectComposer
. For a complete overview of the possible shaders and
standard steps, look at the following directories:
This directory contains all the standard postprocessing steps you can use
with
THREE.EffectComposer
.
Three.js provides the
THREE.ShaderPass
postprocessing step, which al-
lows you to directly use WebGL shaders. On this page, you can find a large
number of shaders that can be used with the
THREE.ShaderPass
ob-
ject.
See also
• Even though Three.js provides a large number of standard shaders and post-
processing steps, you can also easily create your own. In the
Creating cus-
tom postprocessing steps
recipe, we show you how to create a custom ver-
tex and fragment shader that works with
THREE
.
EffectComposer
.
