@gnsx/three 0.184.0

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

@@ -0,0 +1,141 @@
+import { TempNode } from 'three/webgpu';
+import { nodeObject, Fn, float, uv, convertToTexture, vec4, If, int, clamp, sub, mix } from 'three/tsl';
+
+/**
+ * Post processing node for creating a transition effect between scenes.
+ *
+ * @augments TempNode
+ * @three_import import { transition } from 'three/addons/tsl/display/TransitionNode.js';
+ */
+class TransitionNode extends TempNode {
+
+	static get type() {
+
+		return 'TransitionNode';
+
+	}
+
+	/**
+	 * Constructs a new transition node.
+	 *
+	 * @param {TextureNode} textureNodeA - A texture node that represents the beauty pass of the first scene.
+	 * @param {TextureNode} textureNodeB - A texture node that represents the beauty pass of the second scene.
+	 * @param {TextureNode} mixTextureNode - A texture node that defines how the transition effect should look like.
+	 * @param {Node<float>} mixRatioNode - The interpolation factor that controls the mix.
+	 * @param {Node<float>} thresholdNode - Can be used to tweak the linear interpolation.
+	 * @param {Node<float>} useTextureNode - Whether `mixTextureNode` should influence the transition or not.
+	 */
+	constructor( textureNodeA, textureNodeB, mixTextureNode, mixRatioNode, thresholdNode, useTextureNode ) {
+
+		super( 'vec4' );
+
+		/**
+		 * A texture node that represents the beauty pass of the first scene.
+		 *
+		 * @type {TextureNode}
+		 */
+		this.textureNodeA = textureNodeA;
+
+		/**
+		 * A texture node that represents the beauty pass of the second scene.
+		 *
+		 * @type {TextureNode}
+		 */
+		this.textureNodeB = textureNodeB;
+
+		/**
+		 * A texture that defines how the transition effect should look like.
+		 *
+		 * @type {TextureNode}
+		 */
+		this.mixTextureNode = mixTextureNode;
+
+		/**
+		 * The interpolation factor that controls the mix.
+		 *
+		 * @type {Node<float>}
+		 */
+		this.mixRatioNode = mixRatioNode;
+
+		/**
+		 * Can be used to tweak the linear interpolation.
+		 *
+		 * @type {Node<float>}
+		 */
+		this.thresholdNode = thresholdNode;
+
+		/**
+		 * Whether `mixTextureNode` should influence the transition or not.
+		 *
+		 * @type {Node<float>}
+		 */
+		this.useTextureNode = useTextureNode;
+
+	}
+
+	/**
+	 * This method is used to setup the effect's TSL code.
+	 *
+	 * @param {NodeBuilder} builder - The current node builder.
+	 * @return {ShaderCallNodeInternal}
+	 */
+	setup() {
+
+		const { textureNodeA, textureNodeB, mixTextureNode, mixRatioNode, thresholdNode, useTextureNode } = this;
+
+		const sampleTexture = ( textureNode ) => {
+
+			const uvNodeTexture = textureNode.uvNode || uv();
+			return textureNode.sample( uvNodeTexture );
+
+		};
+
+		const transition = Fn( () => {
+
+			const texelOne = sampleTexture( textureNodeA );
+			const texelTwo = sampleTexture( textureNodeB );
+
+			const color = vec4().toVar();
+
+			If( useTextureNode.equal( int( 1 ) ), () => {
+
+				const transitionTexel = sampleTexture( mixTextureNode );
+				const r = mixRatioNode.mul( thresholdNode.mul( 2.0 ).add( 1.0 ) ).sub( thresholdNode );
+				const mixf = clamp( sub( transitionTexel.r, r ).mul( float( 1.0 ).div( thresholdNode ) ), 0.0, 1.0 );
+
+				color.assign( mix( texelOne, texelTwo, mixf ) );
+
+			} ).Else( () => {
+
+				color.assign( mix( texelTwo, texelOne, mixRatioNode ) );
+
+			} );
+
+			return color;
+
+		} );
+
+		const outputNode = transition();
+
+		return outputNode;
+
+	}
+
+}
+
+export default TransitionNode;
+
+/**
+ * TSL function for creating a transition node for post processing.
+ *
+ * @tsl
+ * @function
+ * @param {Node<vec4>} nodeA - A texture node that represents the beauty pass of the first scene.
+ * @param {Node<vec4>} nodeB - A texture node that represents the beauty pass of the second scene.
+ * @param {Node<vec4>} mixTextureNode - A texture that defines how the transition effect should look like.
+ * @param {Node<float> | number} mixRatio - The interpolation factor that controls the mix.
+ * @param {Node<float> | number} threshold - Can be used to tweak the linear interpolation.
+ * @param {Node<float> | number} useTexture - Whether `mixTextureNode` should influence the transition or not.
+ * @returns {TransitionNode}
+ */
+export const transition = ( nodeA, nodeB, mixTextureNode, mixRatio, threshold, useTexture ) => new TransitionNode( convertToTexture( nodeA ), convertToTexture( nodeB ), convertToTexture( mixTextureNode ), nodeObject( mixRatio ), nodeObject( threshold ), nodeObject( useTexture ) );

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

