Chapter 842: Render Targets (Manual)

Core Idea

A WebGLRenderTarget is a texture you render into, letting you draw a whole separate scene offscreen and then use the result as an ordinary texture elsewhere — the basis for shadows, picking, post-processing, and effects like mirrors or in-scene monitors.

Key Concepts

• WebGLRenderTarget: created much like a normal render target/canvas setup, but you render into it instead of the visible canvas.
• Separate scene/camera for the target's content: the offscreen scene and camera are independent from the main visible scene/camera, with their own aspect ratio matched to the render target's shape (e.g. 1.0 for a square target used on a cube face) rather than the canvas's aspect.
• Two-pass render order: first render the offscreen scene into the render target (renderer.setRenderTarget(rt)), then render the main scene to the canvas as usual, where one of its materials uses renderTarget.texture as a map.
• Common uses: shadow maps, GPU-based picking, post-processing effects, and any "screen within the scene" effect (rear-view mirrors, in-world monitors/live views).

Code Examples

const rtWidth = 512;
const rtHeight = 512;
const renderTarget = new THREE.WebGLRenderTarget(rtWidth, rtHeight);

const rtScene = new THREE.Scene();
const rtCamera = new THREE.PerspectiveCamera(75, rtWidth / rtHeight, 0.1, 5);
// ...add lights/meshes to rtScene...

function render() {
  renderer.setRenderTarget(renderTarget);
  renderer.render(rtScene, rtCamera);
  renderer.setRenderTarget(null);

  renderer.render(scene, camera); // scene contains a mesh using renderTarget.texture as its map
}

• What it demonstrates: the two-pass pattern — render an offscreen scene into a render target, then render the main scene using that target's texture.

Key Takeaways

1. A render target is just a texture-you-can-render-into; anything drawn to it becomes usable as a normal texture afterward.
2. Give the offscreen scene's camera the render target's own aspect ratio, not the canvas's.
3. Always render to the target first, then reset with renderer.setRenderTarget(null) before rendering the visible scene.
4. Shadows, picking, post-processing, and in-scene "screens" all build on this same offscreen-render-then-reuse-as-texture pattern.

Connects To

• How to Use Post Processing (manual): EffectComposer is built on chained render targets.
• Picking (manual): GPU picking renders an id-encoded scene to a render target.