How do I clear a WebGLRenderTarget texture?

Questions
1

I’m using 2 WebGLRenderTargets that have a cumulative shader. Over time, the output of the previous frame gets added to the current frame, so the colors get brighter and brighter. Upon the click of a button, I’d like to reset the textures back to their original black state. Is there a built-in way to achieve this?

WebGLRenderTarget doesn’t have any clear() or clearBuffer() methods and neither does Texture. Is the only available approach to render a screen-sized black plane with these targets as render destinations to reset the two textures? I’ve thought of an approach, but it’s very burdensome and requires the creation of a lot more objects. Is there something simpler, like clearColorBuffer()?

const geom = new PlaneBufferGeometry(2, 2);
const mat = new MeshBasicMaterial({color: new THREE.Color(0x000000)});
const clearMesh = new Mesh(geom, mat);
const clearCam = new Camera();

renderer.setRenderTarget(renderTarget1);
renderer.render(clearMesh, clearCam);
renderer.setRenderTarget(renderTarget2);
renderer.render(clearMesh, clearCam);
2

You can use the WebGLRenderer.clear() function.

1 Like
3

Call renderer.clear() after switching to the render target.

renderer.setRenderTarget( renderTarget1 );
renderer.clear();
2 Likes
4

I found that this also seems to work normally:

let cubeRenderTarget, cubeCamera;
cubeRenderTarget = new THREE.WebGLCubeRenderTarget( 256 );
cubeCamera = new THREE.CubeCamera( 1, 1000, cubeRenderTarget );

In update function:

// pre-render
cubeCamera.update( renderer, scene );

// post-render
cubeRenderTarget.dispose();