Nodes: Add VelocityNode and MotionBlurNode. (#29058)

* Nodes: Add VelocityNode. * E2E: Update screenshot. * apply immutable node * updates * update * Enable damping. * Updated MRT example. * Nodes: Add `MotionBlur` node. * Examples: Clean up * E2E: Update screenshot. * updates * update * ReflectorNode: Add MRT support * cleanup * updates * camera angle * cleanup * updates * update imports * Revert "updates" This reverts commit 5b39722. * Revert "cleanup" This reverts commit 213bf02. * updates * update limits * update --------- Co-authored-by: sunag <[email protected]>
mrdoob · Aug 9, 2024 · 6b126f1 · 6b126f1
1 parent 232c6d8
commit 6b126f1
Show file tree

Hide file tree

Showing 14 changed files with 444 additions and 17 deletions.
diff --git a/examples/files.json b/examples/files.json
@@ -386,6 +386,7 @@
 		"webgpu_postprocessing_pixel",
 		"webgpu_postprocessing_fxaa",
 		"webgpu_postprocessing_masking",
+		"webgpu_postprocessing_motion_blur",
 		"webgpu_postprocessing_sobel",
 		"webgpu_postprocessing_transition",
 		"webgpu_postprocessing",

diff --git a/examples/screenshots/webgpu_postprocessing_motion_blur.jpg b/examples/screenshots/webgpu_postprocessing_motion_blur.jpg
diff --git a/examples/webgpu_postprocessing_bloom_selective.html b/examples/webgpu_postprocessing_bloom_selective.html
@@ -114,7 +114,7 @@
 
 					const material = intersects[ 0 ].object.material;
 
-					const bloomIntensity = material.mrtNode.getNode( 'bloomIntensity' );
+					const bloomIntensity = material.mrtNode.get( 'bloomIntensity' );
 					bloomIntensity.value = bloomIntensity.value === 0 ? 1 : 0;
 
 				}

diff --git a/examples/webgpu_postprocessing_motion_blur.html b/examples/webgpu_postprocessing_motion_blur.html
@@ -0,0 +1,244 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<title>three.js webgpu - motion blur</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 - motion blur
+		</div>
+
+		<script type="importmap">
+			{
+				"imports": {
+					"three": "../build/three.webgpu.js",
+					"three/tsl": "../build/three.webgpu.js",
+					"three/addons/": "./jsm/"
+				}
+			}
+		</script>
+
+		<script type="module">
+
+			import * as THREE from 'three';
+			import { pass, texture, motionBlur, uniform, output, mrt, mix, velocity, uv, viewportTopLeft } from 'three/tsl';
+
+			import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
+
+			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
+
+			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
+
+			import Stats from 'three/addons/libs/stats.module.js';
+
+			let camera, scene, renderer;
+			let boxLeft, boxRight, model, mixer, clock;
+			let postProcessing;
+			let controls;
+			let stats;
+
+			const params = {
+				speed: 1.0
+			};
+
+			init();
+
+			function init() {
+
+				camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 0.25, 30 );
+				camera.position.set( 0, 1.5, 4.5 );
+
+				scene = new THREE.Scene();
+				scene.fog = new THREE.Fog( 0x0487e2, 7, 25 );
+
+				const sunLight = new THREE.DirectionalLight( 0xFFE499, 5 );
+				sunLight.castShadow = true;
+				sunLight.shadow.camera.near = .1;
+				sunLight.shadow.camera.far = 10;
+				sunLight.shadow.camera.right = 2;
+				sunLight.shadow.camera.left = - 2;
+				sunLight.shadow.camera.top = 2;
+				sunLight.shadow.camera.bottom = - 2;
+				sunLight.shadow.mapSize.width = 2048;
+				sunLight.shadow.mapSize.height = 2048;
+				sunLight.shadow.bias = - 0.001;
+				sunLight.position.set( 4, 4, 2 );
+
+				const waterAmbientLight = new THREE.HemisphereLight( 0x333366, 0x74ccf4, 5 );
+				const skyAmbientLight = new THREE.HemisphereLight( 0x74ccf4, 0, 1 );
+
+				scene.add( sunLight );
+				scene.add( skyAmbientLight );
+				scene.add( waterAmbientLight );
+
+				clock = new THREE.Clock();
+
+				// animated model
+
+				const loader = new GLTFLoader();
+				loader.load( 'models/gltf/Xbot.glb', function ( gltf ) {
+
+					model = gltf.scene;
+
+					model.rotation.y = Math.PI / 2;
+
+					model.traverse( function ( child ) {
+
+						if ( child.isMesh ) {
+
+							child.castShadow = true;
+							child.receiveShadow = true;
+
+						}
+
+					} );
+
+					mixer = new THREE.AnimationMixer( model );
+
+					const action = mixer.clipAction( gltf.animations[ 3 ] );
+					action.play();
+
+					scene.add( model );
+
+				} );
+
+				// textures
+
+				const textureLoader = new THREE.TextureLoader();
+
+				const floorColor = textureLoader.load( 'textures/floors/FloorsCheckerboard_S_Diffuse.jpg' );
+				floorColor.wrapS = THREE.RepeatWrapping;
+				floorColor.wrapT = THREE.RepeatWrapping;
+				floorColor.colorSpace = THREE.SRGBColorSpace;
+
+				const floorNormal = textureLoader.load( 'textures/floors/FloorsCheckerboard_S_Normal.jpg' );
+				floorNormal.wrapS = THREE.RepeatWrapping;
+				floorNormal.wrapT = THREE.RepeatWrapping;
+
+				// floor
+
+				const floorUV = uv().mul( 5 );
+
+				const floorMaterial = new THREE.MeshPhongNodeMaterial();
+				floorMaterial.colorNode = texture( floorColor, floorUV );
+
+				const floor = new THREE.Mesh( new THREE.BoxGeometry( 15, .001, 15 ), floorMaterial );
+				floor.receiveShadow = true;
+
+				floor.position.set( 0, 0, 0 );
+				scene.add( floor );
+
+				const walls = new THREE.Mesh( new THREE.BoxGeometry( 15, 15, 15 ), new THREE.MeshPhongNodeMaterial( { colorNode: floorMaterial.colorNode, side: THREE.BackSide } ) );
+				scene.add( walls );
+
+				const map = new THREE.TextureLoader().load( 'textures/uv_grid_opengl.jpg' );
+				map.colorSpace = THREE.SRGBColorSpace;
+
+				const geometry = new THREE.TorusGeometry( .8 );
+				const material = new THREE.MeshBasicMaterial( { map } );
+
+				boxRight = new THREE.Mesh( geometry, material );
+				boxRight.position.set( 3.5, 1.5, - 4 );
+				scene.add( boxRight );
+
+				boxLeft = new THREE.Mesh( geometry, material );
+				boxLeft.position.set( - 3.5, 1.5, - 4 );
+				scene.add( boxLeft );
+
+				// renderer
+
+				renderer = new THREE.WebGPURenderer();
+				renderer.setPixelRatio( window.devicePixelRatio );
+				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setAnimationLoop( animate );
+				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, 1, 0 );
+				controls.enableDamping = true;
+				controls.dampingFactor = 0.05;
+				controls.update();
+
+				// post-processing
+
+				const blurAmount = uniform( 1 );
+				const showVelocity = uniform( 0 );
+
+				const scenePass = pass( scene, camera );
+
+				scenePass.setMRT( mrt( {
+					output,
+					velocity
+				} ) );
+
+				const beauty = scenePass.getTextureNode();
+				const vel = scenePass.getTextureNode( 'velocity' ).mul( blurAmount );
+
+				const mBlur = motionBlur( beauty, vel );
+
+				const vignet = viewportTopLeft.distance( .5 ).remap( .6, 1 ).mul( 2 ).clamp().oneMinus();
+
+				postProcessing = new THREE.PostProcessing( renderer );
+				postProcessing.outputNode = mix( mBlur, vel, showVelocity ).mul( vignet );
+
+				//
+
+				const gui = new GUI();
+				gui.title( 'Motion Blur Settings' );
+				gui.add( controls, 'autoRotate' );
+				gui.add( blurAmount, 'value', 0, 3 ).name( 'blur amount' );
+				gui.add( params, 'speed', 0, 2 );
+				gui.add( showVelocity, 'value', 0, 1 ).name( 'show velocity' );
+
+				//
+
+				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();
+
+				const delta = clock.getDelta();
+				const speed = params.speed;
+
+				boxRight.rotation.y += delta * 4 * speed;
+				boxLeft.scale.setScalar( 1 + Math.sin( clock.elapsedTime * 10 * speed ) * .2 );
+
+				if ( model ) {
+
+					mixer.update( delta * speed );
+
+				}
+
+				postProcessing.render();
+
+			}
+
+		</script>
+	</body>
+</html>
diff --git a/src/nodes/Nodes.js b/src/nodes/Nodes.js
@@ -113,6 +113,7 @@ export { default as StorageTextureNode, storageTexture, textureStore } from './a
 export { default as Texture3DNode, texture3D } from './accessors/Texture3DNode.js';
 export * from './accessors/UVNode.js';
 export { default as UserDataNode, userData } from './accessors/UserDataNode.js';
