Examples: Update with the new style and inspector (#31907)

* PassNode: Rename `setResolution()` to `setResolutionScale()`

* PassNode: Improve name in inspector

* Parameters: Add `.addFolder()` and `addColor()`, fix slider default value

* BloomNode: Improve name in inspector

* Examples: update with the new style and inspector

* Update Values.js

* webgpu testing

examples/jsm/inspector/Inspector.js

@@ -155,25 +155,31 @@ class Inspector extends RendererInspector {
 
 	setRenderer( renderer ) {
 
+		super.setRenderer( renderer );
+
 		if ( renderer !== null ) {
 
 			setConsoleFunction( this.resolveConsole.bind( this ) );
 
-			renderer.backend.trackTimestamp = true;
+			if ( this.isAvailable ) {
+
+				renderer.backend.trackTimestamp = true;
 
-			renderer.hasFeatureAsync( 'timestamp-query' ).then( ( available ) => {
+				renderer.hasFeatureAsync( 'timestamp-query' ).then( ( available ) => {
 
-				if ( available !== true ) {
+					if ( available !== true ) {
 
-					this.console.addMessage( 'error', 'THREE.Inspector: GPU Timestamp Queries not available.' );
+						this.console.addMessage( 'error', 'THREE.Inspector: GPU Timestamp Queries not available.' );
 
-				}
+					}
 
-			} );
+				} );
+
+			}
 
 		}
 
-		return super.setRenderer( renderer );
+		return this;
 
 	}
 

examples/jsm/inspector/RendererInspector.js

@@ -242,6 +242,14 @@ export class RendererInspector extends InspectorBase {
 
 	}
 
+	get isAvailable() {
+
+		const renderer = this.getRenderer();
+
+		return renderer !== null && renderer.backend.isWebGPUBackend;
+
+	}
+
 	addFrame( frame ) {
 
 		// Limit to max frames.
@@ -256,7 +264,11 @@ export class RendererInspector extends InspectorBase {
 		this.frames.push( frame );
 		this.framesLib[ frame.frameId ] = frame;
 
-		this.resolveTimestamp();
+		if ( this.isAvailable ) {
+
+			this.resolveTimestamp();
+
+		}
 
 	}
 

examples/jsm/inspector/tabs/Parameters.js

@@ -2,7 +2,7 @@ import { Tab } from '../ui/Tab.js';
 import { List } from '../ui/List.js';
 import { Item } from '../ui/Item.js';
 import { createValueSpan } from '../ui/utils.js';
-import { ValueNumber, ValueSlider, ValueSelect, ValueCheckbox } from '../ui/Values.js';
+import { ValueNumber, ValueSlider, ValueSelect, ValueCheckbox, ValueColor } from '../ui/Values.js';
 
 class ParametersGroup {
 
@@ -11,7 +11,15 @@ class ParametersGroup {
 		this.parameters = parameters;
 		this.name = name;
 
-		this.item = new Item( name );
+		this.paramList = new Item( name );
+
+	}
+
+	close() {
+
+		this.paramList.close();
+
+		return this;
 
 	}
 
@@ -48,6 +56,16 @@ class ParametersGroup {
 
 	}
 
+	addFolder( name ) {
+
+		const group = new ParametersGroup( this.parameters, name );
+
+		this.paramList.add( group.paramList );
+
+		return group;
+
+	}
+
 	addBoolean( object, property ) {
 
 		const value = object[ property ];
@@ -63,7 +81,7 @@ class ParametersGroup {
 		description.textContent = property;
 
 		const subItem = new Item( description, editor.domElement );
-		this.item.add( subItem );
+		this.paramList.add( subItem );
 
 		// extends logic to toggle checkbox when clicking on the row
 
@@ -114,7 +132,41 @@ class ParametersGroup {
 		description.textContent = property;
 
 		const subItem = new Item( description, editor.domElement );
-		this.item.add( subItem );
+		this.paramList.add( subItem );
+
+		const itemRow = subItem.domElement.firstChild;
+		itemRow.classList.add( 'actionable' );
+
+		// extend object property
+
+		editor.name = ( name ) => {
+
+			description.textContent = name;
+
+			return editor;
+
+		};
+
+		return editor;
+
+	}
+
+	addColor( object, property ) {
+
+		const value = object[ property ];
+
+		const editor = new ValueColor( { value } );
+		editor.addEventListener( 'change', ( { value } ) => {
+
+			object[ property ] = value;
+
+		} );
+
+		const description = createValueSpan();
+		description.textContent = property;
+
+		const subItem = new Item( description, editor.domElement );
+		this.paramList.add( subItem );
 
 		const itemRow = subItem.domElement.firstChild;
 		itemRow.classList.add( 'actionable' );
@@ -148,7 +200,7 @@ class ParametersGroup {
 		description.textContent = property;
 
 		const subItem = new Item( description, editor.domElement );
-		this.item.add( subItem );
+		this.paramList.add( subItem );
 
 		const itemRow = subItem.domElement.firstChild;
 		itemRow.classList.add( 'actionable' );
@@ -183,7 +235,7 @@ class ParametersGroup {
 		description.textContent = property;
 
 		const subItem = new Item( description, editor.domElement );
-		this.item.add( subItem );
+		this.paramList.add( subItem );
 
 		const itemRow = subItem.domElement.firstChild;
 		itemRow.classList.add( 'actionable' );
@@ -226,9 +278,9 @@ class Parameters extends Tab {
 
 	createGroup( name ) {
 
-		const group = new ParametersGroup( this.parameters, name );
+		const group = new ParametersGroup( this, name );
 
-		this.paramList.add( group.item );
+		this.paramList.add( group.paramList );
 
 		return group;
 

examples/jsm/inspector/ui/Item.js

@@ -66,6 +66,7 @@ export class Item {
 
 			this.childrenContainer = document.createElement( 'div' );
 			this.childrenContainer.className = 'list-children-container';
+			this.childrenContainer.classList.toggle( 'closed', ! this.isOpen );
 			this.domElement.appendChild( this.childrenContainer );
 			this.itemRow.addEventListener( 'click', this.onItemClick );
 
@@ -141,10 +142,16 @@ export class Item {
 
 	toggle() {
 
-		if ( ! this.childrenContainer ) return;
 		this.isOpen = ! this.isOpen;
 		this.itemRow.classList.toggle( 'open', this.isOpen );
-		this.childrenContainer.classList.toggle( 'closed', ! this.isOpen );
+
+		if ( this.childrenContainer ) {
+
+			this.childrenContainer.classList.toggle( 'closed', ! this.isOpen );
+
+		}
+
+		return this;
 
 	}
 

examples/jsm/inspector/ui/Values.js

@@ -209,7 +209,6 @@ class ValueSlider extends Value {
 
 		this.slider = document.createElement( 'input' );
 		this.slider.type = 'range';
-		this.slider.value = value;
 		this.slider.min = min;
 		this.slider.max = max;
 		this.slider.step = step;
@@ -219,6 +218,8 @@ class ValueSlider extends Value {
 		this.numberInput.style.width = '60px';
 		this.numberInput.style.flexShrink = '0';
 
+		this.slider.value = value;
+
 		this.domElement.append( this.slider, this.numberInput );
 
 		this.slider.addEventListener( 'input', () => {
@@ -318,4 +319,65 @@ class ValueSelect extends Value {
 
 }
 
-export { Value, ValueNumber, ValueCheckbox, ValueSlider, ValueSelect };
+class ValueColor extends Value {
+
+	constructor( { value = '#ffffff' } ) {
+
+		super();
+
+		const colorInput = document.createElement( 'input' );
+		colorInput.type = 'color';
+		colorInput.value = this._getColorHex( value );
+		this.colorInput = colorInput;
+
+		this._value = value;
+
+		colorInput.addEventListener( 'input', () => {
+
+			const colorValue = colorInput.value;
+
+			if ( this._value.isColor ) {
+
+				this._value.setHex( parseInt( colorValue.slice( 1 ), 16 ) );
+
+			} else {
+
+				this._value = colorValue;
+
+			}
+
+			this.dispatchChange();
+
+		} );
+
+		this.domElement.appendChild( colorInput );
+
+	}
+
+	_getColorHex( color ) {
+
+		if ( color.isColor ) {
+
+			color = color.getHex();
+
+		}
+
+		if ( typeof color === 'number' ) {
+
+			color = `#${ color.toString( 16 ) }`;
+
+		}
+
+		return color;
+
+	}
+
+	getValue() {
+
+		return this._value;
+
+	}
+
+}
+
+export { Value, ValueNumber, ValueCheckbox, ValueSlider, ValueSelect, ValueColor };

examples/jsm/tsl/display/BloomNode.js

@@ -300,6 +300,7 @@ class BloomNode extends TempNode {
 
 		renderer.setRenderTarget( this._renderTargetBright );
 		_quadMesh.material = this._highPassFilterMaterial;
+		_quadMesh.name = 'Bloom [ High Pass ]';
 		_quadMesh.render( renderer );
 
 		// 2. Blur all the mips progressively
@@ -313,11 +314,13 @@ class BloomNode extends TempNode {
 			this._separableBlurMaterials[ i ].colorTexture.value = inputRenderTarget.texture;
 			this._separableBlurMaterials[ i ].direction.value = _BlurDirectionX;
 			renderer.setRenderTarget( this._renderTargetsHorizontal[ i ] );
+			_quadMesh.name = `Bloom [ Blur Horizontal - ${ i } ]`;
 			_quadMesh.render( renderer );
 
 			this._separableBlurMaterials[ i ].colorTexture.value = this._renderTargetsHorizontal[ i ].texture;
 			this._separableBlurMaterials[ i ].direction.value = _BlurDirectionY;
 			renderer.setRenderTarget( this._renderTargetsVertical[ i ] );
+			_quadMesh.name = `Bloom [ Blur Vertical - ${ i } ]`;
 			_quadMesh.render( renderer );
 
 			inputRenderTarget = this._renderTargetsVertical[ i ];
@@ -328,6 +331,7 @@ class BloomNode extends TempNode {
 
 		renderer.setRenderTarget( this._renderTargetsHorizontal[ 0 ] );
 		_quadMesh.material = this._compositeMaterial;
+		_quadMesh.name = 'Bloom [ Composite ]';
 		_quadMesh.render( renderer );
 
 		// restore

examples/webgpu_volume_caustics.html

@@ -4,12 +4,18 @@
 		<title>three.js webgpu - volumetric caustics</title>
 		<meta charset="utf-8">
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
-		<link type="text/css" rel="stylesheet" href="main.css">
+		<link type="text/css" rel="stylesheet" href="example.css">
 	</head>
 	<body>
 
 		<div id="info">
-			<a href="https://threejs.org" target="_blank" rel="noopener">three.js webgpu</a> - volumetric caustics
+			<a href="https://threejs.org/" target="_blank" rel="noopener" class="logo-link"></a>
+
+			<div class="title-wrapper">
+				<a href="https://threejs.org/" target="_blank" rel="noopener">three.js</a><span>Volumetric Caustics</span>
+			</div>
+
+			<small>Real-time volumetric caustics effects.</small>
 		</div>
 
 		<script type="importmap">
@@ -34,16 +40,13 @@
 			import { DRACOLoader } from 'three/addons/loaders/DRACOLoader.js';
 			import { ImprovedNoise } from 'three/addons/math/ImprovedNoise.js';
 
-			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
+			import { Inspector } from 'three/addons/inspector/Inspector.js';
 
 			import { bayer16 } from 'three/addons/tsl/math/Bayer.js';
 			import { bloom } from 'three/addons/tsl/display/BloomNode.js';
 
-			import Stats from 'three/addons/libs/stats.module.js';
-
 			let camera, scene, renderer, controls;
 			let postProcessing;
-			let stats;
 			let gltf;
 
 			init();
@@ -143,12 +146,6 @@
 
 				} )();
 
-				// GUI
-
-				const gui = new GUI();
-				gui.add( causticOcclusion, 'value', 0, 20 ).name( 'caustic occlusion' );
-				gui.addColor( duck.material, 'color' ).name( 'material color' );
-
 				// Ground
 
 				const textureLoader = new THREE.TextureLoader();
@@ -168,11 +165,18 @@
 
 				renderer = new THREE.WebGPURenderer( { antialias: true } );
 				renderer.shadowMap.enabled = true;
+				renderer.inspector = new Inspector();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.setAnimationLoop( animate );
 				document.body.appendChild( renderer.domElement );
 
+				// GUI
+
+				const gui = renderer.inspector.createParameters( 'Volumetric Caustics' );
+				gui.add( causticOcclusion, 'value', 0, 20 ).name( 'caustic occlusion' );
+				gui.addColor( duck.material, 'color' ).name( 'material color' );
+
 				// Post-Processing
 
 				postProcessing = new THREE.PostProcessing( renderer );
@@ -276,8 +280,9 @@
 				// Volumetric Lighting Pass
 
 				const volumetricPass = pass( scene, camera, { depthBuffer: false } );
+				volumetricPass.name = 'Volumetric Lighting';
 				volumetricPass.setLayers( volumetricLayer );
-				volumetricPass.setResolution( .5 );
+				volumetricPass.setResolutionScale( .5 );
 
 				// Compose and Denoise
 
@@ -287,11 +292,6 @@
 
 				postProcessing.outputNode = scenePassColor;
 
-				// Stats
-
-				stats = new Stats();
-				document.body.appendChild( stats.dom );
-
 				// Controls
 
 				controls = new OrbitControls( camera, renderer.domElement );
@@ -314,8 +314,6 @@
 
 			function animate() {
 
-				stats.update();
-
 				for ( const mesh of gltf.children ) {
 
 					mesh.rotation.y -= .01;

examples/webgpu_volume_lighting.html

@@ -4,14 +4,19 @@
 		<title>three.js webgpu - volumetric lighting</title>
 		<meta charset="utf-8">
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
-		<link type="text/css" rel="stylesheet" href="main.css">
+		<link type="text/css" rel="stylesheet" href="example.css">
 	</head>
 
 	<body>
 
 		<div id="info">
-			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> webgpu - volumetric lighting
-			<br>Improve the quality/performance adjusting the parameters in the Controls
+			<a href="https://threejs.org/" target="_blank" rel="noopener" class="logo-link"></a>
+
+			<div class="title-wrapper">
+				<a href="https://threejs.org/" target="_blank" rel="noopener">three.js</a><span>Volumetric Lighting</span>
+			</div>
+
+			<small>Compatible with native lights and shadows using post-processing pass.</small>
 		</div>
 
 		<script type="importmap">
@@ -30,6 +35,8 @@
 			import * as THREE from 'three/webgpu';
 			import { vec3, Fn, time, texture3D, screenUV, uniform, screenCoordinate, pass } from 'three/tsl';
 
+			import { Inspector } from 'three/addons/inspector/Inspector.js';
+
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 			import { ImprovedNoise } from 'three/addons/math/ImprovedNoise.js';
 			import { TeapotGeometry } from 'three/addons/geometries/TeapotGeometry.js';
@@ -37,14 +44,9 @@
 			import { bayer16 } from 'three/addons/tsl/math/Bayer.js';
 			import { gaussianBlur } from 'three/addons/tsl/display/GaussianBlurNode.js';
 
-			import Stats from 'three/addons/libs/stats.module.js';
-
-			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
-
 			let renderer, scene, camera;
 			let volumetricMesh, teapot, pointLight, spotLight;
 			let postProcessing;
-			let stats;
 
 			init();
 
@@ -99,9 +101,6 @@
 
 				const LAYER_VOLUMETRIC_LIGHTING = 10;
 
-				stats = new Stats();
-				document.body.appendChild( stats.dom );
-
 				renderer = new THREE.WebGPURenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
@@ -109,6 +108,7 @@
 				renderer.toneMapping = THREE.NeutralToneMapping;
 				renderer.toneMappingExposure = 2;
 				renderer.shadowMap.enabled = true;
+				renderer.inspector = new Inspector();
 				document.body.appendChild( renderer.domElement );
 
 				scene = new THREE.Scene();
@@ -216,8 +216,9 @@
 				// Volumetric Lighting Pass
 
 				const volumetricPass = pass( scene, camera, { depthBuffer: false } );
+				volumetricPass.name = 'Volumetric Lighting';
 				volumetricPass.setLayers( volumetricLayer );
-				volumetricPass.setResolution( .25 );
+				volumetricPass.setResolutionScale( .25 );
 
 				// Compose and Denoise
 
@@ -232,16 +233,16 @@
 				// GUI
 
 				const params = {
-					resolution: volumetricPass.getResolution(),
+					resolution: volumetricPass.getResolutionScale(),
 					denoise: true
 				};
 
-				const gui = new GUI();
+				const gui = renderer.inspector.createParameters( 'Volumetric Lighting' );
 
-				const rayMarching = gui.addFolder( 'Ray Marching' ).close();
+				const rayMarching = gui.addFolder( 'Ray Marching' );
 				rayMarching.add( params, 'resolution', .1, .5 ).onChange( ( resolution ) => {
 
-					volumetricPass.setResolution( resolution );
+					volumetricPass.setResolutionScale( resolution );
 
 				} );
 				rayMarching.add( volumetricMaterial, 'steps', 2, 12 ).name( 'step count' );
@@ -257,7 +258,7 @@
 
 				} );
 
-				const lighting = gui.addFolder( 'Lighting / Scene' ).close();
+				const lighting = gui.addFolder( 'Lighting / Scene' );
 				lighting.add( pointLight, 'intensity', 0, 6 ).name( 'light intensity' );
 				lighting.add( spotLight, 'intensity', 0, 200 ).name( 'spot intensity' );
 				lighting.add( volumetricLightingIntensity, 'value', 0, 2 ).name( 'fog intensity' );
@@ -278,8 +279,6 @@
 
 			function animate() {
 
-				stats.update();
-
 				const time = performance.now() * 0.001;
 				const scale = 2.4;
 

examples/webgpu_volume_lighting_rectarea.html

@@ -4,14 +4,19 @@
 		<title>three.js webgpu - volumetric lighting rect area</title>
 		<meta charset="utf-8">
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
-		<link type="text/css" rel="stylesheet" href="main.css">
+		<link type="text/css" rel="stylesheet" href="example.css">
 	</head>
 
 	<body>
 
 		<div id="info">
-			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> webgpu - volumetric lighting rect area
-			<br>Improve the quality/performance adjusting the parameters in the Controls
+			<a href="https://threejs.org/" target="_blank" rel="noopener" class="logo-link"></a>
+
+			<div class="title-wrapper">
+				<a href="https://threejs.org/" target="_blank" rel="noopener">three.js</a><span>Volumetric Lighting Rect Area</span>
+			</div>
+
+			<small>Compatible with rect area lights and shadows using post-processing pass.</small>
 		</div>
 
 		<script type="importmap">
@@ -34,19 +39,16 @@
 			import { ImprovedNoise } from 'three/addons/math/ImprovedNoise.js';
 			import { RectAreaLightTexturesLib } from 'three/addons/lights/RectAreaLightTexturesLib.js';
 
+			import { Inspector } from 'three/addons/inspector/Inspector.js';
+
 			import { bayer16 } from 'three/addons/tsl/math/Bayer.js';
 			import { gaussianBlur } from 'three/addons/tsl/display/GaussianBlurNode.js';
 
-			import Stats from 'three/addons/libs/stats.module.js';
-
-			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
-
 			let renderer, scene, camera;
 			let volumetricMesh, meshKnot;
 			let rectLight1, rectLight2, rectLight3;
 			let clock;
 			let postProcessing;
-			let stats;
 
 			init();
 
@@ -103,9 +105,6 @@
 
 				const LAYER_VOLUMETRIC_LIGHTING = 10;
 
-				stats = new Stats();
-				document.body.appendChild( stats.dom );
-
 				clock = new THREE.Clock();
 
 				renderer = new THREE.WebGPURenderer();
@@ -115,6 +114,7 @@
 				renderer.toneMapping = THREE.NeutralToneMapping;
 				renderer.toneMappingExposure = 2;
 				renderer.shadowMap.enabled = true;
+				renderer.inspector = new Inspector();
 				document.body.appendChild( renderer.domElement );
 
 				scene = new THREE.Scene();
@@ -238,7 +238,7 @@
 
 				const volumetricPass = pass( scene, camera, { depthBuffer: false } );
 				volumetricPass.setLayers( volumetricLayer );
-				volumetricPass.setResolution( .25 );
+				volumetricPass.setResolutionScale( .25 );
 
 				// Compose and Denoise
 
@@ -253,16 +253,16 @@
 				// GUI
 
 				const params = {
-					resolution: volumetricPass.getResolution(),
+					resolution: volumetricPass.getResolutionScale(),
 					denoise: true
 				};
 
-				const gui = new GUI();
+				const gui = renderer.inspector.createParameters( 'Volumetric Lighting' );
 
-				const rayMarching = gui.addFolder( 'Ray Marching' ).close();
+				const rayMarching = gui.addFolder( 'Ray Marching' );
 				rayMarching.add( params, 'resolution', .1, .5 ).onChange( ( resolution ) => {
 
-					volumetricPass.setResolution( resolution );
+					volumetricPass.setResolutionScale( resolution );
 
 				} );
 				rayMarching.add( volumetricMaterial, 'steps', 2, 12 ).name( 'step count' );
@@ -278,7 +278,7 @@
 
 				} );
 
-				const lighting = gui.addFolder( 'Lighting / Scene' ).close();
+				const lighting = gui.addFolder( 'Lighting / Scene' );
 				lighting.add( volumetricLightingIntensity, 'value', 0, 2 ).name( 'fog intensity' );
 				lighting.add( smokeAmount, 'value', 0, 3 ).name( 'smoke amount' );
 
@@ -299,8 +299,6 @@
 
 				const delta = clock.getDelta();
 
-				stats.update();
-
 				rectLight1.rotation.y += - delta;
 				rectLight2.rotation.y += delta * .5;
 				rectLight3.rotation.y += delta;

src/nodes/display/PassNode.js

@@ -10,6 +10,7 @@ import { Vector2 } from '../../math/Vector2.js';
 import { Vector4 } from '../../math/Vector4.js';
 import { DepthTexture } from '../../textures/DepthTexture.js';
 import { RenderTarget } from '../../core/RenderTarget.js';
+import { warn } from '../../utils.js';
 
 const _size = /*@__PURE__*/ new Vector2();
 
@@ -342,7 +343,7 @@ class PassNode extends TempNode {
 		 * @type {number}
 		 * @default 1
 		 */
-		this._resolution = 1;
+		this._resolutionScale = 1;
 
 		/**
 		 * Custom viewport definition.
@@ -397,9 +398,9 @@ class PassNode extends TempNode {
 	 * @param {number} resolution - The resolution to set. A value of `1` means full resolution.
 	 * @return {PassNode} A reference to this pass.
 	 */
-	setResolution( resolution ) {
+	setResolutionScale( resolution ) {
 
-		this._resolution = resolution;
+		this._resolutionScale = resolution;
 
 		return this;
 
@@ -410,9 +411,39 @@ class PassNode extends TempNode {
 	 *
 	 * @return {number} The current resolution. A value of `1` means full resolution.
 	 */
-	getResolution() {
+	getResolutionScale() {
 
-		return this._resolution;
+		return this._resolutionScale;
+
+	}
+
+	/**
+	 * Sets the resolution for the pass.
+	 * The resolution is a factor that is multiplied with the renderer's width and height.
+	 *
+	 * @param {number} resolution - The resolution to set. A value of `1` means full resolution.
+	 * @return {PassNode} A reference to this pass.
+	 * @deprecated since r181. Use {@link PassNode#setResolutionScale `setResolutionScale()`} instead.
+	 */
+	setResolution( resolution ) { // @deprecated, r181
+
+		warn( 'PassNode: .setResolution() is deprecated. Use .setResolutionScale() instead.' );
+
+		return this.setResolutionScale( resolution );
+
+	}
+
+	/**
+	 * Gets the current resolution of the pass.
+	 *
+	 * @return {number} The current resolution. A value of `1` means full resolution.
+	 * @deprecated since r181. Use {@link PassNode#getResolutionScale `getResolutionScale()`} instead.
+	 */
+	getResolution() { // @deprecated, r181
+
+		warn( 'PassNode: .getResolution() is deprecated. Use .getResolutionScale() instead.' );
+
+		return this.getResolutionScale();
 
 	}
 
@@ -726,8 +757,14 @@ class PassNode extends TempNode {
 		renderer.setRenderTarget( this.renderTarget );
 		renderer.setMRT( this._mrt );
 
+		const currentSceneName = scene.name;
+
+		scene.name = this.name ? this.name : scene.name;
+
 		renderer.render( scene, camera );
 
+		scene.name = currentSceneName;
+
 		renderer.setRenderTarget( currentRenderTarget );
 		renderer.setMRT( currentMRT );
 
@@ -746,8 +783,8 @@ class PassNode extends TempNode {
 		this._width = width;
 		this._height = height;
 
-		const effectiveWidth = this._width * this._pixelRatio * this._resolution;
-		const effectiveHeight = this._height * this._pixelRatio * this._resolution;
+		const effectiveWidth = this._width * this._pixelRatio * this._resolutionScale;
+		const effectiveHeight = this._height * this._pixelRatio * this._resolutionScale;
 
 		this.renderTarget.setSize( effectiveWidth, effectiveHeight );
 
@@ -787,7 +824,7 @@ class PassNode extends TempNode {
 
 			}
 
-			this._scissor.multiplyScalar( this._pixelRatio * this._resolution ).floor();
+			this._scissor.multiplyScalar( this._pixelRatio * this._resolutionScale ).floor();
 
 		}
 
@@ -823,7 +860,7 @@ class PassNode extends TempNode {
 
 			}
 
-			this._viewport.multiplyScalar( this._pixelRatio * this._resolution ).floor();
+			this._viewport.multiplyScalar( this._pixelRatio * this._resolutionScale ).floor();
 
 		}