Properly disposing of THREE.EffectComposer

I’ve got a multi-page application setup where renderers are created and destroyed when navigating to a different route. I’m using THREE.EffectComposer with a THREE.RenderPass and THREE.OutlinePass… but they don’t have dispose() methods which is becoming a huge problem.

Anyone know of a dependable way to cleanup these objects?

I think i figured it out. There was a geometry trapped in a closure that couldn’t be deallocated. It’s in examples/js/postprocessing/EffectComposer.js

THREE.Pass.FullScreenQuad = ( function () {

var camera = new THREE.OrthographicCamera( - 1, 1, 1, - 1, 0, 1 );
var geometry = new THREE.PlaneBufferGeometry( 2, 2 );

var FullScreenQuad = function ( material ) {

	this._mesh = new THREE.Mesh( geometry, material );


The fix is to move that geometry into FullScreenQuad(){} so that you can call dispose on it later. Somehow it was trapping a bunch of other objects (like WebGLRenderTarget) in memory.


I think it would be good to clarify this issue. I don’t think a geometry does prevent a render target from being disposed.

Yes I’m confused too. I’d love to figure out what’s going on. I tried to isolate the behaviour in a jsfiddle but couldn’t replicate it. The project is rather large, so i guess there are some other things going on.

The project (soon to be released) is here:

Every time i switch views, the canvas/renderer/scene/etc are disposed of and re-initialized. If i take away my “fix”, and don’t call …copyPass.fsQuad._mesh.geometry.dispose(), this is what I see in the profiler.

The blue bars seem to indicate that something huge is getting retained… memory usage increases by around 200MB every time i switch. Looks like the “Detached……” things are not being cleaned. I’m not sure why. Any idea what they are?

When i do apply my fix, and call dispose on the fsQuad geometry, this is what it looks like:

Memory leak gone….

So I’m not sure what’s going on. Maybe you have ideas?

Here’s a link to the heap timeline.

I believe I’ve run into a similar issue.

I’m using react-three-fiber and when a certain mesh gets added to the scene I instantiate an effectComposer and add an outlinePass + some shaderPasses. A few seconds later I remove the OutlinePostProcessing component (aka the effectComposer and all the passes). However, there are 2 textures that stick around in webGL memory. I’ve confirmed it’s the passes causing the increase in textures in memory.

I can’t figure out how to dispose of the textures being created by the passes. Anybody have a clue of how I could dispose properly?