mrdoob · sunag · Aug 9, 2024 · Aug 2, 2024 · Aug 2, 2024 · Aug 2, 2024
diff --git a/examples/files.json b/examples/files.json
@@ -383,6 +383,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_motion_blur.html b/examples/webgpu_postprocessing_motion_blur.html
@@ -0,0 +1,161 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<title>three.js webgpu - postprocessing - per-object 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>
+		<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 { color, pass, normalWorld, output, ndcPosition, motionBlur, mrt, uniform } from 'three/tsl';
+
+			// import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
+			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
+			import { Timer } from 'three/addons/misc/Timer.js';
+
+			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
+
+			const params = {
+				enabled: true,
+				intensity: 1,
+				animated: true
+			};
+
+			let camera, renderer, postProcessing;
+			let scenePassColor, motionBlurPass;
+			let timer, mesh;
+			// let mixer;
+
+			init();
+
+			function init() {
+
+				renderer = new THREE.WebGPURenderer();
+				renderer.setPixelRatio( window.devicePixelRatio );
+				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setAnimationLoop( animate );
+				document.body.appendChild( renderer.domElement );
+
+				//
+
+				camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 100 );
+				camera.position.set( 1, 2, 3 );
+
+				const scene = new THREE.Scene();
+				scene.fog = new THREE.Fog( 0x0487e2, 7, 25 );
+				scene.backgroundNode = normalWorld.y.mix( color( 0x0487e2 ), color( 0x0066ff ) );
+
+				timer = new Timer();
+
+				// const loader = new GLTFLoader();
+				// loader.load( 'models/gltf/Michelle.glb', function ( gltf ) {
+
+				// 	const object = gltf.scene;
+				// 	mixer = new THREE.AnimationMixer( object );
+
+				// 	const material = object.children[ 0 ].children[ 0 ].material;
+				// 	material.mrtNode = mrt( {
+				// 		output: output,
+				// 		velocity: velocity
+				// 	} );
+
+				// 	const action = mixer.clipAction( gltf.animations[ 0 ] );
+				// 	action.play();
+
+				// 	scene.add( object );
+
+				// } );
+
+				const texture = new THREE.TextureLoader().load( 'textures/crate.gif' );
+				texture.colorSpace = THREE.SRGBColorSpace;
+
+				const geometry = new THREE.BoxGeometry();
+				const material = new THREE.MeshBasicMaterial( { map: texture } );
+
+				const intensityNode = uniform( 1 );
+
+				mesh = new THREE.Mesh( geometry, material );
+				scene.add( mesh );
+
+				scene.add( new THREE.AmbientLight( 0xcccccc ) );
+
+				const light = new THREE.DirectionalLight( 0xffffff, 3 );
+				light.position.set( 1, 1, 1 );
+				scene.add( light );
+
+				// post processing
+
+				postProcessing = new THREE.PostProcessing( renderer );
+
+				const scenePass = pass( scene, camera );
+				scenePass.setMRT( mrt( {
+					output,
+					ndcPosition
+				} ) );
+
+				scenePassColor = scenePass.getTextureNode();
+
+				const ndcPositionCurrent = scenePass.getTextureNode( 'ndcPosition' );
+				const ndcPositionPrevious = scenePass.getPreviousTextureNode( 'ndcPosition' );
+
+				postProcessing.outputNode = motionBlur( scenePassColor, ndcPositionCurrent, ndcPositionPrevious, intensityNode );
+
+				//
+
+				const controls = new OrbitControls( camera, renderer.domElement );
+				controls.minDistance = 1;
+				controls.maxDistance = 10;
+
+				window.addEventListener( 'resize', onWindowResize );
+
+				//
+
+				const gui = new GUI();
+				gui.title( 'Motion Blur Settings' );
+				gui.add( params, 'intensity' ).min( 0 ).max( 3 ).onChange( ( value ) => intensityNode.value = value );
+				gui.add( params, 'animated' );
+
+			}
+
+			function onWindowResize() {
+
+				camera.aspect = window.innerWidth / window.innerHeight;
+				camera.updateProjectionMatrix();
+
+				renderer.setSize( window.innerWidth, window.innerHeight );
+
+			}
+
+			function animate() {
+
+				timer.update();
+
+				if ( params.animated ) {
+
+					mesh.rotation.y = timer.getElapsed() * 2;
+
+					//if ( mixer ) mixer.update( timer.getDelta() );
+
+				}
+
+				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/VelocityNode.js b/src/nodes/accessors/VelocityNode.js
@@ -0,0 +1,15 @@
+import { Fn } from '../shadernode/ShaderNode.js';
+import { sub } from '../math/OperatorNode.js';
+import { modelViewMatrix, modelWorldMatrix } from './ModelNode.js';
+import { positionLocal } from './PositionNode.js';
+
+export const velocity = Fn( ( [ clipPositionCurrent, clipPositionPrevious ] ) => {
+
+	const ndcPositionCurrent = clipPositionCurrent.xy.div( clipPositionCurrent.w );
+	const ndcPositionPrevious = clipPositionPrevious.xy.div( clipPositionPrevious.w );
+
+	return sub( ndcPositionCurrent, ndcPositionPrevious );
+
+} );
+
+export const ndcPosition = modelViewMatrix.mul( modelWorldMatrix ).mul( positionLocal ).toVar();
diff --git a/src/nodes/display/MotionBlurNode.js b/src/nodes/display/MotionBlurNode.js
@@ -0,0 +1,29 @@
+import { float, int, Fn } from '../shadernode/ShaderNode.js';
+import { Loop } from '../utils/LoopNode.js';
+import { uv } from '../accessors/UVNode.js';
+import { velocity } from '../accessors/VelocityNode.js';
+
+export const motionBlur = Fn( ( [ inputNode, ndcPositionCurrent, ndcPositionPrevious, intensity = 1 ] ) => {
+
+	const sampleColor = ( uv ) => inputNode.uv( uv );
+	const sampleVelocity = ( uv ) => velocity( ndcPositionCurrent.uv( uv ), ndcPositionPrevious.uv( uv ) ).mul( intensity ).rg;
+
+	const NUM_SAMPLES = int( 30 );
+
+	const uvs = uv();
+
+	const colorResult = sampleColor( uvs ).toVar();
+	const velocityResult = sampleVelocity( uvs ).toVar();
+
+	Loop( { start: int( 1 ), end: NUM_SAMPLES, type: 'int', condition: '<=' }, ( { i } ) => {
+
+		const offset = velocityResult.mul( float( i.sub( 1 ) ).div( float( NUM_SAMPLES ) ).sub( 0.5 ) );
+		colorResult.addAssign( sampleColor( uvs.add( offset ) ) );
+
+	} );
+
+	colorResult.divAssign( float( NUM_SAMPLES ).add( 1 ) );
+
+	return colorResult;
+
+} );