FrameGraphClearTextureTask ${this.name}: the depth texture (

Error message

FrameGraphClearTextureTask ${this.name}: the depth texture (size: ${depthDescription.size.width}x${depthDescription.size.height}) and the target texture (size: ${targetDescription.size.width}x${targetDescription.size.height}) must have the same dimensions.

What it means

When FrameGraphClearTextureTask is given both a target texture and a depth texture, record() checks that their dimensions match, since the clear pass clears both attachments in one render pass whose viewport size must be consistent. Mismatched sizes throw with both sizes in the message.

Source

Thrown at packages/dev/core/src/FrameGraph/Tasks/Texture/clearTextureTask.ts:95

        if (this.targetTexture === undefined && this.depthTexture === undefined) {
            throw new Error(`FrameGraphClearTextureTask ${this.name}: targetTexture and depthTexture can't both be undefined.`);
        }

        const textureManager = this._frameGraph.textureManager;
        const targetTextures = this.targetTexture !== undefined ? (Array.isArray(this.targetTexture) ? this.targetTexture : [this.targetTexture]) : undefined;

        if (this.targetTexture !== undefined) {
            textureManager.resolveDanglingHandle(this.outputTexture, targetTextures![0]);
        }
        if (this.depthTexture !== undefined) {
            textureManager.resolveDanglingHandle(this.outputDepthTexture, this.depthTexture);
        }
        if (this.targetTexture !== undefined && this.depthTexture !== undefined) {
            const targetDescription = textureManager.getTextureDescription(targetTextures![0]);
            const depthDescription = textureManager.getTextureDescription(this.depthTexture);

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

            const textureSamples = targetDescription.options.samples || 1;
            const depthSamples = depthDescription.options.samples || 1;

            if (textureSamples !== depthSamples && textureSamples !== 0 && depthSamples !== 0) {
                throw new Error(
                    `FrameGraphClearTextureTask ${this.name}: the depth texture (${depthSamples} samples) and the target texture (${textureSamples} samples) must have the same number of samples.`
                );
            }
        }

        const attachments = this._frameGraph.engine.buildTextureLayout(
            targetTextures ? Array(targetTextures.length).fill(true) : [],
            this.targetTexture === backbufferColorTextureHandle && !this._frameGraph.textureManager.backBufferTextureOverriden
        );

View on GitHub (pinned to 0592b347b8)

Solutions

Recreate the depth texture at the same width/height as the target texture.
Derive the depth size from the target description before creating it.
If sizes must differ, use two separate clear tasks (one for color, one for depth) instead of one.
Synchronize both textures in your resize logic.

Example fix

// before
clearTask.targetTexture = colorTexture;   // 1920x1080
clearTask.depthTexture = depthTexture;    // 1024x1024

// after
const desc = frameGraph.textureManager.getTextureDescription(colorHandle);
const depthTexture = frameGraph.createDepthStencilTexture('depth', { size: { width: desc.size.width, height: desc.size.height } });
clearTask.targetTexture = colorTexture;
clearTask.depthTexture = depthTexture;

Defensive patterns

Strategy: validation

Validate before calling

if (clearTask.targetTexture !== undefined && clearTask.depthTexture !== undefined) {
    const t = frameGraph.textureManager.getTextureDescription(Array.isArray(clearTask.targetTexture) ? clearTask.targetTexture[0] : clearTask.targetTexture);
    const d = frameGraph.textureManager.getTextureDescription(clearTask.depthTexture);
    if (t.size.width !== d.size.width || t.size.height !== d.size.height) throw new Error('Clear pass depth/target size mismatch');
}

Try / catch

try {
    frameGraph.build();
} catch (e) {
    if (String(e).includes('must have the same dimensions')) {
        // split into separate color/depth clear tasks or recreate depth at target size
    } else throw e;
}

Prevention

Create the depth texture for a clear task from the target texture's description.
Resize color and depth attachments in the same handler.
Prefer separate clear tasks when color and depth have different lifecycles.

When it happens

Trigger: Assigning targetTexture and depthTexture whose getTextureDescription sizes differ (e.g. color 1920x1080 vs depth 1024x1024), detected in record().

Common situations: Depth texture sized for a different render target; resize handling updated the color target but not the depth; hard-coded sizes copied from another task.

Related errors

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