+export * from './accessors/VelocityNode.js';
 
 // display
 export { default as BlendModeNode, burn, dodge, overlay, screen } from './display/BlendModeNode.js';
@@ -137,6 +138,7 @@ export { default as DotScreenNode, dotScreen } from './display/DotScreenNode.js'
 export { default as RGBShiftNode, rgbShift } from './display/RGBShiftNode.js';
 export { default as FilmNode, film } from './display/FilmNode.js';
 export { default as Lut3DNode, lut3D } from './display/Lut3DNode.js';
+export * from './display/MotionBlurNode.js';
 export { default as GTAONode, ao } from './display/GTAONode.js';
 export { default as DenoiseNode, denoise } from './display/DenoiseNode.js';
 export { default as FXAANode, fxaa } from './display/FXAANode.js';

diff --git a/src/nodes/accessors/PositionNode.js b/src/nodes/accessors/PositionNode.js
@@ -3,7 +3,8 @@ import { varying } from '../core/VaryingNode.js';
 import { modelWorldMatrix, modelViewMatrix } from './ModelNode.js';
 
 export const positionGeometry = /*#__PURE__*/ attribute( 'position', 'vec3' );
-export const positionLocal = /*#__PURE__*/ positionGeometry.toVar( 'positionLocal' );
+export const positionLocal = /*#__PURE__*/ positionGeometry.varying( 'positionLocal' );
+export const positionPrevious = /*#__PURE__*/ positionGeometry.varying( 'positionPrevious' );
 export const positionWorld = /*#__PURE__*/ varying( modelWorldMatrix.mul( positionLocal ).xyz, 'v_positionWorld' );
 export const positionWorldDirection = /*#__PURE__*/ varying( positionLocal.transformDirection( modelWorldMatrix ), 'v_positionWorldDirection' ).normalize().toVar( 'positionWorldDirection' );
 export const positionView = /*#__PURE__*/ varying( modelViewMatrix.mul( positionLocal ).xyz, 'v_positionView' );