Learn Three.js - Third Edition

Showing the output of multiple renderers on the same screen

This section won't go into detail on how to use postprocessing effects, but will explain how to get the output of all four THREE.EffectComposer instances on the same screen. First, let's look at the render loop used for this example:

  renderer.autoClear = false;  function render() {    stats.update();    var delta = clock.getDelta();    trackballControls.update(delta);    renderer.clear();        renderer.setViewport(0, 0, halfWidth, halfHeight);    effectFilmComposer.render(delta);    renderer.setViewport(0, halfHeight, halfWidth, halfHeight);    bloomComposer.render(delta);        renderer.setViewport(halfWidth, 0, halfWidth, halfHeight);    dotScreenComposer.render(delta);     renderer.setViewport(halfWidth, halfHeight, ...