@lampdotdev/lamp 0.0.0-stage → 0.35.0

package/Resources/WebLibraries/three/addons/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/Resources/WebLibraries/three/addons/tsl/display/ChromaticAberrationNode.js

@@ -0,0 +1,163 @@
+import { Node } from 'three/webgpu';
+import {
+	nodeObject,
+	Fn,
+	convertToTexture,
+	float,
+	vec4,
+	uv,
+} 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 Node
+ * @three_import import { chromaticAberration } from 'three/addons/tsl/display/ChromaticAberrationNode.js';
+ */
+class ChromaticAberrationNode extends Node {
+
+	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;
+
+		/**
+		 * 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;
+
+	}
+
+	/**
+	 * 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 );
+
+		} );
+
+		const chromaticAberrationFn = Fn( () => {
+
+			return ApplyChromaticAberration(
+				uvNode,
+				this.strengthNode,
+				this.centerNode,
+				this.scaleNode
+			);
+
+		} );
+
+		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 new ChromaticAberrationNode(
+		convertToTexture( node ),
+		nodeObject( strength ),
+		nodeObject( center ),
+		nodeObject( scale )
+	);
+
+};

package/Resources/WebLibraries/three/addons/tsl/display/DenoiseNode.js

@@ -0,0 +1,354 @@
+import { DataTexture, RepeatWrapping, Vector2, Vector3, Node } from 'three/webgpu';
+import { texture, getNormalFromDepth, getViewPosition, convertToTexture, nodeObject, Fn, float, NodeUpdateType, uv, uniform, Loop, luminance, vec2, vec3, vec4, uniformArray, int, dot, max, pow, abs, If, textureSize, sin, cos, mat2, PI, property, isBackgroundDepth } from 'three/tsl';
+import { SimplexNoise } from '../../math/SimplexNoise.js';
+
+/**
+ * Post processing node for denoising data like raw screen-space ambient occlusion output.
+ * Denoise can noticeably improve the quality of ambient occlusion but also add quite some
+ * overhead to the post processing setup. It's best to make its usage optional (e.g. via
+ * graphic settings).
+ *
+ * Reference: {@link https://openaccess.thecvf.com/content/WACV2021/papers/Khademi_Self-Supervised_Poisson-Gaussian_Denoising_WACV_2021_paper.pdf}.
+ *
+ * @augments Node
+ * @three_import import { denoise } from 'three/addons/tsl/display/DenoiseNode.js';
+ */
+class DenoiseNode extends Node {
+
+	static get type() {
+
+		return 'DenoiseNode';
+
+	}
+
+	/**
+	 * Constructs a new denoise node.
+	 *
+	 * @param {TextureNode} textureNode - The texture node that represents the input of the effect (e.g. AO).
+	 * @param {Node<float>} depthNode - A node that represents the scene's depth.
+	 * @param {?Node<vec3>} normalNode - A node that represents the scene's normals.
+	 * @param {Camera} camera - The camera the scene is rendered with.
+	 */
+	constructor( textureNode, depthNode, normalNode, camera ) {
+
+		super( 'vec4' );
+
+		/**
+		 * The texture node that represents the input of the effect (e.g. AO).
+		 *
+		 * @type {TextureNode}
+		 */
+		this.textureNode = textureNode;
+
+		/**
+		 * A node that represents the scene's depth.
+		 *
+		 * @type {Node<float>}
+		 */
+		this.depthNode = depthNode;
+
+		/**
+		 * A node that represents the scene's normals. If no normals are passed to the
+		 * constructor (because MRT is not available), normals can be automatically
+		 * reconstructed from depth values in the shader.
+		 *
+		 * @type {?Node<vec3>}
+		 */
+		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( this._noiseTexture );
+
+		/**
+		 * The luma Phi value.
+		 *
+		 * @type {UniformNode<float>}
+		 */
+		this.lumaPhi = uniform( 5 );
+
+		/**
+		 * The depth Phi value.
+		 *
+		 * @type {UniformNode<float>}
+		 */
+		this.depthPhi = uniform( 5 );
+
+		/**
+		 * The normal Phi value.
+		 *
+		 * @type {UniformNode<float>}
+		 */
+		this.normalPhi = uniform( 5 );
+
+		/**
+		 * The radius.
+		 *
+		 * @type {UniformNode<float>}
+		 */
+		this.radius = uniform( 5 );
+
+		/**
+		 * The index.
+		 *
+		 * @type {UniformNode<float>}
+		 */
+		this.index = uniform( 0 );
+
+		/**
+		 * 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;
+
+		/**
+		 * The resolution of the effect.
+		 *
+		 * @private
+		 * @type {UniformNode<vec2>}
+		 */
+		this._resolution = uniform( new Vector2() );
+
+		/**
+		 * An array of sample vectors.
+		 *
+		 * @private
+		 * @type {UniformArrayNode<vec3>}
+		 */
+		this._sampleVectors = uniformArray( generateDenoiseSamples( 16, 2, 1 ) );
+
+		/**
+		 * Represents the inverse projection matrix of the scene's camera.
+		 *
+		 * @private
+		 * @type {UniformNode<mat4>}
+		 */
+		this._cameraProjectionMatrixInverse = uniform( camera.projectionMatrixInverse );
+
+	}
+
+	/**
+	 * This method is used to update internal uniforms once per frame.
+	 *
+	 * @param {NodeFrame} frame - The current node frame.
+	 */
+	updateBefore() {
+
+		const map = this.textureNode.value;
+
+		this._resolution.value.set( map.image.width, 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 uvNode = uv();
+
+		const sampleTexture = ( uv ) => this.textureNode.sample( uv );
+		const sampleDepth = ( uv ) => this.depthNode.sample( uv ).x;
+		const sampleNormal = ( uv ) => ( this.normalNode !== null ) ? this.normalNode.sample( uv ).rgb.normalize() : getNormalFromDepth( uv, this.depthNode.value, this._cameraProjectionMatrixInverse );
+		const sampleNoise = ( uv ) => this.noiseNode.sample( uv );
+
+		const denoiseSample = Fn( ( [ center, viewNormal, viewPosition, sampleUv ] ) => {
+
+			const texel = sampleTexture( sampleUv ).toVar();
+			const depth = sampleDepth( sampleUv ).toVar();
+			const normal = sampleNormal( sampleUv ).toVar();
+			const neighborColor = texel.rgb;
+			const viewPos = getViewPosition( sampleUv, depth, this._cameraProjectionMatrixInverse ).toVar();
+
+			const normalDiff = dot( viewNormal, normal ).toVar();
+			const normalSimilarity = pow( max( normalDiff, 0 ), this.normalPhi ).toVar();
+			const lumaDiff = abs( luminance( neighborColor ).sub( luminance( center ) ) ).toVar();
+			const lumaSimilarity = max( float( 1.0 ).sub( lumaDiff.div( this.lumaPhi ) ), 0 ).toVar();
+			const depthDiff = abs( dot( viewPosition.sub( viewPos ), viewNormal ) ).toVar();
+			const depthSimilarity = max( float( 1.0 ).sub( depthDiff.div( this.depthPhi ) ), 0 );
+			const w = lumaSimilarity.mul( depthSimilarity ).mul( normalSimilarity );
+
+			return vec4( neighborColor.mul( w ), w );
+
+		} );
+
+		const denoise = Fn( ( [ uvNode ] ) => {
+
+			const depth = sampleDepth( uvNode ).toVar();
+			const viewNormal = sampleNormal( uvNode ).toVar();
+
+			const texel = sampleTexture( uvNode ).toVar();
+			const result = property( 'vec4' );
+
+			If( isBackgroundDepth( depth ).or( dot( viewNormal, viewNormal ).equal( 0.0 ) ), () => {
+
+				result.assign( texel );
+
+			} ).Else( () => {
+
+				const center = vec3( texel.rgb );
+
+				const viewPosition = getViewPosition( uvNode, depth, this._cameraProjectionMatrixInverse ).toConst();
+
+				const noiseResolution = textureSize( this.noiseNode, 0 );
+				let noiseUv = vec2( uvNode.x, uvNode.y.oneMinus() );
+				noiseUv = noiseUv.mul( this._resolution.div( noiseResolution ) );
+				const noiseTexel = sampleNoise( noiseUv ).toVar();
+
+				const x = sin( noiseTexel.element( this.index.mod( 4 ).mul( 2 ).mul( PI ) ) );
+				const y = cos( noiseTexel.element( this.index.mod( 4 ).mul( 2 ).mul( PI ) ) );
+
+				const noiseVec = vec2( x, y );
+				const rotationMatrix = mat2( noiseVec.x, noiseVec.y.negate(), noiseVec.x, noiseVec.y );
+
+				const totalWeight = float( 1.0 ).toVar();
+				const denoised = vec3( texel.rgb ).toVar();
+
+				Loop( { start: int( 0 ), end: int( 16 ), type: 'int', condition: '<' }, ( { i } ) => {
+
+					const sampleDir = this._sampleVectors.element( i );
+					const offset = rotationMatrix.mul( sampleDir.xy.mul( float( 1.0 ).add( sampleDir.z.mul( this.radius.sub( 1 ) ) ) ) ).div( this._resolution );
+					const sampleUv = uvNode.add( offset );
+
+					const sampleResult = denoiseSample( center, viewNormal, viewPosition, sampleUv );
+
+					denoised.addAssign( sampleResult.xyz );
+					totalWeight.addAssign( sampleResult.w );
+
+				} );
+
+				If( totalWeight.greaterThan( float( 0 ) ), () => {
+
+					denoised.divAssign( totalWeight );
+
+				} );
+
+				result.assign( vec4( denoised, texel.a ) );
+
+			} );
+
+			return result;
+
+		}/*, { uv: 'vec2', return: 'vec4' }*/ );
+
+		const output = Fn( () => {
+
+			return denoise( uvNode );
+
+		} );
+
+		const outputNode = output();
+
+		return outputNode;
+
+	}
+
+	/**
+	 * Frees internal resources. This method should be called
+	 * when the effect is no longer required.
+	 */
+	dispose() {
+
+		super.dispose();
+
+		this._noiseTexture.dispose();
+
+	}
+
+}
+
+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.
+ * @return {Array<Vector3>} The denoise samples.
+ */
+function generateDenoiseSamples( numSamples, numRings, radiusExponent ) {
+
+	const samples = [];
+
+	for ( let i = 0; i < numSamples; i ++ ) {
+
+		const angle = 2 * Math.PI * numRings * i / numSamples;
+		const radius = Math.pow( i / ( numSamples - 1 ), radiusExponent );
+		samples.push( new Vector3( Math.cos( angle ), Math.sin( angle ), radius ) );
+
+	}
+
+	return samples;
+
+}
+
+/**
+ * Generates a default noise texture for the given size.
+ *
+ * @private
+ * @param {number} [size=64] - The texture size.
+ * @return {DataTexture} The generated noise texture.
+ */
+function generateDefaultNoise( size = 64 ) {
+
+	const simplex = new SimplexNoise();
+
+	const arraySize = size * size * 4;
+	const data = new Uint8Array( arraySize );
+
+	for ( let i = 0; i < size; i ++ ) {
+
+		for ( let j = 0; j < size; j ++ ) {
+
+			const x = i;
+			const y = j;
+
+			data[ ( i * size + j ) * 4 ] = ( simplex.noise( x, y ) * 0.5 + 0.5 ) * 255;
+			data[ ( i * size + j ) * 4 + 1 ] = ( simplex.noise( x + size, y ) * 0.5 + 0.5 ) * 255;
+			data[ ( i * size + j ) * 4 + 2 ] = ( simplex.noise( x, y + size ) * 0.5 + 0.5 ) * 255;
+			data[ ( i * size + j ) * 4 + 3 ] = ( simplex.noise( x + size, y + size ) * 0.5 + 0.5 ) * 255;
+
+		}
+
+	}
+
+	const noiseTexture = new DataTexture( data, size, size );
+	noiseTexture.wrapS = RepeatWrapping;
+	noiseTexture.wrapT = RepeatWrapping;
+	noiseTexture.needsUpdate = true;
+
+	return noiseTexture;
+
+}
+
+/**
+ * TSL function for creating a denoise effect.
+ *
+ * @tsl
+ * @function
+ * @param {Node} node - The node that represents the input of the effect (e.g. AO).
+ * @param {Node<float>} depthNode - A node that represents the scene's depth.
+ * @param {?Node<vec3>} normalNode - A node that represents the scene's normals.
+ * @param {Camera} camera - The camera the scene is rendered with.
+ * @returns {DenoiseNode}
+ */
+export const denoise = ( node, depthNode, normalNode, camera ) => new DenoiseNode( convertToTexture( node ), nodeObject( depthNode ), nodeObject( normalNode ), camera );