Accueil / npm / three@0.186.1 / examples / jsm / tsl / display / boxBlur.js
boxBlur.js
import { Fn, vec2, uv, Loop, vec4, premultiplyAlpha, unpremultiplyAlpha, max, int, textureSize, nodeObject, convertToTexture } from 'three/tsl';
/**
* Applies a box blur effect to the given texture node.
*
* Compared to Gaussian blur, box blur produces a more blocky result but with better performance when correctly
* configured. It is intended for mobile devices or performance restricted use cases where Gaussian is too heavy.
*
* The (kernel) `size` parameter should be small (1, 2 or 3) since it determines the number of samples based on (size * 2 + 1)^2.
* This implementation uses a single pass approach so the kernel is not applied as a separable filter. That means larger
* kernels won't perform well. Use Gaussian instead if you need a more high-quality blur.
*
* To produce wider blurs, increase the `separation` parameter instead which has no influence on the performance.
*
* Reference: {@link https://github.com/lettier/3d-game-shaders-for-beginners/blob/master/demonstration/shaders/fragment/box-blur.frag}.
*
* @tsl
* @function
* @param {Node<vec4>} textureNode - The texture node that should be blurred.
* @param {Object} [options={}] - Additional options for the hash blur effect.
* @param {Node<int>} [options.size=int(1)] - Controls the blur's kernel. For performant results, the range should within [1, 3].
* @param {Node<int>} [options.separation=int(1)] - Spreads out the blur without having to sample additional fragments. Ranges from [1, Infinity].
* @param {boolean} [options.premultipliedAlpha=false] - Whether to use premultiplied alpha for the blur effect.
* @return {Node<vec4>} The blurred texture node.
*/
export const boxBlur = /*#__PURE__*/ Fn( ( [ textureNode, options = {} ] ) => {
textureNode = convertToTexture( textureNode );
const size = nodeObject( options.size ) || int( 1 );
const separation = nodeObject( options.separation ) || int( 1 );
const premultipliedAlpha = options.premultipliedAlpha || false;
const tap = ( uv ) => {
const sample = textureNode.sample( uv );
return premultipliedAlpha ? premultiplyAlpha( sample ) : sample;
};
const targetUV = textureNode.uvNode || uv();
const result = vec4( 0 );
const sep = max( separation, 1 );
const count = int( 0 );
const pixelStep = vec2( 1 ).div( textureSize( textureNode ) );
Loop( { start: size.negate(), end: size, name: 'i', condition: '<=' }, ( { i } ) => {
Loop( { start: size.negate(), end: size, name: 'j', condition: '<=' }, ( { j } ) => {
const uvs = targetUV.add( vec2( i, j ).mul( pixelStep ).mul( sep ) );
result.addAssign( tap( uvs ) );
count.addAssign( 1 );
} );
} );
result.divAssign( count );
return premultipliedAlpha ? unpremultiplyAlpha( result ) : result;
} );