BabylonJS/Babylon.js · error

${className} ${this.name}: the depth texture (size: ${depthT

Error message

${className} ${this.name}: the depth texture (size: ${depthTextureDescription.size.width}x${depthTextureDescription.size.height}) and the target texture (size: ${outputTextureDescription.size.width}x${outputTextureDescription.size.height}) must have the same dimensions.

What it means

The depth texture and the target (output) texture must have identical pixel dimensions because a render pass's depth and color attachments must match in size. When getTextureDescription reports differing width/height, _checkTextureCompatibility throws with both sizes in the message.

Source

Thrown at packages/dev/core/src/FrameGraph/Tasks/Rendering/objectRendererTask.ts:562

        let depthEnabled = false;

        if (this.depthTexture !== undefined) {
            if (outputTextureDescription && this.depthTexture !== backbufferDepthStencilTextureHandle && targetTextures[0] === backbufferColorTextureHandle) {
                throw new Error(`${className} ${this.name}: the back buffer depth/stencil texture is the only depth texture allowed when the target is the back buffer color`);
            }

            const depthTextureDescription = this._frameGraph.textureManager.getTextureDescription(this.depthTexture);
            if (!outputTextureDescription) {
                outputTextureDescription = depthTextureDescription;
            }
            if (depthTextureDescription.options.samples !== outputTextureDescription.options.samples) {
                throw new Error(
                    `${className} ${this.name}: the depth texture "${depthTextureDescription.options.labels?.[0] ?? "noname"}" (${depthTextureDescription.options.samples} samples) and the output texture "${outputTextureDescription.options.labels?.[0] ?? "noname"}" (${outputTextureDescription.options.samples} samples) must have the same number of samples`
                );
            }

            if (depthTextureDescription.size.width !== outputTextureDescription.size.width || depthTextureDescription.size.height !== outputTextureDescription.size.height) {
                throw new Error(
                    `${className} ${this.name}: the depth texture (size: ${depthTextureDescription.size.width}x${depthTextureDescription.size.height}) and the target texture (size: ${outputTextureDescription.size.width}x${outputTextureDescription.size.height}) must have the same dimensions.`
                );
            }

            depthEnabled = true;
        }

        this._textureWidth = outputTextureDescription?.size.width ?? 1;
        this._textureHeight = outputTextureDescription?.size.height ?? 1;

        return depthEnabled;
    }

    protected _getTargetHandles(): FrameGraphTextureHandle[] {
        return Array.isArray(this.targetTexture) ? this.targetTexture : [this.targetTexture];
    }

    protected _prepareRendering(context: FrameGraphRenderContext, depthEnabled: boolean): Nullable<number[]> {

View on GitHub (pinned to 0592b347b8)

Solutions

1. Recreate the depth texture at the same width/height as the target texture.
2. Derive depth texture size from the target's description instead of hard-coding it.
3. Register a resize handler that resizes both textures together.

Example fix

// before
const depth = frameGraph.createDepthStencilTexture('depth', { size: { width: 1024, height: 1024 } });

// after
const desc = frameGraph.textureManager.getTextureDescription(targetTextureHandle);
const depth = frameGraph.createDepthStencilTexture('depth', { size: { width: desc.size.width, height: desc.size.height } });

const targetDesc = frameGraph.textureManager.getTextureDescription(targetHandle);
const depthDesc = frameGraph.textureManager.getTextureDescription(depthHandle);
if (depthDesc.size.width !== targetDesc.size.width || depthDesc.size.height !== targetDesc.size.height) {
    throw new Error('Depth texture must match target size');
}

try {
    frameGraph.build();
} catch (e) {
    if (String(e).includes('must have the same dimensions')) {
        recreateDepthMatching(targetHandle);
        frameGraph.build();
    } else throw e;
}

When it happens

Trigger: Depth texture created at a different resolution than the target texture (e.g. depth 1024x1024 vs target 512x512), or a resize of one texture without resizing the other, detected during record().

Common situations: Hard-coded depth texture sizes not matching render target size; window resize updating color target but not depth; shadow/RTT pipelines reusing a depth texture of a legacy size.

Related errors

• FrameGraphClearTextureTask ${this.name}: the depth texture (
• FrameGraphMotionBlurTask "${this.name}": depthTexture is req
• ${className} ${this.name}: the back buffer depth/stencil tex
• ${className} ${this.name}: the depth texture "${depthTexture
• FrameGraphHighlightLayerTask "${this.name}": objectRendererT

AI-assisted analysis of BabylonJS/Babylon.js@0592b347b8 (2026-08-30). Data as JSON: /api/errors/e3dab8eb91466efc. Report an issue: GitHub.