diff --git a/examples/jsm/misc/ClothSimulator.js b/examples/jsm/misc/ClothSimulator.js
new file mode 100644
index 00000000000000..56525aba0db251
--- /dev/null
+++ b/examples/jsm/misc/ClothSimulator.js
@@ -0,0 +1,622 @@
+import { BufferAttribute, BufferGeometry, DoubleSide, IcosahedronGeometry, Mesh, Vector3, Matrix4 } from 'three';
+import { MeshBasicMaterial, MeshPhysicalNodeMaterial } from 'three/webgpu';
+import { Fn, If, Return, instancedArray, instanceIndex, uniform, select, attribute, uint, Loop, float, transformNormalToView, cross, triNoise3D, time, frontFacing, color as colorNode, } from 'three/tsl';
+
+/**
+ * Generates a plane that can be used as a cloth simulator.
+ * Note that this class can only be used with {@link WebGPURenderer}.
+ * @three_import import { ClothSimulator } from 'three/addons/objects/ClothSimulator.js';
+ * @example
+ *
+ * // Create cloth simulation with 2 sphere colliders
+ * const cloth = new ClothSimulator(renderer, {
+ *     segmentsX: 20,
+ *     segmentsY: 20,
+ *     width: 1,
+ *     height: 2,
+ *     numSphereColliders: 2, //<-- how many "sphere colliders" will interact with the cloth
+ *     sphereRadius: 0.2,
+ *     stiffness: 0.3,
+ *     wind: 0.1,
+ * });
+
+ * // Add cloth mesh to scene
+ * scene.add(cloth.mesh);
+
+ * // To modify the material access it via:
+ * cloth.mesh.material; // it is a MeshPhysicalNodeMaterial
+
+ * // OPTIONAL!! : Create and add sphere visualizers ( for debug )
+ * const spheres = cloth.createSphereVisualizers();
+ * spheres.forEach(sphere => scene.add(sphere));
+
+ * // IN YOUR MAIN LOOP:
+ * cloth.setSphereCollider(0, colPos); // set the position of the first sphere collider
+ * cloth.setSphereCollider(1, colPos2); // set the position of the second sphere collider
+
+ * // **** You can move the cloth object itself ****
+ * cloth.mesh.position.x = .5 + Math.sin(elapsedTime * 1.1)*.3
+ * cloth.mesh.rotateY( Math.sin(elapsedTime)*.01)
+
+ * // update the cloth simulation
+ * cloth.update(delta);
+ */
+class ClothSimulator {
+
+	/**
+	 * @param {WebGPURenderer} renderer - The renderer to use for the simulation.
+	 * @param {ClothSimulator~Options} [options] - The options for the simulation.
+	 */
+	constructor( renderer, options = {} ) {
+
+		this.renderer = renderer;
+		this.sphereMeshes = [];
+		this.verletVertices = [];
+		this.verletSprings = [];
+		this.verletVertexColumns = [];
+		this.sphereColliders = [];
+		this.timeSinceLastStep = 0;
+		this.timestamp = 0;
+
+		// Set defaults
+		if ( options.material && ! options.material.isNodeMaterial ) {
+
+			throw new Error( 'The material used must be a node material since it\'s position and normal nodes will be set/overriten' );
+
+		}
+
+		this.options = {
+			segmentsX: options.segmentsX !== undefined ? options.segmentsX : 20,
+			segmentsY: options.segmentsY !== undefined ? options.segmentsY : 20,
+			width: options.width !== undefined ? options.width : 1,
+			height: options.height !== undefined ? options.height : 1,
+			numSphereColliders: options.numSphereColliders !== undefined ? options.numSphereColliders : 1,
+			sphereRadius: options.sphereRadius !== undefined ? options.sphereRadius : 0.15,
+			stiffness: options.stiffness !== undefined ? options.stiffness : 0.3,
+			dampening: options.dampening !== undefined ? options.dampening : 0.99,
+			wind: options.wind !== undefined ? options.wind : 1.0,
+			gravity: options.gravity !== undefined ? options.gravity : 0.00005,
+			stepsPerSecond: options.stepsPerSecond !== undefined ? options.stepsPerSecond : 360,
+			fixedVertexPattern: options.fixedVertexPattern !== undefined ? options.fixedVertexPattern : ( ( x, y ) => y === 0 && ( x === 0 || x === options.segmentsX - 1 ) ),
+			color: options.color !== undefined ? options.color : 0,
+			material: options.material !== undefined ? options.material : null,
+		};
+
+		this.timeStep = 1 / this.options.stepsPerSecond;
+		this._setupVerletGeometry();
+		this._setupVerletVertexBuffers();
+		this._setupVerletSpringBuffers();
+		this._setupUniforms();
+		this._setupSphereColliders();
+		this._setupComputeShaders();
+		this.mesh = this._setupClothMesh();
+
+	}
+
+	/**
+     * Update the cloth simulation. Call this every frame.
+     * @param {number} delta Time since last frame in seconds
+     */
+	update( delta ) {
+
+		// Clamp delta to prevent large jumps
+		const clampedDelta = Math.min( delta, 1 / 60 );
+		this.timeSinceLastStep += clampedDelta;
+		while ( this.timeSinceLastStep >= this.timeStep ) {
+
+			this.timestamp += this.timeStep;
+			this.timeSinceLastStep -= this.timeStep;
+			this.mesh.updateMatrixWorld();
+			this.worldMatrixUniform.value.copy( this.mesh.matrixWorld );
+			this.worldMatrixInverseUniform.value.copy( this.mesh.matrixWorld ).invert();
+			this.renderer.compute( this.computeSpringForces );
+			this.renderer.compute( this.computeVertexForces );
+
+		}
+
+	}
+	/**
+	 * Set the position and optionally radius of a sphere collider using either a THREE.Sphere or position and radius.
+	 * @param {number} index Index of the sphere collider (0-based)
+	 * @param {Vector3|Sphere} positionOrSphere Position of the sphere OR a THREE.Sphere object
+	 * @param {number} [radius] Optional new radius (ignored if a THREE.Sphere is passed)
+	 */
+	setSphereCollider( index, positionOrSphere, radius ) {
+
+		if ( index < 0 || index >= this.sphereColliders.length ) {
+
+			console.warn( `ClothSimulation: Invalid sphere collider index ${index}` );
+			return;
+
+		}
+
+		let position, r;
+
+		if ( positionOrSphere.isSphere ) {
+
+			position = positionOrSphere.center;
+			r = positionOrSphere.radius;
+
+		} else {
+
+			position = positionOrSphere;
+			r = radius;
+
+		}
+
+		const collider = this.sphereColliders[ index ];
+		collider.positionUniform.value.copy( position );
+
+		if ( r !== undefined ) {
+
+			collider.radiusUniform.value = r;
+
+		}
+
+		// Update visualization mesh if it exists
+		if ( this.sphereMeshes[ index ] ) {
+
+			this.sphereMeshes[ index ].position.copy( position );
+
+			if ( r !== undefined ) {
+
+				this.sphereMeshes[ index ].scale.setScalar( r / this.options.sphereRadius );
+
+			}
+
+		}
+
+	}
+	/**
+     * Enable or disable a sphere collider
+     * @param {number} index Index of the sphere collider
+     * @param {boolean} enabled Whether the collider is active
+     */
+	setSphereEnabled( index, enabled ) {
+
+		if ( index < 0 || index >= this.sphereColliders.length ) {
+
+			console.warn( `ClothSimulation: Invalid sphere collider index ${index}` );
+			return;
+
+		}
+
+		this.sphereColliders[ index ].enabledUniform.value = enabled ? 1 : 0;
+		if ( this.sphereMeshes[ index ] ) {
+
+			this.sphereMeshes[ index ].visible = enabled;
+
+		}
+
+	}
+	/**
+     * Set wind strength
+	 * @param {number} value New wind strength
+     */
+	setWind( value ) {
+
+		this.windUniform.value = value;
+
+	}
+	/**
+     * Set spring stiffness
+	 * @param {number} value New stiffness value
+     */
+	setStiffness( value ) {
+
+		this.stiffnessUniform.value = value;
+
+	}
+	/**
+     * Set velocity dampening
+	 * @param {number} value New dampening value
+     */
+	setDampening( value ) {
+
+		this.dampeningUniform.value = value;
+
+	}
+	/**
+     * Create visualization meshes for sphere colliders
+     * @returns Array of meshes that can be added to the scene
+     */
+	createSphereVisualizers() {
+
+		this.sphereMeshes.length = 0;
+		for ( let i = 0; i < this.sphereColliders.length; i ++ ) {
+
+			const collider = this.sphereColliders[ i ];
+			const geometry = new IcosahedronGeometry( collider.radiusUniform.value * 0.95, 4 );
+			const material = new MeshBasicMaterial( { wireframe: true } );
+			const sphere = new Mesh( geometry, material );
+			sphere.position.copy( collider.positionUniform.value );
+			this.sphereMeshes.push( sphere );
+
+		}
+
+		return this.sphereMeshes;
+
+	}
+	/**
+     * Clean up resources
+     */
+	dispose() {
+
+		this.mesh.geometry.dispose();
+		if ( this.mesh.material.isMeshPhysicalNodeMaterial ) {
+
+			this.mesh.material.dispose();
+
+		}
+
+		for ( const sphere of this.sphereMeshes ) {
+
+			sphere.geometry.dispose();
+			if ( sphere.material.isMeshPhysicalNodeMaterial ) {
+
+				sphere.material.dispose();
+
+			}
+
+		}
+
+	}
+
+	_setupVerletGeometry() {
+
+		const { segmentsX, segmentsY, width, height, fixedVertexPattern } = this.options;
+		const addVerletVertex = ( x, y, z, isFixed ) => {
+
+			const id = this.verletVertices.length;
+			const vertex = {
+				id,
+				position: new Vector3( x, y, z ),
+				isFixed,
+				springIds: [],
+			};
+			this.verletVertices.push( vertex );
+			return vertex;
+
+		};
+
+		const addVerletSpring = ( vertex0, vertex1 ) => {
+
+			const id = this.verletSprings.length;
+			const spring = {
+				id,
+				vertex0,
+				vertex1,
+			};
+			vertex0.springIds.push( id );
+			vertex1.springIds.push( id );
+			this.verletSprings.push( spring );
+			return spring;
+
+		};
+
+		// Create cloth vertices
+		for ( let x = 0; x <= segmentsX; x ++ ) {
+
+			const column = [];
+			for ( let y = 0; y <= segmentsY; y ++ ) {
+
+				const posX = x * ( width / segmentsX ) - width * 0.5;
+				const posZ = y * ( height / segmentsY );
+				const isFixed = fixedVertexPattern( x, y, segmentsX, segmentsY );
+				const vertex = addVerletVertex( posX, height * 0.5, posZ, isFixed );
+				column.push( vertex );
+
+			}
+
+			this.verletVertexColumns.push( column );
+
+		}
+
+		// Create springs
+		for ( let x = 0; x <= segmentsX; x ++ ) {
+
+			for ( let y = 0; y <= segmentsY; y ++ ) {
+
+				const vertex0 = this.verletVertexColumns[ x ][ y ];
+				if ( x > 0 )
+					addVerletSpring( vertex0, this.verletVertexColumns[ x - 1 ][ y ] );
+				if ( y > 0 )
+					addVerletSpring( vertex0, this.verletVertexColumns[ x ][ y - 1 ] );
+				if ( x > 0 && y > 0 )
+					addVerletSpring( vertex0, this.verletVertexColumns[ x - 1 ][ y - 1 ] );
+				if ( x > 0 && y < segmentsY )
+					addVerletSpring( vertex0, this.verletVertexColumns[ x - 1 ][ y + 1 ] );
+
+			}
+
+		}
+
+	}
+	_setupVerletVertexBuffers() {
+
+		const vertexCount = this.verletVertices.length;
+		const springListArray = [];
+		const vertexPositionArray = new Float32Array( vertexCount * 3 );
+		const vertexParamsArray = new Uint32Array( vertexCount * 3 );
+		for ( let i = 0; i < vertexCount; i ++ ) {
+
+			const vertex = this.verletVertices[ i ];
+			vertexPositionArray[ i * 3 ] = vertex.position.x;
+			vertexPositionArray[ i * 3 + 1 ] = vertex.position.y;
+			vertexPositionArray[ i * 3 + 2 ] = vertex.position.z;
+			vertexParamsArray[ i * 3 ] = vertex.isFixed ? 1 : 0;
+			if ( ! vertex.isFixed ) {
+
+				vertexParamsArray[ i * 3 + 1 ] = vertex.springIds.length;
+				vertexParamsArray[ i * 3 + 2 ] = springListArray.length;
+				springListArray.push( ...vertex.springIds );
+
+			}
+
+		}
+
+		this.vertexPositionBuffer = instancedArray( vertexPositionArray, 'vec3' ).setPBO( true );
+		this.initialPositionBuffer = instancedArray( vertexPositionArray, 'vec3' ); // Read-only copy of initial local positions
+		this.vertexForceBuffer = instancedArray( vertexCount, 'vec3' );
+		this.vertexParamsBuffer = instancedArray( vertexParamsArray, 'uvec3' );
+		this.springListBuffer = instancedArray( new Uint32Array( springListArray ), 'uint' ).setPBO( true );
+
+	}
+	_setupVerletSpringBuffers() {
+
+		const springCount = this.verletSprings.length;
+		const springVertexIdArray = new Uint32Array( springCount * 2 );
+		const springRestLengthArray = new Float32Array( springCount );
+		for ( let i = 0; i < springCount; i ++ ) {
+
+			const spring = this.verletSprings[ i ];
+			springVertexIdArray[ i * 2 ] = spring.vertex0.id;
+			springVertexIdArray[ i * 2 + 1 ] = spring.vertex1.id;
+			springRestLengthArray[ i ] = spring.vertex0.position.distanceTo( spring.vertex1.position );
+
+		}
+
+		this.springVertexIdBuffer = instancedArray( springVertexIdArray, 'uvec2' ).setPBO( true );
+		this.springRestLengthBuffer = instancedArray( springRestLengthArray, 'float' );
+		this.springForceBuffer = instancedArray( springCount * 3, 'vec3' ).setPBO( true );
+
+	}
+	_setupUniforms() {
+
+		this.dampeningUniform = uniform( this.options.dampening );
+		this.stiffnessUniform = uniform( this.options.stiffness );
+		this.windUniform = uniform( this.options.wind );
+		this.gravityUniform = uniform( this.options.gravity );
+		this.worldMatrixUniform = uniform( new Matrix4() );
+		this.worldMatrixInverseUniform = uniform( new Matrix4() );
+
+	}
+	_setupSphereColliders() {
+
+		for ( let i = 0; i < this.options.numSphereColliders; i ++ ) {
+
+			this.sphereColliders.push( {
+				positionUniform: uniform( new Vector3( 0, 0, 0 ) ),
+				radiusUniform: uniform( this.options.sphereRadius ),
+				enabledUniform: uniform( 1.0 ),
+			} );
+
+		}
+
+	}
+	_setupComputeShaders() {
+
+		const vertexCount = this.verletVertices.length;
+		const springCount = this.verletSprings.length;
+		// Capture references for use in shaders
+		const springVertexIdBuffer = this.springVertexIdBuffer;
+		const springRestLengthBuffer = this.springRestLengthBuffer;
+		const vertexPositionBuffer = this.vertexPositionBuffer;
+		const springForceBuffer = this.springForceBuffer;
+		const stiffnessUniform = this.stiffnessUniform;
+		const vertexParamsBuffer = this.vertexParamsBuffer;
+		const vertexForceBuffer = this.vertexForceBuffer;
+		const dampeningUniform = this.dampeningUniform;
+		const springListBuffer = this.springListBuffer;
+		const windUniform = this.windUniform;
+		const gravityUniform = this.gravityUniform;
+		const sphereColliders = this.sphereColliders;
+		const initialPositionBuffer = this.initialPositionBuffer;
+		const worldMatrixUniform = this.worldMatrixUniform;
+		// 1. Compute spring forces
+		this.computeSpringForces = Fn( () => {
+
+			If( instanceIndex.greaterThanEqual( uint( springCount ) ), () => {
+
+				Return();
+
+			} );
+			const vertexIds = springVertexIdBuffer.element( instanceIndex );
+			const restLength = springRestLengthBuffer.element( instanceIndex );
+			const vertex0Position = vertexPositionBuffer.element( vertexIds.x );
+			const vertex1Position = vertexPositionBuffer.element( vertexIds.y );
+			const vertex0Velocity = vertexForceBuffer.element( vertexIds.x );
+			const vertex1Velocity = vertexForceBuffer.element( vertexIds.y );
+			const delta = vertex1Position.sub( vertex0Position ).toVar();
+			const dist = delta.length().max( 0.000001 ).toVar();
+			const dir = delta.div( dist );
+			const relVelocity = vertex1Velocity.sub( vertex0Velocity );
+			const damping = relVelocity.dot( dir ).mul( 0.1 );
+			const force = dist.sub( restLength ).mul( stiffnessUniform ).add( damping ).mul( dir ).mul( 0.5 );
+			springForceBuffer.element( instanceIndex ).assign( force );
+
+		} )().compute( springCount );
+		// 2. Compute vertex forces
+		this.computeVertexForces = Fn( () => {
+
+			If( instanceIndex.greaterThanEqual( uint( vertexCount ) ), () => {
+
+				Return();
+
+			} );
+			const params = vertexParamsBuffer.element( instanceIndex ).toVar();
+			const isFixed = params.x;
+			const springCountVar = params.y;
+			const springPointer = params.z;
+			const position = vertexPositionBuffer.element( instanceIndex ).toVar( 'vertexPosition' );
+			const force = vertexForceBuffer.element( instanceIndex ).toVar( 'vertexForce' );
+			If( isFixed, () => {
+
+				const initialPos = initialPositionBuffer.element( instanceIndex );
+				const targetWorldPos = worldMatrixUniform.mul( initialPos ).xyz;
+				// Calculate velocity for correct damping interactions
+				const velocity = targetWorldPos.sub( position );
+				vertexForceBuffer.element( instanceIndex ).assign( velocity );
+				vertexPositionBuffer.element( instanceIndex ).assign( targetWorldPos );
+				Return();
+
+			} );
+			force.mulAssign( dampeningUniform );
+			const ptrStart = springPointer.toVar( 'ptrStart' );
+			const ptrEnd = ptrStart.add( springCountVar ).toVar( 'ptrEnd' );
+			Loop( { start: ptrStart, end: ptrEnd, type: 'uint', condition: '<' }, ( { i } ) => {
+
+				const springId = springListBuffer.element( i ).toVar( 'springId' );
+				const springForce = springForceBuffer.element( springId );
+				const springVertexIds = springVertexIdBuffer.element( springId );
+				const factor = select( springVertexIds.x.equal( instanceIndex ), 1.0, - 1.0 );
+				force.addAssign( springForce.mul( factor ) );
+
+			} );
+			// Gravity
+			force.y.subAssign( gravityUniform );
+			// Wind
+			const noise = triNoise3D( position, 1, time ).sub( 0.2 ).mul( 0.0001 );
+			const windForce = noise.mul( windUniform );
+			force.z.subAssign( windForce );
+			// Sphere collisions
+			for ( const collider of sphereColliders ) {
+
+				const deltaSphere = position.add( force ).sub( collider.positionUniform );
+				const dist = deltaSphere.length();
+				const sphereForce = float( collider.radiusUniform )
+					.sub( dist )
+					.max( 0 )
+					.mul( deltaSphere )
+					.div( dist )
+					.mul( collider.enabledUniform );
+				force.addAssign( sphereForce );
+
+			}
+
+			vertexForceBuffer.element( instanceIndex ).assign( force );
+			vertexPositionBuffer.element( instanceIndex ).addAssign( force );
+
+		} )().compute( vertexCount );
+
+	}
+	_setupClothMesh() {
+
+		const { segmentsX, segmentsY } = this.options;
+		const vertexCount = segmentsX * segmentsY;
+		const geometry = new BufferGeometry();
+		const verletVertexIdArray = new Uint32Array( vertexCount * 4 );
+		const uvArray = new Float32Array( vertexCount * 2 );
+		const indices = [];
+		const getIndex = ( x, y ) => y * segmentsX + x;
+		for ( let x = 0; x < segmentsX; x ++ ) {
+
+			for ( let y = 0; y < segmentsY; y ++ ) {
+
+				const index = getIndex( x, y );
+				verletVertexIdArray[ index * 4 ] = this.verletVertexColumns[ x ][ y ].id;
+				verletVertexIdArray[ index * 4 + 1 ] = this.verletVertexColumns[ x + 1 ][ y ].id;
+				verletVertexIdArray[ index * 4 + 2 ] = this.verletVertexColumns[ x ][ y + 1 ].id;
+				verletVertexIdArray[ index * 4 + 3 ] = this.verletVertexColumns[ x + 1 ][ y + 1 ].id;
+				uvArray[ index * 2 ] = x / ( segmentsX - 1 );
+				uvArray[ index * 2 + 1 ] = 1 - ( y / ( segmentsY - 1 ) );
+				if ( x > 0 && y > 0 ) {
+
+					indices.push( getIndex( x, y ), getIndex( x - 1, y ), getIndex( x - 1, y - 1 ) );
+					indices.push( getIndex( x, y ), getIndex( x - 1, y - 1 ), getIndex( x, y - 1 ) );
+
+				}
+
+			}
+
+		}
+
+		const verletVertexIdBuffer = new BufferAttribute( verletVertexIdArray, 4, false );
+		const positionBuffer = new BufferAttribute( new Float32Array( vertexCount * 3 ), 3, false );
+		const uvBuffer = new BufferAttribute( uvArray, 2, false );
+		geometry.setAttribute( 'position', positionBuffer );
+		geometry.setAttribute( 'vertexIds', verletVertexIdBuffer );
+		geometry.setAttribute( 'uv', uvBuffer );
+		geometry.setIndex( indices );
+		// Capture for closure
+		const vertexPositionBuffer = this.vertexPositionBuffer;
+		const worldMatrixInverseUniform = this.worldMatrixInverseUniform;
+		const clothMaterial = this.options.material ? this.options.material : new MeshPhysicalNodeMaterial( {
+			side: DoubleSide,
+		} );
+		if ( this.options.color && ( ! this.options.material || ! this.options.material.colorNode ) ) {
+
+			clothMaterial.colorNode = colorNode( this.options.color );
+
+		}
+
+		const calculateNormal = Fn( () => {
+
+			const vertexIds = attribute( 'vertexIds' );
+			const v0 = vertexPositionBuffer.element( vertexIds.x ).toVar();
+			const v1 = vertexPositionBuffer.element( vertexIds.y ).toVar();
+			const v2 = vertexPositionBuffer.element( vertexIds.z ).toVar();
+
+			// Compute edges from the actual vertices
+			const edge1 = v1.sub( v0 );
+			const edge2 = v2.sub( v0 );
+			// Cross product gives the normal
+			const normal = cross( edge1, edge2 ).normalize();
+			const localNormal = worldMatrixInverseUniform.transformDirection( normal );
+			return transformNormalToView( localNormal );
+
+		} );
+		clothMaterial.positionNode = Fn( () => {
+
+			const vertexIds = attribute( 'vertexIds' );
+			const v0 = vertexPositionBuffer.element( vertexIds.x ).toVar();
+			const v1 = vertexPositionBuffer.element( vertexIds.y ).toVar();
+			const v2 = vertexPositionBuffer.element( vertexIds.z ).toVar();
+			const v3 = vertexPositionBuffer.element( vertexIds.w ).toVar();
+			const worldPos = v0.add( v1 ).add( v2 ).add( v3 ).mul( 0.25 );
+			const localPos = worldMatrixInverseUniform.mul( worldPos ).xyz;
+			return localPos;
+
+		} )();
+
+		const vNormal = calculateNormal().toVarying();
+		clothMaterial.normalNode = select( frontFacing, vNormal, vNormal.negate() );
+
+		return new Mesh( geometry, clothMaterial );
+
+	}
+
+}
+
+
+/**
+ * Constructor options of `ClothSimulator`.
+ *
+ * @typedef {Object} ClothSimulator~Options
+ * @property {number} [segmentsX=20] - The number of segments in the X direction.
+ * @property {number} [segmentsY=20] - The number of segments in the Y direction.
+ * @property {number} [width=1] - The width of the cloth.
+ * @property {number} [height=2] - The height of the cloth.
+ * @property {number} [numSphereColliders=1] - The number of sphere colliders.
+ * @property {number} [sphereRadius=0.2] - The radius of the sphere colliders.
+ * @property {number} [stiffness=0.3] - The stiffness of the cloth.
+ * @property {number} [dampening=0.99] - The velocity dampening.
+ * @property {number} [wind=1.0] - The wind strength.
+ * @property {number} [gravity=0.00005] - The gravity strength.
+ * @property {number} [stepsPerSecond=360] - The number of simulation sub-steps performed per second.
+ * @property {(x:number, y:number) => boolean} [fixedVertexPattern] - Given the X and Y coordinates of a vertex, returns whether it should be fixed or dynamic (moves).
+ * @property {number} [color=0] - Optional: Only used if no material is passed in the options or if the material doesn't have a colorNode. The color of the cloth's material.
+ * @property {NodeMaterial} [material] - Optional: ( by default it is a MeshPhysicalNodeMaterial ) cloth's material. It must be a NodeMaterial and it's positionNode and normalNode will be set/overriten!
+ **/
+
+export { ClothSimulator };
diff --git a/examples/webgpu_compute_cloth.html b/examples/webgpu_compute_cloth.html
index 47d4f51a58eba0..51b866e1048325 100644
--- a/examples/webgpu_compute_cloth.html
+++ b/examples/webgpu_compute_cloth.html
@@ -1,21 +1,33 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
 	<head>
 		<title>three.js webgpu - compute cloth</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="example.css">
