diff --git a/src/renderers/common/Backend.js b/src/renderers/common/Backend.js
index 028b74463d26eb..b6b9e0dab68f0d 100644
--- a/src/renderers/common/Backend.js
+++ b/src/renderers/common/Backend.js
@@ -588,6 +588,17 @@ class Backend {
 
 	}
 
+	/**
+	 * Returns `true` if the backend requires a framebuffer target with type `HalfFloat`.
+	 *
+	 * @return {Boolean} Whether the backend requires a framebuffer target with type `HalfFloat` or not.
+	 */
+	needsHalfFloatFrameBufferTarget() {
+
+		return false;
+
+	}
+
 	/**
 	 * Sets a dictionary for the given object into the
 	 * internal data structure.
diff --git a/src/renderers/common/Renderer.js b/src/renderers/common/Renderer.js
index 6463696ff0c625..6190f6131fcfb9 100644
--- a/src/renderers/common/Renderer.js
+++ b/src/renderers/common/Renderer.js
@@ -26,7 +26,7 @@ import { Matrix4 } from '../../math/Matrix4.js';
 import { Vector2 } from '../../math/Vector2.js';
 import { Vector4 } from '../../math/Vector4.js';
 import { RenderTarget } from '../../core/RenderTarget.js';
-import { DoubleSide, BackSide, FrontSide, SRGBColorSpace, NoToneMapping, LinearFilter, LinearSRGBColorSpace, HalfFloatType, RGBAFormat, PCFShadowMap } from '../../constants.js';
+import { DoubleSide, BackSide, FrontSide, SRGBColorSpace, NoToneMapping, LinearFilter, LinearSRGBColorSpace, HalfFloatType, RGBAFormat, PCFShadowMap, UnsignedByteType } from '../../constants.js';
 
 /** @module Renderer **/
 
@@ -1121,14 +1121,21 @@ class Renderer {
 		const { width, height } = this.getDrawingBufferSize( _drawingBufferSize );
 		const { depth, stencil } = this;
 
+		// to improve performance we only want to use HalfFloatType if necessary
+		// HalfFloatType is required when a) tone mapping is used or b) the backend specifically requests it
+
+		const type = ( useToneMapping || this.backend.needsHalfFloatFrameBufferTarget() ) ? HalfFloatType : UnsignedByteType;
+
 		let frameBufferTarget = this._frameBufferTarget;
 
-		if ( frameBufferTarget === null ) {
+		if ( frameBufferTarget === null || this._frameBufferTarget.texture.type !== type ) {
+
+			if ( frameBufferTarget !== null ) frameBufferTarget.dispose();
 
 			frameBufferTarget = new RenderTarget( width, height, {
 				depthBuffer: depth,
 				stencilBuffer: stencil,
-				type: HalfFloatType, // FloatType
+				type: type,
 				format: RGBAFormat,
 				colorSpace: LinearSRGBColorSpace,
 				generateMipmaps: false,
diff --git a/src/renderers/webgpu/WebGPUBackend.js b/src/renderers/webgpu/WebGPUBackend.js
index da44414d90327f..4b961f7c151ca0 100644
--- a/src/renderers/webgpu/WebGPUBackend.js
+++ b/src/renderers/webgpu/WebGPUBackend.js
@@ -13,7 +13,7 @@ import WebGPUBindingUtils from './utils/WebGPUBindingUtils.js';
 import WebGPUPipelineUtils from './utils/WebGPUPipelineUtils.js';
 import WebGPUTextureUtils from './utils/WebGPUTextureUtils.js';
 
-import { WebGPUCoordinateSystem } from '../../constants.js';
+import { HalfFloatType, WebGPUCoordinateSystem } from '../../constants.js';
 import WebGPUTimestampQueryPool from './utils/WebGPUTimestampQueryPool.js';
 
 /**
@@ -279,6 +279,17 @@ class WebGPUBackend extends Backend {
 
 	}
 
+	/**
+	 * Returns `true` if the backend requires a framebuffer target with type `HalfFloat`.
+	 *
+	 * @return {Boolean} Whether the backend requires a framebuffer target with type `HalfFloat` or not.
+	 */
+	needsHalfFloatFrameBufferTarget() {
+
+		return ( this.parameters.outputType === HalfFloatType );
+
+	}
+
 	/**
 	 * Returns the default render pass descriptor.
 	 *