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 .
Search WWH ::




Custom Search