Merge branch 'dev' into city

.github/CONTRIBUTING.md

@@ -1,4 +1,4 @@
-# Contribution
+# Contributing
 ## Introduction
 
 It is assumed that you know a little about Node.js and Git. If not, [here's some help to get started with Git](https://help.github.com/en/github/using-git) and [here’s some help to get started with Node.js.](https://nodejs.org/en/docs/guides/getting-started-guide/)

examples/files.json

@@ -303,7 +303,7 @@
 		"webgl_tsl_clearcoat",
 		"webgl_tsl_instancing"
 	],
-	"webgpu (wip)": [
+	"webgpu": [
 		"webgpu_animation_retargeting",
 		"webgpu_animation_retargeting_readyplayer",
 		"webgpu_backdrop",

examples/jsm/inspector/ui/Values.js

@@ -10,16 +10,20 @@ class Value extends EventDispatcher {
 		this.domElement.className = 'param-control';
 
 		this._onChangeFunction = null;
+		this._changeTimeout = null;
+		this._debounceTime = 0;
 
 		this.addEventListener( 'change', ( e ) => {
 
 			// defer to avoid issues when changing multiple values in the same call stack
 
-			requestAnimationFrame( () => {
+			clearTimeout( this._changeTimeout );
+
+			this._changeTimeout = setTimeout( () => {
 
 				if ( this._onChangeFunction ) this._onChangeFunction( e.value );
 
-			} );
+			}, this._debounceTime );
 
 		} );
 
@@ -53,6 +57,14 @@ class Value extends EventDispatcher {
 
 	}
 
+	debounce( time ) {
+
+		this._debounceTime = time;
+
+		return this;
+
+	}
+
 	show() {
 
 		this.dispatchEvent( { type: 'show' } );

examples/webgpu_lightprobes.html

@@ -212,14 +212,11 @@
 
 				} );
 
-				let rebakeTimer = null;
 				gui.add( params, 'resolution', 2, 12, 1 ).name( 'Resolution' ).onChange( ( value ) => {
 
-					// Debounce so a slider drag rebakes once it settles, not every step.
-					if ( rebakeTimer !== null ) clearTimeout( rebakeTimer );
-					rebakeTimer = setTimeout( () => bake( value ), 250 );
+					bake( value );
 
-				} );
+				} ).debounce( 250 );
 				gui.add( params, 'showProbes' ).name( 'Show Probes' ).onChange( ( value ) => {
 
 					probesHelper.visible = value;

examples/webgpu_lightprobes_complex.html

@@ -364,14 +364,11 @@
 
 				} );
 
-				let rebakeTimer = null;
 				gui.add( params, 'resolution', 2, 12, 1 ).name( 'Resolution' ).onChange( ( value ) => {
 
-					// Debounce so a slider drag rebakes once it settles, not every step.
-					if ( rebakeTimer !== null ) clearTimeout( rebakeTimer );
-					rebakeTimer = setTimeout( () => bake( value ), 250 );
+					bake( value );
 
-				} );
+				} ).debounce( 250 );
 				gui.add( params, 'showProbes' ).name( 'Show Probes' ).onChange( ( value ) => {
 
 					probesHelperLeft.visible = value;

examples/webgpu_lights_clustered.html

@@ -38,7 +38,8 @@
 		<script type="module">
 
 			import * as THREE from 'three/webgpu';
-			import { instancedBufferAttribute, pass, uniform, vec3, float, mix, step } from 'three/tsl';
+			import { instancedBufferAttribute, pass, uniform, vec3, float, mix, step, renderOutput } from 'three/tsl';
+			import { fxaa } from 'three/addons/tsl/display/FXAANode.js';
 
 			import { ClusteredLighting } from 'three/addons/lighting/ClusteredLighting.js';
 
@@ -83,7 +84,7 @@
 
 				scene = new THREE.Scene();
 
-				renderer = new THREE.WebGPURenderer( { antialias: true } );
+				renderer = new THREE.WebGPURenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.setAnimationLoop( animate );
@@ -195,6 +196,7 @@
 				debugZSliceNode = uniform( 20, 'int' );
 
 				renderPipeline = new THREE.RenderPipeline( renderer );
+				renderPipeline.outputColorTransform = false;
 
 				updatePostProcessing();
 
@@ -245,7 +247,10 @@
 				// blend the heatmap over the scene by the slider amount; step() keeps
 				// empty clusters transparent
 				const finalInfluence = clusterInfluence.mul( step( 0.0001, heatmap ) );
-				renderPipeline.outputNode = mix( scenePass, heatColor, finalInfluence );
+
+				const outputPass = renderOutput( mix( scenePass, heatColor, finalInfluence ) );
+
+				renderPipeline.outputNode = fxaa( outputPass );
 				renderPipeline.needsUpdate = true;
 
 			}

examples/webgpu_postprocessing_ao.html

@@ -538,7 +538,7 @@
 
 				} );
 				const resolutionScaleControl = gui.add( params, 'resolutionScale', 0, 1 ).name( 'resolution' ).onChange( updateParameters );
-				gui.add( params, 'samples', 4, 32, 1 ).onChange( updateParameters );
+				gui.add( params, 'samples', 4, 32, 1 ).onChange( updateParameters ).debounce( 250 );
 				gui.add( params, 'radius', 0.1, 1 ).onChange( updateParameters );
 
 				const gtaoControls = [