Capítulo 383 de 859

Chapter 383: BilateralBlurNode

Core Idea

Post processing node for creating a bilateral blur effect.

Bilateral blur smooths an image while preserving sharp edges. Unlike a standard Gaussian blur which blurs everything equally, bilateral blur analyzes the intensity/color of neighboring pixels. If a neighbor is too different from the center pixel (indicating an edge), it is excluded from the blurring process.

Reference: https://en.wikipedia.org/wiki/Bilateral_filter

Key Concepts

  • directionNode : Node.<(vec2|float)>: Defines the direction and radius of the blur.
  • resolutionScale : number: The resolution scale.
  • sigma : number: Controls the spatial kernel of the blur filter. Higher values mean a wider blur radius.
  • sigmaColor : number: Controls the color/intensity kernel. Higher values allow more color difference to be blurred together. Lower values preserve edges more str…
  • textureNode : TextureNode: The texture node that represents the input of the effect.
  • updateBeforeType : string: The updateBeforeType is set to NodeUpdateType.FRAME since the node renders its effect once per frame in updateBefore().

Code Examples

import { bilateralBlur } from 'three/addons/tsl/display/BilateralBlurNode.js';
  • What it demonstrates: Typical usage of BilateralBlurNode.

Reference Tables

Constructor

Signature
`new BilateralBlurNode( textureNode : TextureNode, directionNode : Node.<(vec2

Properties

PropertyDescription
`.directionNode : Node.<(vec2float)>`
.resolutionScale : numberThe resolution scale.
.sigma : numberControls the spatial kernel of the blur filter. Higher values mean a wider blur radius.
.sigmaColor : numberControls the color/intensity kernel. Higher values allow more color difference to be blurred together. Lower values preserve edges more strictly.
.textureNode : TextureNodeThe texture node that represents the input of the effect.
.updateBeforeType : stringThe updateBeforeType is set to NodeUpdateType.FRAME since the node renders its effect once per frame in updateBefore().

Methods

MethodDescription
.dispose()Frees internal resources. This method should be called when the effect is no longer required.
.getTextureNode() : PassTextureNodeReturns the result of the effect as a texture node.
.setSize( width : number, height : number )Sets the size of the effect.
.setup( builder : NodeBuilder ) : PassTextureNodeThis method is used to setup the effect's TSL code.
.updateBefore( frame : NodeFrame )This method is used to render the effect once per frame.

Key Takeaways

  1. BilateralBlurNode extends: EventDispatcher → Node → TempNode
  2. Most relevant properties: directionNode, resolutionScale, sigma, sigmaColor.
  3. Key methods: dispose, getTextureNode, setSize, setup.

Connects To