@@ -0,0 +1,65 @@
+import { Fn, vec2, uv, Loop, vec4, premultiplyAlpha, unpremultiplyAlpha, max, int, textureSize, nodeObject, convertToTexture } from 'three/tsl';
+
+/**
+ * Applies a box blur effect to the given texture node.
+ *
+ * Compared to Gaussian blur, box blur produces a more blocky result but with better performance when correctly
+ * configured. It is intended for mobile devices or performance restricted use cases where Gaussian is too heavy.
+ *
+ * The (kernel) `size` parameter should be small (1, 2 or 3) since it determines the number of samples based on (size * 2 + 1)^2.
+ * This implementation uses a single pass approach so the kernel is not applied as a separable filter. That means larger
+ * kernels won't perform well. Use Gaussian instead if you need a more high-quality blur.
+ *
+ * To produce wider blurs, increase the `separation` parameter instead which has no influence on the performance.
+ *
+ * Reference: {@link https://github.com/lettier/3d-game-shaders-for-beginners/blob/master/demonstration/shaders/fragment/box-blur.frag}.
+ *
+ * @tsl
+ * @function
+ * @param {Node<vec4>} textureNode - The texture node that should be blurred.
+ * @param {Object} [options={}] - Additional options for the hash blur effect.
+ * @param {Node<int>} [options.size=int(1)] - Controls the blur's kernel. For performant results, the range should within [1, 3].
+ * @param {Node<int>} [options.separation=int(1)] - Spreads out the blur without having to sample additional fragments. Ranges from [1, Infinity].
+ * @param {boolean} [options.premultipliedAlpha=false] - Whether to use premultiplied alpha for the blur effect.
+ * @return {Node<vec4>} The blurred texture node.
+ */
+export const boxBlur = /*#__PURE__*/ Fn( ( [ textureNode, options = {} ] ) => {
+
+	textureNode = convertToTexture( textureNode );
+
+	const size = nodeObject( options.size ) || int( 1 );
+	const separation = nodeObject( options.separation ) || int( 1 );
+	const premultipliedAlpha = options.premultipliedAlpha || false;
+
+	const tap = ( uv ) => {
+
+		const sample = textureNode.sample( uv );
+
+		return premultipliedAlpha ? premultiplyAlpha( sample ) : sample;
+
+	};
+
+	const targetUV = textureNode.uvNode || uv();
+
+	const result = vec4( 0 );
+	const sep = max( separation, 1 );
+	const count = int( 0 );
+	const pixelStep = vec2( 1 ).div( textureSize( textureNode ) );
+
+	Loop( { start: size.negate(), end: size, name: 'i', condition: '<=' }, ( { i } ) => {
+
+		Loop( { start: size.negate(), end: size, name: 'j', condition: '<=' }, ( { j } ) => {
+
+			const uvs = targetUV.add( vec2( i, j ).mul( pixelStep ).mul( sep ) );
+			result.addAssign( tap( uvs ) );
+			count.addAssign( 1 );
+
+		} );
+
+	} );
+
+	result.divAssign( count );
+
+	return premultipliedAlpha ? unpremultiplyAlpha( result ) : result;
+
+} );

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

