mrdoob/three.js · error · Error

THREE.WebGLRenderer: Attached DepthTexture is initialized to

Error message

THREE.WebGLRenderer: Attached DepthTexture is initialized to the incorrect size.

What it means

Thrown when a render target's attached DepthTexture has been initialized to dimensions that do not match the render target's width/height. The check fires while setting up the depth renderbuffer when a different depth texture is bound. Mismatched depth-texture dimensions make the framebuffer incomplete, so three.js refuses it.

Source

Thrown at src/renderers/WebGLRenderer.js:2954

				} else if ( renderTargetProperties.__hasExternalTextures ) {

					// Color and depth texture must be rebound in order for the swapchain to update.
					textures.rebindTextures( renderTarget, properties.get( renderTarget.texture ).__webglTexture, properties.get( renderTarget.depthTexture ).__webglTexture );

				} else if ( renderTarget.depthBuffer ) {

					// check if the depth texture is already bound to the frame buffer and that it's been initialized
					const depthTexture = renderTarget.depthTexture;
					if ( renderTargetProperties.__boundDepthTexture !== depthTexture ) {

						// check if the depth texture is compatible
						if (
							depthTexture !== null &&
							properties.has( depthTexture ) &&
							( renderTarget.width !== depthTexture.image.width || renderTarget.height !== depthTexture.image.height )
						) {

							throw new Error( 'THREE.WebGLRenderer: Attached DepthTexture is initialized to the incorrect size.' );

						}

						// Swap the depth buffer to the currently attached one
						textures.setupDepthRenderbuffer( renderTarget );

					}

				}

				const texture = renderTarget.texture;

				if ( texture.isData3DTexture || texture.isDataArrayTexture || texture.isCompressedArrayTexture ) {

					isRenderTarget3D = true;

				}

View on GitHub (pinned to da05705fa3)

Solutions

Create the DepthTexture with the SAME dimensions as the render target, and recreate it whenever the render target is resized.
In your resize handler, after renderTarget.setSize(w,h), also set renderTarget.depthTexture = new THREE.DepthTexture(w, h, ...).
Do not share a single DepthTexture across render targets of different sizes; create one per target.
Validate depthTexture.image.width/height against renderTarget.width/height before rendering.

Example fix

// before
const rt = new THREE.WebGLRenderTarget( 1024, 1024 );
rt.depthTexture = new THREE.DepthTexture( 512, 512 ); // wrong size

// after
const rt = new THREE.WebGLRenderTarget( 1024, 1024 );
rt.depthTexture = new THREE.DepthTexture( rt.width, rt.height );
// on resize:
function onResize( w, h ) {
  rt.setSize( w, h );
  rt.depthTexture = new THREE.DepthTexture( w, h );
}

Defensive patterns

Strategy: validation

Validate before calling

function attachDepthTexture( renderTarget, type = THREE.UnsignedIntType ) {
  renderTarget.depthTexture = new THREE.DepthTexture( renderTarget.width, renderTarget.height, type );
}
// call after every setSize:
function resizeRT( renderTarget, w, h ) {
  renderTarget.setSize( w, h );
  attachDepthTexture( renderTarget );
}

Prevention

Always size DepthTexture to match the render target exactly.
Recreate the DepthTexture whenever the render target is resized.
Do not share a single DepthTexture across differently-sized targets.
Validate depthTexture.image.width/height against renderTarget.width/height before rendering.

When it happens

Trigger: Assigning renderTarget.depthTexture = new THREE.DepthTexture(w, h) with w/h != renderTarget.width/height; resizing the renderTarget (resize()) after attaching a depth texture without also recreating the depth texture; reusing a depth texture across differently-sized targets.

Common situations: Window/canvas resize handlers that call renderTarget.setSize() but forget to recreate the DepthTexture; shadow-map or post-processing pipelines that share a DepthTexture; copy-paste of DepthTexture setup with hardcoded sizes.

Related errors

AI-assisted analysis of mrdoob/three.js@da05705fa3 (2026-08-12). Data as JSON: /api/errors/a29cda843ef2075e. Report an issue: GitHub.