super-three 0.173.5 → 0.175.0

package/src/renderers/common/Renderer.js

@@ -28,8 +28,6 @@ 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';
 
-/** @module Renderer **/
-
 const _scene = /*@__PURE__*/ new Scene();
 const _drawingBufferSize = /*@__PURE__*/ new Vector2();
 const _screen = /*@__PURE__*/ new Vector4();
@@ -43,27 +41,34 @@ const _vector4 = /*@__PURE__*/ new Vector4();
 class Renderer {
 
 	/**
-	 * Constructs a new renderer.
+	 * Renderer options.
 	 *
-	 * @param {Backend} backend - The backend the renderer is targeting (e.g. WebGPU or WebGL 2).
-	 * @param {Object} parameters - The configuration parameter.
-	 * @param {Boolean} [parameters.logarithmicDepthBuffer=false] - Whether logarithmic depth buffer is enabled or not.
-	 * @param {Boolean} [parameters.alpha=true] - Whether the default framebuffer (which represents the final contents of the canvas) should be transparent or opaque.
-	 * @param {Boolean} [parameters.depth=true] - Whether the default framebuffer should have a depth buffer or not.
-	 * @param {Boolean} [parameters.stencil=false] - Whether the default framebuffer should have a stencil buffer or not.
-	 * @param {Boolean} [parameters.antialias=false] - Whether MSAA as the default anti-aliasing should be enabled or not.
-	 * @param {Number} [parameters.samples=0] - When `antialias` is `true`, `4` samples are used by default. This parameter can set to any other integer value than 0
+	 * @typedef {Object} Renderer~Options
+	 * @property {boolean} [logarithmicDepthBuffer=false] - Whether logarithmic depth buffer is enabled or not.
+	 * @property {boolean} [alpha=true] - Whether the default framebuffer (which represents the final contents of the canvas) should be transparent or opaque.
+	 * @property {boolean} [depth=true] - Whether the default framebuffer should have a depth buffer or not.
+	 * @property {boolean} [stencil=false] - Whether the default framebuffer should have a stencil buffer or not.
+	 * @property {boolean} [antialias=false] - Whether MSAA as the default anti-aliasing should be enabled or not.
+	 * @property {number} [samples=0] - When `antialias` is `true`, `4` samples are used by default. This parameter can set to any other integer value than 0
 	 * to overwrite the default.
-	 * @param {Function?} [parameters.getFallback=null] - This callback function can be used to provide a fallback backend, if the primary backend can't be targeted.
-	 * @param {Number} [parameters.colorBufferType=HalfFloatType] - Defines the type of color buffers. The default `HalfFloatType` is recommend for best
+	 * @property {?Function} [getFallback=null] - This callback function can be used to provide a fallback backend, if the primary backend can't be targeted.
+	 * @property {number} [colorBufferType=HalfFloatType] - Defines the type of color buffers. The default `HalfFloatType` is recommend for best
 	 * quality. To save memory and bandwidth, `UnsignedByteType` might be used. This will reduce rendering quality though.
 	 */
+
+	/**
+	 * Constructs a new renderer.
+	 *
+	 * @param {Backend} backend - The backend the renderer is targeting (e.g. WebGPU or WebGL 2).
+	 * @param {Renderer~Options} [parameters] - The configuration parameter.
+
+	 */
 	constructor( backend, parameters = {} ) {
 
 		/**
 		 * This flag can be used for type testing.
 		 *
-		 * @type {Boolean}
+		 * @type {boolean}
 		 * @readonly
 		 * @default true
 		 */
@@ -101,7 +106,7 @@ class Renderer {
 		/**
 		 * The number of MSAA samples.
 		 *
-		 * @type {Number}
+		 * @type {number}
 		 * @default 0
 		 */
 		this.samples = samples || ( antialias === true ) ? 4 : 0;
@@ -111,7 +116,7 @@ class Renderer {
 		 * before execute a `render()` call. The target can be the canvas (default framebuffer)
 		 * or the current bound render target (custom framebuffer).
 		 *
-		 * @type {Boolean}
+		 * @type {boolean}
 		 * @default true
 		 */
 		this.autoClear = true;
@@ -120,7 +125,7 @@ class Renderer {
 		 * When `autoClear` is set to `true`, this property defines whether the renderer
 		 * should clear the color buffer.
 		 *
-		 * @type {Boolean}
+		 * @type {boolean}
 		 * @default true
 		 */
 		this.autoClearColor = true;
@@ -129,7 +134,7 @@ class Renderer {
 		 * When `autoClear` is set to `true`, this property defines whether the renderer
 		 * should clear the depth buffer.
 		 *
-		 * @type {Boolean}
+		 * @type {boolean}
 		 * @default true
 		 */
 		this.autoClearDepth = true;
@@ -138,7 +143,7 @@ class Renderer {
 		 * When `autoClear` is set to `true`, this property defines whether the renderer
 		 * should clear the stencil buffer.
 		 *
-		 * @type {Boolean}
+		 * @type {boolean}
 		 * @default true
 		 */
 		this.autoClearStencil = true;
@@ -146,7 +151,7 @@ class Renderer {
 		/**
 		 * Whether the default framebuffer should be transparent or opaque.
 		 *
-		 * @type {Boolean}
+		 * @type {boolean}
 		 * @default true
 		 */
 		this.alpha = alpha;
@@ -154,7 +159,7 @@ class Renderer {
 		/**
 		 * Whether logarithmic depth buffer is enabled or not.
 		 *
-		 * @type {Boolean}
+		 * @type {boolean}
 		 * @default false
 		 */
 		this.logarithmicDepthBuffer = logarithmicDepthBuffer;
@@ -162,7 +167,7 @@ class Renderer {
 		/**
 		 * Defines the output color space of the renderer.
 		 *
-		 * @type {String}
+		 * @type {string}
 		 * @default SRGBColorSpace
 		 */
 		this.outputColorSpace = SRGBColorSpace;
@@ -170,7 +175,7 @@ class Renderer {
 		/**
 		 * Defines the tone mapping of the renderer.
 		 *
-		 * @type {Number}
+		 * @type {number}
 		 * @default NoToneMapping
 		 */
 		this.toneMapping = NoToneMapping;
@@ -178,7 +183,7 @@ class Renderer {
 		/**
 		 * Defines the tone mapping exposure.
 		 *
-		 * @type {Number}
+		 * @type {number}
 		 * @default 1
 		 */
 		this.toneMappingExposure = 1.0;
@@ -191,7 +196,7 @@ class Renderer {
 		 * it may be necessary to turn off sorting and use other methods to deal with transparency rendering
 		 * e.g. manually determining each object's rendering order.
 		 *
-		 * @type {Boolean}
+		 * @type {boolean}
 		 * @default true
 		 */
 		this.sortObjects = true;
@@ -199,7 +204,7 @@ class Renderer {
 		/**
 		 * Whether the default framebuffer should have a depth buffer or not.
 		 *
-		 * @type {Boolean}
+		 * @type {boolean}
 		 * @default true
 		 */
 		this.depth = depth;
@@ -207,7 +212,7 @@ class Renderer {
 		/**
 		 * Whether the default framebuffer should have a stencil buffer or not.
 		 *
-		 * @type {Boolean}
+		 * @type {boolean}
 		 * @default false
 		 */
 		this.stencil = stencil;
@@ -249,15 +254,15 @@ class Renderer {
 		 * This callback function can be used to provide a fallback backend, if the primary backend can't be targeted.
 		 *
 		 * @private
-		 * @type {Function}
+		 * @type {?Function}
 		 */
 		this._getFallback = getFallback;
 
 		/**
-		 * The renderer's pixel ration.
+		 * The renderer's pixel ratio.
 		 *
 		 * @private
-		 * @type {Number}
+		 * @type {number}
 		 * @default 1
 		 */
 		this._pixelRatio = 1;
@@ -266,7 +271,7 @@ class Renderer {
 		 * The width of the renderer's default framebuffer in logical pixel unit.
 		 *
 		 * @private
-		 * @type {Number}
+		 * @type {number}
 		 */
 		this._width = this.domElement.width;
 
@@ -274,7 +279,7 @@ class Renderer {
 		 * The height of the renderer's default framebuffer in logical pixel unit.
 		 *
 		 * @private
-		 * @type {Number}
+		 * @type {number}
 		 */
 		this._height = this.domElement.height;
 
@@ -298,7 +303,7 @@ class Renderer {
 		 * Whether the scissor test should be enabled or not.
 		 *
 		 * @private
-		 * @type {Boolean}
+		 * @type {boolean}
 		 */
 		this._scissorTest = false;
 
@@ -306,7 +311,7 @@ class Renderer {
 		 * A reference to a renderer module for managing shader attributes.
 		 *
 		 * @private
-		 * @type {Attributes?}
+		 * @type {?Attributes}
 		 * @default null
 		 */
 		this._attributes = null;
@@ -315,7 +320,7 @@ class Renderer {
 		 * A reference to a renderer module for managing geometries.
 		 *
 		 * @private
-		 * @type {Geometries?}
+		 * @type {?Geometries}
 		 * @default null
 		 */
 		this._geometries = null;
@@ -324,7 +329,7 @@ class Renderer {
 		 * A reference to a renderer module for managing node related logic.
 		 *
 		 * @private
-		 * @type {Nodes?}
+		 * @type {?Nodes}
 		 * @default null
 		 */
 		this._nodes = null;
@@ -333,7 +338,7 @@ class Renderer {
 		 * A reference to a renderer module for managing the internal animation loop.
 		 *
 		 * @private
-		 * @type {Animation?}
+		 * @type {?Animation}
 		 * @default null
 		 */
 		this._animation = null;
@@ -342,7 +347,7 @@ class Renderer {
 		 * A reference to a renderer module for managing shader program bindings.
 		 *
 		 * @private
-		 * @type {Bindings?}
+		 * @type {?Bindings}
 		 * @default null
 		 */
 		this._bindings = null;
@@ -351,7 +356,7 @@ class Renderer {
 		 * A reference to a renderer module for managing render objects.
 		 *
 		 * @private
-		 * @type {RenderObjects?}
+		 * @type {?RenderObjects}
 		 * @default null
 		 */
 		this._objects = null;
@@ -360,7 +365,7 @@ class Renderer {
 		 * A reference to a renderer module for managing render and compute pipelines.
 		 *
 		 * @private
-		 * @type {Pipelines?}
+		 * @type {?Pipelines}
 		 * @default null
 		 */
 		this._pipelines = null;
@@ -369,7 +374,7 @@ class Renderer {
 		 * A reference to a renderer module for managing render bundles.
 		 *
 		 * @private
-		 * @type {RenderBundles?}
+		 * @type {?RenderBundles}
 		 * @default null
 		 */
 		this._bundles = null;
@@ -378,7 +383,7 @@ class Renderer {
 		 * A reference to a renderer module for managing render lists.
 		 *
 		 * @private
-		 * @type {RenderLists?}
+		 * @type {?RenderLists}
 		 * @default null
 		 */
 		this._renderLists = null;
@@ -387,7 +392,7 @@ class Renderer {
 		 * A reference to a renderer module for managing render contexts.
 		 *
 		 * @private
-		 * @type {RenderContexts?}
+		 * @type {?RenderContexts}
 		 * @default null
 		 */
 		this._renderContexts = null;
@@ -396,7 +401,7 @@ class Renderer {
 		 * A reference to a renderer module for managing textures.
 		 *
 		 * @private
-		 * @type {Textures?}
+		 * @type {?Textures}
 		 * @default null
 		 */
 		this._textures = null;
@@ -405,7 +410,7 @@ class Renderer {
 		 * A reference to a renderer module for backgrounds.
 		 *
 		 * @private
-		 * @type {Background?}
+		 * @type {?Background}
 		 * @default null
 		 */
 		this._background = null;
@@ -424,7 +429,7 @@ class Renderer {
 		 * A reference to the current render context.
 		 *
 		 * @private
-		 * @type {RenderContext?}
+		 * @type {?RenderContext}
 		 * @default null
 		 */
 		this._currentRenderContext = null;
@@ -433,7 +438,7 @@ class Renderer {
 		 * A custom sort function for the opaque render list.
 		 *
 		 * @private
-		 * @type {Function?}
+		 * @type {?Function}
 		 * @default null
 		 */
 		this._opaqueSort = null;
@@ -442,7 +447,7 @@ class Renderer {
 		 * A custom sort function for the transparent render list.
 		 *
 		 * @private
-		 * @type {Function?}
+		 * @type {?Function}
 		 * @default null
 		 */
 		this._transparentSort = null;
@@ -451,7 +456,7 @@ class Renderer {
 		 * The framebuffer target.
 		 *
 		 * @private
-		 * @type {RenderTarget?}
+		 * @type {?RenderTarget}
 		 * @default null
 		 */
 		this._frameBufferTarget = null;
@@ -470,7 +475,7 @@ class Renderer {
 		 * The clear depth value.
 		 *
 		 * @private
-		 * @type {Number}
+		 * @type {number}
 		 * @default 1
 		 */
 		this._clearDepth = 1;
@@ -479,7 +484,7 @@ class Renderer {
 		 * The clear stencil value.
 		 *
 		 * @private
-		 * @type {Number}
+		 * @type {number}
 		 * @default 0
 		 */
 		this._clearStencil = 0;
@@ -488,7 +493,7 @@ class Renderer {
 		 * The current render target.
 		 *
 		 * @private
-		 * @type {RenderTarget?}
+		 * @type {?RenderTarget}
 		 * @default null
 		 */
 		this._renderTarget = null;
@@ -497,7 +502,7 @@ class Renderer {
 		 * The active cube face.
 		 *
 		 * @private
-		 * @type {Number}
+		 * @type {number}
 		 * @default 0
 		 */
 		this._activeCubeFace = 0;
@@ -506,16 +511,25 @@ class Renderer {
 		 * The active mipmap level.
 		 *
 		 * @private
-		 * @type {Number}
+		 * @type {number}
 		 * @default 0
 		 */
 		this._activeMipmapLevel = 0;
 
+		/**
+		 * The current output render target.
+		 *
+		 * @private
+		 * @type {?RenderTarget}
+		 * @default null
+		 */
+		this._outputRenderTarget = null;
+
 		/**
 		 * The MRT setting.
 		 *
 		 * @private
-		 * @type {MRTNode?}
+		 * @type {?MRTNode}
 		 * @default null
 		 */
 		this._mrt = null;
@@ -525,7 +539,7 @@ class Renderer {
 		 * to be rendered.
 		 *
 		 * @private
-		 * @type {Function?}
+		 * @type {?Function}
 		 * @default null
 		 */
 		this._renderObjectFunction = null;
@@ -534,7 +548,7 @@ class Renderer {
 		 * Used to keep track of the current render object function.
 		 *
 		 * @private
-		 * @type {Function?}
+		 * @type {?Function}
 		 * @default null
 		 */
 		this._currentRenderObjectFunction = null;
@@ -543,7 +557,7 @@ class Renderer {
 		 * Used to keep track of the current render bundle.
 		 *
 		 * @private
-		 * @type {RenderBundle?}
+		 * @type {?RenderBundle}
 		 * @default null
 		 */
 		this._currentRenderBundle = null;
@@ -557,7 +571,7 @@ class Renderer {
 		 * and pipeline updates.
 		 *
 		 * @private
-		 * @type {Function?}
+		 * @type {?Function}
 		 * @default null
 		 */
 		this._handleObjectFunction = this._renderObjectDirect;
@@ -568,7 +582,7 @@ class Renderer {
 		 * isn't possible anymore.
 		 *
 		 * @private
-		 * @type {Boolean}
+		 * @type {boolean}
 		 * @default false
 		 */
 		this._isDeviceLost = false;
@@ -586,7 +600,7 @@ class Renderer {
 		 * This will reduce rendering quality though.
 		 *
 		 * @private
-		 * @type {Number}
+		 * @type {number}
 		 * @default HalfFloatType
 		 */
 		this._colorBufferType = colorBufferType;
@@ -595,7 +609,7 @@ class Renderer {
 		 * Whether the renderer has been initialized or not.
 		 *
 		 * @private
-		 * @type {Boolean}
+		 * @type {boolean}
 		 * @default false
 		 */
 		this._initialized = false;
@@ -604,7 +618,7 @@ class Renderer {
 		 * A reference to the promise which initializes the renderer.
 		 *
 		 * @private
-		 * @type {Promise?}
+		 * @type {?Promise<this>}
 		 * @default null
 		 */
 		this._initPromise = null;
@@ -613,7 +627,7 @@ class Renderer {
 		 * An array of compilation promises which are used in `compileAsync()`.
 		 *
 		 * @private
-		 * @type {Array<Promise>?}
+		 * @type {?Array<Promise>}
 		 * @default null
 		 */
 		this._compilationPromises = null;
@@ -621,7 +635,7 @@ class Renderer {
 		/**
 		 * Whether the renderer should render transparent render objects or not.
 		 *
-		 * @type {Boolean}
+		 * @type {boolean}
 		 * @default true
 		 */
 		this.transparent = true;
@@ -629,7 +643,7 @@ class Renderer {
 		/**
 		 * Whether the renderer should render opaque render objects or not.
 		 *
-		 * @type {Boolean}
+		 * @type {boolean}
 		 * @default true
 		 */
 		this.opaque = true;
@@ -637,14 +651,14 @@ class Renderer {
 		/**
 		 * Shadow map configuration
 		 * @typedef {Object} ShadowMapConfig
-		 * @property {Boolean} enabled - Whether to globally enable shadows or not.
-		 * @property {Number} type - The shadow map type.
+		 * @property {boolean} enabled - Whether to globally enable shadows or not.
+		 * @property {number} type - The shadow map type.
 		 */
 
 		/**
 		 * The renderer's shadow configuration.
 		 *
-		 * @type {module:Renderer~ShadowMapConfig}
+		 * @type {ShadowMapConfig}
 		 */
 		this.shadowMap = {
 			enabled: false,
@@ -654,7 +668,7 @@ class Renderer {
 		/**
 		 * XR configuration.
 		 * @typedef {Object} XRConfig
-		 * @property {Boolean} enabled - Whether to globally enable XR or not.
+		 * @property {boolean} enabled - Whether to globally enable XR or not.
 		 */
 
 		/**
@@ -667,15 +681,15 @@ class Renderer {
 		/**
 		 * Debug configuration.
 		 * @typedef {Object} DebugConfig
-		 * @property {Boolean} checkShaderErrors - Whether shader errors should be checked or not.
-		 * @property {Function} onShaderError - A callback function that is executed when a shader error happens. Only supported with WebGL 2 right now.
+		 * @property {boolean} checkShaderErrors - Whether shader errors should be checked or not.
+		 * @property {?Function} onShaderError - A callback function that is executed when a shader error happens. Only supported with WebGL 2 right now.
 		 * @property {Function} getShaderAsync - Allows the get the raw shader code for the given scene, camera and 3D object.
 		 */
 
 		/**
 		 * The renderer's debug configuration.
 		 *
-		 * @type {module:Renderer~DebugConfig}
+		 * @type {DebugConfig}
 		 */
 		this.debug = {
 			checkShaderErrors: true,
@@ -704,7 +718,7 @@ class Renderer {
 	 * Initializes the renderer so it is ready for usage.
 	 *
 	 * @async
-	 * @return {Promise} A Promise that resolves when the renderer has been initialized.
+	 * @return {Promise<this>} A Promise that resolves when the renderer has been initialized.
 	 */
 	async init() {
 
@@ -773,7 +787,7 @@ class Renderer {
 			this._animation.start();
 			this._initialized = true;
 
-			resolve();
+			resolve( this );
 
 		} );
 
@@ -787,7 +801,7 @@ class Renderer {
 	 * `THREE.WebGPUCoordinateSystem`.
 	 *
 	 * @readonly
-	 * @type {Number}
+	 * @type {number}
 	 */
 	get coordinateSystem() {
 
@@ -807,8 +821,8 @@ class Renderer {
 	 * @async
 	 * @param {Object3D} scene - The scene or 3D object to precompile.
 	 * @param {Camera} camera - The camera that is used to render the scene.
-	 * @param {Scene} targetScene - If the first argument is a 3D object, this parameter must represent the scene the 3D object is going to be added.
-	 * @return {Promise<Array>} A Promise that resolves when the compile has been finished.
+	 * @param {?Scene} targetScene - If the first argument is a 3D object, this parameter must represent the scene the 3D object is going to be added.
+	 * @return {Promise<Array|undefined>} A Promise that resolves when the compile has been finished.
 	 */
 	async compileAsync( scene, camera, targetScene = null ) {
 
@@ -991,7 +1005,7 @@ class Renderer {
 	/**
 	 * Returns the color buffer type.
 	 *
-	 * @return {Number} The color buffer type.
+	 * @return {number} The color buffer type.
 	 */
 	getColorBufferType() {
 
@@ -1027,7 +1041,7 @@ class Renderer {
 	 * @private
 	 * @param {Object} bundle - Render bundle data.
 	 * @param {Scene} sceneRef - The scene the render bundle belongs to.
-	 * @param {LightsNode} lightsNode - The current lights node.
+	 * @param {LightsNode} lightsNode - The lights node.
 	 */
 	_renderBundle( bundle, sceneRef, lightsNode ) {
 
@@ -1061,9 +1075,14 @@ class Renderer {
 
 			this._currentRenderBundle = renderBundle;
 
-			const opaqueObjects = renderList.opaque;
+			const {
+				transparentDoublePass: transparentDoublePassObjects,
+				transparent: transparentObjects,
+				opaque: opaqueObjects
+			} = renderList;
 
 			if ( this.opaque === true && opaqueObjects.length > 0 ) this._renderObjects( opaqueObjects, camera, sceneRef, lightsNode );
+			if ( this.transparent === true && transparentObjects.length > 0 ) this._renderTransparents( transparentObjects, transparentDoublePassObjects, camera, sceneRef, lightsNode );
 
 			this._currentRenderBundle = null;
 
@@ -1109,7 +1128,7 @@ class Renderer {
 	 *
 	 * @param {Object3D} scene - The scene or 3D object to render.
 	 * @param {Camera} camera - The camera to render the scene with.
-	 * @return {Promise?} A Promise that resolve when the scene has been rendered.
+	 * @return {?Promise} A Promise that resolve when the scene has been rendered.
 	 * Only returned when the renderer has not been initialized.
 	 */
 	render( scene, camera ) {
@@ -1132,7 +1151,7 @@ class Renderer {
 	 * pass and not inline to achieve more correct results.
 	 *
 	 * @private
-	 * @return {RenderTarget?} The render target. The method returns `null` if no output conversion should be applied.
+	 * @return {?RenderTarget} The render target. The method returns `null` if no output conversion should be applied.
 	 */
 	_getFrameBufferTarget() {
 
@@ -1187,7 +1206,7 @@ class Renderer {
 	 * @private
 	 * @param {Object3D} scene - The scene or 3D object to render.
 	 * @param {Camera} camera - The camera to render the scene with.
-	 * @param {Boolean} [useFrameBufferTarget=true] - Whether to use a framebuffer target or not.
+	 * @param {boolean} [useFrameBufferTarget=true] - Whether to use a framebuffer target or not.
 	 * @return {RenderContext} The current render context.
 	 */
 	_renderScene( scene, camera, useFrameBufferTarget = true ) {
@@ -1208,7 +1227,7 @@ class Renderer {
 
 		const sceneRef = ( scene.isScene === true ) ? scene : _scene;
 
-		const outputRenderTarget = this._renderTarget;
+		const outputRenderTarget = this._renderTarget || this._outputRenderTarget;
 
 		const activeCubeFace = this._activeCubeFace;
 		const activeMipmapLevel = this._activeMipmapLevel;
@@ -1410,16 +1429,7 @@ class Renderer {
 
 			this.setRenderTarget( outputRenderTarget, activeCubeFace, activeMipmapLevel );
 
-			const quad = this._quad;
-
-			if ( this._nodes.hasOutputChange( renderTarget.texture ) ) {
-
-				quad.material.fragmentNode = this._nodes.getOutputNode( renderTarget.texture );
-				quad.material.needsUpdate = true;
-
-			}
-
-			this._renderScene( quad, quad.camera, false );
+			this._renderOutput( renderTarget );
 
 		}
 
@@ -1433,10 +1443,43 @@ class Renderer {
 
 	}
 
+	/**
+	 * The output pass performs tone mapping and color space conversion.
+	 *
+	 * @private
+	 * @param {RenderTarget} renderTarget - The current render target.
+	 */
+	_renderOutput( renderTarget ) {
+
+		const quad = this._quad;
+
+		if ( this._nodes.hasOutputChange( renderTarget.texture ) ) {
+
+			quad.material.fragmentNode = this._nodes.getOutputNode( renderTarget.texture );
+			quad.material.needsUpdate = true;
+
+		}
+
+		// a clear operation clears the intermediate renderTarget texture, but should not update the screen canvas.
+
+		const currentAutoClear = this.autoClear;
+		const currentXR = this.xr.enabled;
+
+		this.autoClear = false;
+		this.xr.enabled = false;
+
+		this._renderScene( quad, quad.camera, false );
+
+		this.autoClear = currentAutoClear;
+		this.xr.enabled = currentXR;
+
+
+	}
+
 	/**
 	 * Returns the maximum available anisotropy for texture filtering.
 	 *
-	 * @return {Number} The maximum available anisotropy.
+	 * @return {number} The maximum available anisotropy.
 	 */
 	getMaxAnisotropy() {
 
@@ -1447,7 +1490,7 @@ class Renderer {
 	/**
 	 * Returns the active cube face.
 	 *
-	 * @return {Number} The active cube face.
+	 * @return {number} The active cube face.
 	 */
 	getActiveCubeFace() {
 
@@ -1458,7 +1501,7 @@ class Renderer {
 	/**
 	 * Returns the active mipmap level.
 	 *
-	 * @return {Number} The active mipmap level.
+	 * @return {number} The active mipmap level.
 	 */
 	getActiveMipmapLevel() {
 
@@ -1472,7 +1515,7 @@ class Renderer {
 	 * for best compatibility.
 	 *
 	 * @async
-	 * @param {Function} callback - The application's animation loop.
+	 * @param {?Function} callback - The application's animation loop.
 	 * @return {Promise} A Promise that resolves when the set has been executed.
 	 */
 	async setAnimationLoop( callback ) {
@@ -1511,7 +1554,7 @@ class Renderer {
 	/**
 	 * Returns the pixel ratio.
 	 *
-	 * @return {Number} The pixel ratio.
+	 * @return {number} The pixel ratio.
 	 */
 	getPixelRatio() {
 
@@ -1535,7 +1578,7 @@ class Renderer {
 	 * Returns the renderer's size in logical pixels. This method does not honor the pixel ratio.
 	 *
 	 * @param {Vector2} target - The method writes the result in this target object.
-	 * @return {Vector2} The drawing buffer size.
+	 * @return {Vector2} The renderer's size in logical pixels.
 	 */
 	getSize( target ) {
 
@@ -1544,9 +1587,9 @@ class Renderer {
 	}
 
 	/**
-	 * Sets the given pixel ration and resizes the canvas if necessary.
+	 * Sets the given pixel ratio and resizes the canvas if necessary.
 	 *
-	 * @param {Number} [value=1] - The pixel ratio.
+	 * @param {number} [value=1] - The pixel ratio.
 	 */
 	setPixelRatio( value = 1 ) {
 
@@ -1562,17 +1605,20 @@ class Renderer {
 	 * This method allows to define the drawing buffer size by specifying
 	 * width, height and pixel ratio all at once. The size of the drawing
 	 * buffer is computed with this formula:
-	 * ````
+	 * ```js
 	 * size.x = width * pixelRatio;
 	 * size.y = height * pixelRatio;
-	 *```
+	 * ```
 	 *
-	 * @param {Number} width - The width in logical pixels.
-	 * @param {Number} height - The height in logical pixels.
-	 * @param {Number} pixelRatio - The pixel ratio.
+	 * @param {number} width - The width in logical pixels.
+	 * @param {number} height - The height in logical pixels.
+	 * @param {number} pixelRatio - The pixel ratio.
 	 */
 	setDrawingBufferSize( width, height, pixelRatio ) {
 
+		// Renderer can't be resized while presenting in XR.
+		if ( this.xr && this.xr.isPresenting ) return;
+
 		this._width = width;
 		this._height = height;
 
@@ -1590,12 +1636,15 @@ class Renderer {
 	/**
 	 * Sets the size of the renderer.
 	 *
-	 * @param {Number} width - The width in logical pixels.
-	 * @param {Number} height - The height in logical pixels.
-	 * @param {Boolean} [updateStyle=true] - Whether to update the `style` attribute of the canvas or not.
+	 * @param {number} width - The width in logical pixels.
+	 * @param {number} height - The height in logical pixels.
+	 * @param {boolean} [updateStyle=true] - Whether to update the `style` attribute of the canvas or not.
 	 */
 	setSize( width, height, updateStyle = true ) {
 
+		// Renderer can't be resized while presenting in XR.
+		if ( this.xr && this.xr.isPresenting ) return;
+
 		this._width = width;
 		this._height = height;
 
@@ -1661,11 +1710,11 @@ class Renderer {
 	/**
 	 * Defines the scissor rectangle.
 	 *
-	 * @param {Number | Vector4} x - The horizontal coordinate for the lower left corner of the box in logical pixel unit.
+	 * @param {number | Vector4} x - The horizontal coordinate for the lower left corner of the box in logical pixel unit.
 	 * Instead of passing four arguments, the method also works with a single four-dimensional vector.
-	 * @param {Number} y - The vertical coordinate for the lower left corner of the box in logical pixel unit.
-	 * @param {Number} width - The width of the scissor box in logical pixel unit.
-	 * @param {Number} height - The height of the scissor box in logical pixel unit.
+	 * @param {number} y - The vertical coordinate for the lower left corner of the box in logical pixel unit.
+	 * @param {number} width - The width of the scissor box in logical pixel unit.
+	 * @param {number} height - The height of the scissor box in logical pixel unit.
 	 */
 	setScissor( x, y, width, height ) {
 
@@ -1686,7 +1735,7 @@ class Renderer {
 	/**
 	 * Returns the scissor test value.
 	 *
-	 * @return {Boolean} Whether the scissor test should be enabled or not.
+	 * @return {boolean} Whether the scissor test should be enabled or not.
 	 */
 	getScissorTest() {
 
@@ -1697,7 +1746,7 @@ class Renderer {
 	/**
 	 * Defines the scissor test.
 	 *
-	 * @param {Boolean} boolean - Whether the scissor test should be enabled or not.
+	 * @param {boolean} boolean - Whether the scissor test should be enabled or not.
 	 */
 	setScissorTest( boolean ) {
 
@@ -1722,12 +1771,12 @@ class Renderer {
 	/**
 	 * Defines the viewport.
 	 *
-	 * @param {Number | Vector4} x - The horizontal coordinate for the lower left corner of the viewport origin in logical pixel unit.
-	 * @param {Number} y - The vertical coordinate for the lower left corner of the viewport origin  in logical pixel unit.
-	 * @param {Number} width - The width of the viewport in logical pixel unit.
-	 * @param {Number} height - The height of the viewport in logical pixel unit.
-	 * @param {Number} minDepth - The minimum depth value of the viewport. WebGPU only.
-	 * @param {Number} maxDepth - The maximum depth value of the viewport. WebGPU only.
+	 * @param {number | Vector4} x - The horizontal coordinate for the lower left corner of the viewport origin in logical pixel unit.
+	 * @param {number} y - The vertical coordinate for the lower left corner of the viewport origin  in logical pixel unit.
+	 * @param {number} width - The width of the viewport in logical pixel unit.
+	 * @param {number} height - The height of the viewport in logical pixel unit.
+	 * @param {number} minDepth - The minimum depth value of the viewport. WebGPU only.
+	 * @param {number} maxDepth - The maximum depth value of the viewport. WebGPU only.
 	 */
 	setViewport( x, y, width, height, minDepth = 0, maxDepth = 1 ) {
 
@@ -1764,7 +1813,7 @@ class Renderer {
 	 * Defines the clear color and optionally the clear alpha.
 	 *
 	 * @param {Color} color - The clear color.
-	 * @param {Number} [alpha=1] - The clear alpha.
+	 * @param {number} [alpha=1] - The clear alpha.
 	 */
 	setClearColor( color, alpha = 1 ) {
 
@@ -1776,7 +1825,7 @@ class Renderer {
 	/**
 	 * Returns the clear alpha.
 	 *
-	 * @return {Number} The clear alpha.
+	 * @return {number} The clear alpha.
 	 */
 	getClearAlpha() {
 
@@ -1787,7 +1836,7 @@ class Renderer {
 	/**
 	 * Defines the clear alpha.
 	 *
-	 * @param {Number} alpha - The clear alpha.
+	 * @param {number} alpha - The clear alpha.
 	 */
 	setClearAlpha( alpha ) {
 
@@ -1798,7 +1847,7 @@ class Renderer {
 	/**
 	 * Returns the clear depth.
 	 *
-	 * @return {Number} The clear depth.
+	 * @return {number} The clear depth.
 	 */
 	getClearDepth() {
 
@@ -1809,7 +1858,7 @@ class Renderer {
 	/**
 	 * Defines the clear depth.
 	 *
-	 * @param {Number} depth - The clear depth.
+	 * @param {number} depth - The clear depth.
 	 */
 	setClearDepth( depth ) {
 
@@ -1820,7 +1869,7 @@ class Renderer {
 	/**
 	 * Returns the clear stencil.
 	 *
-	 * @return {Number} The clear stencil.
+	 * @return {number} The clear stencil.
 	 */
 	getClearStencil() {
 
@@ -1831,7 +1880,7 @@ class Renderer {
 	/**
 	 * Defines the clear stencil.
 	 *
-	 * @param {Number} stencil - The clear stencil.
+	 * @param {number} stencil - The clear stencil.
 	 */
 	setClearStencil( stencil ) {
 
@@ -1845,7 +1894,7 @@ class Renderer {
 	 * 3D objects in the scene.
 	 *
 	 * @param {Object3D} object - The 3D object to test.
-	 * @return {Boolean} Whether the 3D object is fully occluded or not.
+	 * @return {boolean} Whether the 3D object is fully occluded or not.
 	 */
 	isOccluded( object ) {
 
@@ -1858,9 +1907,9 @@ class Renderer {
 	/**
 	 * 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.
+	 * @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.
 	 * @return {Promise} A Promise that resolves when the clear operation has been executed.
 	 * Only returned when the renderer has not been initialized.
 	 */
@@ -1892,29 +1941,18 @@ class Renderer {
 			renderContext.renderTarget = renderTarget;
 			renderContext.depth = renderTarget.depthBuffer;
 			renderContext.stencil = renderTarget.stencilBuffer;
+			// #30329
+			renderContext.clearColorValue = this.backend.getClearColor();
+			renderContext.activeCubeFace = this.getActiveCubeFace();
+			renderContext.activeMipmapLevel = this.getActiveMipmapLevel();
 
 		}
 
-		// #30329
-		renderContext.clearColorValue = this._clearColor;
-
 		this.backend.clear( color, depth, stencil, renderContext );
 
 		if ( renderTarget !== null && this._renderTarget === null ) {
 
-			// If a color space transform or tone mapping is required,
-			// the clear operation clears the intermediate renderTarget texture, but does not update the screen canvas.
-
-			const quad = this._quad;
-
-			if ( this._nodes.hasOutputChange( renderTarget.texture ) ) {
-
-				quad.material.fragmentNode = this._nodes.getOutputNode( renderTarget.texture );
-				quad.material.needsUpdate = true;
-
-			}
-
-			this._renderScene( quad, quad.camera, false );
+			this._renderOutput( renderTarget );
 
 		}
 
@@ -1957,12 +1995,12 @@ class Renderer {
 	}
 
 	/**
-	 * Async version of {@link module:Renderer~Renderer#clear}.
+	 * Async version of {@link Renderer#clear}.
 	 *
 	 * @async
-	 * @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.
+	 * @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.
 	 * @return {Promise} A Promise that resolves when the clear operation has been executed.
 	 */
 	async clearAsync( color = true, depth = true, stencil = true ) {
@@ -1974,7 +2012,7 @@ class Renderer {
 	}
 
 	/**
-	 * Async version of {@link module:Renderer~Renderer#clearColor}.
+	 * Async version of {@link Renderer#clearColor}.
 	 *
 	 * @async
 	 * @return {Promise} A Promise that resolves when the clear operation has been executed.
@@ -1986,7 +2024,7 @@ class Renderer {
 	}
 
 	/**
-	 * Async version of {@link module:Renderer~Renderer#clearDepth}.
+	 * Async version of {@link Renderer#clearDepth}.
 	 *
 	 * @async
 	 * @return {Promise} A Promise that resolves when the clear operation has been executed.
@@ -1998,7 +2036,7 @@ class Renderer {
 	}
 
 	/**
-	 * Async version of {@link module:Renderer~Renderer#clearStencil}.
+	 * Async version of {@link Renderer#clearStencil}.
 	 *
 	 * @async
 	 * @return {Promise} A Promise that resolves when the clear operation has been executed.
@@ -2013,11 +2051,11 @@ class Renderer {
 	 * The current output tone mapping of the renderer. When a render target is set,
 	 * the output tone mapping is always `NoToneMapping`.
 	 *
-	 * @type {Number}
+	 * @type {number}
 	 */
 	get currentToneMapping() {
 
-		return this._renderTarget !== null ? NoToneMapping : this.toneMapping;
+		return this.isOutputTarget ? this.toneMapping : NoToneMapping;
 
 	}
 
@@ -2025,11 +2063,22 @@ class Renderer {
 	 * The current output color space of the renderer. When a render target is set,
 	 * the output color space is always `LinearSRGBColorSpace`.
 	 *
-	 * @type {String}
+	 * @type {string}
 	 */
 	get currentColorSpace() {
 
-		return this._renderTarget !== null ? LinearSRGBColorSpace : this.outputColorSpace;
+		return this.isOutputTarget ? this.outputColorSpace : LinearSRGBColorSpace;
+
+	}
+
+	/**
+	 * Returns `true` if the rendering settings are set to screen output.
+	 *
+	 * @returns {boolean} True if the current render target is the same of output render target or `null`, otherwise false.
+	 */
+	get isOutputTarget() {
+
+		return this._renderTarget === this._outputRenderTarget || this._renderTarget === null;
 
 	}
 
@@ -2069,9 +2118,9 @@ class Renderer {
 	 * target the default framebuffer (meaning the canvas) anymore but a custom framebuffer.
 	 * Use `null` as the first argument to reset the state.
 	 *
-	 * @param {RenderTarget?} renderTarget - The render target to set.
-	 * @param {Number} [activeCubeFace=0] - The active cube face.
-	 * @param {Number} [activeMipmapLevel=0] - The active mipmap level.
+	 * @param {?RenderTarget} renderTarget - The render target to set.
+	 * @param {number} [activeCubeFace=0] - The active cube face.
+	 * @param {number} [activeMipmapLevel=0] - The active mipmap level.
 	 */
 	setRenderTarget( renderTarget, activeCubeFace = 0, activeMipmapLevel = 0 ) {
 
@@ -2084,7 +2133,7 @@ class Renderer {
 	/**
 	 * Returns the current render target.
 	 *
-	 * @return {RenderTarget?} The render target. Returns `null` if no render target is set.
+	 * @return {?RenderTarget} The render target. Returns `null` if no render target is set.
 	 */
 	getRenderTarget() {
 
@@ -2093,7 +2142,29 @@ class Renderer {
 	}
 
 	/**
-	 * Callback for {@link module:Renderer~Renderer#setRenderObjectFunction}.
+	 * Sets the output render target for the renderer.
+	 *
+	 * @param {Object} renderTarget - The render target to set as the output target.
+	 */
+	setOutputRenderTarget( renderTarget ) {
+
+		this._outputRenderTarget = renderTarget;
+
+	}
+
+	/**
+	 * Returns the current output target.
+	 *
+	 * @return {?RenderTarget} The current output render target. Returns `null` if no output target is set.
+	 */
+	getOutputRenderTarget() {
+
+		return this._outputRenderTarget;
+
+	}
+
+	/**
+	 * Callback for {@link Renderer#setRenderObjectFunction}.
 	 *
 	 * @callback renderObjectFunction
 	 * @param {Object3D} object - The 3D object.
@@ -2101,22 +2172,22 @@ class Renderer {
 	 * @param {Camera} camera - The camera the object should be rendered with.
 	 * @param {BufferGeometry} geometry - The object's geometry.
 	 * @param {Material} material - The object's material.
-	 * @param {Object?} group - Only relevant for objects using multiple materials. This represents a group entry from the respective `BufferGeometry`.
+	 * @param {?Object} group - Only relevant for objects using multiple materials. This represents a group entry from the respective `BufferGeometry`.
 	 * @param {LightsNode} lightsNode - The current lights node.
 	 * @param {ClippingContext} clippingContext - The clipping context.
-	 * @param {String?} [passId=null] - An optional ID for identifying the pass.
+	 * @param {?string} [passId=null] - An optional ID for identifying the pass.
 	 */
 
 	/**
 	 * Sets the given render object function. Calling this method overwrites the default implementation
-	 * which is {@link module:Renderer~Renderer#renderObject}. Defining a custom function can be useful
+	 * which is {@link Renderer#renderObject}. Defining a custom function can be useful
 	 * if you want to modify the way objects are rendered. For example you can define things like "every
 	 * object that has material of a certain type should perform a pre-pass with a special overwrite material".
 	 * The custom function must always call `renderObject()` in its implementation.
 	 *
 	 * Use `null` as the first argument to reset the state.
 	 *
-	 * @param {module:Renderer~renderObjectFunction?} renderObjectFunction - The render object function.
+	 * @param {?renderObjectFunction} renderObjectFunction - The render object function.
 	 */
 	setRenderObjectFunction( renderObjectFunction ) {
 
@@ -2127,7 +2198,7 @@ class Renderer {
 	/**
 	 * Returns the current render object function.
 	 *
-	 * @return {Function?} The current render object function. Returns `null` if no function is set.
+	 * @return {?Function} The current render object function. Returns `null` if no function is set.
 	 */
 	getRenderObjectFunction() {
 
@@ -2140,7 +2211,7 @@ class Renderer {
 	 * if the renderer has been initialized.
 	 *
 	 * @param {Node|Array<Node>} computeNodes - The compute node(s).
-	 * @return {Promise?} A Promise that resolve when the compute has finished. Only returned when the renderer has not been initialized.
+	 * @return {Promise|undefined} A Promise that resolve when the compute has finished. Only returned when the renderer has not been initialized.
 	 */
 	compute( computeNodes ) {
 
@@ -2252,8 +2323,8 @@ class Renderer {
 	 * Checks if the given feature is supported by the selected backend.
 	 *
 	 * @async
-	 * @param {String} name - The feature's name.
-	 * @return {Promise<Boolean>} A Promise that resolves with a bool that indicates whether the feature is supported or not.
+	 * @param {string} name - The feature's name.
+	 * @return {Promise<boolean>} A Promise that resolves with a bool that indicates whether the feature is supported or not.
 	 */
 	async hasFeatureAsync( name ) {
 
@@ -2275,8 +2346,8 @@ class Renderer {
 	 * Checks if the given feature is supported by the selected backend. If the
 	 * renderer has not been initialized, this method always returns `false`.
 	 *
-	 * @param {String} name - The feature's name.
-	 * @return {Boolean} Whether the feature is supported or not.
+	 * @param {string} name - The feature's name.
+	 * @return {boolean} Whether the feature is supported or not.
 	 */
 	hasFeature( name ) {
 
@@ -2295,7 +2366,7 @@ class Renderer {
 	/**
 	 * Returns `true` when the renderer has been initialized.
 	 *
-	 * @return {Boolean} Whether the renderer has been initialized or not.
+	 * @return {boolean} Whether the renderer has been initialized or not.
 	 */
 	hasInitialized() {
 
@@ -2320,7 +2391,7 @@ class Renderer {
 	}
 
 	/**
-	 * Initializes the given textures. Useful for preloading a texture rather than waiting until first render
+	 * Initializes the given texture. Useful for preloading a texture rather than waiting until first render
 	 * (which can cause noticeable lags due to decode and GPU upload overhead).
 	 *
 	 * This method can only be used if the renderer has been initialized.
@@ -2343,7 +2414,7 @@ class Renderer {
 	 * Copies the current bound framebuffer into the given texture.
 	 *
 	 * @param {FramebufferTexture} framebufferTexture - The texture.
-	 * @param {Vector2|Vector4} rectangle - A two or four dimensional vector that defines the rectangular portion of the framebuffer that should be copied.
+	 * @param {?Vector2|Vector4} [rectangle=null] - A two or four dimensional vector that defines the rectangular portion of the framebuffer that should be copied.
 	 */
 	copyFramebufferToTexture( framebufferTexture, rectangle = null ) {
 
@@ -2403,20 +2474,21 @@ class Renderer {
 	}
 
 	/**
-	 * Copies data of source texture into a destination texture.
+	 * Copies data of the given source texture into a destination texture.
 	 *
 	 * @param {Texture} srcTexture - The source texture.
 	 * @param {Texture} dstTexture - The destination texture.
 	 * @param {Box2|Box3} [srcRegion=null] - A bounding box which describes the source region. Can be two or three-dimensional.
 	 * @param {Vector2|Vector3} [dstPosition=null] - A vector that represents the origin of the destination region. Can be two or three-dimensional.
-	 * @param {Number} level - The mipmap level to copy.
+	 * @param {number} [srcLevel=0] - The source mip level to copy from.
+	 * @param {number} [dstLevel=0] - The destination mip level to copy to.
 	 */
-	copyTextureToTexture( srcTexture, dstTexture, srcRegion = null, dstPosition = null, level = 0 ) {
+	copyTextureToTexture( srcTexture, dstTexture, srcRegion = null, dstPosition = null, srcLevel = 0, dstLevel = 0 ) {
 
 		this._textures.updateTexture( srcTexture );
 		this._textures.updateTexture( dstTexture );
 
-		this.backend.copyTextureToTexture( srcTexture, dstTexture, srcRegion, dstPosition, level );
+		this.backend.copyTextureToTexture( srcTexture, dstTexture, srcRegion, dstPosition, srcLevel, dstLevel );
 
 	}
 
@@ -2425,12 +2497,12 @@ class Renderer {
 	 *
 	 * @async
 	 * @param {RenderTarget} renderTarget - The render target to read from.
-	 * @param {Number} x - The `x` coordinate of the copy region's origin.
-	 * @param {Number} y - The `y` coordinate of the copy region's origin.
-	 * @param {Number} width - The width of the copy region.
-	 * @param {Number} height - The height of the copy region.
-	 * @param {Number} [textureIndex=0] - The texture index of a MRT render target.
-	 * @param {Number} [faceIndex=0] - The active cube face index.
+	 * @param {number} x - The `x` coordinate of the copy region's origin.
+	 * @param {number} y - The `y` coordinate of the copy region's origin.
+	 * @param {number} width - The width of the copy region.
+	 * @param {number} height - The height of the copy region.
+	 * @param {number} [textureIndex=0] - The texture index of a MRT render target.
+	 * @param {number} [faceIndex=0] - The active cube face index.
 	 * @return {Promise<TypedArray>} A Promise that resolves when the read has been finished. The resolve provides the read data as a typed array.
 	 */
 	async readRenderTargetPixelsAsync( renderTarget, x, y, width, height, textureIndex = 0, faceIndex = 0 ) {
@@ -2445,7 +2517,7 @@ class Renderer {
 	 *
 	 * @param {Object3D} object - The 3D object to process (usually a scene).
 	 * @param {Camera} camera - The camera the object is rendered with.
-	 * @param {Number} groupOrder - The group order is derived from the `renderOrder` of groups and is used to group 3D objects within groups.
+	 * @param {number} groupOrder - The group order is derived from the `renderOrder` of groups and is used to group 3D objects within groups.
 	 * @param {RenderList} renderList - The current render list.
 	 * @param {ClippingContext} clippingContext - The current clipping context.
 	 */
@@ -2646,7 +2718,7 @@ class Renderer {
 	 * @param {Camera} camera - The camera the render list should be rendered with.
 	 * @param {Scene} scene - The scene the render list belongs to.
 	 * @param {LightsNode} lightsNode - The current lights node.
-	 * @param {String?} [passId=null] - An optional ID for identifying the pass.
+	 * @param {?string} [passId=null] - An optional ID for identifying the pass.
 	 */
 	_renderObjects( renderList, camera, scene, lightsNode, passId = null ) {
 
@@ -2669,10 +2741,10 @@ class Renderer {
 	 * @param {Camera} camera - The camera the object should be rendered with.
 	 * @param {BufferGeometry} geometry - The object's geometry.
 	 * @param {Material} material - The object's material.
-	 * @param {Object?} group - Only relevant for objects using multiple materials. This represents a group entry from the respective `BufferGeometry`.
+	 * @param {?Object} group - Only relevant for objects using multiple materials. This represents a group entry from the respective `BufferGeometry`.
 	 * @param {LightsNode} lightsNode - The current lights node.
-	 * @param {ClippingContext} clippingContext - The clipping context.
-	 * @param {String?} [passId=null] - An optional ID for identifying the pass.
+	 * @param {?ClippingContext} clippingContext - The clipping context.
+	 * @param {?string} [passId=null] - An optional ID for identifying the pass.
 	 */
 	renderObject( object, scene, camera, geometry, material, group, lightsNode, clippingContext = null, passId = null ) {
 
@@ -2686,7 +2758,7 @@ class Renderer {
 
 		//
 
-		if ( scene.overrideMaterial !== null ) {
+		if ( material.allowOverride === true && scene.overrideMaterial !== null ) {
 
 			const overrideMaterial = scene.overrideMaterial;
 
@@ -2779,9 +2851,9 @@ class Renderer {
 	 * @param {Scene} scene - The scene the 3D object belongs to.
 	 * @param {Camera} camera - The camera the object should be rendered with.
 	 * @param {LightsNode} lightsNode - The current lights node.
-	 * @param {{start: Number, count: Number}?} group - Only relevant for objects using multiple materials. This represents a group entry from the respective `BufferGeometry`.
+	 * @param {?{start: number, count: number}} group - Only relevant for objects using multiple materials. This represents a group entry from the respective `BufferGeometry`.
 	 * @param {ClippingContext} clippingContext - The clipping context.
-	 * @param {String?} [passId=null] - An optional ID for identifying the pass.
+	 * @param {?string} [passId=null] - An optional ID for identifying the pass.
 	 */
 	_renderObjectDirect( object, material, scene, camera, lightsNode, group, clippingContext, passId ) {
 
@@ -2834,9 +2906,9 @@ class Renderer {
 	 * @param {Scene} scene - The scene the 3D object belongs to.
 	 * @param {Camera} camera - The camera the object should be rendered with.
 	 * @param {LightsNode} lightsNode - The current lights node.
-	 * @param {{start: Number, count: Number}?} group - Only relevant for objects using multiple materials. This represents a group entry from the respective `BufferGeometry`.
+	 * @param {?{start: number, count: number}} group - Only relevant for objects using multiple materials. This represents a group entry from the respective `BufferGeometry`.
 	 * @param {ClippingContext} clippingContext - The clipping context.
-	 * @param {String?} [passId=null] - An optional ID for identifying the pass.
+	 * @param {?string} [passId=null] - An optional ID for identifying the pass.
 	 */
 	_createObjectPipeline( object, material, scene, camera, lightsNode, group, clippingContext, passId ) {
 
@@ -2866,7 +2938,7 @@ class Renderer {
 	 * @param {Object3D} scene - The scene or 3D object to precompile.
 	 * @param {Camera} camera - The camera that is used to render the scene.
 	 * @param {Scene} targetScene - If the first argument is a 3D object, this parameter must represent the scene the 3D object is going to be added.
-	 * @return {Promise} A Promise that resolves when the compile has been finished.
+	 * @return {function(Object3D, Camera, ?Scene): Promise|undefined} A Promise that resolves when the compile has been finished.
 	 */
 	get compile() {