super-three 0.179.0 → 0.184.0

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

@@ -0,0 +1,150 @@
+import { Fn, float, vec2, vec3, sin, screenUV, mix, clamp, dot, convertToTexture, time, uv, select } from 'three/tsl';
+import { circle } from './Shape.js';
+
+/**
+ * Creates barrel-distorted UV coordinates.
+ * The center of the screen appears to bulge outward (convex distortion).
+ *
+ * @tsl
+ * @function
+ * @param {Node<float>} [curvature=0.1] - The amount of curvature (0 = flat, 0.5 = very curved).
+ * @param {Node<vec2>} [coord=uv()] - The input UV coordinates.
+ * @return {Node<vec2>} The distorted UV coordinates.
+ */
+export const barrelUV = Fn( ( [ curvature = float( 0.1 ), coord = uv() ] ) => {
+
+	// Center UV coordinates (-1 to 1)
+	const centered = coord.sub( 0.5 ).mul( 2.0 );
+
+	// Calculate squared distance from center
+	const r2 = dot( centered, centered );
+
+	// Barrel distortion: push center outward (bulge effect)
+	const distortion = float( 1.0 ).sub( r2.mul( curvature ) );
+
+	// Calculate scale to compensate for edge expansion
+	// At corners r² = 2, so we scale by the inverse of corner distortion
+	const cornerDistortion = float( 1.0 ).sub( curvature.mul( 2.0 ) );
+
+	// Apply distortion and compensate scale to keep edges aligned
+	const distorted = centered.div( distortion ).mul( cornerDistortion ).mul( 0.5 ).add( 0.5 );
+
+	return distorted;
+
+} );
+
+/**
+ * Checks if UV coordinates are inside the valid 0-1 range.
+ * Useful for masking areas inside the distorted screen.
+ *
+ * @tsl
+ * @function
+ * @param {Node<vec2>} coord - The UV coordinates to check.
+ * @return {Node<float>} 1.0 if inside bounds, 0.0 if outside.
+ */
+export const barrelMask = Fn( ( [ coord ] ) => {
+
+	const outOfBounds = coord.x.lessThan( 0.0 )
+		.or( coord.x.greaterThan( 1.0 ) )
+		.or( coord.y.lessThan( 0.0 ) )
+		.or( coord.y.greaterThan( 1.0 ) );
+
+	return select( outOfBounds, float( 0.0 ), float( 1.0 ) );
+
+} );
+
+/**
+ * Applies color bleeding effect to simulate horizontal color smearing.
+ * Simulates the analog signal bleeding in CRT displays where colors
+ * "leak" into adjacent pixels horizontally.
+ *
+ * @tsl
+ * @function
+ * @param {Node} color - The input texture node.
+ * @param {Node<float>} [amount=0.002] - The amount of color bleeding (0-0.01).
+ * @return {Node<vec3>} The color with bleeding effect applied.
+ */
+export const colorBleeding = Fn( ( [ color, amount = float( 0.002 ) ] ) => {
+
+	const inputTexture = convertToTexture( color );
+
+	// Get the original color
+	const original = inputTexture.sample( screenUV ).rgb;
+
+	// Sample colors from the left (simulating signal trailing)
+	const left1 = inputTexture.sample( screenUV.sub( vec2( amount, 0.0 ) ) ).rgb;
+	const left2 = inputTexture.sample( screenUV.sub( vec2( amount.mul( 2.0 ), 0.0 ) ) ).rgb;
+	const left3 = inputTexture.sample( screenUV.sub( vec2( amount.mul( 3.0 ), 0.0 ) ) ).rgb;
+
+	// Red bleeds more (travels further in analog signal)
+	const bleedR = original.r
+		.add( left1.r.mul( 0.4 ) )
+		.add( left2.r.mul( 0.2 ) )
+		.add( left3.r.mul( 0.1 ) );
+
+	// Green bleeds medium
+	const bleedG = original.g
+		.add( left1.g.mul( 0.25 ) )
+		.add( left2.g.mul( 0.1 ) );
+
+	// Blue bleeds least
+	const bleedB = original.b
+		.add( left1.b.mul( 0.15 ) );
+
+	// Normalize and clamp
+	const r = clamp( bleedR.div( 1.7 ), 0.0, 1.0 );
+	const g = clamp( bleedG.div( 1.35 ), 0.0, 1.0 );
+	const b = clamp( bleedB.div( 1.15 ), 0.0, 1.0 );
+
+	return vec3( r, g, b );
+
+} );
+
+/**
+ * Applies scanline effect to simulate CRT monitor horizontal lines with animation.
+ *
+ * @tsl
+ * @function
+ * @param {Node<vec3>} color - The input color.
+ * @param {Node<float>} [intensity=0.3] - The intensity of the scanlines (0-1).
+ * @param {Node<float>} [count=240] - The number of scanlines (typically matches vertical resolution).
+ * @param {Node<float>} [speed=0.0] - The scroll speed of scanlines (0 = static, 1 = normal CRT roll).
+ * @param {Node<vec2>} [coord=uv()] - The UV coordinates to use for scanlines.
+ * @return {Node<vec3>} The color with scanlines applied.
+ */
+export const scanlines = Fn( ( [ color, intensity = float( 0.3 ), count = float( 240.0 ), speed = float( 0.0 ), coord = uv() ] ) => {
+
+	// Animate scanlines scrolling down (like CRT vertical sync roll)
+	const animatedY = coord.y.sub( time.mul( speed ) );
+
+	// Create scanline pattern
+	const scanline = sin( animatedY.mul( count ) );
+	const scanlineIntensity = scanline.mul( 0.5 ).add( 0.5 ).mul( intensity );
+
+	// Darken alternate lines
+	return color.mul( float( 1.0 ).sub( scanlineIntensity ) );
+
+} );
+
+/**
+ * Applies vignette effect to darken the edges of the screen.
+ *
+ * @tsl
+ * @function
+ * @param {Node<vec3>} color - The input color.
+ * @param {Node<float>} [intensity=0.4] - The intensity of the vignette (0-1).
+ * @param {Node<float>} [smoothness=0.5] - The smoothness of the vignette falloff.
+ * @param {Node<vec2>} [coord=uv()] - The UV coordinates to use for vignette calculation.
+ * @return {Node<vec3>} The color with vignette applied.
+ */
+export const vignette = Fn( ( [ color, intensity = float( 0.4 ), smoothness = float( 0.5 ), coord = uv() ] ) => {
+
+	// Use circle for radial gradient (1.42 ≈ √2 covers full diagonal)
+	const mask = circle( float( 1.42 ), smoothness, coord );
+
+	// Apply vignette: center = 1, edges = (1 - intensity)
+	const vignetteAmount = mix( float( 1.0 ).sub( intensity ), float( 1.0 ), mask );
+
+	return color.mul( vignetteAmount );
+
+} );

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

