Game Development Reference
In-Depth Information
This code requests two postprocessing rendering passes during which the edge and
copy shaders will both be applied. The edge effect requires knowledge of the canvas
size, and the effects will be rendered after the copy shader is applied. The final step
is to replace our
renderer.render(scene, camera)
call with
composer.render()
,
and we get a pretty dramatic result, as you can see in the next screenshot:
Our game with the edge shader postprocessor
As previously mentioned, shaders are written in GLSL instead of JavaScript, and
they can get pretty complex. As a result, we won't talk about how to write them
here. However, you can browse and fork some shaders other people have written at
https://glsl.heroku.com/
. Three.js author
Mr.doob
has also written a shader editor
at
http://www.mrdoob.com/projects/glsl_sandbox/
, and
Thibaut Despoulain
has
written one as well at
http://shdr.bkcore.com/
. Note that shaders can be used to
display pretty much anything, and most shaders don't make sense as postprocessors.