@@ -0,0 +1,80 @@
+import { abs, color, float, Fn, Loop, mix, nodeObject, perspectiveDepthToViewZ, reference, textureSize, uv, vec2, vec4, viewZToOrthographicDepth, int, If, array, ivec2 } from 'three/tsl';
+
+/**
+ * Performs a depth-aware blend between a base scene and a secondary effect (like godrays).
+ * This function uses a Poisson disk sampling pattern to detect depth discontinuities
+ * in the neighborhood of the current pixel. If an edge is detected, it shifts the
+ * sampling coordinate for the blend node away from the edge to prevent light leaking/haloing.
+ *
+ * @param {Node} baseNode - The main scene/beauty pass texture node.
+ * @param {Node} blendNode - The effect to be blended (e.g., Godrays, Bloom).
+ * @param {Node} depthNode - The scene depth texture node.
+ * @param {Camera} camera - The camera used for the scene.
+ * @param {Object} [options={}] - Configuration for the blend effect.
+ * @param {Node|Color} [options.blendColor=Color(0xff0000)] - The color applied to the blend node.
+ * @param {Node<int> | number} [options.edgeRadius=2] - The search radius (in pixels) for detecting depth edges.
+ * @param {Node<float> | number} [options.edgeStrength=2] - How far to "push" the UV away from detected edges.
+ * @returns {Node<vec4>} The resulting blended color node.
+ */
+export const depthAwareBlend = /*#__PURE__*/ Fn( ( [ baseNode, blendNode, depthNode, camera, options = {} ] ) => {
+
+	const uvNode = baseNode.uvNode || uv();
+
+	const cameraNear = reference( 'near', 'float', camera );
+	const cameraFar = reference( 'far', 'float', camera );
+
+	const blendColor = nodeObject( options.blendColor ) || color( 0xffffff );
+	const edgeRadius = nodeObject( options.edgeRadius ) || int( 2 );
+	const edgeStrength = nodeObject( options.edgeStrength ) || float( 2 );
+
+	const viewZ = perspectiveDepthToViewZ( depthNode, cameraNear, cameraFar );
+	const correctDepth = viewZToOrthographicDepth( viewZ, cameraNear, cameraFar );
+
+	const pushDir = vec2( 0.0 ).toVar();
+	const count = float( 0 ).toVar();
+
+	const resolution = ivec2( textureSize( baseNode ) ).toConst();
+	const pixelStep = vec2( 1 ).div( resolution );
+
+	const poissonDisk = array( [
+		vec2( 0.493393, 0.394269 ),
+		vec2( 0.798547, 0.885922 ),
+		vec2( 0.259143, 0.650754 ),
+		vec2( 0.605322, 0.023588 ),
+		vec2( - 0.574681, 0.137452 ),
+		vec2( - 0.430397, - 0.638423 ),
+		vec2( - 0.849487, - 0.366258 ),
+		vec2( 0.170621, - 0.569941 )
+	] );
+
+	Loop( 8, ( { i } ) => {
+
+		const offset = poissonDisk.element( i ).mul( edgeRadius );
+
+		const sampleUv = uvNode.add( offset.mul( pixelStep ) );
+		const sampleDepth = depthNode.sample( sampleUv );
+
+		const sampleViewZ = perspectiveDepthToViewZ( sampleDepth, cameraNear, cameraFar );
+		const sampleLinearDepth = viewZToOrthographicDepth( sampleViewZ, cameraNear, cameraFar );
+
+		If( abs( sampleLinearDepth.sub( correctDepth ) ).lessThan( float( 0.05 ).mul( correctDepth ) ), () => {
+
+			pushDir.addAssign( offset );
+			count.addAssign( 1 );
+
+		} );
+
+	} );
+
+	count.assign( count.equal( 0 ).select( 1, count ) );
+
+	pushDir.divAssign( count ).normalize();
+
+	const sampleUv = pushDir.length().greaterThan( 0 ).select( uvNode.add( edgeStrength.mul( pushDir.div( resolution ) ) ), uvNode );
+
+	const bestChoice = blendNode.sample( sampleUv ).r;
+	const baseColor = baseNode.sample( uvNode );
+
+	return vec4( mix( baseColor, vec4( blendColor, 1 ), bestChoice ) );
+
+} );

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

@@ -0,0 +1,54 @@
+import { float, Fn, vec2, uv, sin, rand, degrees, cos, Loop, vec4, premultiplyAlpha, unpremultiplyAlpha, convertToTexture, nodeObject } from 'three/tsl';
+
+/**
+ * Applies a hash blur effect to the given texture node.
+ *
+ * The approach of this blur is different compared to Gaussian and box blur since
+ * it does not rely on a kernel to apply a convolution. Instead, it reads the base
+ * texture multiple times in a random pattern and then averages the samples. A
+ * typical artifact of this technique is a slightly noisy appearance of the blur which
+ * can be mitigated by increasing the number of iterations (see `repeats` parameter).
+ * Compared to Gaussian blur, hash blur requires just a single pass.
+ *
+ * Reference: {@link https://www.shadertoy.com/view/4lXXWn}.
+ *
+ * @tsl
+ * @function
+ * @param {Node<vec4>} textureNode - The texture node that should be blurred.
+ * @param {Node<float>} [bluramount=float(0.1)] - This node determines the amount of blur.
+ * @param {Object} [options={}] - Additional options for the hash blur effect.
+ * @param {Node<float>} [options.repeats=float(45)] - The number of iterations for the blur effect.
+ * @param {boolean} [options.premultipliedAlpha=false] - Whether to use premultiplied alpha for the blur effect.
+ * @return {Node<vec4>} The blurred texture node.
+ */
+export const hashBlur = /*#__PURE__*/ Fn( ( [ textureNode, bluramount = float( 0.1 ), options = {} ] ) => {
+
+	textureNode = convertToTexture( textureNode );
+
+	const repeats = nodeObject( options.repeats ) || float( 45 );
+	const premultipliedAlpha = options.premultipliedAlpha || false;
+
+	const tap = ( uv ) => {
+
+		const sample = textureNode.sample( uv );
+
+		return premultipliedAlpha ? premultiplyAlpha( sample ) : sample;
+
+	};
+
+	const targetUV = textureNode.uvNode || uv();
+	const blurred_image = vec4( 0. );
+
+	Loop( { start: 0., end: repeats, type: 'float' }, ( { i } ) => {
+
+		const q = vec2( vec2( cos( degrees( i.div( repeats ).mul( 360. ) ) ), sin( degrees( i.div( repeats ).mul( 360. ) ) ) ).mul( rand( vec2( i, targetUV.x.add( targetUV.y ) ) ).add( bluramount ) ) );
+		const uv2 = vec2( targetUV.add( q.mul( bluramount ) ) );
+		blurred_image.addAssign( tap( uv2 ) );
+
+	} );
+
+	blurred_image.divAssign( repeats );
+
+	return premultipliedAlpha ? unpremultiplyAlpha( blurred_image ) : blurred_image;
+
+} );

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

