TSL: Uniformly implement resolution scale. (#31697)

examples/jsm/tsl/display/AnamorphicNode.js

@@ -69,9 +69,9 @@ class AnamorphicNode extends TempNode {
 		/**
 		 * The resolution scale.
 		 *
-		 * @type {Vector2}
+		 * @type {float}
 		 */
-		this.resolution = new Vector2( 1, 1 );
+		this.resolutionScale = 1;
 
 		/**
 		 * The internal render target of the effect.
@@ -130,8 +130,8 @@ class AnamorphicNode extends TempNode {
 
 		this._invSize.value.set( 1 / width, 1 / height );
 
-		width = Math.max( Math.round( width * this.resolution.x ), 1 );
-		height = Math.max( Math.round( height * this.resolution.y ), 1 );
+		width = Math.max( Math.round( width * this.resolutionScale ), 1 );
+		height = Math.max( Math.round( height * this.resolutionScale ), 1 );
 
 		this._renderTarget.setSize( width, height );
 
@@ -240,6 +240,29 @@ class AnamorphicNode extends TempNode {
 
 	}
 
+	/**
+	 * The resolution scale.
+	 *
+	 * @deprecated
+	 * @type {vec2}
+	 * @default {(1,1)}
+	 */
+	get resolution() {
+
+		console.warn( 'THREE.AnamorphicNode: The "resolution" property has been renamed to "resolutionScale" and is now of type `number`.' ); // @deprecated r180
+
+		return new Vector2( this.resolutionScale, this.resolutionScale );
+
+	}
+
+	set resolution( value ) {
+
+		console.warn( 'THREE.AnamorphicNode: The "resolution" property has been renamed to "resolutionScale" and is now of type `number`.' ); // @deprecated r180
+
+		this.resolutionScale = value.x;
+
+	}
+
 }
 
 /**

examples/jsm/tsl/display/GaussianBlurNode.js

@@ -108,12 +108,12 @@ class GaussianBlurNode extends TempNode {
 		this.updateBeforeType = NodeUpdateType.FRAME;
 
 		/**
-		 * Controls the resolution of the effect.
+		 * The resolution scale.
 		 *
-		 * @type {Vector2}
-		 * @default (1,1)
+		 * @type {float}
+		 * @default (1)
 		 */
-		this.resolution = options.resolution || new Vector2( 1, 1 );
+		this.resolutionScale = options.resolutionScale || 1;
 
 		/**
 		 * Whether the effect should use premultiplied alpha or not. Set this to `true`
@@ -134,8 +134,8 @@ class GaussianBlurNode extends TempNode {
 	 */
 	setSize( width, height ) {
 
-		width = Math.max( Math.round( width * this.resolution.x ), 1 );
-		height = Math.max( Math.round( height * this.resolution.y ), 1 );
+		width = Math.max( Math.round( width * this.resolutionScale ), 1 );
+		height = Math.max( Math.round( height * this.resolutionScale ), 1 );
 
 		this._invSize.value.set( 1 / width, 1 / height );
 		this._horizontalRT.setSize( width, height );
@@ -316,6 +316,29 @@ class GaussianBlurNode extends TempNode {
 
 	}
 
+	/**
+	 * The resolution scale.
+	 *
+	 * @deprecated
+	 * @type {vec2}
+	 * @default {(1,1)}
+	 */
+	get resolution() {
+
+		console.warn( 'THREE.GaussianBlurNode: The "resolution" property has been renamed to "resolutionScale" and is now of type `number`.' ); // @deprecated r180
+
+		return new Vector2( this.resolutionScale, this.resolutionScale );
+
+	}
+
+	set resolution( value ) {
+
+		console.warn( 'THREE.GaussianBlurNode: The "resolution" property has been renamed to "resolutionScale" and is now of type `number`.' ); // @deprecated r180
+
+		this.resolutionScale = value.x;
+
+	}
+
 }
 
 export default GaussianBlurNode;

examples/webgpu_compute_particles_snow.html

@@ -300,10 +300,10 @@
 
 				const teapotTreePass = pass( teapotTree, camera ).getTextureNode();
 				const teapotTreePassBlurred = gaussianBlur( teapotTreePass, vec2( 1 ), 6 );
-				teapotTreePassBlurred.resolution = new THREE.Vector2( .2, .2 );
+				teapotTreePassBlurred.resolutionScale = 0.2;
 
 				const scenePassColorBlurred = gaussianBlur( scenePassColor );
-				scenePassColorBlurred.resolution = new THREE.Vector2( .5, .5 );
+				scenePassColorBlurred.resolutionScale = 0.5;
 				scenePassColorBlurred.directionNode = vec2( 1 );
 
 				// compose

examples/webgpu_postprocessing_anamorphic.html

@@ -41,6 +41,10 @@
 			let camera, scene, renderer;
 			let postProcessing;
 
+			const params = {
+				resolutionScale: 0.2
+			};
+
 			init();
 
 			async function init() {
@@ -91,7 +95,7 @@
 				const samples = 64;
 
 				const anamorphicPass = anamorphic( scenePass.getTextureNode(), threshold, scaleNode, samples );
-				anamorphicPass.resolution = new THREE.Vector2( .2, .2 ); // 1 = full resolution
+				anamorphicPass.resolutionScale = params.resolutionScale; // 1 = full resolution
 
 				postProcessing = new THREE.PostProcessing( renderer );
 				postProcessing.outputNode = scenePass.add( anamorphicPass.mul( intensity ) );
@@ -103,7 +107,7 @@
 				gui.add( intensity, 'value', 0, 4, 0.1 ).name( 'intensity' );
 				gui.add( threshold, 'value', .8, 3, .001 ).name( 'threshold' );
 				gui.add( scaleNode, 'value', 1, 10, 0.1 ).name( 'scale' );
-				gui.add( anamorphicPass.resolution, 'x', .1, 1, 0.1 ).name( 'resolution' ).onChange( ( v ) => anamorphicPass.resolution.y = v );
+				gui.add( params, 'resolutionScale', .1, 1, 0.1 ).name( 'resolution scale' ).onChange( value => anamorphicPass.resolutionScale = value );
 
 				//
 

examples/webgpu_reflection_blurred.html

@@ -124,7 +124,7 @@
 				const roughness = uniform( .9 );
 				const radius = uniform( 0.2 );
 
-				const reflection = reflector( { resolution: .5, depth: true, bounces: false } ); // 0.5 is half of the rendering view
+				const reflection = reflector( { resolutionScale: .5, depth: true, bounces: false } ); // 0.5 is half of the rendering view
 				const reflectionDepth = reflection.getDepthNode();
 				reflection.target.rotateX( - Math.PI / 2 );
 				scene.add( reflection.target );
@@ -194,7 +194,7 @@
 				gui = new GUI();
 				gui.add( roughness, 'value', 0, 1 ).name( 'roughness' );
 				gui.add( radius, 'value', 0, 1 ).name( 'radius' );
-				gui.add( reflection.reflector, 'resolution', .25, 1 ).name( 'resolution' );
+				gui.add( reflection.reflector, 'resolutionScale', .25, 1 ).name( 'resolution scale' );
 
 				stats = new Stats();
 				document.body.appendChild( stats.dom );

src/nodes/utils/ReflectorNode.js

@@ -13,6 +13,7 @@ import { Vector4 } from '../../math/Vector4.js';
 import { Matrix4 } from '../../math/Matrix4.js';
 import { RenderTarget } from '../../core/RenderTarget.js';
 import { DepthTexture } from '../../textures/DepthTexture.js';
+import { warnOnce } from '../../utils.js';
 
 const _reflectorPlane = new Plane();
 const _normal = new Vector3();
@@ -61,7 +62,7 @@ class ReflectorNode extends TextureNode {
 	 *
 	 * @param {Object} [parameters={}] - An object holding configuration parameters.
 	 * @param {Object3D} [parameters.target=new Object3D()] - The 3D object the reflector is linked to.
-	 * @param {number} [parameters.resolution=1] - The resolution scale.
+	 * @param {number} [parameters.resolutionScale=1] - The resolution scale.
 	 * @param {boolean} [parameters.generateMipmaps=false] - Whether mipmaps should be generated or not.
 	 * @param {boolean} [parameters.bounces=true] - Whether reflectors can render other reflector nodes or not.
 	 * @param {boolean} [parameters.depth=false] - Whether depth data should be generated or not.
@@ -205,7 +206,7 @@ class ReflectorBaseNode extends Node {
 	 * @param {TextureNode} textureNode - Represents the rendered reflections as a texture node.
 	 * @param {Object} [parameters={}] - An object holding configuration parameters.
 	 * @param {Object3D} [parameters.target=new Object3D()] - The 3D object the reflector is linked to.
-	 * @param {number} [parameters.resolution=1] - The resolution scale.
+	 * @param {number} [parameters.resolutionScale=1] - The resolution scale.
 	 * @param {boolean} [parameters.generateMipmaps=false] - Whether mipmaps should be generated or not.
 	 * @param {boolean} [parameters.bounces=true] - Whether reflectors can render other reflector nodes or not.
 	 * @param {boolean} [parameters.depth=false] - Whether depth data should be generated or not.
@@ -217,7 +218,7 @@ class ReflectorBaseNode extends Node {
 
 		const {
 			target = new Object3D(),
-			resolution = 1,
+			resolutionScale = 1,
 			generateMipmaps = false,
 			bounces = true,
 			depth = false,
@@ -245,7 +246,15 @@ class ReflectorBaseNode extends Node {
 		 * @type {number}
 		 * @default {1}
 		 */
-		this.resolution = resolution;
+		this.resolutionScale = resolutionScale;
+
+		if ( parameters.resolution !== undefined ) {
+
+			warnOnce( 'THREE.ReflectorNode: The "resolution" parameter has been renamed to "resolutionScale".' ); // @deprecated r180
+
+			this.resolutionScale = parameters.resolution;
+
+		}
 
 		/**
 		 * Whether mipmaps should be generated or not.
@@ -332,7 +341,7 @@ class ReflectorBaseNode extends Node {
 	 */
 	_updateResolution( renderTarget, renderer ) {
 
-		const resolution = this.resolution;
+		const resolution = this.resolutionScale;
 
 		renderer.getDrawingBufferSize( _size );
 
@@ -568,6 +577,29 @@ class ReflectorBaseNode extends Node {
 
 	}
 
+	/**
+	 * The resolution scale.
+	 *
+	 * @deprecated
+	 * @type {number}
+	 * @default {1}
+	 */
+	get resolution() {
+
+		warnOnce( 'THREE.ReflectorNode: The "resolution" property has been renamed to "resolutionScale".' ); // @deprecated r180
+
+		return this.resolutionScale;
+
+	}
+
+	set resolution( value ) {
+
+		warnOnce( 'THREE.ReflectorNode: The "resolution" property has been renamed to "resolutionScale".' ); // @deprecated r180
+
+		this.resolutionScale = value;
+
+	}
+
 }
 
 /**