RTTNode: Introduce `setResolutioScale()` and updates (#33606)

examples/jsm/tsl/display/BloomNode.js

@@ -312,8 +312,8 @@ class BloomNode extends TempNode {
 	 */
 	setSize( width, height ) {
 
-		let resx = Math.round( width * this._resolutionScale );
-		let resy = Math.round( height * this._resolutionScale );
+		let resx = Math.floor( width * this._resolutionScale );
+		let resy = Math.floor( height * this._resolutionScale );
 
 		this._renderTargetBright.setSize( resx, resy );
 
@@ -324,8 +324,8 @@ class BloomNode extends TempNode {
 
 			this._separableBlurMaterials[ i ].invSize.value.set( 1 / resx, 1 / resy );
 
-			resx = Math.round( resx / 2 );
-			resy = Math.round( resy / 2 );
+			resx = Math.floor( resx / 2 );
+			resy = Math.floor( resy / 2 );
 
 		}
 

src/nodes/display/PassNode.js

@@ -227,15 +227,6 @@ class PassNode extends TempNode {
 		 */
 		this.options = options;
 
-		/**
-		 * The pass's pixel ratio. Will be kept automatically kept in sync with the renderer's pixel ratio.
-		 *
-		 * @private
-		 * @type {number}
-		 * @default 1
-		 */
-		this._pixelRatio = 1;
-
 		/**
 		 * The pass's pixel width. Will be kept automatically kept in sync with the renderer's width.
 		 * @private
@@ -252,7 +243,7 @@ class PassNode extends TempNode {
 		 */
 		this._height = 1;
 
-		const renderTarget = new RenderTarget( this._width * this._pixelRatio, this._height * this._pixelRatio, { type: HalfFloatType, ...options, } );
+		const renderTarget = new RenderTarget( this._width, this._height, { type: HalfFloatType, ...options, } );
 		renderTarget.texture.name = 'output';
 
 		let depthTexture = null;
@@ -792,13 +783,11 @@ class PassNode extends TempNode {
 		const { scene } = this;
 
 		let camera;
-		let pixelRatio;
 
 		const outputRenderTarget = renderer.getOutputRenderTarget();
 
 		if ( outputRenderTarget && outputRenderTarget.isXRRenderTarget === true ) {
 
-			pixelRatio = 1;
 			camera = renderer.xr.getCamera();
 
 			renderer.xr.updateCamera( camera );
@@ -808,14 +797,11 @@ class PassNode extends TempNode {
 		} else {
 
 			camera = this.camera;
-			pixelRatio = renderer.getPixelRatio();
 
-			renderer.getSize( _size );
+			renderer.getDrawingBufferSize( _size );
 
 		}
 
-		this._pixelRatio = pixelRatio;
-
 		this.setSize( _size.width, _size.height );
 
 		const currentRenderTarget = renderer.getRenderTarget();
@@ -900,8 +886,8 @@ class PassNode extends TempNode {
 		this._width = width;
 		this._height = height;
 
-		const effectiveWidth = Math.floor( this._width * this._pixelRatio * this._resolutionScale );
-		const effectiveHeight = Math.floor( this._height * this._pixelRatio * this._resolutionScale );
+		const effectiveWidth = Math.floor( this._width * this._resolutionScale );
+		const effectiveHeight = Math.floor( this._height * this._resolutionScale );
 
 		this.renderTarget.setSize( effectiveWidth, effectiveHeight );
 
@@ -909,7 +895,7 @@ class PassNode extends TempNode {
 
 		if ( this._scissor !== null ) {
 
-			this.renderTarget.scissor.copy( this._scissor ).multiplyScalar( this._pixelRatio * this._resolutionScale ).floor();
+			this.renderTarget.scissor.copy( this._scissor ).multiplyScalar( this._resolutionScale ).floor();
 			this.renderTarget.scissorTest = true;
 
 		} else {
@@ -922,7 +908,7 @@ class PassNode extends TempNode {
 
 		if ( this._viewport !== null ) {
 
-			this.renderTarget.viewport.copy( this._viewport ).multiplyScalar( this._pixelRatio * this._resolutionScale ).floor();
+			this.renderTarget.viewport.copy( this._viewport ).multiplyScalar( this._resolutionScale ).floor();
 
 		}
 
@@ -997,19 +983,6 @@ class PassNode extends TempNode {
 
 	}
 
-	/**
-	 * Sets the pixel ratio the pass's render target and updates the size.
-	 *
-	 * @param {number} pixelRatio - The pixel ratio to set.
-	 */
-	setPixelRatio( pixelRatio ) {
-
-		this._pixelRatio = pixelRatio;
-
-		this.setSize( this._width, this._height );
-
-	}
-
 	/**
 	 * Frees internal resources. Should be called when the node is no longer in use.
 	 */

src/nodes/utils/RTTNode.js

@@ -74,14 +74,6 @@ class RTTNode extends TextureNode {
 		 */
 		this.height = height;
 
-		/**
-		 * The pixel ratio
-		 *
-		 * @type {number}
-		 * @default 1
-		 */
-		this.pixelRatio = 1;
-
 		/**
 		 * The render target
 		 *
@@ -105,6 +97,15 @@ class RTTNode extends TextureNode {
 		 */
 		this.autoUpdate = true;
 
+		/**
+		 * The resolution scale
+		 *
+		 * @private
+		 * @type {number}
+		 * @default 1
+		 */
+		this._resolutionScale = 1;
+
 		/**
 		 * The node which is used with the quad mesh for RTT.
 		 *
@@ -164,11 +165,8 @@ class RTTNode extends TextureNode {
 	 */
 	setSize( width, height ) {
 
-		this.width = width;
-		this.height = height;
-
-		const effectiveWidth = width * this.pixelRatio;
-		const effectiveHeight = height * this.pixelRatio;
+		const effectiveWidth = Math.floor( width * this._resolutionScale );
+		const effectiveHeight = Math.floor( height * this._resolutionScale );
 
 		this.renderTarget.setSize( effectiveWidth, effectiveHeight );
 
@@ -177,15 +175,34 @@ class RTTNode extends TextureNode {
 	}
 
 	/**
-	 * Sets the pixel ratio. This will also resize the render target.
+	 * Sets the resolution scale.
+	 * The resolution scale is a factor that is multiplied with the renderer's width and height.
 	 *
-	 * @param {number} pixelRatio - The pixel ratio to set.
+	 * @param {number} resolutionScale - The resolution scale to set. A value of `1` means full resolution.
+	 * @returns {RTTNode} A reference to this node.
 	 */
-	setPixelRatio( pixelRatio ) {
+	setResolutionScale( resolutionScale ) {
+
+		this._resolutionScale = resolutionScale;
 
-		this.pixelRatio = pixelRatio;
+		if ( this.autoResize === false ) {
 
-		this.setSize( this.width, this.height );
+			this.setSize( this.width, this.height );
+
+		}
+
+		return this;
+
+	}
+
+	/**
+	 * Gets the resolution scale.
+	 *
+	 * @returns {number} The resolution scale.
+	 */
+	getResolutionScale() {
+
+		return this._resolutionScale;
 
 	}
 
@@ -201,23 +218,10 @@ class RTTNode extends TextureNode {
 
 		if ( this.autoResize === true ) {
 
-			let effectiveWidth;
-			let effectiveHeight;
-
-			if ( currentRenderTarget ) {
-
-				effectiveWidth = currentRenderTarget.width;
-				effectiveHeight = currentRenderTarget.height;
+			const size = renderer.getDrawingBufferSize( _size );
 
-			} else {
-
-				const pixelRatio = renderer.getPixelRatio();
-				const size = renderer.getSize( _size );
-
-				effectiveWidth = Math.floor( size.width * pixelRatio );
-				effectiveHeight = Math.floor( size.height * pixelRatio );
-
-			}
+			const effectiveWidth = Math.floor( size.width * this._resolutionScale );
+			const effectiveHeight = Math.floor( size.height * this._resolutionScale );
 
 			if ( effectiveWidth !== this.renderTarget.width || effectiveHeight !== this.renderTarget.height ) {