mrdoob/three.js · error · Error

THREE.Renderer: .clear() called before the backend is initia

Error message

THREE.Renderer: .clear() called before the backend is initialized. Use "await renderer.init();" before using this method.

What it means

Thrown by Renderer.clear() when the backend has not been initialized. clear() dispatches a manual clear to the backend, so it requires an initialized backend with a live context/device; calling it before init is rejected.

Source

Thrown at src/renderers/common/Renderer.js:2467

		const renderContext = this._currentRenderContext;

		return renderContext && this.backend.isOccluded( renderContext, object );

	}

	/**
	 * Performs a manual clear operation. This method ignores `autoClear` properties.
	 *
	 * @param {boolean} [color=true] - Whether the color buffer should be cleared or not.
	 * @param {boolean} [depth=true] - Whether the depth buffer should be cleared or not.
	 * @param {boolean} [stencil=true] - Whether the stencil buffer should be cleared or not.
	 */
	clear( color = true, depth = true, stencil = true ) {

		if ( this._initialized === false ) {

			throw new Error( 'THREE.Renderer: .clear() called before the backend is initialized. Use "await renderer.init();" before using this method.' );

		}

		const renderTarget = this._renderTarget || this._getFrameBufferTarget();

		let renderContext = null;

		if ( renderTarget !== null ) {

			this._textures.updateRenderTarget( renderTarget );

			const renderTargetData = this._textures.get( renderTarget );

			renderContext = this._renderContexts.get( renderTarget, null, - 1 ); // using - 1 for the call depth to get a render context for the clear operation
			renderContext.textures = renderTargetData.textures;
			renderContext.depthTexture = renderTargetData.depthTexture;
			renderContext.width = renderTargetData.width;
			renderContext.height = renderTargetData.height;

View on GitHub (pinned to da05705fa3)

Solutions

1. await renderer.init() before the first clear() call.
2. Rely on renderer.autoClear for normal rendering and only call clear() after init in your render loop.
3. Start your render/clear logic only after the init promise resolves.
4. Guard manual clears with an initialized check.

Example fix

// before
const renderer = new THREE.WebGPURenderer();
renderer.clear(); // throws

// after
const renderer = new THREE.WebGPURenderer();
await renderer.init();
renderer.clear();

await renderer.init();
renderer.clear(); // safe now

When it happens

Trigger: Calling renderer.clear() right after constructing an async Renderer/WebGPURenderer without awaiting init; pre-render clears in a synchronous setup path.

Common situations: Manual clear logic in app initialization; porting from WebGLRenderer (synchronously ready) to the async Renderer; clearing in a resize handler that fires before init completes.

Related errors

• THREE.Renderer: .render() called before the backend is initi
• THREE.Renderer: .resetState() called before the backend is i
• THREE.Renderer: .hasFeature() called before the backend is i
• THREE.Renderer: .initTexture() called before the backend is
• THREE.Renderer: .initRenderTarget() called before the backen

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