Point Clouds and Postprocessing - Three.js - page 288

if (alen < clen) choice = a;
else choice = c;
} else {
if (blen < clen) choice = b;
else choice = c;

}
choice.x += choice.y * 0.5;
choice.y *= 0.866025404;
choice *= scale / texSize;
gl_FragColor = texture2D(tDiffuse,

choice

+ center / texSize);

}
</script>

This is a rather large shader program and explaining the details is a bit out of
scope for this recipe. In short, what happens is that this shader looks at the
color of the surrounding pixels and based on that, it determines how to draw
this pixel. The important item to notice here is uniform sampler2D tDif-
fuse at the top of the code. This is the output of the previous render step
passed into the shader as a 2D texture. Using tDiffuse in the calculations,
we can change the output that is rendered on screen. If we don't want to ap-
ply an effect, we would just use vec4 color = texture2D(tDiffuse,
texCoord) to set the output color.

5. The last step is to update the render loop to use composer instead of ren-
derer:

function render() {
composer.render();
requestAnimationFrame(render);

}

Writing shaders is difficult work; a setup like this, however, makes it a lot easier to
create your own custom shaders. Just replace the fragment shader from step 4 with
your own implementation and you can start experimenting.