@@ -1,13 +1,11 @@
-import { Vector2, TempNode } from 'three/webgpu';
+import { TempNode } from 'three/webgpu';
 import {
 	nodeObject,
 	Fn,
-	uniform,
 	convertToTexture,
 	float,
 	vec4,
 	uv,
-	NodeUpdateType,
 } from 'three/tsl';
 
 /**
@@ -45,15 +43,6 @@ class ChromaticAberrationNode extends TempNode {
 		 */
 		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.
 		 *
@@ -75,26 +64,6 @@ class ChromaticAberrationNode extends TempNode {
 		 */
 		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 );
-
 	}
 
 	/**
@@ -155,8 +124,7 @@ class ChromaticAberrationNode extends TempNode {
 				{ name: 'uv', type: 'vec2' },
 				{ name: 'strength', type: 'float' },
 				{ name: 'center', type: 'vec2' },
-				{ name: 'scale', type: 'float' },
-				{ name: 'invSize', type: 'vec2' }
+				{ name: 'scale', type: 'float' }
 			]
 		} );
 
@@ -166,8 +134,7 @@ class ChromaticAberrationNode extends TempNode {
 				uvNode,
 				this.strengthNode,
 				this.centerNode,
-				this.scaleNode,
-				this._invSize
+				this.scaleNode
 			);
 
 		} );
@@ -189,7 +156,7 @@ export default ChromaticAberrationNode;
  * @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|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}
  */
@@ -203,4 +170,5 @@ export const chromaticAberration = ( node, strength = 1.0, center = null, scale
 			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.
  */
@@ -329,4 +331,4 @@ function generateDefaultNoise( size = 64 ) {
  * @param {Camera} camera - The camera the scene is rendered with.
  * @returns {DenoiseNode}
  */
-export const denoise = ( node, depthNode, normalNode, camera ) => nodeObject( new DenoiseNode( convertToTexture( node ), nodeObject( depthNode ), nodeObject( normalNode ), camera ) );
+export const denoise = ( node, depthNode, normalNode, camera ) => new DenoiseNode( convertToTexture( node ), nodeObject( depthNode ), nodeObject( normalNode ), camera );