Learn Three.js for 3D Computer Graphics/

...

/

Render Multiple Outputs on the Same Screen

Render Multiple Outputs on the Same Screen

Learn to render multiple scenes on the same screen.

We'll cover the following...

Output of multiple renderers on the same screen

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

Press + to interact
const width = window.innerWidth || 2
const height = window.innerHeight || 2
const halfWidth = width / 2
const halfHeight = height / 2
const render = () => {
  renderer.autoClear = false
  renderer.clear()
  renderedSceneComposer.render()
  renderer.setViewport(0, 0, halfWidth, halfHeight)
  filmpassComposer.render()
  renderer.setViewport(halfWidth, 0, halfWidth, halfHeight)
  dotScreenPassComposer.render()
  renderer.setViewport(0, halfHeight, halfWidth, halfHeight)
  bloomPassComposer.render()
  renderer.setViewport(halfWidth, halfHeight, halfWidth, halfHeight)
  copyComposer.render()
  requestAnimationFrame(() => render())
}

The first thing to notice is that we set the renderer.autoClear property to false (line 6) and then explicitly call the clear() function in the render loop (line 7). If we don’t ...