Graphics Reference
In-Depth Information
3. Now, we need to define the steps that the composer will execute. These
steps are executed sequentially and we can use them to apply multiple ef-
fects to the scene. The first step we always need to take is to render the
scene. For this, we use
THREE.RenderPass
:
var renderPass = new THREE.RenderPass(
scene, camera );
composer.addPass( renderPass );
A render pass renders a scene object using the provided camera and ren-
derer we configured in step 2.
4. Now that we've rendered the scene, we can apply a postprocessing effect.
For this recipe, we use
THREE.DotScreenShader
:
var effect = new THREE.ShaderPass(
THREE.DotScreenShader);
effect.uniforms[ 'scale' ].value = 4;
effect.renderToScreen = true;
composer.addPass( effect );
In this code snippet, we create a postprocessing step
(
THREE.ShaderPass
), add it to the composer (
com-
poser.addPass(effect)
), and tell the effect composer to render the out-
put of this step to screen by setting
renderToScreen
to
true
.
5. The final step we need to take is to alter the render loop:
function render() {
composer.render();
requestAnimationFrame(render);
}
As you can see, we now use the
composer
object we created in step 2 to
render the final output instead of
THREE.WebGLRenderer
.