Examples: More Inspector usage. (#31988)

* Examples: More Inspector usage.

* E2E: Update screenshots.

* add partial .setValue

* Update webgpu_postprocessing_transition.html

* Update webgpu_postprocessing_transition.jpg

---------

Co-authored-by: sunag <sunagbrasil@gmail.com>

Author: Mugen87

examples/jsm/inspector/ui/Values.js

@@ -25,6 +25,14 @@ class Value extends EventDispatcher {
 
 	}
 
+	setValue( /*val*/ ) {
+
+		this.dispatchChange();
+
+		return this;
+
+	}
+
 	getValue() {
 
 		return null;
@@ -240,6 +248,15 @@ class ValueSlider extends Value {
 
 	}
 
+	setValue( val ) {
+
+		this.slider.value = val;
+		this.numberInput.value = val;
+
+		return super.setValue( val );
+
+	}
+
 	getValue() {
 
 		return parseFloat( this.slider.value );

examples/jsm/tsl/display/AfterImageNode.js

@@ -2,7 +2,7 @@ import { RenderTarget, Vector2, QuadMesh, NodeMaterial, RendererUtils, TempNode,
 import { nodeObject, Fn, float, uv, texture, passTexture, sign, max, convertToTexture } from 'three/tsl';
 
 const _size = /*@__PURE__*/ new Vector2();
-const _quadMeshComp = /*@__PURE__*/ new QuadMesh();
+const _quadMesh = /*@__PURE__*/ new QuadMesh();
 
 let _rendererState;
 
@@ -144,10 +144,11 @@ class AfterImageNode extends TempNode {
 		this.textureNodeOld.value = this._oldRT.texture;
 
 		// comp
-		_quadMeshComp.material = this._materialComposed;
+		_quadMesh.material = this._materialComposed;
+		_quadMesh.name = 'AfterImage';
 
 		renderer.setRenderTarget( this._compRT );
-		_quadMeshComp.render( renderer );
+		_quadMesh.render( renderer );
 
 		// Swap the textures
 

examples/jsm/tsl/display/AnamorphicNode.js

@@ -158,6 +158,7 @@ class AnamorphicNode extends TempNode {
 		const currentTexture = textureNode.value;
 
 		_quadMesh.material = this._material;
+		_quadMesh.name = 'Anamorphic';
 
 		this.setSize( map.image.width, map.image.height );
 

examples/jsm/tsl/display/DepthOfFieldNode.js

@@ -285,6 +285,7 @@ class DepthOfFieldNode extends TempNode {
 
 		_quadMesh.material = this._CoCMaterial;
 		renderer.setRenderTarget( this._CoCRT );
+		_quadMesh.name = 'DoF [ CoC ]';
 		_quadMesh.render( renderer );
 
 		// blur near field to avoid visible aliased edges when the near field
@@ -294,6 +295,7 @@ class DepthOfFieldNode extends TempNode {
 
 		_quadMesh.material = this._CoCBlurredMaterial;
 		renderer.setRenderTarget( this._CoCBlurredRT );
+		_quadMesh.name = 'DoF [ CoC Blur ]';
 		_quadMesh.render( renderer );
 
 		// blur64 near
@@ -302,12 +304,14 @@ class DepthOfFieldNode extends TempNode {
 
 		_quadMesh.material = this._blur64Material;
 		renderer.setRenderTarget( this._blur64RT );
+		_quadMesh.name = 'DoF [ Blur64 Near ]';
 		_quadMesh.render( renderer );
 
 		// blur16 near
 
 		_quadMesh.material = this._blur16Material;
 		renderer.setRenderTarget( this._blur16NearRT );
+		_quadMesh.name = 'DoF [ Blur16 Near ]';
 		_quadMesh.render( renderer );
 
 		// blur64 far
@@ -316,18 +320,21 @@ class DepthOfFieldNode extends TempNode {
 
 		_quadMesh.material = this._blur64Material;
 		renderer.setRenderTarget( this._blur64RT );
+		_quadMesh.name = 'DoF [ Blur64 Far ]';
 		_quadMesh.render( renderer );
 
 		// blur16 far
 
 		_quadMesh.material = this._blur16Material;
 		renderer.setRenderTarget( this._blur16FarRT );
+		_quadMesh.name = 'DoF [ Blur16 Far ]';
 		_quadMesh.render( renderer );
 
 		// composite
 
 		_quadMesh.material = this._compositeMaterial;
 		renderer.setRenderTarget( this._compositeRT );
+		_quadMesh.name = 'DoF [ Composite ]';
 		_quadMesh.render( renderer );
 
 		// restore

examples/jsm/tsl/display/GTAONode.js

@@ -253,6 +253,7 @@ class GTAONode extends TempNode {
 		this.setSize( size.width, size.height );
 
 		_quadMesh.material = this._material;
+		_quadMesh.name = 'AO';
 
 		// clear
 

examples/jsm/tsl/display/SSRNode.js

@@ -347,6 +347,7 @@ class SSRNode extends TempNode {
 		// ssr
 
 		renderer.setRenderTarget( ssrRenderTarget );
+		_quadMesh.name = 'SSR [ Reflections ]';
 		_quadMesh.render( renderer );
 
 		// blur (optional)
@@ -361,6 +362,7 @@ class SSRNode extends TempNode {
 
 				this._blurSpread.value = i;
 				renderer.setRenderTarget( blurRenderTarget, 0, i );
+				_quadMesh.name = 'SSR [ Blur Level ' + i + ' ]';
 				_quadMesh.render( renderer );
 
 			}