By default, everything you render in Three.js is sent to the screen. After all, what's the point of rendering it if you can't see it? It turns out that there is a very important point: capture the data before it is sent to the screen (and thus lost) .
This makes it easier to apply post-processing effects such as color correction, color shift or blur, and is also useful for shader effects.
This technique is called rendering to texture or rendering to framebuffer ; the end result is stored in the texture. You can then render it to the screen. In this post, I'll show you how to do this, and then walk you through a practical example of rendering a moving cube onto the surface of another moving cube.
Note: This tutorial assumes that you have a certain basic knowledge of Three.js, or you can visit the GLTF editor to learn about the texture processing function of three.js.
Basic implementation
There are plenty of examples of how to do this, often embedded into more complex effects. Here's 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:
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 start with basic scene setup. Then, we create another scene; any objects we add to this scene will be drawn to offscreen targets rather than onscreen.bufferScene
Then we create, which is a WebGLRenderTarget. This is what Three.js uses to let us render to something other than the screen.bufferTexture
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 parameter: the render target.
So the steps are:
- Create a scene to house your objects.
- Create a texture to store the rendered content
- Render the scene to the texture
This is basically what we need to do. It's not very exciting, though, since we won't see anything. Even if you do add content to it, you still won't see anything; this is because you need to somehow render the created texture into the main scene. Below is an example of how to do this.bufferScene
Example usage
We'll create a cube in the scene, draw it onto a texture, and use it as the texture for the new cube!
1. Start with a basic scene
Here's our base scene, with a red rotating cube and a blue plane behind it. Nothing special going on here, but you can view the code by switching to the CSS or JS tab in the demo.
You can fork and edit it on CodePen .
2. Render this scene onto a texture
Now we're going to render it to a texture. All we need to do is create a base implementation similar to the one above and add our objects to it.bufferScene
You can fork and edit it on CodePen .
If done right, we won't see anything because nothing is being rendered to the screen right now. Instead, our scene is rendered and saved in .bufferTexture
3. Render the textured cube
bufferTextureNo different than 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 can fork and edit it on CodePen .
You can draw anything in the first texture, then render it onto any texture you like!
potential use
The most immediate use is any kind of post-processing effect. If you want to apply some kind of color correction or transformation to the scene, rather than to each object, you can render the entire scene onto one texture, then apply whatever effects you want to the final texture before rendering it to the screen.
Original link: three.js texture (mvrlink.com)