update

mrdoob · Aug 6, 2024 · 0a3a34b · 0a3a34b
1 parent 1390197
commit 0a3a34b
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 36 deletions.
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
@@ -10,8 +10,8 @@
 		<script type="importmap">
 			{
 				"imports": {
-					"three": "../build/three.webgpu.js",
-					"three/tsl": "../build/three.webgpu.js",
+					"three": "../src/Three.WebGPU.js",
+					"three/tsl": "../src/Three.WebGPU.js",
 					"three/addons/": "./jsm/"
 				}
 			}
@@ -20,24 +20,18 @@
 		<script type="module">
 
 			import * as THREE from 'three';
-			import { color, pass, normalWorld, output, ndcPosition, motionBlur, mrt, uniform } from 'three/tsl';
+			import { color, pass, normalWorld, output, ndcPosition, /*velocity,*/ motionBlur, mrt, uniform } from 'three/tsl';
 
-			// import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
+			//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 scenePassColor;
 			let timer, mesh;
-			// let mixer;
+			//let mixer;
 
 			init();
 
@@ -60,24 +54,19 @@
 
 				timer = new Timer();
 
-				// const loader = new GLTFLoader();
-				// loader.load( 'models/gltf/Michelle.glb', function ( gltf ) {
+				/*const loader = new GLTFLoader();
+				loader.load( 'models/gltf/Michelle.glb', function ( gltf ) {
 
-				// 	const object = gltf.scene;
-				// 	mixer = new THREE.AnimationMixer( object );
+					const object = gltf.scene;
 
-				// 	const material = object.children[ 0 ].children[ 0 ].material;
-				// 	material.mrtNode = mrt( {
-				// 		output: output,
-				// 		velocity: velocity
-				// 	} );
+					mixer = new THREE.AnimationMixer( object );
 
-				// 	const action = mixer.clipAction( gltf.animations[ 0 ] );
-				// 	action.play();
+					const action = mixer.clipAction( gltf.animations[ 0 ] );
+					action.play();
 
-				// 	scene.add( object );
+					scene.add( object );
 
-				// } );
+				} );*/
 
 				const texture = new THREE.TextureLoader().load( 'textures/crate.gif' );
 				texture.colorSpace = THREE.SRGBColorSpace;
@@ -112,6 +101,7 @@
 				const ndcPositionPrevious = scenePass.getPreviousTextureNode( 'ndcPosition' );
 
 				postProcessing.outputNode = motionBlur( scenePassColor, ndcPositionCurrent, ndcPositionPrevious, intensityNode );
+				//postProcessing.outputNode = velocity( ndcPositionCurrent, ndcPositionPrevious );
 
 				//
 
@@ -125,8 +115,7 @@
 
 				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' );
+				gui.add( intensityNode, 'value', 0, 3 ).name( 'intensity' );
 
 			}
 
@@ -143,13 +132,9 @@
 
 				timer.update();
 
-				if ( params.animated ) {
-
-					mesh.rotation.y = timer.getElapsed() * 2;
+				mesh.rotation.y = timer.getElapsed() * 2;
 
-					//if ( mixer ) mixer.update( timer.getDelta() );
-
-				}
+				//if ( mixer ) mixer.update( timer.getDelta() );
 
 				postProcessing.render();
 

diff --git a/src/nodes/accessors/VelocityNode.js b/src/nodes/accessors/VelocityNode.js
@@ -3,7 +3,7 @@ import { sub } from '../math/OperatorNode.js';
 import { modelViewMatrix, modelWorldMatrix } from './ModelNode.js';
 import { positionLocal } from './PositionNode.js';
 
-export const velocity = Fn( ( [ clipPositionCurrent, clipPositionPrevious ] ) => {
+export const velocity = /*#__PURE__*/ Fn( ( [ clipPositionCurrent, clipPositionPrevious ] ) => {
 
 	const ndcPositionCurrent = clipPositionCurrent.xy.div( clipPositionCurrent.w );
 	const ndcPositionPrevious = clipPositionPrevious.xy.div( clipPositionPrevious.w );
@@ -12,4 +12,4 @@ export const velocity = Fn( ( [ clipPositionCurrent, clipPositionPrevious ] ) =>
 
 } );
 
-export const ndcPosition = modelViewMatrix.mul( modelWorldMatrix ).mul( positionLocal ).toVar();
+export const ndcPosition = /*#__PURE__*/ modelViewMatrix.mul( modelWorldMatrix ).mul( positionLocal ).varying();
diff --git a/src/nodes/display/MotionBlurNode.js b/src/nodes/display/MotionBlurNode.js
@@ -3,7 +3,7 @@ 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 ] ) => {
+export const motionBlur = /*#__PURE__*/ 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;