📄 `GaussianBlurNode.js`¶

📊 Analysis Summary¶

Metric	Count
🔧 Functions	10
🧱 Classes	1
📦 Imports	18
📊 Variables & Constants	14

📚 Table of Contents¶

Imports
Variables & Constants
Functions
Classes

🛠️ File Location:¶

📂 examples/jsm/tsl/display/GaussianBlurNode.js

📦 Imports¶

Name	Source
`RenderTarget`	`three/webgpu`
`Vector2`	`three/webgpu`
`NodeMaterial`	`three/webgpu`
`RendererUtils`	`three/webgpu`
`QuadMesh`	`three/webgpu`
`TempNode`	`three/webgpu`
`NodeUpdateType`	`three/webgpu`
`nodeObject`	`three/tsl`
`Fn`	`three/tsl`
`float`	`three/tsl`
`uv`	`three/tsl`
`uniform`	`three/tsl`
`convertToTexture`	`three/tsl`
`vec2`	`three/tsl`
`vec4`	`three/tsl`
`passTexture`	`three/tsl`
`premultiplyAlpha`	`three/tsl`
`unpremultiplyAlpha`	`three/tsl`

Variables & Constants¶

Name	Type	Kind	Value	Exported
`_quadMesh`	`any`	let/var	`new QuadMesh()`	✗
`_rendererState`	`any`	let/var	`not shown`	✗
`textureNode`	`TextureNode`	let/var	`this.textureNode`	✗
`map`	`any`	let/var	`textureNode.value`	✗
`currentTexture`	`any`	let/var	`textureNode.value`	✗
`textureType`	`any`	let/var	`map.type`	✗
`textureNode`	`TextureNode`	let/var	`this.textureNode`	✗
`sampleTexture`	`any`	let/var	`not shown`	✗
`output`	`any`	let/var	`not shown`	✗
`kernelSize`	`number`	let/var	`3 + ( 2 * this.sigma )`	✗
`invSize`	`UniformNode<vec2>`	let/var	`this._invSize`	✗
`material`	`any`	let/var	`this._material \\|\\| ( this._material = new NodeMaterial() )`	✗
`coefficients`	`any[]`	let/var	`[]`	✗
`sigma`	`number`	let/var	`kernelRadius / 3`	✗

Functions¶

`GaussianBlurNode.setPremultipliedAlpha(value: boolean): GaussianBlurNode`¶

JSDoc:

/**
     * Sets the given premultiplied alpha value.
     *
     * @param {boolean} value - Whether the effect should use premultiplied alpha or not.
     * @return {GaussianBlurNode} height - A reference to this node.
     */

Parameters:

value boolean

Returns: GaussianBlurNode

Code

setPremultipliedAlpha( value ) {

        this.premultipliedAlpha = value;

        return this;

    }

`GaussianBlurNode.getPremultipliedAlpha(): boolean`¶

JSDoc:

/**
     * Returns the premultiplied alpha value.
     *
     * @return {boolean} Whether the effect should use premultiplied alpha or not.
     */

Returns: boolean

Code

getPremultipliedAlpha() {

        return this.premultipliedAlpha;

    }

`GaussianBlurNode.setSize(width: number, height: number): void`¶

JSDoc:

/**
     * Sets the size of the effect.
     *
     * @param {number} width - The width of the effect.
     * @param {number} height - The height of the effect.
     */

Parameters:

width number
height number

Returns: void

Calls:

Math.max
Math.round
this._invSize.value.set
this._horizontalRT.setSize
this._verticalRT.setSize

Code

setSize( width, height ) {

        width = Math.max( Math.round( width * this.resolution.x ), 1 );
        height = Math.max( Math.round( height * this.resolution.y ), 1 );

        this._invSize.value.set( 1 / width, 1 / height );
        this._horizontalRT.setSize( width, height );
        this._verticalRT.setSize( width, height );

    }

`GaussianBlurNode.updateBefore(frame: NodeFrame): void`¶

JSDoc:

/**
     * This method is used to render the effect once per frame.
     *
     * @param {NodeFrame} frame - The current node frame.
     */

Parameters:

frame NodeFrame

Returns: void

Calls:

RendererUtils.resetRendererState
this.setSize
renderer.setRenderTarget
this._passDirection.value.set
_quadMesh.render
RendererUtils.restoreRendererState

Internal Comments:

// (x2)
// horizontal (x4)
// vertical (x4)
// restore (x4)

Code

updateBefore( frame ) {

        const { renderer } = frame;

        _rendererState = RendererUtils.resetRendererState( renderer, _rendererState );

        //

        const textureNode = this.textureNode;
        const map = textureNode.value;

        const currentTexture = textureNode.value;

        _quadMesh.material = this._material;

        this.setSize( map.image.width, map.image.height );

        const textureType = map.type;

        this._horizontalRT.texture.type = textureType;
        this._verticalRT.texture.type = textureType;

        // horizontal

        renderer.setRenderTarget( this._horizontalRT );

        this._passDirection.value.set( 1, 0 );

        _quadMesh.render( renderer );

        // vertical

        textureNode.value = this._horizontalRT.texture;
        renderer.setRenderTarget( this._verticalRT );

        this._passDirection.value.set( 0, 1 );

        _quadMesh.render( renderer );

        // restore

        textureNode.value = currentTexture;

        RendererUtils.restoreRendererState( renderer, _rendererState );

    }

