MotionBlur.js 1.1 KB

123456789101112131415161718192021222324252627282930313233
  1. import { Fn, float, uv, Loop, int } from 'three/tsl';
  2. /**
  3. * Applies a motion blur effect to the given input node.
  4. *
  5. * @tsl
  6. * @function
  7. * @param {Node<vec4>} inputNode - The input node to apply the motion blur for.
  8. * @param {Node<vec2>} velocity - The motion vectors of the beauty pass.
  9. * @param {Node<int>} [numSamples=int(16)] - How many samples the effect should use. A higher value results in better quality but is also more expensive.
  10. * @return {Node<vec4>} The input node with the motion blur effect applied.
  11. */
  12. export const motionBlur = /*@__PURE__*/ Fn( ( [ inputNode, velocity, numSamples = int( 16 ) ] ) => {
  13. const sampleColor = ( uv ) => inputNode.sample( uv );
  14. const uvs = uv();
  15. const colorResult = sampleColor( uvs ).toVar();
  16. const fSamples = float( numSamples );
  17. Loop( { start: int( 1 ), end: numSamples, type: 'int', condition: '<=' }, ( { i } ) => {
  18. const offset = velocity.mul( float( i ).div( fSamples.sub( 1 ) ).sub( 0.5 ) );
  19. colorResult.addAssign( sampleColor( uvs.add( offset ) ) );
  20. } );
  21. colorResult.divAssign( fSamples );
  22. return colorResult;
  23. } );