Nodes: Add VelocityNode and MotionBlurNode.

examples/webgpu_mrt.html

@@ -10,7 +10,7 @@
 
 		<div id="info">
 			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> webgpu - mrt<br />
-			Final / Beauty / Normal / Emissive / Diffuse
+			Final / Beauty / Normal / Velocity / Diffuse
 		</div>
 
 		<script type="importmap">
@@ -26,7 +26,7 @@
 		<script type="module">
 
 			import * as THREE from 'three';
-			import { output, transformedNormalWorld, pass, step, diffuseColor, emissive, viewportTopLeft, mix, mrt, tslFn } from 'three/tsl';
+			import { output, transformedNormalWorld, pass, step, diffuseColor, velocity, viewportTopLeft, mix, mrt, tslFn } from 'three/tsl';
 
 			import { RGBELoader } from 'three/addons/loaders/RGBELoader.js';
 
@@ -86,16 +86,16 @@
 					output: output,
 					normal: transformedNormalWorld.directionToColor(),
 					diffuse: diffuseColor,
-					emissive: emissive
+					velocity: velocity()
 				} ) );
 
 				// optimize textures
 
 				const normalTexture = scenePass.getTexture( 'normal' );
 				const diffuseTexture = scenePass.getTexture( 'diffuse' );
-				const emissiveTexture = scenePass.getTexture( 'emissive' );
+				const velocityTexture = scenePass.getTexture( 'velocity' );
 
-				normalTexture.type = diffuseTexture.type = emissiveTexture.type = THREE.UnsignedByteType;
+				normalTexture.type = diffuseTexture.type = velocityTexture.type = THREE.UnsignedByteType;
 
 				// post processing - mrt
 
@@ -106,11 +106,11 @@
 					const output = scenePass.getTextureNode( 'output' ); // output name is optional here
 					const normal = scenePass.getTextureNode( 'normal' );
 					const diffuse = scenePass.getTextureNode( 'diffuse' );
-					const emissive = scenePass.getTextureNode( 'emissive' );
+					const velocity = scenePass.getTextureNode( 'velocity' );
 
 					const out = mix( output.renderOutput(), output, step( 0.2, viewportTopLeft.x ) );
 					const nor = mix( out, normal, step( 0.4, viewportTopLeft.x ) );
-					const emi = mix( nor, emissive, step( 0.6, viewportTopLeft.x ) );
+					const emi = mix( nor, velocity, step( 0.6, viewportTopLeft.x ) );
 					const dif = mix( emi, diffuse, step( 0.8, viewportTopLeft.x ) );
 
 					return dif;

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 { default as VelocityNode, velocity } from './accessors/VelocityNode.js';
 
 // display
 export { default as BlendModeNode, burn, dodge, overlay, screen } from './display/BlendModeNode.js';

src/nodes/accessors/VelocityNode.js

@@ -0,0 +1,86 @@
+import { addNodeClass } from '../core/Node.js';
+import TempNode from '../core/TempNode.js';
+import { modelWorldMatrix } from './ModelNode.js';
+import { positionLocal } from './PositionNode.js';
+import { nodeProxy } from '../shadernode/ShaderNode.js';
+import { NodeUpdateType } from '../core/constants.js';
+import { Matrix4 } from '../../math/Matrix4.js';
+import { uniform } from '../core/UniformNode.js';
+import { sub } from '../math/OperatorNode.js';
+
+const _worldMatrixCache = new WeakMap();
+
+class VelocityNode extends TempNode {
+
+	constructor() {
+
+		super( 'vec2' );
+
+		this.updateBeforeType = NodeUpdateType.OBJECT;
+		this.updateAfterType = NodeUpdateType.OBJECT;
+
+		this.previousProjectionViewMatrix = uniform( new Matrix4() );
+		this.currentProjectionViewMatrix = uniform( new Matrix4() );
+		this.previousModelMatrix = uniform( new Matrix4() );
+
+	}
+
+	updateBefore( frame ) {
+
+		const camera = frame.camera;
+		const object = frame.object;
+
+		this.previousProjectionViewMatrix.value.copy( this.currentProjectionViewMatrix.value );
+		this.currentProjectionViewMatrix.value.multiplyMatrices( camera.projectionMatrix, camera.matrixWorldInverse );
+
+		const previousModelMatrix = getPreviousModelMatrix( object );
+		this.previousModelMatrix.value.copy( previousModelMatrix );
+
+	}
+
+	updateAfter( frame ) {
+
+		const object = frame.object;
+
+		const previousModelMatrix = getPreviousModelMatrix( object );
+
+		previousModelMatrix.copy( object.matrixWorld );
+
+	}
+
+	setup( /*builder*/ ) {
+
+		const clipPositionCurrent = this.currentProjectionViewMatrix.mul( modelWorldMatrix ).mul( positionLocal ).toVar();
+		const clipPositionPrevious = this.previousProjectionViewMatrix.mul( this.previousModelMatrix ).mul( positionLocal ).toVar();
+
+		const ndcPositionCurrent = clipPositionCurrent.xy.div( clipPositionCurrent.w );
+		const ndcPositionPrevious = clipPositionPrevious.xy.div( clipPositionPrevious.w );
+		let velocity = sub( ndcPositionCurrent, ndcPositionPrevious ).mul( 0.5 );
+		velocity = velocity.mul( 0.5 ).add( 0.5 );
+
+		return velocity;
+
+	}
+
+}
+
+function getPreviousModelMatrix( object ) {
+
+	let previousModelMatrix = _worldMatrixCache.get( object );
+
+	if ( previousModelMatrix === undefined ) {
+
+		previousModelMatrix = new Matrix4();
+		_worldMatrixCache.set( object, previousModelMatrix );
+
+	}
+
+	return previousModelMatrix;
+
+}
+
+export default VelocityNode;
+
+export const velocity = nodeProxy( VelocityNode );
+
+addNodeClass( 'VelocityNode', VelocityNode );