+		<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="example.css" />
 	</head>
 	<body>
-
 		<div id="info">
-			<a href="https://threejs.org/" target="_blank" rel="noopener" class="logo-link"></a>
+			<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>Compute Cloth</span>
+				<a href="https://threejs.org/" target="_blank" rel="noopener"
+					>three.js</a
+				><span>Compute Cloth</span>
 			</div>
 
-			<small>Simple cloth simulation with a verlet system running in compute shaders.</small>
+			<small
+				>Simple cloth simulation with a verlet system running in compute
+				shaders.</small
+			>
 		</div>
 
 		<script type="importmap">
@@ -30,52 +42,29 @@
 		</script>
 
 		<script type="module">
-
 			import * as THREE from 'three/webgpu';
 
-			import { Fn, If, Return, instancedArray, instanceIndex, uniform, select, attribute, uint, Loop, float, transformNormalToView, cross, triNoise3D, time } from 'three/tsl';
-
 			import { Inspector } from 'three/addons/inspector/Inspector.js';
+			import { texture } from 'three/tsl';
 
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 			import { UltraHDRLoader } from 'three/addons/loaders/UltraHDRLoader.js';
+			import { ClothSimulator } from 'three/addons/misc/ClothSimulator.js';
+			import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
+
 			import WebGPU from 'three/addons/capabilities/WebGPU.js';
 