`GaussianBlurNode.getTextureNode(): PassTextureNode`¶

JSDoc:

/**
     * Returns the result of the effect as a texture node.
     *
     * @return {PassTextureNode} A texture node that represents the result of the effect.
     */

Returns: PassTextureNode

Code

getTextureNode() {

        return this._textureNode;

    }

`GaussianBlurNode.setup(builder: NodeBuilder): PassTextureNode`¶

JSDoc:

/**
     * This method is used to setup the effect's TSL code.
     *
     * @param {NodeBuilder} builder - The current node builder.
     * @return {PassTextureNode}
     */

Parameters:

builder NodeBuilder

Returns: PassTextureNode

Calls:

uv (from three/tsl)
vec2 (from three/tsl)
premultiplyAlpha (from three/tsl)
textureNode.sample
unpremultiplyAlpha (from three/tsl)
Fn (from three/tsl)
this._getCoefficients
directionNode.mul
vec4( sampleTexture( uvNode ).mul( gaussianCoefficients[ 0 ] ) ).toVar
float (from three/tsl)
vec2( direction.mul( invSize.mul( x ) ) ).toVar
sampleTexture
uvNode.add
uvNode.sub
diffuseSum.addAssign
sample1.add( sample2 ).mul
output
blur().context
builder.getSharedContext
builder.getNodeProperties

Internal Comments:

// (x7)
// https://lisyarus.github.io/blog/posts/blur-coefficients-generator.html (x3)

Code

setup( builder ) {

        const textureNode = this.textureNode;

        //

        const uvNode = uv();
        const directionNode = vec2( this.directionNode || 1 );

        let sampleTexture, output;

        if ( this.premultipliedAlpha ) {

            // https://lisyarus.github.io/blog/posts/blur-coefficients-generator.html

            sampleTexture = ( uv ) => premultiplyAlpha( textureNode.sample( uv ) );
            output = ( color ) => unpremultiplyAlpha( color );

        } else {

            sampleTexture = ( uv ) => textureNode.sample( uv );
            output = ( color ) => color;

        }

        const blur = Fn( () => {

            const kernelSize = 3 + ( 2 * this.sigma );
            const gaussianCoefficients = this._getCoefficients( kernelSize );

            const invSize = this._invSize;
            const direction = directionNode.mul( this._passDirection );

            const diffuseSum = vec4( sampleTexture( uvNode ).mul( gaussianCoefficients[ 0 ] ) ).toVar();

            for ( let i = 1; i < kernelSize; i ++ ) {

                const x = float( i );
                const w = float( gaussianCoefficients[ i ] );

                const uvOffset = vec2( direction.mul( invSize.mul( x ) ) ).toVar();

                const sample1 = sampleTexture( uvNode.add( uvOffset ) );
                const sample2 = sampleTexture( uvNode.sub( uvOffset ) );

                diffuseSum.addAssign( sample1.add( sample2 ).mul( w ) );
            }

            return output( diffuseSum );

        } );

        //

        const material = this._material || ( this._material = new NodeMaterial() );
        material.fragmentNode = blur().context( builder.getSharedContext() );
        material.name = 'Gaussian_blur';
        material.needsUpdate = true;

        //

        const properties = builder.getNodeProperties( this );
        properties.textureNode = textureNode;

        //

        return this._textureNode;

    }

`GaussianBlurNode.dispose(): void`¶

JSDoc:

/**
     * Frees internal resources. This method should be called
     * when the effect is no longer required.
     */

Returns: void

Calls:

this._horizontalRT.dispose
this._verticalRT.dispose

Code

dispose() {

        this._horizontalRT.dispose();
        this._verticalRT.dispose();

    }

`GaussianBlurNode._getCoefficients(kernelRadius: number): number[]`¶

JSDoc:

/**
     * Computes gaussian coefficients depending on the given kernel radius.
     *
     * @private
     * @param {number} kernelRadius - The kernel radius.
     * @return {Array<number>}
     */

Parameters:

kernelRadius number

Returns: number[]

Calls:

coefficients.push
Math.exp

Code

_getCoefficients( kernelRadius ) {

        const coefficients = [];
        const sigma = kernelRadius / 3;

        for ( let i = 0; i < kernelRadius; i ++ ) {

            coefficients.push( 0.39894 * Math.exp( - 0.5 * i * i / ( sigma * sigma ) ) / sigma );

        }

        return coefficients;

    }

`gaussianBlur(node: any, directionNode: any, sigma: number): GaussianBlurNode`¶

Parameters:

node any
directionNode any
sigma number

Returns: GaussianBlurNode

Calls:

nodeObject (from three/tsl)

Code

( node, directionNode, sigma ) => nodeObject( new GaussianBlurNode( convertToTexture( node ), directionNode, sigma ) )

`premultipliedGaussianBlur(node: any, directionNode: any, sigma: number): GaussianBlurNode`¶

Parameters:

node any
directionNode any
sigma number

Returns: GaussianBlurNode

Calls:

nodeObject (from three/tsl)

Code

( node, directionNode, sigma ) => nodeObject( new GaussianBlurNode( convertToTexture( node ), directionNode, sigma ).setPremultipliedAlpha( true ) )

Classes¶