Quick Tip: How to Render to a Texture in Three.js

By default, everything you render in Three.js gets sent to the screen. After all, what's the point of rendering something if you can't see it? It turns out there's a very important point: capturing the data before it gets sent to the screen (and thereby lost). 

This makes it much easier to apply post-processing effects, like color correction, color shifting, or blurring, and it's useful for shader effects, too.

This technique is known as rendering to a texture or rendering to a frame buffer; your final result is stored in a texture. which you can then render to the screen. In this Quick Tip, I'll show you how to do it, and then walk you through a practical example of rendering a moving cube onto the surfaces of another moving cube.

Note: This tutorial assumes you have some basic familiarity with Three.js. If not, check out How to Learn Three.js for Game Development.

Basic Implementation

There are a lot of examples out there on how to do this that tend to be embedded in more complicated effects. Here is the bare minimum you need to render something onto a texture in Three.js:

// @author Omar Shehata. 2016.
// We are loading the Three.js library from the CDN here: 
// http://cdnjs.com/libraries/three.js/

//// This is the basic scene setup ////

var scene = new THREE.Scene();
var width, height = window.innerWidth, window.innerHeight;
var camera = new THREE.PerspectiveCamera( 70, width/height, 1, 1000 );
var renderer = new THREE.WebGLRenderer(); 
renderer.setSize( width,height);
document.body.appendChild( renderer.domElement );

//// This is where we create our off-screen render target ////

// Create a different scene to hold our buffer objects
var bufferScene = new THREE.Scene();
// Create the texture that will store our result
var bufferTexture = new THREE.WebGLRenderTarget( window.innerWidth, window.innerHeight, { minFilter: THREE.LinearFilter, magFilter: THREE.NearestFilter});

////
// Add anything you want to render/capture in bufferScene here //
////

function render() {
	requestAnimationFrame( render );
	// Render onto our off-screen texture
	renderer.render(bufferScene, camera, bufferTexture);
	// Finally, draw to the screen
	renderer.render( scene, camera );
}

render(); // Render everything!

We first have the basic scene setup. Then, we create another scene, bufferScene; any object we add to this scene will be drawn to our off-screen target instead of to the screen.

We then create bufferTexture, which is a WebGLRenderTarget. This is what Three.js uses to let us render onto something other than the screen. 

Finally, we tell Three.js to render bufferScene:

renderer.render(bufferScene, camera, bufferTexture);

This is just like rendering a normal scene, except we specify a third argument: the render target. 

So the steps are:

1. Create a scene to hold your objects.
2. Create a texture to store what you render
3. Render your scene onto your texture

This is essentially what we need to do. It's not very exciting, though, since we can't see anything. Even if you did add things to the bufferScene, you still won't see anything; this is because you need to somehow render the texture you created onto your main scene. The following is an example of how to do that.

Example Usage

We're going to create a cube in a scene, draw it onto a texture, and then use that as a texture for a new cube!

1. Start With a Basic Scene

Here is our basic scene with a red rotating cube and a blue plane behind it. There's nothing special going on here, but you can check out the code by switching to the CSS or JS tabs in the demo.

2. Render This Scene Onto a Texture

Now we're going to take that and render it onto a texture. All we need to do is create a bufferScene just like in the above basic implementation, and add our objects to it.

If done right, we won't see anything, since now nothing is being rendered onto the screen. Instead, our scene is rendered and saved in bufferTexture.

3. Render a Textured Cube

bufferTexture is no different from any other texture. We can simply create a new object and use it as our texture:

var boxMaterial = new THREE.MeshBasicMaterial({map:bufferTexture});
var boxGeometry2 = new THREE.BoxGeometry( 5, 5, 5 );
var mainBoxObject = new THREE.Mesh(boxGeometry2,boxMaterial);

// Move it back so we can see it
mainBoxObject.position.z = -10;
// Add it to the main scene
scene.add(mainBoxObject);

You could potentially draw anything in the first texture, and then render it on whatever you like! 

Potential Uses

The most straightforward use is any sort of post-processing effect. If you wanted to apply some sort of color correction or shifting to your scene, instead of applying to every single object, you could just render your entire scene onto one texture, and then apply whatever effect you want to that final texture before rendering it to the screen. 

Any sort of shader that requires multiple passes (such as blur) will make use of this technique. I explain how to use frame buffers to create a smoke effect in this tutorial.

Hopefully you've found this little tip useful! If you spot any errors or have any questions, please let me know in the comments!