-			let renderer, scene, camera, controls;
-
-			const clothWidth = 1;
-			const clothHeight = 1;
-			const clothNumSegmentsX = 30;
-			const clothNumSegmentsY = 30;
-			const sphereRadius = 0.15;
-
-			let vertexPositionBuffer, vertexForceBuffer, vertexParamsBuffer;
-			let springVertexIdBuffer, springRestLengthBuffer, springForceBuffer;
-			let springListBuffer;
-			let computeSpringForces, computeVertexForces;
-			let dampeningUniform, spherePositionUniform, stiffnessUniform, sphereUniform, windUniform;
-			let vertexWireframeObject, springWireframeObject;
-			let clothMesh, clothMaterial, sphere;
-			let timeSinceLastStep = 0;
-			let timestamp = 0;
-			const verletVertices = [];
-			const verletSprings = [];
-			const verletVertexColumns = [];
+			let renderer,
+				scene,
+				camera,
+				controls,
+				textureLoader,
+				cloth,
+				cloth2;
 
 			const timer = new THREE.Timer();
 			timer.connect( document );
 
-			const params = {
-				wireframe: false,
-				sphere: true,
-				wind: 1.0,
-			};
-
-			const API = {
-				color: 0x204080, // sRGB
-				sheenColor: 0xffffff // sRGB
-			};
-
 			// TODO: Fix example with WebGL backend
 
 			if ( WebGPU.isAvailable() === false ) {
@@ -90,55 +79,83 @@
 
 			async function init() {
 
-				renderer = new THREE.WebGPURenderer( { antialias: true, requiredLimits: { maxStorageBuffersInVertexStage: 1 } } );
+				renderer = new THREE.WebGPURenderer( {
+					antialias: true,
+					requiredLimits: { maxStorageBuffersInVertexStage: 1 },
+				} );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
-				renderer.toneMapping = THREE.NeutralToneMapping;
+				renderer.toneMapping = THREE.ACESFilmicToneMapping;
 				renderer.toneMappingExposure = 1;
+				renderer.shadowMap.enabled = true;
 				renderer.inspector = new Inspector();
 				document.body.appendChild( renderer.domElement );
 
 				scene = new THREE.Scene();
 
-				camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 0.01, 10 );
-				camera.position.set( - 1.6, - 0.1, - 1.6 );
+				camera = new THREE.PerspectiveCamera(
+					50,
+					window.innerWidth / window.innerHeight,
+					0.01,
+					10,
+				);
+				camera.position.set( 1, - 0.4, 1 );
 
 				controls = new OrbitControls( camera, renderer.domElement );
 				controls.minDistance = 1;
 				controls.maxDistance = 3;
-				controls.target.set( 0, - 0.1, 0 );
+				controls.target.set( 0, - 0.3, 0 );
 				controls.update();
 
-				const hdrLoader = new UltraHDRLoader().setPath( 'textures/equirectangular/' );
+				const hdrLoader = new UltraHDRLoader().setPath(
+					'textures/equirectangular/',
+				);
 
-				const hdrTexture = await hdrLoader.loadAsync( 'royal_esplanade_2k.hdr.jpg' );
+				const hdrTexture = await hdrLoader.loadAsync(
+					'royal_esplanade_2k.hdr.jpg',
+				);
 				hdrTexture.mapping = THREE.EquirectangularReflectionMapping;
 				scene.background = hdrTexture;
 				scene.backgroundBlurriness = 0.5;
 				scene.environment = hdrTexture;
+				scene.environmentIntensity = 0.1;
+
+				textureLoader = new THREE.TextureLoader();
+
+				const floorColor = await textureLoader.loadAsync(
+					'textures/floors/FloorsCheckerboard_S_Diffuse.jpg',
+				);
+				floorColor.wrapS = THREE.RepeatWrapping;
+				floorColor.wrapT = THREE.RepeatWrapping;
+				floorColor.colorSpace = THREE.SRGBColorSpace;
+				floorColor.repeat.set( 15, 15 );
+
+				const floorMesh = new THREE.Mesh(
+					new THREE.PlaneGeometry( 10, 10 ),
+					new THREE.MeshPhysicalNodeMaterial( {
+						map: floorColor,
+					} ),
+				);
+				floorMesh.rotateX( - Math.PI / 2 );
+				floorMesh.position.set( 0, - 1, 0 );
+				floorMesh.receiveShadow = true;
+				scene.add( floorMesh );
+
+				const light = new THREE.DirectionalLight( 0xffffff, 3 );
+				const shadowSize = 3;
+				light.castShadow = true;
+				light.shadow.camera.far = 10;
+				light.shadow.bias = - 0.002;
+				light.shadow.camera.top = - shadowSize;
+				light.shadow.camera.bottom = shadowSize;
+				light.shadow.camera.left = - shadowSize;
+				light.shadow.camera.right = shadowSize;
+				light.position.set( 2, 3, 1 );
+				scene.add( light );
 
 				setupCloth();
-
-				const gui = renderer.inspector.createParameters( 'Settings' );
-				gui.add( stiffnessUniform, 'value', 0.1, 0.5, 0.01 ).name( 'stiffness' );
-				gui.add( params, 'wireframe' );
-				gui.add( params, 'sphere' );
-				gui.add( params, 'wind', 0, 5, 0.1 );
-
-				const materialFolder = gui.addFolder( 'material' );
-				materialFolder.addColor( API, 'color' ).onChange( function ( color ) {
-
-					clothMaterial.color.setHex( color );
-
-				} );
-				materialFolder.add( clothMaterial, 'roughness', 0.0, 1, 0.01 );
-				materialFolder.add( clothMaterial, 'sheen', 0.0, 1, 0.01 );
-				materialFolder.add( clothMaterial, 'sheenRoughness', 0.0, 1, 0.01 );
-				materialFolder.addColor( API, 'sheenColor' ).onChange( function ( color ) {
-
-					clothMaterial.sheenColor.setHex( color );
-
-				} );
+				setupCloth2();
+				loadDudeHead();
 
 				window.addEventListener( 'resize', onWindowResize );
 
@@ -146,397 +163,118 @@
 
 			}
 