@@ -0,0 +1,68 @@
+import { interleavedGradientNoise, Fn, vec2, vec4, mix, uv, Loop, premultiplyAlpha, unpremultiplyAlpha, int, float, nodeObject, convertToTexture, screenCoordinate } from 'three/tsl';
+
+/**
+ * This TSL function blurs an image in a circular pattern, radiating from a configurable center point in screen space.
+ *
+ * Radial blurs can be used for different kind of effects like producing simple faked lighting effects also known as
+ * "light shafts". The major limitation of this specific usage is the center point can only be defined in 2D so the
+ * effect does not honor the depth of 3D objects. Consequently, it is not intended for physically correct lit scenes.
+ *
+ * @tsl
+ * @function
+ * @param {Node<vec4>} textureNode - The texture node that should be blurred.
+ * @param {Object} [options={}] - Additional options for the radial blur effect.
+ * @param {Node<vec2>} [options.center=vec2(0.5, 0.5)] - The center of the light in screen uvs.
+ * @param {Node<int>} [options.weight=float(0.9)] - Base weight factor for each sample in the range `[0,1]`.
+ * @param {Node<int>} [options.decay=float(0.95)] - Decreases the weight factor so each iteration adds less to the sum. Must be in the range `[0,1]`.
+ * If you increase the sample count, you have to increase this option as well to avoid a darking effect.
+ * @param {Node<int>} [options.count=int(32)] - The number if iterations. Should be in the range `[16,64]`.
+ * @param {Node<int>} [options.exposure=float(5)] - Exposure control of the blur.
+ * @return {Node<vec4>} The blurred texture node.
+ */
+export const radialBlur = /*#__PURE__*/ Fn( ( [ textureNode, options = {} ] ) => {
+
+	textureNode = convertToTexture( textureNode );
+
+	const center = nodeObject( options.center ) || vec2( 0.5, 0.5 );
+	const weight = nodeObject( options.weight ) || float( 0.9 );
+	const decay = nodeObject( options.decay ) || float( 0.95 );
+	const count = nodeObject( options.count ) || int( 32 );
+	const exposure = nodeObject( options.exposure ) || float( 5 );
+	const premultipliedAlpha = options.premultipliedAlpha || false;
+
+	const tap = ( uv ) => {
+
+		const sample = textureNode.sample( uv );
+
+		return premultipliedAlpha ? premultiplyAlpha( sample ) : sample;
+
+	};
+
+	const sampleUv = vec2( textureNode.uvNode || uv() );
+
+	const base = tap( sampleUv ).toConst();
+	const blur = vec4().toVar();
+	const offset = center.sub( sampleUv ).div( count ).toConst();
+	const w = float( weight ).toVar();
+
+	const noise = interleavedGradientNoise( screenCoordinate );
+	sampleUv.addAssign( offset.mul( noise ) ); // mitigate banding
+
+	Loop( { start: int( 0 ), end: int( count ), type: 'int', condition: '<' }, () => {
+
+		sampleUv.addAssign( offset );
+		const sample = tap( sampleUv );
+
+		blur.addAssign( sample.mul( w ) );
+		w.mulAssign( decay );
+
+	} );
+
+	blur.divAssign( count );
+	blur.mulAssign( exposure );
+
+	const color = mix( blur, base.mul( 2 ), 0.5 );
+
+	return premultipliedAlpha ? unpremultiplyAlpha( color ) : color;
+
+} );