[pull] dev from mrdoob:dev

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;

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<float>} [angle=1.57] - The rotation of the effect in radians.
+	 * @param {number|Node<float>} [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<float>}
+		 * @type {Node<float>}
 		 */
-		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<float>}
+		 * @type {Node<float>}
 		 */
-		this.scale = uniform( scale );
+		this.scale = nodeObject( scale );
 
 	}
 
@@ -97,8 +97,8 @@ export default DotScreenNode;
  * @tsl
  * @function
  * @param {Node<vec4>} 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<float>} [angle=1.57] - The rotation of the effect in radians.
+ * @param {number|Node<float>} [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 );

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<float>} [amount=0.005] - The amount of the RGB shift.
+	 * @param {number|Node<float>} [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<float>}
+		 * @type {Node<float>}
 		 */
-		this.amount = uniform( amount );
+		this.amount = nodeObject( amount );
 
 		/**
 		 * Defines in which direction colors are shifted.
 		 *
-		 * @type {UniformNode<float>}
+		 * @type {Node<float>}
 		 */
-		this.angle = uniform( angle );
+		this.angle = nodeObject( angle );
 
 	}
 
@@ -89,8 +89,8 @@ export default RGBShiftNode;
  * @tsl
  * @function
  * @param {Node<vec4>} 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<float>} [amount=0.005] - The amount of the RGB shift.
+ * @param {number|Node<float>} [angle=0] - Defines in which direction colors are shifted.
  * @returns {RGBShiftNode}
  */
 export const rgbShift = ( node, amount, angle ) => new RGBShiftNode( convertToTexture( node ), amount, angle );

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;