Search⌘ K
AI Features
Home
Courses
Learn Three.js for 3D Computer Graphics

Render Multiple Outputs on the Same Screen

Explore how to render multiple EffectComposer outputs on a single screen using Three.js by setting viewports and managing the render loop. Understand how to divide the screen into sections for different postprocessing effects while preventing render clearing between passes.

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:

Javascript (babel-node-es2024)
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 ...