-			function setupVerletGeometry() {
-
-				// this function sets up the geometry of the verlet system, a grid of vertices connected by springs
-
-				const addVerletVertex = ( x, y, z, isFixed ) => {
-
-					const id = verletVertices.length;
-					const vertex = {
-						id,
-						position: new THREE.Vector3( x, y, z ),
-						isFixed,
-						springIds: [],
-					};
-					verletVertices.push( vertex );
-					return vertex;
-
-				};
-
-				const addVerletSpring = ( vertex0, vertex1 ) => {
-
-					const id = verletSprings.length;
-					const spring = {
-						id,
-						vertex0,
-						vertex1
-					};
-					vertex0.springIds.push( id );
-					vertex1.springIds.push( id );
-					verletSprings.push( spring );
-					return spring;
-
-				};
-
-				// create the cloth's verlet vertices
-				for ( let x = 0; x <= clothNumSegmentsX; x ++ ) {
-
-					const column = [];
-					for ( let y = 0; y <= clothNumSegmentsY; y ++ ) {
-
-						const posX = x * ( clothWidth / clothNumSegmentsX ) - clothWidth * 0.5;
-						const posZ = y * ( clothHeight / clothNumSegmentsY );
-						const isFixed = ( y === 0 ) && ( ( x % 5 ) === 0 ); // make some of the top vertices' positions fixed
-						const vertex = addVerletVertex( posX, clothHeight * 0.5, posZ, isFixed );
-						column.push( vertex );
-
-					}
-
-					verletVertexColumns.push( column );
-
-				}
-
-				// create the cloth's verlet springs
-				for ( let x = 0; x <= clothNumSegmentsX; x ++ ) {
-
-					for ( let y = 0; y <= clothNumSegmentsY; y ++ ) {
-
-						const vertex0 = verletVertexColumns[ x ][ y ];
-						if ( x > 0 ) addVerletSpring( vertex0, verletVertexColumns[ x - 1 ][ y ] );
-						if ( y > 0 ) addVerletSpring( vertex0, verletVertexColumns[ x ][ y - 1 ] );
-						if ( x > 0 && y > 0 ) addVerletSpring( vertex0, verletVertexColumns[ x - 1 ][ y - 1 ] );
-						if ( x > 0 && y < clothNumSegmentsY ) addVerletSpring( vertex0, verletVertexColumns[ x - 1 ][ y + 1 ] );
-
-						// You can make the cloth more rigid by adding more springs between further apart vertices
-						//if (x > 1) addVerletSpring(vertex0, verletVertexColumns[x - 2][y]);
-						//if (y > 1) addVerletSpring(vertex0, verletVertexColumns[x][y - 2]);
-
-					}
-
-				}
-
-			}
-
-			function setupVerletVertexBuffers() {
-
-				// setup the buffers holding the vertex data for the compute shaders
-
-				const vertexCount = verletVertices.length;
-
-				const springListArray = [];
-				// this springListArray will hold a list of spring ids, ordered by the id of the vertex affected by that spring.
-				// this is so the compute shader that accumulates the spring forces for each vertex can efficiently iterate over all springs affecting that vertex
-
-				const vertexPositionArray = new Float32Array( vertexCount * 3 );
-				const vertexParamsArray = new Uint32Array( vertexCount * 3 );
-				// the params Array holds three values for each verlet vertex:
-				// x: isFixed, y: springCount, z: springPointer
-				// isFixed is 1 if the verlet is marked as immovable, 0 if not
-				// springCount is the number of springs connected to that vertex
-				// springPointer is the index of the first spring in the springListArray that is connected to that vertex
-
-				for ( let i = 0; i < vertexCount; i ++ ) {
-
-					const vertex = verletVertices[ i ];
-					vertexPositionArray[ i * 3 ] = vertex.position.x;
-					vertexPositionArray[ i * 3 + 1 ] = vertex.position.y;
-					vertexPositionArray[ i * 3 + 2 ] = vertex.position.z;
-					vertexParamsArray[ i * 3 ] = vertex.isFixed ? 1 : 0;
-					if ( ! vertex.isFixed ) {
-
-						vertexParamsArray[ i * 3 + 1 ] = vertex.springIds.length;
-						vertexParamsArray[ i * 3 + 2 ] = springListArray.length;
-						springListArray.push( ...vertex.springIds );
-
-					}
-
-				}
-
-				vertexPositionBuffer = instancedArray( vertexPositionArray, 'vec3' ).setPBO( true ); // setPBO(true) is only important for the WebGL Fallback
-				vertexForceBuffer = instancedArray( vertexCount, 'vec3' );
-				vertexParamsBuffer = instancedArray( vertexParamsArray, 'uvec3' );
-
-				springListBuffer = instancedArray( new Uint32Array( springListArray ), 'uint' ).setPBO( true );
-
-			}
-
-			function setupVerletSpringBuffers() {
-
-				// setup the buffers holding the spring data for the compute shaders
-
-				const springCount = verletSprings.length;
-
-				const springVertexIdArray = new Uint32Array( springCount * 2 );
-				const springRestLengthArray = new Float32Array( springCount );
-
-				for ( let i = 0; i < springCount; i ++ ) {
-
-					const spring = verletSprings[ i ];
-					springVertexIdArray[ i * 2 ] = spring.vertex0.id;
-					springVertexIdArray[ i * 2 + 1 ] = spring.vertex1.id;
-					springRestLengthArray[ i ] = spring.vertex0.position.distanceTo( spring.vertex1.position );
-
-				}
-
-				springVertexIdBuffer = instancedArray( springVertexIdArray, 'uvec2' ).setPBO( true );
-				springRestLengthBuffer = instancedArray( springRestLengthArray, 'float' );
-				springForceBuffer = instancedArray( springCount * 3, 'vec3' ).setPBO( true );
-
-			}
-
-			function setupUniforms() {
-
-				dampeningUniform = uniform( 0.99 );
-				spherePositionUniform = uniform( new THREE.Vector3( 0, 0, 0 ) );
-				sphereUniform = uniform( 1.0 );
-				windUniform = uniform( 1.0 );
-				stiffnessUniform = uniform( 0.2 );
-
-			}
-
-			function setupComputeShaders() {
-
-				// This function sets up the compute shaders for the verlet simulation
-				// There are two shaders that are executed for each simulation step
-
-				const vertexCount = verletVertices.length;
-				const springCount = verletSprings.length;
-
-				// 1. computeSpringForces:
-				// This shader computes a force for each spring, depending on the distance between the two vertices connected by that spring and the targeted rest length
-				computeSpringForces = Fn( () => {
-
-					If( instanceIndex.greaterThanEqual( uint( springCount ) ), () => {
-
-						// compute Shaders are executed in groups of 64, so instanceIndex might be bigger than the amount of springs.
-						// in that case, return.
-						Return();
-
-					} );
+			function loadDudeHead() {
 
-					const vertexIds = springVertexIdBuffer.element( instanceIndex );
-					const restLength = springRestLengthBuffer.element( instanceIndex );
+				const mapHeight = new THREE.TextureLoader().load(
+					'models/gltf/LeePerrySmith/Infinite-Level_02_Disp_NoSmoothUV-4096.jpg',
+				);
 
-					const vertex0Position = vertexPositionBuffer.element( vertexIds.x );
-					const vertex1Position = vertexPositionBuffer.element( vertexIds.y );
-
-					const delta = vertex1Position.sub( vertex0Position ).toVar();
-					const dist = delta.length().max( 0.000001 ).toVar();
-					const force = dist.sub( restLength ).mul( stiffnessUniform ).mul( delta ).mul( 0.5 ).div( dist );
-					springForceBuffer.element( instanceIndex ).assign( force );
-
-				} )().compute( springCount ).setName( 'Spring Forces' );
-
-				// 2. computeVertexForces:
-				// This shader accumulates the force for each vertex.
-				// First it iterates over all springs connected to this vertex and accumulates their forces.
-				// Then it adds a gravital force, wind force, and the collision with the sphere.
-				// In the end it adds the force to the vertex' position.
-				computeVertexForces = Fn( () => {
-
-					If( instanceIndex.greaterThanEqual( uint( vertexCount ) ), () => {
-
-						// compute Shaders are executed in groups of 64, so instanceIndex might be bigger than the amount of vertices.
-						// in that case, return.
-						Return();
-
-					} );
-
-					const params = vertexParamsBuffer.element( instanceIndex ).toVar();
-					const isFixed = params.x;
-					const springCount = params.y;
-					const springPointer = params.z;
-
-					If( isFixed, () => {
-
-						// don't need to calculate vertex forces if the vertex is set as immovable
-						Return();
-
-					} );
-
-					const position = vertexPositionBuffer.element( instanceIndex ).toVar( 'vertexPosition' );
-					const force = vertexForceBuffer.element( instanceIndex ).toVar( 'vertexForce' );
-
-					force.mulAssign( dampeningUniform );
-
-					const ptrStart = springPointer.toVar( 'ptrStart' );
-					const ptrEnd = ptrStart.add( springCount ).toVar( 'ptrEnd' );
-
-					Loop( { start: ptrStart, end: ptrEnd, type: 'uint', condition: '<' }, ( { i } ) => {
-
-						const springId = springListBuffer.element( i ).toVar( 'springId' );
-						const springForce = springForceBuffer.element( springId );
-						const springVertexIds = springVertexIdBuffer.element( springId );
-						const factor = select( springVertexIds.x.equal( instanceIndex ), 1.0, - 1.0 );
-						force.addAssign( springForce.mul( factor ) );
-
-					} );
-
-					// gravity
-					force.y.subAssign( 0.00005 );
-
-					// wind
-					const noise = triNoise3D( position, 1, time ).sub( 0.2 ).mul( 0.0001 );
-					const windForce = noise.mul( windUniform );
-					force.z.subAssign( windForce );
-
-					// collision with sphere
-					const deltaSphere = position.add( force ).sub( spherePositionUniform );
-					const dist = deltaSphere.length();
-					const sphereForce = float( sphereRadius ).sub( dist ).max( 0 ).mul( deltaSphere ).div( dist ).mul( sphereUniform );
-					force.addAssign( sphereForce );
-
-					vertexForceBuffer.element( instanceIndex ).assign( force );
-					vertexPositionBuffer.element( instanceIndex ).addAssign( force );
-
-				} )().compute( vertexCount ).setName( 'Vertex Forces' );
-
-			}
-
-			function setupWireframe() {
-
-				// adds helpers to visualize the verlet system
-
-				// verlet vertex visualizer
-				const vertexWireframeMaterial = new THREE.SpriteNodeMaterial();
-				vertexWireframeMaterial.positionNode = vertexPositionBuffer.element( instanceIndex );
-				vertexWireframeObject = new THREE.Mesh( new THREE.PlaneGeometry( 0.01, 0.01 ), vertexWireframeMaterial );
-				vertexWireframeObject.frustumCulled = false;
-				vertexWireframeObject.count = verletVertices.length;
-				scene.add( vertexWireframeObject );
-
-
-				// verlet spring visualizer
-				const springWireframePositionBuffer = new THREE.BufferAttribute( new Float32Array( 6 ), 3, false );
-				const springWireframeIndexBuffer = new THREE.BufferAttribute( new Uint32Array( [ 0, 1 ] ), 1, false );
-				const springWireframeMaterial = new THREE.LineBasicNodeMaterial();
-				springWireframeMaterial.positionNode = Fn( () => {
-
-					const vertexIds = springVertexIdBuffer.element( instanceIndex );
-					const vertexId = select( attribute( 'vertexIndex' ).equal( 0 ), vertexIds.x, vertexIds.y );
-					return vertexPositionBuffer.element( vertexId );
-
-				} )();
-
-				const springWireframeGeometry = new THREE.InstancedBufferGeometry();
-				springWireframeGeometry.setAttribute( 'position', springWireframePositionBuffer );
-				springWireframeGeometry.setAttribute( 'vertexIndex', springWireframeIndexBuffer );
-				springWireframeGeometry.instanceCount = verletSprings.length;
-
-				springWireframeObject = new THREE.Line( springWireframeGeometry, springWireframeMaterial );
-				springWireframeObject.frustumCulled = false;
-				springWireframeObject.count = verletSprings.length;
-				scene.add( springWireframeObject );
-
-			}
-
-			function setupSphere() {
+				const material = new THREE.MeshPhongMaterial( {
+					color: 0x9c6e49,
+					specular: 0x666666,
+					shininess: 25,
+					bumpMap: mapHeight,
+					bumpScale: 10,
+				} );
 
-				const geometry = new THREE.IcosahedronGeometry( sphereRadius * 0.95, 4 );
-				const material = new THREE.MeshStandardNodeMaterial();
-				sphere = new THREE.Mesh( geometry, material );
-				scene.add( sphere );
+				const loader = new GLTFLoader();
+				loader.load(
+					'models/gltf/LeePerrySmith/LeePerrySmith.glb',
+					function ( gltf ) {
+
+						const head = gltf.scene.children[ 0 ];
+						head.material = material;
+						head.scale.setScalar( 0.1 );
+						head.position.set( 0, - 0.5, 0 );
+						head.receiveShadow = true;
+						head.castShadow = true;
+						scene.add( head );
+			
+					},
+				);
 
 			}
 
-			function setupClothMesh() {
-
-				// This function generates a three Geometry and Mesh to render the cloth based on the verlet systems position data.
-				// Therefore it creates a plane mesh, in which each vertex will be centered in the center of 4 verlet vertices.
-
-				const vertexCount = clothNumSegmentsX * clothNumSegmentsY;
-				const geometry = new THREE.BufferGeometry();
-
-				// verletVertexIdArray will hold the 4 verlet vertex ids that contribute to each geometry vertex's position
-				const verletVertexIdArray = new Uint32Array( vertexCount * 4 );
-				const indices = [];
-
-				const getIndex = ( x, y ) => {
-
-					return y * clothNumSegmentsX + x;
-
-				};
-
-				for ( let x = 0; x < clothNumSegmentsX; x ++ ) {
-
-					for ( let y = 0; y < clothNumSegmentsX; y ++ ) {
-
-						const index = getIndex( x, y );
-						verletVertexIdArray[ index * 4 ] = verletVertexColumns[ x ][ y ].id;
-						verletVertexIdArray[ index * 4 + 1 ] = verletVertexColumns[ x + 1 ][ y ].id;
-						verletVertexIdArray[ index * 4 + 2 ] = verletVertexColumns[ x ][ y + 1 ].id;
-						verletVertexIdArray[ index * 4 + 3 ] = verletVertexColumns[ x + 1 ][ y + 1 ].id;
-
-						if ( x > 0 && y > 0 ) {
-
-							indices.push( getIndex( x, y ), getIndex( x - 1, y ), getIndex( x - 1, y - 1 ) );
-							indices.push( getIndex( x, y ), getIndex( x - 1, y - 1 ), getIndex( x, y - 1 ) );
-
-						}
-
-					}
-
-				}
-
-				const verletVertexIdBuffer = new THREE.BufferAttribute( verletVertexIdArray, 4, false );
-				const positionBuffer = new THREE.BufferAttribute( new Float32Array( vertexCount * 3 ), 3, false );
-				geometry.setAttribute( 'position', positionBuffer );
-				geometry.setAttribute( 'vertexIds', verletVertexIdBuffer );
-				geometry.setIndex( indices );
-
-				clothMaterial = new THREE.MeshPhysicalNodeMaterial( {
-					color: new THREE.Color().setHex( API.color ),
-					side: THREE.DoubleSide,
-					transparent: true,
-					opacity: 0.85,
-					sheen: 1.0,
-					sheenRoughness: 0.5,
-					sheenColor: new THREE.Color().setHex( API.sheenColor ),
+			function setupCloth2() {
+
+				cloth2 = new ClothSimulator( renderer, {
+					segmentsX: 30,
+					segmentsY: 30,
+					width: 1,
+					height: 1.5,
+					numSphereColliders: 0, //<-- how many "sphere colliders" will interact with the cloth
+					sphereRadius: 0,
+					stiffness: 0.3,
+					wind: 0.7,
+					color: 0xff0000,
+					fixedVertexPattern: ( _x, y ) => y == 0
 				} );
+				scene.add( cloth2.mesh );
 
-				clothMaterial.positionNode = Fn( ( { material } ) => {
-
-					// gather the position of the 4 verlet vertices and calculate the center position and normal from that
-					const vertexIds = attribute( 'vertexIds' );
-					const v0 = vertexPositionBuffer.element( vertexIds.x ).toVar();
-					const v1 = vertexPositionBuffer.element( vertexIds.y ).toVar();
-					const v2 = vertexPositionBuffer.element( vertexIds.z ).toVar();
-					const v3 = vertexPositionBuffer.element( vertexIds.w ).toVar();
-
-					const top = v0.add( v1 );
-					const right = v1.add( v3 );
-					const bottom = v2.add( v3 );
-					const left = v0.add( v2 );
-
-					const tangent = right.sub( left ).normalize();
-					const bitangent = bottom.sub( top ).normalize();
-
-					const normal = cross( tangent, bitangent );
-
-					// send the normalView from the vertex shader to the fragment shader
-					material.normalNode = transformNormalToView( normal ).toVarying();
-
-					return v0.add( v1 ).add( v2 ).add( v3 ).mul( 0.25 );
-
-				} )();
-
-				clothMesh = new THREE.Mesh( geometry, clothMaterial );
-				clothMesh.frustumCulled = false;
-				scene.add( clothMesh );
+				cloth2.mesh.castShadow = true;
+				cloth2.mesh.receiveShadow = true;
+				cloth2.mesh.frustumCulled = false;
 
 			}
 
 			function setupCloth() {
 
-				setupVerletGeometry();
-				setupVerletVertexBuffers();
-				setupVerletSpringBuffers();
-				setupUniforms();
-				setupComputeShaders();
-				setupWireframe();
-				setupSphere();
-				setupClothMesh();
+				cloth = new ClothSimulator( renderer, {
+					segmentsX: 30,
+					segmentsY: 30,
+					width: 1,
+					height: 1.5,
+					numSphereColliders: 2, //<-- how many "sphere colliders" will interact with the cloth
+					sphereRadius: 0.23,
+					stiffness: 0.3,
+					wind: 0.7,
+					color: 0xff0000,
+				} );
+				scene.add( cloth.mesh );
+
+				cloth.mesh.castShadow = true;
+				cloth.mesh.receiveShadow = true;
+				cloth.mesh.frustumCulled = false;
+
+				//
+				// positionthe colliders in such a way that contain the mesh.
+				//
+				cloth.setSphereCollider( 0, new THREE.Vector3( 0, - 0.3, 0 ) );
+				cloth.setSphereCollider( 1, new THREE.Vector3( 0, - 0.45, 0.056 ), 0.2 );
+
+				const material = cloth.mesh.material;
+				material.colorNode = texture(
+					textureLoader.load( 'textures/roughness_map.jpg' ),
+				);
+
+				const spheres = cloth.createSphereVisualizers();
+				spheres.forEach( sphere => {
+
+					scene.add( sphere );
+					sphere.visible = false;
+			
+	} );
+
+				const gui = renderer.inspector.createParameters( 'Cloth Simulator' );
+				gui.add( cloth.options, 'wind', 0, 10, 0.1 ).onChange( value=>cloth.setWind( value ) );
+				gui.add( cloth.options, 'stiffness', 0, 1, 0.01 ).onChange( value=>cloth.setStiffness( value ) );
+				gui.add( cloth.options, 'dampening', 0, 1, 0.01 ).onChange( value=>cloth.setDampening( value ) );
+				gui.add( { helpers: true }, 'helpers' ).onChange( ( value ) => {
+			
+					cloth.setSphereEnabled( 0, value );
+					cloth.setSphereEnabled( 1, value );
+			
+				} ).name( 'Enable Colliders' );
+
+				gui.add( { seeColliders: false }, 'seeColliders' ).onChange( ( value ) => {
+			
+					spheres.forEach( sphere => {
+
+						sphere.visible = value;
+			
+					} );
+			
+				} ).name( 'See Colliders' );
 
 			}
 
@@ -550,45 +288,24 @@
 
 			}
 
-			function updateSphere() {
-
-				sphere.position.set( Math.sin( timestamp * 2.1 ) * 0.1, 0, Math.sin( timestamp * 0.8 ) );
-				spherePositionUniform.value.copy( sphere.position );
-
-			}
-
 			async function render() {
 
 				timer.update();
 
-				sphere.visible = params.sphere;
-				sphereUniform.value = params.sphere ? 1 : 0;
-				windUniform.value = params.wind;
-				clothMesh.visible = ! params.wireframe;
-				vertexWireframeObject.visible = params.wireframe;
-				springWireframeObject.visible = params.wireframe;
-
 				const deltaTime = Math.min( timer.getDelta(), 1 / 60 ); // don't advance the time too far, for example when the window is out of focus
-				const stepsPerSecond = 360; // ensure the same amount of simulation steps per second on all systems, independent of refresh rate
-				const timePerStep = 1 / stepsPerSecond;
-
-				timeSinceLastStep += deltaTime;
 
-				while ( timeSinceLastStep >= timePerStep ) {
+				cloth.mesh.position.z = Math.cos( timer.getElapsed() * 1.2 );
+				cloth.mesh.rotateY( deltaTime );
+				cloth.update( deltaTime );
 
-					// run a verlet system simulation step
-					timestamp += timePerStep;
-					timeSinceLastStep -= timePerStep;
-					updateSphere();
-					renderer.compute( computeSpringForces );
-					renderer.compute( computeVertexForces );
-
-				}
+				cloth2.mesh.position.z = Math.cos( timer.getElapsed() ) * 1;
+				cloth2.mesh.position.x = - 2;
+				cloth2.mesh.rotateY( deltaTime * 5 );
+				cloth2.update( deltaTime );
 
 				renderer.render( scene, camera );
-
+			
 			}
-
 		</script>
 	</body>
-</html>
\ No newline at end of file
+</html>