super-three 0.177.0 → 0.181.0

package/examples/jsm/tsl/display/AfterImageNode.js

@@ -1,8 +1,8 @@
 import { RenderTarget, Vector2, QuadMesh, NodeMaterial, RendererUtils, TempNode, NodeUpdateType } from 'three/webgpu';
-import { nodeObject, Fn, float, uv, texture, passTexture, uniform, sign, max, convertToTexture } from 'three/tsl';
+import { nodeObject, Fn, float, uv, texture, passTexture, sign, max, convertToTexture } from 'three/tsl';
 
 const _size = /*@__PURE__*/ new Vector2();
-const _quadMeshComp = /*@__PURE__*/ new QuadMesh();
+const _quadMesh = /*@__PURE__*/ new QuadMesh();
 
 let _rendererState;
 
@@ -24,9 +24,9 @@ class AfterImageNode extends TempNode {
 	 * Constructs a new after image node.
 	 *
 	 * @param {TextureNode} textureNode - The texture node that represents the input of the effect.
-	 * @param {number} [damp=0.96] - The damping intensity. A higher value means a stronger after image effect.
+	 * @param {Node<float>} [damp=0.96] - The damping intensity. A higher value means a stronger after image effect.
 	 */
-	constructor( textureNode, damp = 0.96 ) {
+	constructor( textureNode, damp = float( 0.96 ) ) {
 
 		super( 'vec4' );
 
@@ -37,21 +37,14 @@ class AfterImageNode extends TempNode {
 		 */
 		this.textureNode = textureNode;
 
-		/**
-		 * The texture represents the pervious frame.
-		 *
-		 * @type {TextureNode}
-		 */
-		this.textureNodeOld = texture( null );
-
 		/**
 		 * How quickly the after-image fades. A higher value means the after-image
 		 * persists longer, while a lower value means it fades faster. Should be in
 		 * the range `[0, 1]`.
 		 *
-		 * @type {UniformNode<float>}
+		 * @type {Node<float>}
 		 */
-		this.damp = uniform( damp );
+		this.damp = damp;
 
 		/**
 		 * The render target used for compositing the effect.
@@ -79,6 +72,14 @@ class AfterImageNode extends TempNode {
 		 */
 		this._textureNode = passTexture( this, this._compRT.texture );
 
+		/**
+		 * The texture represents the pervious frame.
+		 *
+		 * @private
+		 * @type {TextureNode}
+		 */
+		this._textureNodeOld = texture( this._oldRT.texture );
+
 		/**
 		 * The `updateBeforeType` is set to `NodeUpdateType.FRAME` since the node renders
 		 * its effect once per frame in `updateBefore()`.
@@ -139,17 +140,20 @@ class AfterImageNode extends TempNode {
 
 		this.setSize( _size.x, _size.y );
 
-		const currentTexture = textureNode.value;
+		// make sure texture nodes point to correct render targets
+
+		this._textureNode.value = this._compRT.texture;
+		this._textureNodeOld.value = this._oldRT.texture;
 
-		this.textureNodeOld.value = this._oldRT.texture;
+		// composite
 
-		// comp
-		_quadMeshComp.material = this._materialComposed;
+		_quadMesh.material = this._materialComposed;
+		_quadMesh.name = 'AfterImage';
 
 		renderer.setRenderTarget( this._compRT );
-		_quadMeshComp.render( renderer );
+		_quadMesh.render( renderer );
 
-		// Swap the textures
+		// swap
 
 		const temp = this._oldRT;
 		this._oldRT = this._compRT;
@@ -157,8 +161,6 @@ class AfterImageNode extends TempNode {
 
 		//
 
-		textureNode.value = currentTexture;
-
 		RendererUtils.restoreRendererState( renderer, _rendererState );
 
 	}
@@ -172,7 +174,7 @@ class AfterImageNode extends TempNode {
 	setup( builder ) {
 
 		const textureNode = this.textureNode;
-		const textureNodeOld = this.textureNodeOld;
+		const textureNodeOld = this._textureNodeOld;
 
 		//
 
@@ -234,9 +236,9 @@ class AfterImageNode extends TempNode {
  * @tsl
  * @function
  * @param {Node<vec4>} node - The node that represents the input of the effect.
- * @param {number} [damp=0.96] - The damping intensity. A higher value means a stronger after image effect.
+ * @param {(Node<float>|number)} [damp=0.96] - The damping intensity. A higher value means a stronger after image effect.
  * @returns {AfterImageNode}
  */
-export const afterImage = ( node, damp ) => nodeObject( new AfterImageNode( convertToTexture( node ), damp ) );
+export const afterImage = ( node, damp ) => nodeObject( new AfterImageNode( convertToTexture( node ), nodeObject( damp ) ) );
 
 export default AfterImageNode;

package/examples/jsm/tsl/display/AnamorphicNode.js

@@ -69,9 +69,9 @@ class AnamorphicNode extends TempNode {
 		/**
 		 * The resolution scale.
 		 *
-		 * @type {Vector2}
+		 * @type {number}
 		 */
-		this.resolution = new Vector2( 1, 1 );
+		this.resolutionScale = 1;
 
 		/**
 		 * The internal render target of the effect.
@@ -130,8 +130,8 @@ class AnamorphicNode extends TempNode {
 
 		this._invSize.value.set( 1 / width, 1 / height );
 
-		width = Math.max( Math.round( width * this.resolution.x ), 1 );
-		height = Math.max( Math.round( height * this.resolution.y ), 1 );
+		width = Math.max( Math.round( width * this.resolutionScale ), 1 );
+		height = Math.max( Math.round( height * this.resolutionScale ), 1 );
 
 		this._renderTarget.setSize( width, height );
 
@@ -158,6 +158,7 @@ class AnamorphicNode extends TempNode {
 		const currentTexture = textureNode.value;
 
 		_quadMesh.material = this._material;
+		_quadMesh.name = 'Anamorphic';
 
 		this.setSize( map.image.width, map.image.height );
 
@@ -240,6 +241,29 @@ class AnamorphicNode extends TempNode {
 
 	}
 
+	/**
+	 * The resolution scale.
+	 *
+	 * @deprecated
+	 * @type {Vector2}
+	 * @default {(1,1)}
+	 */
+	get resolution() {
+
+		console.warn( 'THREE.AnamorphicNode: The "resolution" property has been renamed to "resolutionScale" and is now of type `number`.' ); // @deprecated r180
+
+		return new Vector2( this.resolutionScale, this.resolutionScale );
+
+	}
+
+	set resolution( value ) {
+
+		console.warn( 'THREE.AnamorphicNode: The "resolution" property has been renamed to "resolutionScale" and is now of type `number`.' ); // @deprecated r180
+
+		this.resolutionScale = value.x;
+
+	}
+
 }
 
 /**

package/examples/jsm/tsl/display/BloomNode.js

@@ -300,6 +300,7 @@ class BloomNode extends TempNode {
 
 		renderer.setRenderTarget( this._renderTargetBright );
 		_quadMesh.material = this._highPassFilterMaterial;
+		_quadMesh.name = 'Bloom [ High Pass ]';
 		_quadMesh.render( renderer );
 
 		// 2. Blur all the mips progressively
@@ -313,11 +314,13 @@ class BloomNode extends TempNode {
 			this._separableBlurMaterials[ i ].colorTexture.value = inputRenderTarget.texture;
 			this._separableBlurMaterials[ i ].direction.value = _BlurDirectionX;
 			renderer.setRenderTarget( this._renderTargetsHorizontal[ i ] );
+			_quadMesh.name = `Bloom [ Blur Horizontal - ${ i } ]`;
 			_quadMesh.render( renderer );
 
 			this._separableBlurMaterials[ i ].colorTexture.value = this._renderTargetsHorizontal[ i ].texture;
 			this._separableBlurMaterials[ i ].direction.value = _BlurDirectionY;
 			renderer.setRenderTarget( this._renderTargetsVertical[ i ] );
+			_quadMesh.name = `Bloom [ Blur Vertical - ${ i } ]`;
 			_quadMesh.render( renderer );
 
 			inputRenderTarget = this._renderTargetsVertical[ i ];
@@ -328,6 +331,7 @@ class BloomNode extends TempNode {
 
 		renderer.setRenderTarget( this._renderTargetsHorizontal[ 0 ] );
 		_quadMesh.material = this._compositeMaterial;
+		_quadMesh.name = 'Bloom [ Composite ]';
 		_quadMesh.render( renderer );
 
 		// restore
@@ -364,7 +368,9 @@ class BloomNode extends TempNode {
 
 		// gaussian blur materials
 
-		const kernelSizeArray = [ 3, 5, 7, 9, 11 ];
+		// These sizes have been changed to account for the altered coefficients-calculation to avoid blockiness,
+		// while retaining the same blur-strength. For details see https://github.com/mrdoob/three.js/pull/31528
+		const kernelSizeArray = [ 6, 10, 14, 18, 22 ];
 
 		for ( let i = 0; i < this._nMips; i ++ ) {
 
@@ -449,10 +455,11 @@ class BloomNode extends TempNode {
 	_getSeparableBlurMaterial( builder, kernelRadius ) {
 
 		const coefficients = [];
+		const sigma = kernelRadius / 3;
 
 		for ( let i = 0; i < kernelRadius; i ++ ) {
 
-			coefficients.push( 0.39894 * Math.exp( - 0.5 * i * i / ( kernelRadius * kernelRadius ) ) / kernelRadius );
+			coefficients.push( 0.39894 * Math.exp( - 0.5 * i * i / ( sigma * sigma ) ) / sigma );
 
 		}
 
@@ -468,8 +475,7 @@ class BloomNode extends TempNode {
 
 		const separableBlurPass = Fn( () => {
 
-			const weightSum = gaussianCoefficients.element( 0 ).toVar();
-			const diffuseSum = sampleTexel( uvNode ).rgb.mul( weightSum ).toVar();
+			const diffuseSum = sampleTexel( uvNode ).rgb.mul( gaussianCoefficients.element( 0 ) ).toVar();
 
 			Loop( { start: int( 1 ), end: int( kernelRadius ), type: 'int', condition: '<' }, ( { i } ) => {
 
@@ -479,11 +485,10 @@ class BloomNode extends TempNode {
 				const sample1 = sampleTexel( uvNode.add( uvOffset ) ).rgb;
 				const sample2 = sampleTexel( uvNode.sub( uvOffset ) ).rgb;
 				diffuseSum.addAssign( add( sample1, sample2 ).mul( w ) );
-				weightSum.addAssign( float( 2.0 ).mul( w ) );
 
 			} );
 
-			return vec4( diffuseSum.div( weightSum ), 1.0 );
+			return vec4( diffuseSum, 1.0 );
 
 		} );
 

package/examples/jsm/tsl/display/ChromaticAberrationNode.js

@@ -0,0 +1,207 @@
+import { Vector2, TempNode } from 'three/webgpu';
+import {
+	nodeObject,
+	Fn,
+	uniform,
+	convertToTexture,
+	float,
+	vec4,
+	uv,
+	NodeUpdateType,
+} from 'three/tsl';
+
+/**
+ * Post processing node for applying chromatic aberration effect.
+ * This effect simulates the color fringing that occurs in real camera lenses
+ * by separating and offsetting the red, green, and blue channels.
+ *
+ * @augments TempNode
+ * @three_import import { chromaticAberration } from 'three/addons/tsl/display/ChromaticAberrationNode.js';
+ */
+class ChromaticAberrationNode extends TempNode {
+
+	static get type() {
+
+		return 'ChromaticAberrationNode';
+
+	}
+
+	/**
+	 * Constructs a new chromatic aberration node.
+	 *
+	 * @param {TextureNode} textureNode - The texture node that represents the input of the effect.
+	 * @param {Node} strengthNode - The strength of the chromatic aberration effect as a node.
+	 * @param {Node} centerNode - The center point of the effect as a node.
+	 * @param {Node} scaleNode - The scale factor for stepped scaling from center as a node.
+	 */
+	constructor( textureNode, strengthNode, centerNode, scaleNode ) {
+
+		super( 'vec4' );
+
+		/**
+		 * The texture node that represents the input of the effect.
+		 *
+		 * @type {texture}
+		 */
+		this.textureNode = textureNode;
+
+		/**
+		 * The `updateBeforeType` is set to `NodeUpdateType.FRAME` since the node updates
+		 * its internal uniforms once per frame in `updateBefore()`.
+		 *
+		 * @type {string}
+		 * @default 'frame'
+		 */
+		this.updateBeforeType = NodeUpdateType.FRAME;
+
+		/**
+		 * A node holding the strength of the effect.
+		 *
+		 * @type {Node}
+		 */
+		this.strengthNode = strengthNode;
+
+		/**
+		 * A node holding the center point of the effect.
+		 *
+		 * @type {Node}
+		 */
+		this.centerNode = centerNode;
+
+		/**
+		 * A node holding the scale factor for stepped scaling.
+		 *
+		 * @type {Node}
+		 */
+		this.scaleNode = scaleNode;
+
+		/**
+		 * A uniform node holding the inverse resolution value.
+		 *
+		 * @private
+		 * @type {UniformNode<vec2>}
+		 */
+		this._invSize = uniform( new Vector2() );
+
+	}
+
+	/**
+	 * This method is used to update the effect's uniforms once per frame.
+	 *
+	 * @param {NodeFrame} frame - The current node frame.
+	 */
+	updateBefore( /* frame */ ) {
+
+		const map = this.textureNode.value;
+		this._invSize.value.set( 1 / map.image.width, 1 / map.image.height );
+
+	}
+
+	/**
+	 * This method is used to setup the effect's TSL code.
+	 *
+	 * @param {NodeBuilder} builder - The current node builder.
+	 * @return {ShaderCallNodeInternal}
+	 */
+	setup( /* builder */ ) {
+
+		const textureNode = this.textureNode;
+		const uvNode = textureNode.uvNode || uv();
+
+		const ApplyChromaticAberration = Fn( ( [ uv, strength, center, scale ] ) => {
+
+			// Calculate distance from center
+			const offset = uv.sub( center );
+			const distance = offset.length();
+
+			// Create stepped scaling zones based on distance
+			// Each channel gets different scaling steps
+			const redScale = float( 1.0 ).add( scale.mul( 0.02 ).mul( strength ) ); // Red channel scaled outward
+			const greenScale = float( 1.0 ); // Green stays at original scale
+			const blueScale = float( 1.0 ).sub( scale.mul( 0.02 ).mul( strength ) ); // Blue channel scaled inward
+
+			// Create radial distortion based on distance from center
+			const aberrationStrength = strength.mul( distance );
+
+			// Calculate scaled UV coordinates for each channel
+			const redUV = center.add( offset.mul( redScale ) );
+			const greenUV = center.add( offset.mul( greenScale ) );
+			const blueUV = center.add( offset.mul( blueScale ) );
+
+			// Apply additional chromatic offset based on aberration strength
+			const rOffset = offset.mul( aberrationStrength ).mul( float( 0.01 ) );
+			const gOffset = offset.mul( aberrationStrength ).mul( float( 0.0 ) );
+			const bOffset = offset.mul( aberrationStrength ).mul( float( - 0.01 ) );
+
+			// Final UV coordinates combining scale and chromatic aberration
+			const finalRedUV = redUV.add( rOffset );
+			const finalGreenUV = greenUV.add( gOffset );
+			const finalBlueUV = blueUV.add( bOffset );
+
+			// Sample texture for each channel
+			const r = textureNode.sample( finalRedUV ).r;
+			const g = textureNode.sample( finalGreenUV ).g;
+			const b = textureNode.sample( finalBlueUV ).b;
+
+			// Get original alpha
+			const a = textureNode.sample( uv ).a;
+
+			return vec4( r, g, b, a );
+
+		} ).setLayout( {
+			name: 'ChromaticAberrationShader',
+			type: 'vec4',
+			inputs: [
+				{ name: 'uv', type: 'vec2' },
+				{ name: 'strength', type: 'float' },
+				{ name: 'center', type: 'vec2' },
+				{ name: 'scale', type: 'float' },
+				{ name: 'invSize', type: 'vec2' }
+			]
+		} );
+
+		const chromaticAberrationFn = Fn( () => {
+
+			return ApplyChromaticAberration(
+				uvNode,
+				this.strengthNode,
+				this.centerNode,
+				this.scaleNode,
+				this._invSize
+			);
+
+		} );
+
+		const outputNode = chromaticAberrationFn();
+
+		return outputNode;
+
+	}
+
+}
+
+export default ChromaticAberrationNode;
+
+/**
+ * TSL function for creating a chromatic aberration node for post processing.
+ *
+ * @tsl
+ * @function
+ * @param {Node<vec4>} node - The node that represents the input of the effect.
+ * @param {Node|number} [strength=1.0] - The strength of the chromatic aberration effect as a node or value.
+ * @param {?(Node|Vector2)} [center=null] - The center point of the effect as a node or value. If null, uses screen center (0.5, 0.5).
+ * @param {Node|number} [scale=1.1] - The scale factor for stepped scaling from center as a node or value.
+ * @returns {ChromaticAberrationNode}
+ */
+export const chromaticAberration = ( node, strength = 1.0, center = null, scale = 1.1 ) => {
+
+	return nodeObject(
+		new ChromaticAberrationNode(
+			convertToTexture( node ),
+			nodeObject( strength ),
+			nodeObject( center ),
+			nodeObject( scale )
+		)
+	);
+
+};

package/examples/jsm/tsl/display/DenoiseNode.js

@@ -259,6 +259,7 @@ export default DenoiseNode;
 /**
  * Generates denoise samples based on the given parameters.
  *
+ * @private
  * @param {number} numSamples - The number of samples.
  * @param {number} numRings - The number of rings.
  * @param {number} radiusExponent - The radius exponent.
@@ -283,6 +284,7 @@ function generateDenoiseSamples( numSamples, numRings, radiusExponent ) {
 /**
  * Generates a default noise texture for the given size.
  *
+ * @private
  * @param {number} [size=64] - The texture size.
  * @return {DataTexture} The generated noise texture.
  */