From bd34723659b41faffe9169bd93ac348a202a63f2 Mon Sep 17 00:00:00 2001 From: Michael Herzog Date: Tue, 1 Sep 2026 10:45:57 +0200 Subject: [PATCH 1/2] DotScreenNode/RGBShiftNode: Make ctor more flexible. (#34417) --- examples/jsm/tsl/display/DotScreenNode.js | 22 +++++++++++----------- examples/jsm/tsl/display/RGBShiftNode.js | 18 +++++++++--------- examples/webgpu_postprocessing.html | 7 ++----- 3 files changed, 22 insertions(+), 25 deletions(-) diff --git a/examples/jsm/tsl/display/DotScreenNode.js b/examples/jsm/tsl/display/DotScreenNode.js index 0cac19ec10a6f2..164803b9deb62f 100644 --- a/examples/jsm/tsl/display/DotScreenNode.js +++ b/examples/jsm/tsl/display/DotScreenNode.js @@ -1,5 +1,5 @@ import { TempNode } from 'three/webgpu'; -import { nodeObject, Fn, uv, uniform, vec2, vec3, sin, cos, add, vec4, screenSize } from 'three/tsl'; +import { nodeObject, Fn, uv, vec2, vec3, sin, cos, add, vec4, screenSize } from 'three/tsl'; /** * Post processing node for creating dot-screen effect. @@ -19,8 +19,8 @@ class DotScreenNode extends TempNode { * Constructs a new dot screen node. * * @param {Node} inputNode - The node that represents the input of the effect. - * @param {number} [angle=1.57] - The rotation of the effect in radians. - * @param {number} [scale=1] - The scale of the effect. A higher value means smaller dots. + * @param {number|Node} [angle=1.57] - The rotation of the effect in radians. + * @param {number|Node} [scale=1] - The scale of the effect. A higher value means smaller dots. */ constructor( inputNode, angle = 1.57, scale = 1 ) { @@ -34,18 +34,18 @@ class DotScreenNode extends TempNode { this.inputNode = inputNode; /** - * A uniform node that represents the rotation of the effect in radians. + * The rotation of the effect in radians. * - * @type {UniformNode} + * @type {Node} */ - this.angle = uniform( angle ); + this.angle = nodeObject( angle ); /** - * A uniform node that represents the scale of the effect. A higher value means smaller dots. + * The scale of the effect. A higher value means smaller dots. * - * @type {UniformNode} + * @type {Node} */ - this.scale = uniform( scale ); + this.scale = nodeObject( scale ); } @@ -97,8 +97,8 @@ export default DotScreenNode; * @tsl * @function * @param {Node} node - The node that represents the input of the effect. - * @param {number} [angle=1.57] - The rotation of the effect in radians. - * @param {number} [scale=1] - The scale of the effect. A higher value means smaller dots. + * @param {number|Node} [angle=1.57] - The rotation of the effect in radians. + * @param {number|Node} [scale=1] - The scale of the effect. A higher value means smaller dots. * @returns {DotScreenNode} */ export const dotScreen = ( node, angle, scale ) => new DotScreenNode( nodeObject( node ), angle, scale ); diff --git a/examples/jsm/tsl/display/RGBShiftNode.js b/examples/jsm/tsl/display/RGBShiftNode.js index a1423c037d3670..13b76222cc26b9 100644 --- a/examples/jsm/tsl/display/RGBShiftNode.js +++ b/examples/jsm/tsl/display/RGBShiftNode.js @@ -1,5 +1,5 @@ import { TempNode } from 'three/webgpu'; -import { Fn, uv, uniform, vec2, sin, cos, vec4, convertToTexture } from 'three/tsl'; +import { nodeObject, Fn, uv, vec2, sin, cos, vec4, convertToTexture } from 'three/tsl'; /** * Post processing node for shifting/splitting RGB color channels. The effect @@ -20,8 +20,8 @@ class RGBShiftNode extends TempNode { * Constructs a new RGB shift node. * * @param {TextureNode} textureNode - The texture node that represents the input of the effect. - * @param {number} [amount=0.005] - The amount of the RGB shift. - * @param {number} [angle=0] - Defines the orientation in which colors are shifted. + * @param {number|Node} [amount=0.005] - The amount of the RGB shift. + * @param {number|Node} [angle=0] - Defines the orientation in which colors are shifted. */ constructor( textureNode, amount = 0.005, angle = 0 ) { @@ -37,16 +37,16 @@ class RGBShiftNode extends TempNode { /** * The amount of the RGB shift. * - * @type {UniformNode} + * @type {Node} */ - this.amount = uniform( amount ); + this.amount = nodeObject( amount ); /** * Defines in which direction colors are shifted. * - * @type {UniformNode} + * @type {Node} */ - this.angle = uniform( angle ); + this.angle = nodeObject( angle ); } @@ -89,8 +89,8 @@ export default RGBShiftNode; * @tsl * @function * @param {Node} node - The node that represents the input of the effect. - * @param {number} [amount=0.005] - The amount of the RGB shift. - * @param {number} [angle=0] - Defines in which direction colors are shifted. + * @param {number|Node} [amount=0.005] - The amount of the RGB shift. + * @param {number|Node} [angle=0] - Defines in which direction colors are shifted. * @returns {RGBShiftNode} */ export const rgbShift = ( node, amount, angle ) => new RGBShiftNode( convertToTexture( node ), amount, angle ); diff --git a/examples/webgpu_postprocessing.html b/examples/webgpu_postprocessing.html index ab3c6cfee58f63..114800f455adcf 100644 --- a/examples/webgpu_postprocessing.html +++ b/examples/webgpu_postprocessing.html @@ -94,11 +94,8 @@ const scenePass = pass( scene, camera ); const scenePassColor = scenePass.getTextureNode().toInspector( 'Scene Color' ); - const dotScreenPass = dotScreen( scenePassColor ); - dotScreenPass.scale.value = 0.3; - - const rgbShiftPass = rgbShift( dotScreenPass ); - rgbShiftPass.amount.value = 0.001; + const dotScreenPass = dotScreen( scenePassColor, 1.57, 0.3 ); + const rgbShiftPass = rgbShift( dotScreenPass, 0.001 ); renderPipeline.outputNode = rgbShiftPass; From 29de333dd4e9748c13e320c4f6bc66ea840de469 Mon Sep 17 00:00:00 2001 From: 204a Date: Tue, 1 Sep 2026 18:03:18 +0800 Subject: [PATCH 2/2] DenoiseNode: Dispose internal noise texture. (#34418) Co-authored-by: 204a <172030428+204a@users.noreply.github.com> --- examples/jsm/tsl/display/DenoiseNode.js | 22 +++++++++++++++++++++- 1 file changed, 21 insertions(+), 1 deletion(-) diff --git a/examples/jsm/tsl/display/DenoiseNode.js b/examples/jsm/tsl/display/DenoiseNode.js index 42e65d0bc940a9..a129eb9ee10131 100644 --- a/examples/jsm/tsl/display/DenoiseNode.js +++ b/examples/jsm/tsl/display/DenoiseNode.js @@ -56,12 +56,20 @@ class DenoiseNode extends TempNode { */ this.normalNode = normalNode; + /** + * The internal noise texture. + * + * @private + * @type {DataTexture} + */ + this._noiseTexture = generateDefaultNoise(); + /** * The node represents the internal noise texture. * * @type {TextureNode} */ - this.noiseNode = texture( generateDefaultNoise() ); + this.noiseNode = texture( this._noiseTexture ); /** * The luma Phi value. @@ -252,6 +260,18 @@ class DenoiseNode extends TempNode { } + /** + * Frees internal resources. This method should be called + * when the effect is no longer required. + */ + dispose() { + + this._noiseTexture.dispose(); + + super.dispose(); + + } + } export default DenoiseNode;