hashBlur.js 1.3 KB

123456789101112131415161718192021222324252627282930313233
  1. import { float, Fn, vec2, uv, sin, rand, degrees, cos, Loop, vec4 } from 'three/tsl';
  2. /**
  3. * Applies a hash blur effect to the given texture node.
  4. *
  5. * Reference: {@link https://www.shadertoy.com/view/4lXXWn}.
  6. *
  7. * @function
  8. * @param {Node<vec4>} textureNode - The texture node that should be blurred.
  9. * @param {Node<float>} [bluramount=float(0.1)] - This node determines the amount of blur.
  10. * @param {Node<float>} [repeats=float(45)] - This node determines the quality of the blur. A higher value produces a less grainy result but is also more expensive.
  11. * @return {Node<vec4>} The blurred texture node.
  12. */
  13. export const hashBlur = /*#__PURE__*/ Fn( ( [ textureNode, bluramount = float( 0.1 ), repeats = float( 45 ) ] ) => {
  14. const draw = ( uv ) => textureNode.sample( uv );
  15. const targetUV = textureNode.uvNode || uv();
  16. const blurred_image = vec4( 0. ).toVar();
  17. Loop( { start: 0., end: repeats, type: 'float' }, ( { i } ) => {
  18. const q = vec2( vec2( cos( degrees( i.div( repeats ).mul( 360. ) ) ), sin( degrees( i.div( repeats ).mul( 360. ) ) ) ).mul( rand( vec2( i, targetUV.x.add( targetUV.y ) ) ).add( bluramount ) ) );
  19. const uv2 = vec2( targetUV.add( q.mul( bluramount ) ) );
  20. blurred_image.addAssign( draw( uv2 ) );
  21. } );
  22. blurred_image.divAssign( repeats );
  23. return blurred_image;
  24. } );