code · pull · Jun 21, 2025 · Jun 21, 2025 · Jun 21, 2025 · Jun 21, 2025
diff --git a/examples/files.json b/examples/files.json
@@ -416,6 +416,7 @@
 		"webgpu_procedural_texture",
 		"webgpu_reflection",
 		"webgpu_reflection_blurred",
+		"webgpu_reflection_roughness",
 		"webgpu_refraction",
 		"webgpu_rendertarget_2d-array_3d",
 		"webgpu_rtt",

diff --git a/examples/jsm/physics/RapierPhysics.js b/examples/jsm/physics/RapierPhysics.js
@@ -132,18 +132,19 @@ async function RapierPhysics() {
 		shape.setMass( mass );
 		shape.setRestitution( restitution );
 
-		const body = mesh.isInstancedMesh
+		const { body, collider } = mesh.isInstancedMesh
 			? createInstancedBody( mesh, mass, shape )
 			: createBody( mesh.position, mesh.quaternion, mass, shape );
 
 		if ( ! mesh.userData.physics ) mesh.userData.physics = {};
 
 		mesh.userData.physics.body = body;
+		mesh.userData.physics.collider = collider;
 
 		if ( mass > 0 ) {
 
 			meshes.push( mesh );
-			meshMap.set( mesh, body );
+			meshMap.set( mesh, { body, collider } );
 
 		}
 
@@ -161,22 +162,10 @@ async function RapierPhysics() {
 			if ( ! mesh.userData.physics ) return;
 
 			const body = mesh.userData.physics.body;
+			const collider = mesh.userData.physics.collider;
 
-			if ( ! body ) return;
-
-			if ( Array.isArray( body ) ) {
-
-				for ( let i = 0; i < body.length; i ++ ) {
-
-					world.removeRigidBody( body[ i ] );
-
-				}
-
-			} else {
-
-				world.removeRigidBody( body );
-
-			}
+			if ( body ) removeBody( body );
+			if ( collider ) removeCollider( collider );
 
 		}
 
@@ -187,15 +176,18 @@ async function RapierPhysics() {
 		const array = mesh.instanceMatrix.array;
 
 		const bodies = [];
+		const colliders = [];
 
 		for ( let i = 0; i < mesh.count; i ++ ) {
 
 			const position = _vector.fromArray( array, i * 16 + 12 );
-			bodies.push( createBody( position, null, mass, shape ) );
+			const { body, collider } = createBody( position, null, mass, shape );
+			bodies.push( body );
+			colliders.push( collider );
 
 		}
 
-		return bodies;
+		return { body: bodies, collider: colliders };
 
 	}
 
@@ -206,15 +198,51 @@ async function RapierPhysics() {
 		if ( quaternion !== null ) desc.setRotation( quaternion );
 
 		const body = world.createRigidBody( desc );
-		world.createCollider( shape, body );
+		const collider = world.createCollider( shape, body );
 
-		return body;
+		return { body, collider };
+
+	}
+
+	function removeBody( body ) {
+
+		if ( Array.isArray( body ) ) {
+
+			for ( let i = 0; i < body.length; i ++ ) {
+
+				world.removeRigidBody( body[ i ] );
+
+			}
+
+		} else {
+
+			world.removeRigidBody( body );
+
+		}
+
+	}
+
+	function removeCollider( collider ) {
+
+		if ( Array.isArray( collider ) ) {
+
+			for ( let i = 0; i < collider.length; i ++ ) {
+
+				world.removeCollider( collider[ i ] );
+
+			}
+
+		} else {
+
+			world.removeCollider( collider );
+
+		}
 
 	}
 
 	function setMeshPosition( mesh, position, index = 0 ) {
 
-		let body = meshMap.get( mesh );
+		let { body } = meshMap.get( mesh );
 
 		if ( mesh.isInstancedMesh ) {
 
@@ -230,7 +258,7 @@ async function RapierPhysics() {
 
 	function setMeshVelocity( mesh, velocity, index = 0 ) {
 
-		let body = meshMap.get( mesh );
+		let { body } = meshMap.get( mesh );
 
 		if ( mesh.isInstancedMesh ) {
 
@@ -278,7 +306,7 @@ async function RapierPhysics() {
 			if ( mesh.isInstancedMesh ) {
 
 				const array = mesh.instanceMatrix.array;
-				const bodies = meshMap.get( mesh );
+				const { body: bodies } = meshMap.get( mesh );
 
 				for ( let j = 0; j < bodies.length; j ++ ) {
 
@@ -296,7 +324,7 @@ async function RapierPhysics() {
 
 			} else {
 
-				const body = meshMap.get( mesh );
+				const { body } = meshMap.get( mesh );
 
 				mesh.position.copy( body.translation() );
 				mesh.quaternion.copy( body.rotation() );

diff --git a/examples/screenshots/webgpu_reflection_roughness.jpg b/examples/screenshots/webgpu_reflection_roughness.jpg
diff --git a/examples/webgpu_reflection_roughness.html b/examples/webgpu_reflection_roughness.html
@@ -0,0 +1,168 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<title>three.js webgpu - roughness reflection</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">
+	</head>
+	<body>
+
+		<div id="info">
+			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> webgpu - dirty reflection
+		</div>
+
+		<script type="importmap">
+			{
+				"imports": {
+					"three": "../build/three.webgpu.js",
+					"three/webgpu": "../build/three.webgpu.js",
+					"three/tsl": "../build/three.tsl.js",
+					"three/addons/": "./jsm/"
+				}
+			}
+		</script>
+
+		<script type="module">
+
+			import * as THREE from 'three';
+			import { Fn, vec2, vec4, texture, uv, textureBicubic, rangeFogFactor, reflector, time } from 'three/tsl';
+
+			import { RGBELoader } from 'three/addons/loaders/RGBELoader.js';
+
+			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
+
+			import Stats from 'three/addons/libs/stats.module.js';
+
+			let camera, scene, renderer;
+			let controls;
+			let stats;
+
+			init();
+
+			async function init() {
+
+				camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 0.25, 30 );
+				camera.position.set( - 4, 2, 4 );
+				camera.lookAt( 0, .4, 0 );
+
+				scene = new THREE.Scene();
+
+				//
+
+				new RGBELoader()
+					.setPath( 'textures/equirectangular/' )
+					.load( 'moonless_golf_1k.hdr', function ( texture ) {
+
+						texture.mapping = THREE.EquirectangularReflectionMapping;
+
+						scene.background = texture;
+						scene.environment = texture;
+
+					} );
+
+				// textures
+
+				const textureLoader = new THREE.TextureLoader();
+
+				const uvMap = textureLoader.load( 'textures/uv_grid_directx.jpg' );
+				uvMap.colorSpace = THREE.SRGBColorSpace;
+
+				const perlinMap = textureLoader.load( './textures/noises/perlin/rgb-256x256.png' );
+				perlinMap.wrapS = THREE.RepeatWrapping;
+				perlinMap.wrapT = THREE.RepeatWrapping;
+				perlinMap.colorSpace = THREE.SRGBColorSpace;
+
+				// uv map for debugging
+
+				const uvMaterial = new THREE.MeshStandardNodeMaterial( {
+					map: uvMap,
+					emissiveMap: uvMap,
+					emissive: 0xffffff,
+					side: THREE.DoubleSide
+				} );
+
+				const uvMesh = new THREE.Mesh( new THREE.PlaneGeometry( 2, 2 ), uvMaterial );
+				uvMesh.position.set( 0, 1, 0 );
+				scene.add( uvMesh );
+
+				// reflection
+
+				const reflection = reflector( { resolution: .5, bounces: false, generateMipmaps: true } ); // 0.5 is half of the rendering view
+				reflection.target.rotateX( - Math.PI / 2 );
+				scene.add( reflection.target );
+
+				const animatedUV = uv().mul( 10 ).add( vec2( time.mul( .1 ), 0 ) );
+				const roughness = texture( perlinMap, animatedUV ).r.mul( 2 ).saturate();
+
+				const floorMaterial = new THREE.MeshStandardNodeMaterial();
+				floorMaterial.transparent = true;
+				floorMaterial.metalness = 1;
+				floorMaterial.roughnessNode = roughness.mul( .2 );
+				floorMaterial.colorNode = Fn( () => {
+
+					// blur reflection using textureBicubic()
+					const dirtyReflection = textureBicubic( reflection, roughness.mul( .9 ) ).rgb;
+
+					// falloff opacity by distance like an opacity-fog
+					const opacity = rangeFogFactor( 7, 25 ).oneMinus();
+
+					return vec4( dirtyReflection.rgb, opacity );
+
+				} )();
+
+				const floor = new THREE.Mesh( new THREE.BoxGeometry( 50, .001, 50 ), floorMaterial );
+				floor.position.set( 0, 0, 0 );
+				scene.add( floor );
+
+				// renderer
+
+				renderer = new THREE.WebGPURenderer();
+				renderer.setPixelRatio( window.devicePixelRatio );
+				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setAnimationLoop( animate );
+				renderer.toneMapping = THREE.NeutralToneMapping;
+				renderer.toneMappingExposure = 2;
+				document.body.appendChild( renderer.domElement );
+
+				stats = new Stats();
+				document.body.appendChild( stats.dom );
+
+				controls = new OrbitControls( camera, renderer.domElement );
+				controls.minDistance = 1;
+				controls.maxDistance = 10;
+				controls.maxPolarAngle = Math.PI / 2;
+				controls.autoRotate = true;
+				controls.autoRotateSpeed = - .1;
+				controls.target.set( 0, .5, 0 );
+				controls.update();
+
+				// events
+
+				window.addEventListener( 'resize', onWindowResize );
+
+			}
+
+			function onWindowResize() {
+
+				camera.aspect = window.innerWidth / window.innerHeight;
+				camera.updateProjectionMatrix();
+
+				renderer.setSize( window.innerWidth, window.innerHeight );
+
+			}
+
+			function animate() {
+
+				stats.update();
+
+				controls.update();
+
+				renderer.render( scene, camera );
+
+			}
+
+		</script>
+
+	</body>
+</html>
diff --git a/src/core/Clock.js b/src/core/Clock.js
@@ -61,7 +61,7 @@ class Clock {
 	 */
 	start() {
 
-		this.startTime = now();
+		this.startTime = performance.now();
 
 		this.oldTime = this.startTime;
 		this.elapsedTime = 0;
@@ -110,7 +110,7 @@ class Clock {
 
 		if ( this.running ) {
 
-			const newTime = now();
+			const newTime = performance.now();
 
 			diff = ( newTime - this.oldTime ) / 1000;
 			this.oldTime = newTime;
@@ -125,10 +125,4 @@ class Clock {
 
 }
 
-function now() {
-
-	return performance.now();
-
-}
-
 export { Clock };